Merge #162

162: Refactor LobstersItem and add a dedicated comments button r=msfjarvis a=msfjarvis

Refer to updated screenshot test for the UI changes.

bors r+

Co-authored-by: Harsh Shandilya <me@msfjarvis.dev>

app/src/androidTest/java/dev/msfjarvis/lobsters/ui/posts/LobstersItemTest.kt

@@ -20,9 +20,9 @@ class LobstersItemTest : ScreenshotTest {
       DarkTestTheme {
         LobstersItem(
           post = TEST_POST,
-          onClick = { /*TODO*/ },
-          onLongClick = { /*TODO*/ },
-          onSaveButtonClick = { /*TODO*/ },
+          viewPost = { /*TODO*/ },
+          viewComments = { /*TODO*/ },
+          toggleSave = { /*TODO*/ },
           isSaved = true,
         )
       }

app/src/main/java/dev/msfjarvis/lobsters/ui/posts/HottestPosts.kt

@@ -58,9 +58,9 @@ fun HottestPosts(
             LobstersItem(
               post = item,
               isSaved = isSaved,
-              onClick = { urlLauncher.launch(item.url.ifEmpty { item.commentsUrl }) },
-              onLongClick = { urlLauncher.launch(item.commentsUrl) },
-              onSaveButtonClick = {
+              viewPost = { urlLauncher.launch(item.url.ifEmpty { item.commentsUrl }) },
+              viewComments = { urlLauncher.launch(item.commentsUrl) },
+              toggleSave = {
                 isSaved = isSaved.not()
                 saveAction.invoke(item)
               },

app/src/main/java/dev/msfjarvis/lobsters/ui/posts/LobstersItem.kt

@@ -3,17 +3,17 @@ package dev.msfjarvis.lobsters.ui.posts
 import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
-import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredSize
-import androidx.compose.foundation.layout.requiredWidth
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.IconButton
 import androidx.compose.material.IconToggleButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
@@ -52,38 +52,67 @@ val TEST_POST = SavedPost(
 fun LobstersItem(
   post: SavedPost,
   isSaved: Boolean,
-  onClick: () -> Unit,
-  onLongClick: () -> Unit,
-  onSaveButtonClick: () -> Unit,
+  viewPost: () -> Unit,
+  viewComments: () -> Unit,
+  toggleSave: () -> Unit,
 ) {
   Surface(
     modifier = Modifier
-      .combinedClickable(
-        onClick = onClick,
-        onLongClick = onLongClick,
-      ),
+      .clickable { viewPost.invoke() },
   ) {
     Row(
-      modifier = Modifier.padding(start = 12.dp, end = 24.dp),
+      modifier = Modifier.padding(start = 12.dp),
       verticalAlignment = Alignment.CenterVertically,
       horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+      Box(
+        modifier = Modifier.weight(0.8f),
+      ) {
+        PostDetails(
+          post,
+        )
+      }
+      Box(
+        modifier = Modifier.weight(0.1f),
+      ) {
+        SaveButton(
+          isSaved,
+          toggleSave,
+        )
+      }
+      Box(
+        modifier = Modifier.weight(0.1f),
+      ) {
+        CommentsButton(
+          onClick = viewComments,
+        )
+      }
+    }
+  }
+}
+
+@Composable
+fun PostDetails(
+  post: SavedPost,
 ) {
   Column(
-        modifier = Modifier.fillMaxWidth(),
+    modifier = Modifier.padding(top = 8.dp, bottom = 8.dp),
   ) {
     Text(
       text = post.title,
       color = titleColor,
       fontWeight = FontWeight.Bold,
       modifier = Modifier
-            .padding(top = 4.dp),
+        .padding(bottom = 4.dp),
     )
     TagRow(
       tags = post.tags,
       modifier = Modifier
-            .padding(top = 8.dp, bottom = 8.dp, end = 16.dp),
+        .padding(bottom = 4.dp),
     )
-        Row {
+    Row(
+      verticalAlignment = Alignment.CenterVertically,
+    ) {
       CoilImage(
         data = "${LobstersApi.BASE_URL}/${post.submitterAvatarUrl}",
         contentDescription = stringResource(
@@ -95,16 +124,23 @@ fun LobstersItem(
           transformations(CircleCropTransformation())
         },
         modifier = Modifier
-              .requiredWidth(30.dp)
-              .padding(4.dp),
+          .requiredSize(24.dp)
+          .padding(bottom = 4.dp),
       )
       Text(
         text = stringResource(id = R.string.submitted_by, post.submitterName),
         modifier = Modifier
-              .padding(4.dp),
+          .padding(start = 4.dp),
       )
     }
   }
+}
+
+@Composable
+fun SaveButton(
+  isSaved: Boolean,
+  onSaveButtonClick: () -> Unit,
+) {
   IconToggleButton(
     checked = isSaved,
     onCheckedChange = { onSaveButtonClick.invoke() },
@@ -120,6 +156,21 @@ fun LobstersItem(
     }
   }
 }
+
+@Composable
+fun CommentsButton(
+  onClick: () -> Unit,
+) {
+  IconButton(
+    onClick = onClick,
+    modifier = Modifier
+      .requiredSize(24.dp),
+  ) {
+    IconResource(
+      resourceId = R.drawable.ic_insert_comment_24px,
+      tint = MaterialTheme.colors.secondary,
+      contentDescription = stringResource(R.string.open_comments),
+    )
   }
 }
 
@@ -154,9 +205,9 @@ fun Preview() {
         LobstersItem(
           post = item,
           isSaved = false,
-          onClick = {},
-          onLongClick = {},
-          onSaveButtonClick = {},
+          viewPost = {},
+          viewComments = {},
+          toggleSave = {},
         )
       }
     }

app/src/main/java/dev/msfjarvis/lobsters/ui/posts/SavedPosts.kt

@@ -59,9 +59,9 @@ fun SavedPosts(
           LobstersItem(
             post = item,
             isSaved = true,
-            onClick = { urlLauncher.launch(item.url.ifEmpty { item.commentsUrl }) },
-            onLongClick = { urlLauncher.launch(item.commentsUrl) },
-            onSaveButtonClick = { saveAction.invoke(item) },
+            viewPost = { urlLauncher.launch(item.url.ifEmpty { item.commentsUrl }) },
+            viewComments = { urlLauncher.launch(item.commentsUrl) },
+            toggleSave = { saveAction.invoke(item) },
           )
         }
       }

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

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+  android:width="24dp"
+  android:height="24dp"
+  android:viewportWidth="24"
+  android:viewportHeight="24">
+  <path
+    android:fillColor="#000000"
+    android:pathData="M20,2L4,2c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h14l4,4L22,4c0,-1.1 -0.9,-2 -2,-2zM18,14L6,14v-2h12v2zM18,11L6,11L6,9h12v2zM18,8L6,8L6,6h12v2z" />
+</vector>

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

@@ -9,4 +9,5 @@
   <string name="add_to_saved_posts">Add to saved posts</string>
   <string name="remove_from_saved_posts">Remove from saved posts</string>
   <string name="refresh_posts_content_description">Refresh posts</string>
+  <string name="open_comments">Open comments</string>
 </resources>