Sticky date

app/src/main/java/ru/risdeveau/pixeldragon/ui/layout/Room.kt

@@ -24,6 +24,7 @@ import android.webkit.WebSettings
 import android.webkit.WebView
 import android.webkit.WebViewClient
 import android.widget.TextView
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -38,7 +39,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.LazyColumn
-import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -170,7 +170,7 @@ private val headingMetrics = mapOf(
     "h6" to TextBlockMetrics(22f, 8f, 10f),
 )
 
-@OptIn(ExperimentalCoroutinesApi::class)
+@OptIn(ExperimentalCoroutinesApi::class, ExperimentalFoundationApi::class)
 @Composable
 fun Room(modifier: Modifier = Modifier, rid: String) {
     val roomId = remember(rid) { RoomId(rid) }
@@ -196,9 +196,23 @@ fun Room(modifier: Modifier = Modifier, rid: String) {
     Column(modifier) {
         var message by remember { mutableStateOf("") }
 
-        LazyColumn(Modifier.weight(1f), state = listState, reverseLayout = true) {
-            items(timelineItems, key = { it.key }) { item ->
-                TimelineItem(item)
+        LaunchedEffect(timelineItems.size) {
+            if (timelineItems.isNotEmpty()) {
+                listState.scrollToItem(timelineItems.lastIndex)
+            }
+        }
+
+        LazyColumn(Modifier.weight(1f), state = listState) {
+            for (timelineItem in timelineItems) {
+                when (timelineItem) {
+                    is DateDividerItem -> stickyHeader(key = timelineItem.key) {
+                        DateDivider(timelineItem)
+                    }
+
+                    else -> item(key = timelineItem.key) {
+                        TimelineItem(timelineItem)
+                    }
+                }
             }
 
             if (timelineItems.isEmpty()) {
@@ -351,7 +365,7 @@ private fun buildTimelineItems(
         }
     }
 
-    return items.asReversed()
+    return items
 }
 
 @Composable
@@ -365,16 +379,26 @@ private fun TimelineItem(item: TimelineUiItem) {
 
 @Composable
 private fun DateDivider(item: DateDividerItem) {
-    Text(
-        text = item.label,
+    Box(
         modifier = Modifier
             .fillMaxWidth()
             .padding(vertical = 8.dp),
+        contentAlignment = Alignment.Center,
+    ) {
+        Text(
+            text = item.label,
+            modifier = Modifier
+                .background(
+                    color = MaterialTheme.colorScheme.surfaceContainer.copy(alpha = 0.8f),
+                    shape = RoundedCornerShape(50),
+                )
+                .padding(horizontal = 12.dp, vertical = 4.dp),
             textAlign = TextAlign.Center,
             style = MaterialTheme.typography.labelSmall,
             color = MaterialTheme.colorScheme.onSurfaceVariant,
         )
     }
+}
 
 @Composable
 private fun SystemEventRow(item: SystemTimelineItem) {