Replace some reader sheet settings with FlowRow of Chips

app/src/main/java/eu/kanade/presentation/reader/settings/ColorFilterPage.kt

@@ -2,6 +2,7 @@ package eu.kanade.presentation.reader.settings
 
 import android.os.Build
 import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.res.stringResource
@@ -15,8 +16,9 @@ import eu.kanade.tachiyomi.ui.reader.setting.ReaderPreferences
 import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
 import tachiyomi.core.preference.getAndSet
 import tachiyomi.presentation.core.components.CheckboxItem
-import tachiyomi.presentation.core.components.SelectItem
+import tachiyomi.presentation.core.components.SettingsFlowRow
 import tachiyomi.presentation.core.components.SliderItem
+import tachiyomi.presentation.core.components.material.ChoiceChip
 
 @Composable
 internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel) {
@@ -122,12 +124,14 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel)
         )
 
         val colorFilterMode by screenModel.preferences.colorFilterMode().collectAsState()
-        SelectItem(
+        SettingsFlowRow(R.string.pref_color_filter_mode) {
-            label = stringResource(R.string.pref_color_filter_mode),
+            colorFilterModes.mapIndexed { index, it ->
-            options = colorFilterModes.toTypedArray(),
+                ChoiceChip(
-            selectedIndex = colorFilterMode,
+                    isSelected = colorFilterMode == index,
-        ) {
+                    onClick = { screenModel.preferences.colorFilterMode().set(index) },
-            screenModel.preferences.colorFilterMode().set(it)
+                    content = { Text(it) },
+                )
+            }
         }
     }
 

app/src/main/java/eu/kanade/presentation/reader/settings/GeneralSettingsPage.kt

@@ -1,20 +1,17 @@
 package eu.kanade.presentation.reader.settings
 
 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
-import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
 import eu.kanade.presentation.util.collectAsState
 import eu.kanade.tachiyomi.R
 import eu.kanade.tachiyomi.ui.reader.setting.ReaderPreferences
 import eu.kanade.tachiyomi.ui.reader.setting.ReaderSettingsScreenModel
 import tachiyomi.presentation.core.components.CheckboxItem
-import tachiyomi.presentation.core.components.HeadingItem
+import tachiyomi.presentation.core.components.SettingsFlowRow
-import tachiyomi.presentation.core.components.SettingsItemsPaddings
+import tachiyomi.presentation.core.components.material.ChoiceChip
-import tachiyomi.presentation.core.components.material.SegmentedButtons
 
 private val themes = listOf(
     R.string.black_background to 1,
@@ -25,19 +22,16 @@ private val themes = listOf(
 
 @Composable
 internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) {
-    HeadingItem(R.string.pref_reader_theme)
     val readerTheme by screenModel.preferences.readerTheme().collectAsState()
-    SegmentedButtons(
+    SettingsFlowRow(R.string.pref_reader_theme) {
-        modifier = Modifier.padding(
+        themes.map { (labelRes, value) ->
-            start = SettingsItemsPaddings.Horizontal,
+            ChoiceChip(
-            top = 0.dp,
+                isSelected = readerTheme == value,
-            end = SettingsItemsPaddings.Horizontal,
+                onClick = { screenModel.preferences.readerTheme().set(value) },
-            bottom = SettingsItemsPaddings.Vertical,
+                content = { Text(stringResource(labelRes)) },
-        ),
-        entries = themes.map { stringResource(it.first) },
-        selectedIndex = themes.indexOfFirst { readerTheme == it.second },
-        onClick = { screenModel.preferences.readerTheme().set(themes[it].second) },
             )
+        }
+    }
 
     val showPageNumber by screenModel.preferences.showPageNumber().collectAsState()
     CheckboxItem(

presentation-core/src/main/java/tachiyomi/presentation/core/components/SettingsItems.kt

@@ -4,6 +4,8 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.FlowRowScope
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
@@ -61,7 +63,10 @@ fun HeadingItem(
         style = MaterialTheme.typography.header,
         modifier = Modifier
             .fillMaxWidth()
-            .padding(horizontal = SettingsItemsPaddings.Horizontal, vertical = SettingsItemsPaddings.Vertical),
+            .padding(
+                horizontal = SettingsItemsPaddings.Horizontal,
+                vertical = SettingsItemsPaddings.Vertical,
+            ),
     )
 }
 
@@ -203,7 +208,10 @@ fun SelectItem(
             modifier = Modifier
                 .menuAnchor()
                 .fillMaxWidth()
-                .padding(horizontal = SettingsItemsPaddings.Horizontal, vertical = SettingsItemsPaddings.Vertical),
+                .padding(
+                    horizontal = SettingsItemsPaddings.Horizontal,
+                    vertical = SettingsItemsPaddings.Vertical,
+                ),
             label = { Text(text = label) },
             value = options[selectedIndex].toString(),
             onValueChange = {},
@@ -259,7 +267,10 @@ fun TriStateItem(
                 },
             )
             .fillMaxWidth()
-            .padding(horizontal = SettingsItemsPaddings.Horizontal, vertical = SettingsItemsPaddings.Vertical),
+            .padding(
+                horizontal = SettingsItemsPaddings.Horizontal,
+                vertical = SettingsItemsPaddings.Vertical,
+            ),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(24.dp),
     ) {
@@ -306,6 +317,26 @@ fun TextItem(
     )
 }
 
+@Composable
+fun SettingsFlowRow(
+    @StringRes labelRes: Int,
+    content: @Composable FlowRowScope.() -> Unit,
+) {
+    Column {
+        HeadingItem(labelRes)
+        FlowRow(
+            modifier = Modifier.padding(
+                start = SettingsItemsPaddings.Horizontal,
+                top = 0.dp,
+                end = SettingsItemsPaddings.Horizontal,
+                bottom = SettingsItemsPaddings.Vertical,
+            ),
+            horizontalArrangement = Arrangement.spacedBy(4.dp),
+            content = content,
+        )
+    }
+}
+
 @Composable
 private fun BaseSettingsItem(
     label: String,
@@ -316,7 +347,10 @@ private fun BaseSettingsItem(
         modifier = Modifier
             .clickable(onClick = onClick)
             .fillMaxWidth()
-            .padding(horizontal = SettingsItemsPaddings.Horizontal, vertical = SettingsItemsPaddings.Vertical),
+            .padding(
+                horizontal = SettingsItemsPaddings.Horizontal,
+                vertical = SettingsItemsPaddings.Vertical,
+            ),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.spacedBy(24.dp),
     ) {

presentation-core/src/main/java/tachiyomi/presentation/core/components/material/Chip.kt

@@ -0,0 +1,60 @@
+package tachiyomi.presentation.core.components.material
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.requiredHeight
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ProvideTextStyle
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun Chip(
+    modifier: Modifier = Modifier,
+    backgroundColor: Color = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.15f),
+    contentColor: Color = MaterialTheme.colorScheme.onSurface,
+    onClick: () -> Unit = {},
+    content: @Composable () -> Unit,
+) {
+    Surface(
+        modifier = Modifier,
+        shape = CircleShape,
+        color = backgroundColor,
+        contentColor = contentColor,
+        onClick = {},
+    ) {
+        Row(
+            modifier = modifier.clickable(onClick = onClick)
+                .widthIn(min = 56.dp)
+                .requiredHeight(32.dp)
+                .padding(horizontal = 12.dp),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.Center,
+        ) {
+            ProvideTextStyle(MaterialTheme.typography.bodySmall, content)
+        }
+    }
+}
+
+@Composable
+fun ChoiceChip(
+    modifier: Modifier = Modifier,
+    isSelected: Boolean,
+    onClick: () -> Unit = {},
+    selectedBackgroundColor: Color = MaterialTheme.colorScheme.primary,
+    selectedContentColor: Color = MaterialTheme.colorScheme.onPrimary,
+    content: @Composable () -> Unit,
+) {
+    if (isSelected) {
+        Chip(modifier, selectedBackgroundColor, selectedContentColor, onClick, content)
+    } else {
+        Chip(modifier, onClick = onClick, content = content)
+    }
+}