chore: migrate flowrow to compose foundation (WPB-3541) (#2082)

Co-authored-by: Oussama <oussama.has100@gmail.com>

app/build.gradle.kts

@@ -116,7 +116,6 @@ dependencies {
     implementation(libs.accompanist.systemUI)
     implementation(libs.accompanist.placeholder)
     implementation(libs.accompanist.navAnimation)
-    implementation(libs.accompanist.flowLayout)
 
     implementation(libs.androidx.paging3)
     implementation(libs.androidx.paging3Compose)

app/src/main/kotlin/com/wire/android/ui/home/conversations/MessageItem.kt

@@ -25,8 +25,10 @@ import androidx.compose.animation.core.tween
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.background
 import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -44,7 +46,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
-import com.google.accompanist.flowlayout.FlowRow
+import androidx.compose.foundation.layout.FlowRow
 import com.wire.android.R
 import com.wire.android.media.audiomessage.AudioState
 import com.wire.android.model.Clickable
@@ -367,7 +369,10 @@ private fun MessageAuthorRow(messageHeader: MessageHeader) {
                 modifier = Modifier.weight(weight = 1f, fill = true),
                 verticalAlignment = Alignment.CenterVertically
             ) {
-                Username(username.asString(), modifier = Modifier.weight(weight = 1f, fill = false))
+                Username(
+                    username.asString(),
+                    modifier = Modifier.weight(weight = 1f, fill = false)
+                )
                 UserBadge(
                     membership = membership,
                     connectionState = connectionState,
@@ -386,15 +391,17 @@ private fun MessageAuthorRow(messageHeader: MessageHeader) {
     }
 }
 
+@OptIn(ExperimentalLayoutApi::class)
 @Composable
 private fun MessageFooter(
     messageFooter: MessageFooter,
     onReactionClicked: (String, String) -> Unit
 ) {
-    if (messageFooter.reactions.entries.isNotEmpty()) { // to eliminate adding unnecessary paddings when the list is empty
+    // to eliminate adding unnecessary paddings when the list is empty
+    if (messageFooter.reactions.entries.isNotEmpty()) {
         FlowRow(
-            mainAxisSpacing = dimensions().spacing4x,
-            crossAxisSpacing = dimensions().spacing6x,
+            horizontalArrangement = Arrangement.spacedBy(dimensions().spacing4x, Alignment.Start),
+            verticalArrangement = Arrangement.spacedBy(dimensions().spacing6x, Alignment.Top),
             modifier = Modifier.padding(top = dimensions().spacing4x)
         ) {
             messageFooter.reactions.entries

gradle/libs.versions.toml

@@ -170,7 +170,6 @@ compose-destinations-ksp ={module = "io.github.raamcosta.compose-destinations:ks
 accompanist-systemUI = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanist" }
 accompanist-placeholder = { module = "com.google.accompanist:accompanist-placeholder", version.ref = "accompanist" }
 accompanist-navAnimation = { module = "com.google.accompanist:accompanist-navigation-animation", version.ref = "accompanist" }
-accompanist-flowLayout = { module = "com.google.accompanist:accompanist-flowlayout", version.ref = "accompanist" }
 
 # Image Loading
 coil-core = { module = "io.coil-kt:coil", version.ref = "coil" }