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,23 +16,28 @@ 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,
-      .clickable(
+) {
-        onClick = {},
-        onLongClick = onLongClick,
-        indication = RippleIndication()
-      ),
-  ) {
   Card(
     shape = RoundedCornerShape(8.dp),
-      modifier = Modifier.fillParentMaxWidth(),
+    modifier = Modifier.fillParentMaxWidth()
+      .clickable(
+        onClick = onClick,
+        indication = RippleIndication()
+      ),
   ) {
+    ListItem(
+      modifier = Modifier.padding(vertical = 8.dp)
+        .fillParentMaxWidth(),
+      text = {
         Text(
           text = item.title,
           style = TextStyle(
@@ -39,6 +46,15 @@ fun LazyItemScope.TodoRowItem(item: TodoItem, onLongClick: () -> Unit) {
           ),
           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>