Use Compose Foundation's flow layout (#9123)

(cherry picked from commit 6b03dca5f47947a8fe1dd7989b19ff5d23030c2e)

# Conflicts:
#	app/src/main/java/eu/kanade/presentation/manga/components/MangaInfoHeader.kt

app/build.gradle.kts

@@ -156,7 +156,6 @@ dependencies {
     implementation(compose.ui.tooling)
     implementation(compose.ui.util)
     implementation(compose.accompanist.webview)
-    implementation(compose.accompanist.flowlayout)
     implementation(compose.accompanist.permissions)
     implementation(compose.accompanist.themeadapter)
     implementation(compose.accompanist.systemuicontroller)

app/src/main/java/eu/kanade/presentation/browse/ExtensionsScreen.kt

@@ -3,8 +3,10 @@ package eu.kanade.presentation.browse
 import androidx.annotation.StringRes
 import androidx.compose.animation.core.animateDpAsState
 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.FlowRow
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
@@ -35,7 +37,6 @@ 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 eu.kanade.presentation.browse.components.BaseBrowseItem
 import eu.kanade.presentation.browse.components.ExtensionIcon
 import eu.kanade.presentation.manga.components.DotSeparatorNoSpaceText
@@ -290,7 +291,7 @@ private fun ExtensionItemContent(
         // Won't look good but it's not like we can ellipsize overflowing content
         FlowRow(
             modifier = Modifier.secondaryItemAlpha(),
-            mainAxisSpacing = 4.dp,
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
         ) {
             ProvideTextStyle(value = MaterialTheme.typography.bodySmall) {
                 if (extension is Extension.Installed && extension.lang.isNotEmpty()) {

app/src/main/java/eu/kanade/presentation/manga/components/MangaInfoHeader.kt

@@ -10,6 +10,7 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
@@ -70,7 +71,6 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
 import coil.compose.AsyncImage
-import com.google.accompanist.flowlayout.FlowRow
 import eu.kanade.presentation.components.DropdownMenu
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.source.model.SManga
@@ -301,11 +301,11 @@ fun ExpandableMangaDescription(
                         // SY <--
                         FlowRow(
                             modifier = Modifier.padding(horizontal = 16.dp),
-                            mainAxisSpacing = 4.dp,
+                            horizontalArrangement = Arrangement.spacedBy(4.dp),
-                            crossAxisSpacing = 8.dp,
                         ) {
                             tags.forEach {
                                 TagsChip(
+                                    modifier = Modifier.padding(vertical = 4.dp),
                                     text = it,
                                     onClick = {
                                         tagSelected = it
@@ -322,6 +322,7 @@ fun ExpandableMangaDescription(
                     ) {
                         items(items = tags) {
                             TagsChip(
+                                modifier = Modifier.padding(vertical = 4.dp),
                                 text = it,
                                 onClick = {
                                     tagSelected = it

app/src/main/java/eu/kanade/presentation/manga/components/NamespaceTags.kt

@@ -2,6 +2,7 @@ package eu.kanade.presentation.manga.components
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
@@ -19,7 +20,6 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.google.accompanist.flowlayout.FlowRow
 import eu.kanade.presentation.components.ChipBorder
 import eu.kanade.presentation.components.SuggestionChip
 import eu.kanade.presentation.components.SuggestionChipDefaults
@@ -103,16 +103,16 @@ fun NamespaceTags(
         tags.tags.forEach { (namespace, tags) ->
             Row(Modifier.padding(start = 16.dp)) {
                 if (namespace.isNotEmpty()) {
-                    TagsChip(namespace, onClick = null, onLongClick = null)
+                    TagsChip(text = namespace, onClick = null, onLongClick = null)
                 }
                 FlowRow(
                     modifier = Modifier.padding(start = 8.dp, end = 16.dp),
-                    mainAxisSpacing = 4.dp,
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
-                    crossAxisSpacing = 8.dp,
                 ) {
                     tags.forEach { (_, text, search, border) ->
                         val borderDp = border?.dp
                         TagsChip(
+                            modifier = Modifier.padding(vertical = 4.dp),
                             text = text,
                             onClick = { onClick(search) },
                             border = borderDp?.let {
@@ -131,6 +131,7 @@ fun NamespaceTags(
 
 @Composable
 fun TagsChip(
+    modifier: Modifier = Modifier,
     text: String,
     onClick: (() -> Unit)?,
     onLongClick: (() -> Unit)? = null,
@@ -141,6 +142,7 @@ fun TagsChip(
         if (onClick != null) {
             if (onLongClick != null) {
                 SuggestionChip(
+                    modifier = modifier,
                     onClick = onClick,
                     onLongClick = onLongClick,
                     label = {
@@ -159,6 +161,7 @@ fun TagsChip(
                 )
             } else {
                 SuggestionChip(
+                    modifier = modifier,
                     onClick = onClick,
                     label = {
                         Text(
@@ -177,6 +180,7 @@ fun TagsChip(
             }
         } else {
             SuggestionChip(
+                modifier = modifier,
                 label = {
                     Text(
                         text = text,

gradle/compose.versions.toml

@@ -19,7 +19,6 @@ material-icons = { module = "androidx.compose.material:material-icons-extended"
 material-core = { module = "androidx.compose.material:material" }
 
 accompanist-webview = { module = "com.google.accompanist:accompanist-webview", version.ref = "accompanist" }
-accompanist-flowlayout = { module = "com.google.accompanist:accompanist-flowlayout", version.ref = "accompanist" }
 accompanist-permissions = { module = "com.google.accompanist:accompanist-permissions", version.ref = "accompanist" }
 accompanist-themeadapter = { module = "com.google.accompanist:accompanist-themeadapter-material3", version.ref = "accompanist" }
 accompanist-systemuicontroller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanist" }