Timeline: fix bad layouting

features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt

@@ -82,7 +82,7 @@ fun MessagesScreen(
     val composerCanSendMessage by composerViewModel.collectAsState(MessageComposerViewState::isSendButtonVisible)
     val composerText by composerViewModel.collectAsState(MessageComposerViewState::text)
     val snackbarHostState = remember { SnackbarHostState() }
-    MessagesContent(
+    MessagesScreenContent(
         roomTitle = roomTitle,
         roomAvatar = roomAvatar,
         timelineItems = timelineItems().orEmpty(),
@@ -126,7 +126,7 @@ fun MessagesScreen(
 }
 
 @Composable
-fun MessagesContent(
+fun MessagesScreenContent(
     roomTitle: String?,
     roomAvatar: AvatarData?,
     timelineItems: List<MessagesTimelineItemState>,
@@ -144,75 +144,118 @@ fun MessagesContent(
     snackbarHostState: SnackbarHostState,
 ) {
     LogCompositions(tag = "MessagesScreen", msg = "Content")
-    val lazyListState = rememberLazyListState()
-
     Scaffold(
         topBar = {
-            TopAppBar(
+            MessagesTopAppBar(
-                navigationIcon = {
+                roomTitle = roomTitle,
-                    IconButton(onClick = onBackPressed) {
+                roomAvatar = roomAvatar,
-                        Icon(
+                onBackPressed = onBackPressed
-                            imageVector = Icons.Filled.ArrowBack,
-                            contentDescription = "Back"
-                        )
-                    }
-                },
-                title = {
-                    Row(verticalAlignment = Alignment.CenterVertically) {
-                        if (roomAvatar != null) {
-                            Avatar(roomAvatar)
-                            Spacer(modifier = Modifier.width(8.dp))
-                        }
-                        Text(
-                            fontSize = 16.sp,
-                            fontWeight = FontWeight.SemiBold,
-                            text = roomTitle ?: "Unknown room",
-                            maxLines = 1,
-                            overflow = TextOverflow.Ellipsis
-                        )
-                    }
-                }
-
             )
         },
         content = { padding ->
-            Column(
+            MessagesContent(
-                modifier = Modifier
+                modifier = Modifier.padding(padding),
-                    .padding(padding)
+                timelineItems = timelineItems,
-                    .fillMaxSize()
+                hasMoreToLoad = hasMoreToLoad,
-            ) {
+                onReachedLoadMore = onReachedLoadMore,
-                if (!composerFullScreen) {
+                onSendMessage = onSendMessage,
-                    TimelineItems(
+                onClick = onClick,
-                        lazyListState = lazyListState,
+                onLongClick = onLongClick,
-                        timelineItems = timelineItems,
+                composerFullScreen = composerFullScreen,
-                        hasMoreToLoad = hasMoreToLoad,
+                onComposerFullScreenChange = onComposerFullScreenChange,
-                        onReachedLoadMore = onReachedLoadMore,
+                onComposerTextChange = onComposerTextChange,
-                        modifier = Modifier.weight(1f),
+                composerCanSendMessage = composerCanSendMessage,
-                        onClick = onClick,
+                composerText = composerText
-                        onLongClick = onLongClick
+            )
-                    )
+        },
-                }
+        snackbarHost = { SnackbarHost(snackbarHostState) },
-                TextComposer(
+    )
-                    onSendMessage = onSendMessage,
+}
-                    fullscreen = composerFullScreen,
+
-                    onFullscreenToggle = onComposerFullScreenChange,
+@Composable
-                    onComposerTextChange = onComposerTextChange,
+fun MessagesContent(
-                    composerCanSendMessage = composerCanSendMessage,
+    timelineItems: List<MessagesTimelineItemState>,
-                    composerText = composerText?.charSequence?.toString(),
+    hasMoreToLoad: Boolean,
-                    modifier = Modifier
+    onReachedLoadMore: () -> Unit,
-                        .fillMaxWidth()
+    onSendMessage: (String) -> Unit,
-                        .imePadding()
+    onClick: (MessagesTimelineItemState.MessageEvent) -> Unit,
-                        .let {
+    onLongClick: (MessagesTimelineItemState.MessageEvent) -> Unit,
-                            if (composerFullScreen) {
+    composerFullScreen: Boolean,
-                                it.weight(1f)
+    onComposerFullScreenChange: () -> Unit,
-                            } else {
+    onComposerTextChange: (CharSequence) -> Unit,
-                                it.height(COMPOSER_HEIGHT)
+    composerCanSendMessage: Boolean,
-                            }
+    composerText: StableCharSequence?,
-                        },
+    modifier: Modifier = Modifier
+) {
+
+    val lazyListState = rememberLazyListState()
+    Column(
+        modifier = modifier
+            .fillMaxSize()
+    ) {
+        if (!composerFullScreen) {
+            TimelineItems(
+                lazyListState = lazyListState,
+                timelineItems = timelineItems,
+                hasMoreToLoad = hasMoreToLoad,
+                onReachedLoadMore = onReachedLoadMore,
+                modifier = Modifier.weight(1f),
+                onClick = onClick,
+                onLongClick = onLongClick
+            )
+        }
+        TextComposer(
+            onSendMessage = onSendMessage,
+            fullscreen = composerFullScreen,
+            onFullscreenToggle = onComposerFullScreenChange,
+            onComposerTextChange = onComposerTextChange,
+            composerCanSendMessage = composerCanSendMessage,
+            composerText = composerText?.charSequence?.toString(),
+            modifier = Modifier
+                .fillMaxWidth()
+                .imePadding()
+                .let {
+                    if (composerFullScreen) {
+                        it.weight(1f)
+                    } else {
+                        it.height(COMPOSER_HEIGHT)
+                    }
+                },
+        )
+    }
+}
+
+@Composable
+fun MessagesTopAppBar(
+    roomTitle: String?,
+    roomAvatar: AvatarData?,
+    onBackPressed: () -> Unit,
+) {
+    TopAppBar(
+        navigationIcon = {
+            IconButton(onClick = onBackPressed) {
+                Icon(
+                    imageVector = Icons.Filled.ArrowBack,
+                    contentDescription = "Back"
                 )
             }
         },
-        snackbarHost = { SnackbarHost(snackbarHostState) },
+        title = {
+            Row(verticalAlignment = Alignment.CenterVertically) {
+                if (roomAvatar != null) {
+                    Avatar(roomAvatar)
+                    Spacer(modifier = Modifier.width(8.dp))
+                }
+                Text(
+                    fontSize = 16.sp,
+                    fontWeight = FontWeight.SemiBold,
+                    text = roomTitle ?: "Unknown room",
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis
+                )
+            }
+        }
+
     )
 }
 
@@ -228,7 +271,7 @@ fun TimelineItems(
 ) {
     Box(modifier = modifier.fillMaxWidth()) {
         LazyColumn(
-            modifier = modifier.fillMaxWidth(),
+            modifier = Modifier.fillMaxSize(),
             state = lazyListState,
             horizontalAlignment = Alignment.Start,
             verticalArrangement = Arrangement.Bottom,
@@ -253,6 +296,7 @@ fun TimelineItems(
         }
         MessagesScrollHelper(lazyListState = lazyListState, timelineItems = timelineItems)
     }
+
 }
 
 private fun MessagesTimelineItemState.key(): String {
@@ -490,7 +534,9 @@ internal fun BoxScope.MessagesScrollHelper(
                 }
             },
             shape = CircleShape,
-            modifier = Modifier.align(Alignment.BottomCenter).size(40.dp),
+            modifier = Modifier
+                .align(Alignment.BottomCenter)
+                .size(40.dp),
             containerColor = MaterialTheme.colorScheme.surfaceVariant,
             contentColor = MaterialTheme.colorScheme.onSurfaceVariant
         ) {