Rewrite LobstersItem

Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>

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

@@ -4,12 +4,14 @@ import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 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.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.requiredSize
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -55,97 +57,126 @@ fun LobstersItem(
   viewPost: () -> Unit,
   viewComments: () -> Unit,
   toggleSave: () -> Unit,
+  modifier: Modifier = Modifier,
 ) {
   Surface(
     modifier = Modifier
-      .clickable { viewPost.invoke() },
+      .clickable { viewPost.invoke() }
+      .then(modifier),
   ) {
+    Column(
+      modifier = Modifier
+        .padding(horizontal = 12.dp, vertical = 4.dp),
+    ) {
+      PostTitle(
+        title = post.title,
+        modifier = Modifier
+          .padding(bottom = 4.dp),
+      )
       Row(
-      modifier = Modifier.padding(start = 12.dp),
+        modifier = Modifier
+          .fillMaxWidth(),
         verticalAlignment = Alignment.CenterVertically,
-      horizontalArrangement = Arrangement.SpaceBetween,
       ) {
-      Box(
-        modifier = Modifier.weight(0.8f),
-      ) {
-        PostDetails(
-          post,
+        TagRow(
+          tags = post.tags,
+          modifier = Modifier.weight(0.65f),
         )
-      }
-      Box(
-        modifier = Modifier.weight(0.1f),
-      ) {
         SaveButton(
-          isSaved,
-          toggleSave,
+          isSaved = isSaved,
+          onClick = toggleSave,
+        )
+        Spacer(
+          modifier = Modifier.width(8.dp),
         )
-      }
-      Box(
-        modifier = Modifier.weight(0.1f),
-      ) {
         CommentsButton(
           onClick = viewComments,
         )
       }
+      SubmitterName(
+        name = post.submitterName,
+        avatarUrl = post.submitterAvatarUrl,
+      )
     }
   }
 }
 
 @Composable
-fun PostDetails(
-  post: SavedPost,
+fun PostTitle(
+  title: String,
+  modifier: Modifier = Modifier,
 ) {
-  Column(
-    modifier = Modifier.padding(top = 8.dp, bottom = 8.dp),
-  ) {
   Text(
-      text = post.title,
+    text = title,
     color = titleColor,
     fontWeight = FontWeight.Bold,
-      modifier = Modifier
-        .padding(bottom = 4.dp),
-    )
-    TagRow(
-      tags = post.tags,
-      modifier = Modifier
-        .padding(bottom = 4.dp),
+    modifier = Modifier.then(modifier),
   )
+}
+
+@Composable
+fun SubmitterName(
+  name: String,
+  avatarUrl: String,
+  modifier: Modifier = Modifier,
+) {
   Row(
+    modifier = Modifier.then(modifier),
     verticalAlignment = Alignment.CenterVertically,
   ) {
+    SubmitterAvatar(
+      name = name,
+      avatarUrl = avatarUrl,
+    )
+    SubmitterNameText(
+      name = name,
+    )
+  }
+}
+
+@Composable
+fun SubmitterAvatar(
+  name: String,
+  avatarUrl: String,
+) {
   CoilImage(
-        data = "${LobstersApi.BASE_URL}/${post.submitterAvatarUrl}",
+    data = "${LobstersApi.BASE_URL}/$avatarUrl",
     contentDescription = stringResource(
       R.string.avatar_content_description,
-          post.submitterName
+      name,
     ),
     fadeIn = true,
     requestBuilder = {
       transformations(CircleCropTransformation())
     },
     modifier = Modifier
-          .requiredSize(24.dp)
-          .padding(bottom = 4.dp),
+      .requiredSize(24.dp),
   )
+}
+
+@Composable
+fun SubmitterNameText(
+  name: String,
+) {
   Text(
-        text = stringResource(id = R.string.submitted_by, post.submitterName),
+    text = stringResource(id = R.string.submitted_by, name),
     modifier = Modifier
       .padding(start = 4.dp),
   )
-    }
-  }
 }
 
 @Composable
 fun SaveButton(
   isSaved: Boolean,
-  onSaveButtonClick: () -> Unit,
+  onClick: () -> Unit,
+  modifier: Modifier = Modifier,
 ) {
   IconToggleButton(
     checked = isSaved,
-    onCheckedChange = { onSaveButtonClick.invoke() },
+    onCheckedChange = { onClick.invoke() },
     modifier = Modifier
-      .requiredSize(24.dp),
+      .requiredSize(32.dp)
+      .then(modifier),
   ) {
     Crossfade(targetState = isSaved) { saved ->
       IconResource(
@@ -160,11 +191,13 @@ fun SaveButton(
 @Composable
 fun CommentsButton(
   onClick: () -> Unit,
+  modifier: Modifier = Modifier,
 ) {
   IconButton(
     onClick = onClick,
     modifier = Modifier
-      .requiredSize(24.dp),
+      .requiredSize(32.dp)
+      .then(modifier),
   ) {
     IconResource(
       resourceId = R.drawable.ic_insert_comment_24px,
@@ -179,8 +212,10 @@ fun TagRow(
   tags: List<String>,
   modifier: Modifier = Modifier,
 ) {
+  Box(
+    modifier = Modifier.then(modifier),
+  ) {
     FlowLayout(
-    modifier = Modifier.then(modifier),
       horizontalSpacing = 8.dp,
       verticalSpacing = 8.dp,
     ) {
@@ -194,6 +229,7 @@ fun TagRow(
         )
       }
     }
+  }
 }
 
 @Composable