Revamp UI for supporting a new click action

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

app/src/main/java/dev/msfjarvis/todo/MainActivity.kt

@@ -90,9 +90,13 @@ fun TodoApp(
     bodyContent = {
       LazyColumnFor(
         items = items,
-        modifier = Modifier.padding(horizontal = 16.dp)
+        modifier = Modifier.padding(top = 16.dp)
       ) { todoItem ->
-        TodoRowItem(item = todoItem) { onDelete.invoke(todoItem) }
+        TodoRowItem(
+          item = todoItem,
+          onClick = { },
+          onDelete = { onDelete.invoke(todoItem) },
+        )
       }
     },
   )

app/src/main/java/dev/msfjarvis/todo/ui/TodoRow.kt

@@ -2,11 +2,13 @@ package dev.msfjarvis.todo.ui
 
 import androidx.compose.foundation.Text
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyItemScope
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material.Card
+import androidx.compose.material.IconButton
+import androidx.compose.material.ListItem
+import androidx.compose.material.MaterialTheme
 import androidx.compose.material.ripple.RippleIndication
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -14,31 +16,45 @@ import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import dev.msfjarvis.todo.R
+import dev.msfjarvis.todo.compose.utils.IconResource
 import dev.msfjarvis.todo.data.model.TodoItem
 
 @Composable
-fun LazyItemScope.TodoRowItem(item: TodoItem, onLongClick: () -> Unit) {
+fun LazyItemScope.TodoRowItem(
-  Row(
+  item: TodoItem,
-    modifier = Modifier.padding(vertical = 8.dp)
+  onClick: () -> Unit,
-      .fillParentMaxWidth()
+  onDelete: () -> Unit,
+) {
+  Card(
+    shape = RoundedCornerShape(8.dp),
+    modifier = Modifier.fillParentMaxWidth()
       .clickable(
-        onClick = {},
+        onClick = onClick,
-        onLongClick = onLongClick,
         indication = RippleIndication()
       ),
   ) {
-    Card(
+    ListItem(
-      shape = RoundedCornerShape(8.dp),
+      modifier = Modifier.padding(vertical = 8.dp)
-      modifier = Modifier.fillParentMaxWidth(),
+        .fillParentMaxWidth(),
-    ) {
+      text = {
-      Text(
+        Text(
-        text = item.title,
+          text = item.title,
-        style = TextStyle(
+          style = TextStyle(
-          fontSize = 20.sp,
+            fontSize = 20.sp,
-          textAlign = TextAlign.Center
+            textAlign = TextAlign.Center
-        ),
+          ),
-        modifier = Modifier.padding(16.dp),
+          modifier = Modifier.padding(16.dp),
-      )
+        )
-    }
+      },
+      trailing = {
+        IconButton(onClick = onDelete) {
+          IconResource(
+            resourceId = R.drawable.ic_delete_forever_24dp,
+            tint = MaterialTheme.colors.onPrimary,
+          )
+        }
+      }
+    )
   }
 }

app/src/main/res/drawable/ic_delete_forever_24dp.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="#FF000000"
+      android:pathData="M14.12,10.47L12,12.59l-2.13,-2.12 -1.41,1.41L10.59,14l-2.12,2.12 1.41,1.41L12,15.41l2.12,2.12 1.41,-1.41L13.41,14l2.12,-2.12zM15.5,4l-1,-1h-5l-1,1H5v2h14V4zM6,19c0,1.1 0.9,2 2,2h8c1.1,0 2,-0.9 2,-2V7H6v12zM8,9h8v10H8V9z"/>
+</vector>