ConversationListScreen: Unread indicator, time modified

.idea/deploymentTargetDropDown.xml

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="deploymentTargetDropDown">
+    <runningDeviceTargetSelectedWithDropDown>
+      <Target>
+        <type value="RUNNING_DEVICE_TARGET" />
+        <deviceKey>
+          <Key>
+            <type value="VIRTUAL_DEVICE_PATH" />
+            <value value="$USER_HOME$/.android/avd/Pixel_3a_API_33_x86_64.avd" />
+          </Key>
+        </deviceKey>
+      </Target>
+    </runningDeviceTargetSelectedWithDropDown>
+    <timeTargetWasSelectedWithDropDown value="2023-06-12T07:15:49.721274Z" />
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

app/src/main/java/net/buzzert/kordophonedroid/ui/conversationlist/ConversationListScreen.kt

@@ -1,18 +1,21 @@
 package net.buzzert.kordophonedroid.ui.conversationlist
 
-import android.widget.Space
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.runtime.Composable
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
-import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.*
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.rounded.Info
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.TextStyle
-import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 
@@ -29,7 +32,11 @@ fun ConversationListScreen(
 
     Scaffold(
         topBar = {
-            TopAppBar(title = { Text("Conversations") })
+            TopAppBar(title = { Text("Conversations") }, actions = {
+                Button(onClick = { /*TODO*/ }) {
+                    Icon(Icons.Rounded.Info, contentDescription = "Info")
+                }
+            })
         }
     ) {
         LazyColumn(state = listState) {
@@ -37,6 +44,7 @@ fun ConversationListScreen(
                 ConversationListItem(
                     name = "James Magahern",
                     id = "asdf",
+                    isUnread = false,
                     onClick = { onMessageSelected("asdf") }
                 )
             }
@@ -45,21 +53,70 @@ fun ConversationListScreen(
 }
 
 @Composable
-fun ConversationListItem(name: String, id: String, onClick: () -> Unit) {
+fun ConversationListItem(
+    name: String,
+    id: String,
+    isUnread: Boolean,
+    onClick: () -> Unit
+) {
+    val unreadSize = 12.dp
+    val horizontalPadding = 8.dp
+
     Row(
         Modifier
-            .padding(horizontal = 8.dp)
             .clickable(onClick = onClick)
     ) {
-        Column {
+        Spacer(Modifier.width(horizontalPadding))
-            Spacer(Modifier.height(8.dp))
+
-            Text(
+        // Unread icon
-                name,
+        if (isUnread) {
-                style = TextStyle(fontSize = 18.sp, fontWeight = FontWeight.Bold)
+            UnreadIndicator(
+                size = unreadSize,
+                modifier = Modifier.align(Alignment.CenterVertically)
             )
+        } else {
+            Spacer(modifier = Modifier.size(unreadSize))
+        }
+
+        Spacer(Modifier.width(horizontalPadding))
+
+        Column {
+            Spacer(Modifier.height(horizontalPadding))
+            Row(
+                horizontalArrangement = Arrangement.SpaceBetween,
+                modifier = Modifier.fillMaxWidth()
+            ) {
+                Text(
+                    name,
+                    style = TextStyle(fontSize = 18.sp, fontWeight = FontWeight.Bold)
+                )
+
+                Spacer(Modifier.weight(1f))
+
+                Text("13:37",
+                    modifier = Modifier.align(Alignment.CenterVertically),
+                    color = MaterialTheme.colors.onBackground.copy(alpha = 0.4f)
+                )
+
+                Spacer(Modifier.width(horizontalPadding))
+            }
+
             Text("This is a test.")
+
             Spacer(Modifier.height(8.dp))
             Divider()
         }
     }
+}
+
+@Composable
+fun UnreadIndicator(size: Dp, modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .size(size)
+            .background(
+                color = MaterialTheme.colors.primary,
+                shape = CircleShape
+            )
+    )
 }