From 1548dd4e6a7548c9e5b0beee88cbafc43e5dedbb Mon Sep 17 00:00:00 2001
From: ganfra <francoisg@element.io>
Date: Tue, 8 Nov 2022 17:05:32 +0100
Subject: [PATCH] Messages: update how textcomposer is composed

---
 .../x/features/messages/MessagesScreen.kt     | 78 +++++++++----------
 .../android/x/textcomposer/TextComposer.kt    |  8 +-
 2 files changed, 38 insertions(+), 48 deletions(-)

diff --git a/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt b/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt
index d9a4abf9fa..d63d301ad3 100644
--- a/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt
+++ b/features/messages/src/main/java/io/element/android/x/features/messages/MessagesScreen.kt
@@ -109,7 +109,7 @@ fun MessagesContent(
             )
         },
         content = { padding ->
-            Box(
+            Column(
                 modifier = Modifier
                     .padding(padding)
                     .fillMaxSize()
@@ -119,38 +119,37 @@ fun MessagesContent(
                     timelineItems = timelineItems,
                     hasMoreToLoad = hasMoreToLoad,
                     onReachedLoadMore = onReachedLoadMore,
+                    modifier = Modifier.weight(1f)
                 )
-                Box(
-                    modifier = Modifier.align(Alignment.BottomCenter)
-                ) {
-                    TextComposer(
-                        callback = object : Callback {
-                            override fun onRichContentSelected(contentUri: Uri): Boolean {
-                                return false
-                            }
+                TextComposer(
+                    callback = object : Callback {
+                        override fun onRichContentSelected(contentUri: Uri): Boolean {
+                            return false
+                        }
 
-                            override fun onTextChanged(text: CharSequence) {
-                            }
+                        override fun onTextChanged(text: CharSequence) {
+                        }
 
-                            override fun onCloseRelatedMessage() {
-                            }
+                        override fun onCloseRelatedMessage() {
+                        }
 
-                            override fun onSendMessage(text: CharSequence) {
-                                onSendMessage.invoke(text)
-                            }
+                        override fun onSendMessage(text: CharSequence) {
+                            onSendMessage.invoke(text)
+                        }
 
-                            override fun onAddAttachment() {
-                            }
+                        override fun onAddAttachment() {
+                        }
 
-                            override fun onExpandOrCompactChange() {
-                            }
+                        override fun onExpandOrCompactChange() {
+                        }
 
-                            override fun onFullScreenModeChanged() {
-                            }
-                        },
-                        height = COMPOSER_HEIGHT
-                    )
-                }
+                        override fun onFullScreenModeChanged() {
+                        }
+                    },
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .height(COMPOSER_HEIGHT)
+                )
             }
         }
     )
@@ -162,19 +161,15 @@ fun TimelineItems(
     timelineItems: List<MessagesTimelineItemState>,
     hasMoreToLoad: Boolean,
     onReachedLoadMore: () -> Unit,
+    modifier: Modifier = Modifier,
 ) {
     LazyColumn(
-        modifier = Modifier
-            .padding(bottom = COMPOSER_HEIGHT)
-            .fillMaxSize(),
+        modifier = modifier.fillMaxWidth(),
         state = lazyListState,
         horizontalAlignment = Alignment.Start,
         verticalArrangement = Arrangement.Bottom,
         reverseLayout = true
     ) {
-        item {
-            Spacer(modifier = Modifier.height(8.dp))
-        }
         itemsIndexed(timelineItems) { index, timelineItem ->
             TimelineItemRow(timelineItem = timelineItem)
         }
@@ -267,7 +262,6 @@ fun MessageEventBubble(
     messageEvent: MessagesTimelineItemState.MessageEvent,
     modifier: Modifier = Modifier,
 ) {
-
     fun MessagesTimelineItemState.MessageEvent.bubbleShape(): Shape {
         return when (groupPosition) {
             MessagesItemGroupPosition.First -> if (isMine) {
@@ -295,6 +289,14 @@ fun MessageEventBubble(
         }
     }
 
+    fun Modifier.offsetForItem(messageEvent: MessagesTimelineItemState.MessageEvent): Modifier {
+        return if (messageEvent.isMine) {
+            offset(y = -(12.dp))
+        } else {
+            offset(x = 20.dp, y = -(12.dp))
+        }
+    }
+
     val (backgroundBubbleColor, border) = if (messageEvent.isMine) {
         Pair(MaterialTheme.colorScheme.surfaceVariant, null)
     } else {
@@ -304,15 +306,7 @@ fun MessageEventBubble(
         )
     }
 
-    fun Modifier.offsetForItem(messageEvent: MessagesTimelineItemState.MessageEvent): Modifier {
-        return if (messageEvent.isMine) {
-            offset(y = -(12.dp))
-        } else {
-            offset(x = 20.dp, y = -(12.dp))
-        }
-    }
-
-    val bubbleShape = remember { messageEvent.bubbleShape() }
+    val bubbleShape = messageEvent.bubbleShape()
     Surface(
         modifier = modifier
             .widthIn(min = 80.dp)
diff --git a/libraries/textcomposer/src/main/java/io/element/android/x/textcomposer/TextComposer.kt b/libraries/textcomposer/src/main/java/io/element/android/x/textcomposer/TextComposer.kt
index 3b80f202df..8150788fc6 100644
--- a/libraries/textcomposer/src/main/java/io/element/android/x/textcomposer/TextComposer.kt
+++ b/libraries/textcomposer/src/main/java/io/element/android/x/textcomposer/TextComposer.kt
@@ -1,9 +1,7 @@
 package io.element.android.x.textcomposer
 
-import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.viewinterop.AndroidView
 import androidx.core.view.isVisible
 import io.element.android.x.element.resources.R as ElementR
@@ -11,12 +9,10 @@ import io.element.android.x.element.resources.R as ElementR
 @Composable
 fun TextComposer(
     callback: Callback,
-    height: Dp,
+    modifier: Modifier = Modifier,
 ){
     AndroidView(
-        modifier = Modifier
-            .fillMaxWidth()
-            .height(height),
+        modifier = modifier,
         factory = { context ->
             RichTextComposerLayout(context).apply {
                 // Sets up listeners for View -> Compose communication