PostItem: Add action buttons

Keep them disabled for now

Signed-off-by: Aayush Gupta <[email protected]>

app/src/main/java/io/aayush/relabs/ui/components/PostItem.kt

@@ -3,6 +3,7 @@ package io.aayush.relabs.ui.components
 import android.os.Build
 import android.text.format.DateUtils
 import android.text.util.Linkify
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
@@ -16,16 +17,19 @@ import androidx.compose.foundation.layout.requiredSize
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
@@ -53,6 +57,8 @@ fun PostItem(
  linkTransformationMethod: LinkTransformationMethod,
  designQuoteSpan: DesignQuoteSpan,
  isThreadOwner: Boolean = false,
+ reactionScore: Int = 0,
+ reacted: Boolean = false,
  onClicked: () -> Unit = {}
 ) {
  Box(
@@ -159,6 +165,53 @@ fun PostItem(
  ).formatBlockQuotes(designQuoteSpan)
  }
  )
+
+ Column(
+ modifier = Modifier
+ ) {
+ Row(
+ verticalAlignment = Alignment.CenterVertically,
+ horizontalArrangement = Arrangement.Start
+ ) {
+ IconButton(onClick = {}, enabled = false) {
+ Image(
+ painter = painterResource(id = R.drawable.ic_comment),
+ contentDescription = "",
+ colorFilter = ColorFilter.tint(Color.White)
+ )
+ }
+ IconButton(onClick = {}, enabled = false) {
+ Image(
+ painter = painterResource(id = R.drawable.ic_forum),
+ contentDescription = "",
+ colorFilter = ColorFilter.tint(Color.White)
+ )
+ }
+ IconButton(onClick = {}, enabled = false) {
+ Image(
+ painter = painterResource(
+ id = if (reacted) R.drawable.ic_like_filled else R.drawable.ic_like
+ ),
+ contentDescription = "",
+ colorFilter = ColorFilter.tint(Color.White)
+ )
+ }
+ }
+
+ if (reactionScore != 0) {
+ Text(
+ modifier = Modifier.padding(start = 13.dp, bottom = 10.dp),
+ text = if (reacted) {
+ stringResource(id = R.string.you_and_reacted_to, reactionScore - 1)
+ } else {
+ stringResource(id = R.string.reacted_to, reactionScore)
+ },
+ color = Color.White,
+ fontWeight = FontWeight.Light,
+ fontSize = 12.sp
+ )
+ }
+ }
  }
  }
 }

app/src/main/java/io/aayush/relabs/ui/screens/thread/ThreadScreen.kt

@@ -134,7 +134,9 @@ fun ThreadScreen(
  post = post,
  linkTransformationMethod = viewModel.linkTransformationMethod,
  designQuoteSpan = viewModel.designQuoteSpan,
- isThreadOwner = post.User?.username == threadInfo.thread.User?.username
+ isThreadOwner = post.User?.username == threadInfo.thread.User?.username,
+ reactionScore = post.reaction_score,
+ reacted = post.is_reacted_to
  )
  }
  }

app/src/main/res/drawable/ic_comment.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="960"
+ android:viewportHeight="960"
+ android:tint="?attr/colorControlNormal"
+ android:autoMirrored="true">
+ <path
+ android:fillColor="@android:color/white"
+ android:pathData="M240,560L720,560L720,480L240,480L240,560ZM240,440L720,440L720,360L240,360L240,440ZM240,320L720,320L720,240L240,240L240,320ZM880,880L720,720L160,720Q127,720 103.5,696.5Q80,673 80,640L80,160Q80,127 103.5,103.5Q127,80 160,80L800,80Q833,80 856.5,103.5Q880,127 880,160L880,880ZM160,640L160,640L160,160Q160,160 160,160Q160,160 160,160L160,160Q160,160 160,160Q160,160 160,160L160,640Q160,640 160,640Q160,640 160,640ZM754,640L800,685L800,160Q800,160 800,160Q800,160 800,160L160,160Q160,160 160,160Q160,160 160,160L160,640Q160,640 160,640Q160,640 160,640L754,640Z"/>
+</vector>

app/src/main/res/drawable/ic_like.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="960"
+ android:viewportHeight="960"
+ android:tint="?attr/colorControlNormal">
+ <path
+ android:fillColor="@android:color/white"
+ android:pathData="M720,840L280,840L280,320L560,40L610,90Q617,97 621.5,109Q626,121 626,132L626,146L582,320L840,320Q872,320 896,344Q920,368 920,400L920,480Q920,487 918,495Q916,503 914,510L794,792Q785,812 764,826Q743,840 720,840ZM360,760L720,760Q720,760 720,760Q720,760 720,760L840,480L840,400Q840,400 840,400Q840,400 840,400L480,400L534,180L360,354L360,760ZM360,354L360,354L360,400L360,400Q360,400 360,400Q360,400 360,400L360,480L360,760Q360,760 360,760Q360,760 360,760L360,760L360,354ZM280,320L280,400L160,400L160,760L280,760L280,840L80,840L80,320L280,320Z"/>
+</vector>

app/src/main/res/drawable/ic_like_filled.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+ android:width="24dp"
+ android:height="24dp"
+ android:viewportWidth="960"
+ android:viewportHeight="960"
+ android:tint="?attr/colorControlNormal">
+ <path
+ android:fillColor="@android:color/white"
+ android:pathData="M720,840L320,840L320,320L600,40L650,90Q657,97 661.5,109Q666,121 666,132L666,146L622,320L840,320Q872,320 896,344Q920,368 920,400L920,480Q920,487 918.5,495Q917,503 914,510L794,792Q785,812 764,826Q743,840 720,840ZM240,320L240,840L80,840L80,320L240,320Z"/>
+</vector>

app/src/main/res/values/strings.xml

@@ -38,4 +38,6 @@
  <string name="thread">Thread</string>
  <string name="guest">Guest</string>
  <string name="op" translatable="false">\u2022OP\u2022</string>
+ <string name="reacted_to"><xliff:g id="number">%1$d</xliff:g> people reacted to this post</string>
+ <string name="you_and_reacted_to">You and <xliff:g id="number">%1$d</xliff:g> people reacted to this post</string>
 </resources>