Replace reader sheet dropdowns with chips

app/src/main/java/eu/kanade/presentation/library/LibrarySettingsDialog.kt

@@ -27,7 +27,7 @@ import tachiyomi.domain.library.model.sort
 import tachiyomi.domain.library.service.LibraryPreferences
 import tachiyomi.presentation.core.components.CheckboxItem
 import tachiyomi.presentation.core.components.HeadingItem
-import tachiyomi.presentation.core.components.SettingsFlowRow
+import tachiyomi.presentation.core.components.SettingsChipRow
 import tachiyomi.presentation.core.components.SliderItem
 import tachiyomi.presentation.core.components.SortItem
 import tachiyomi.presentation.core.components.TriStateItem
@@ -181,7 +181,7 @@ private fun ColumnScope.DisplayPage(
     screenModel: LibrarySettingsScreenModel,
 ) {
     val displayMode by screenModel.libraryPreferences.libraryDisplayMode().collectAsState()
-    SettingsFlowRow(R.string.action_display_mode) {
+    SettingsChipRow(R.string.action_display_mode) {
         displayModes.map { (titleRes, mode) ->
             FilterChip(
                 selected = displayMode == mode,

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

@@ -17,7 +17,7 @@ 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.SettingsFlowRow
+import tachiyomi.presentation.core.components.SettingsChipRow
 import tachiyomi.presentation.core.components.SliderItem
 
 @Composable
@@ -124,7 +124,7 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel)
         )
 
         val colorFilterMode by screenModel.preferences.colorFilterMode().collectAsState()
-        SettingsFlowRow(R.string.pref_color_filter_mode) {
+        SettingsChipRow(R.string.pref_color_filter_mode) {
             colorFilterModes.mapIndexed { index, it ->
                 FilterChip(
                     selected = colorFilterMode == index,

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

@@ -11,7 +11,7 @@ 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.SettingsFlowRow
+import tachiyomi.presentation.core.components.SettingsChipRow
 
 private val themes = listOf(
     R.string.black_background to 1,
@@ -23,7 +23,7 @@ private val themes = listOf(
 @Composable
 internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) {
     val readerTheme by screenModel.preferences.readerTheme().collectAsState()
-    SettingsFlowRow(R.string.pref_reader_theme) {
+    SettingsChipRow(R.string.pref_reader_theme) {
         themes.map { (labelRes, value) ->
             FilterChip(
                 selected = readerTheme == value,

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

@@ -1,6 +1,8 @@
 package eu.kanade.presentation.reader.settings
 
 import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.material3.FilterChip
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
@@ -18,7 +20,7 @@ import eu.kanade.tachiyomi.ui.reader.viewer.webtoon.WebtoonViewer
 import eu.kanade.tachiyomi.util.system.isReleaseBuildType
 import tachiyomi.presentation.core.components.CheckboxItem
 import tachiyomi.presentation.core.components.HeadingItem
-import tachiyomi.presentation.core.components.SelectItem
+import tachiyomi.presentation.core.components.SettingsChipRow
 import tachiyomi.presentation.core.components.SliderItem
 import java.text.NumberFormat
 
@@ -32,21 +34,25 @@ internal fun ColumnScope.ReadingModePage(screenModel: ReaderSettingsScreenModel)
     val manga by screenModel.mangaFlow.collectAsState()
 
     val readingMode = remember(manga) { ReadingModeType.fromPreference(manga?.readingModeType?.toInt()) }
-    SelectItem(
+    SettingsChipRow(R.string.pref_category_reading_mode) {
-        label = stringResource(R.string.pref_category_reading_mode),
+        readingModeOptions.map { (stringRes, it) ->
-        options = readingModeOptions.map { stringResource(it.first) }.toTypedArray(),
+            FilterChip(
-        selectedIndex = readingModeOptions.indexOfFirst { it.second == readingMode },
+                selected = it == readingMode,
-    ) {
+                onClick = { screenModel.onChangeReadingMode(it) },
-        screenModel.onChangeReadingMode(readingModeOptions[it].second)
+                label = { Text(stringResource(stringRes)) },
+            )
+        }
     }
 
     val orientationType = remember(manga) { OrientationType.fromPreference(manga?.orientationType?.toInt()) }
-    SelectItem(
+    SettingsChipRow(R.string.rotation_type) {
-        label = stringResource(R.string.rotation_type),
+        orientationTypeOptions.map { (stringRes, it) ->
-        options = orientationTypeOptions.map { stringResource(it.first) }.toTypedArray(),
+            FilterChip(
-        selectedIndex = orientationTypeOptions.indexOfFirst { it.second == orientationType },
+                selected = it == orientationType,
-    ) {
+                onClick = { screenModel.onChangeOrientation(it) },
-        screenModel.onChangeOrientation(orientationTypeOptions[it].second)
+                label = { Text(stringResource(stringRes)) },
+            )
+        }
     }
 
     val viewer by screenModel.viewerFlow.collectAsState()
@@ -62,40 +68,35 @@ private fun ColumnScope.PagerViewerSettings(screenModel: ReaderSettingsScreenMod
     HeadingItem(R.string.pager_viewer)
 
     val navigationModePager by screenModel.preferences.navigationModePager().collectAsState()
-    SelectItem(
+    val pagerNavInverted by screenModel.preferences.pagerNavInverted().collectAsState()
-        label = stringResource(R.string.pref_viewer_nav),
+    TapZonesItems(
-        options = ReaderPreferences.TapZones.map { stringResource(it) }.toTypedArray(),
+        selected = navigationModePager,
-        selectedIndex = navigationModePager,
+        onSelect = screenModel.preferences.navigationModePager()::set,
-        onSelect = { screenModel.preferences.navigationModePager().set(it) },
+        invertMode = pagerNavInverted,
+        onSelectInvertMode = screenModel.preferences.pagerNavInverted()::set,
     )
 
-    if (navigationModePager != 5) {
-        val pagerNavInverted by screenModel.preferences.pagerNavInverted().collectAsState()
-        SelectItem(
-            label = stringResource(R.string.pref_read_with_tapping_inverted),
-            options = tappingInvertModeOptions.map { stringResource(it.first) }.toTypedArray(),
-            selectedIndex = tappingInvertModeOptions.indexOfFirst { it.second == pagerNavInverted },
-            onSelect = {
-                screenModel.preferences.pagerNavInverted().set(tappingInvertModeOptions[it].second)
-            },
-        )
-    }
-
     val imageScaleType by screenModel.preferences.imageScaleType().collectAsState()
-    SelectItem(
+    SettingsChipRow(R.string.pref_image_scale_type) {
-        label = stringResource(R.string.pref_image_scale_type),
+        ReaderPreferences.ImageScaleType.mapIndexed { index, it ->
-        options = ReaderPreferences.ImageScaleType.map { stringResource(it) }.toTypedArray(),
+            FilterChip(
-        selectedIndex = imageScaleType - 1,
+                selected = imageScaleType == index + 1,
-        onSelect = { screenModel.preferences.imageScaleType().set(it + 1) },
+                onClick = { screenModel.preferences.imageScaleType().set(index + 1) },
-    )
+                label = { Text(stringResource(it)) },
+            )
+        }
+    }
 
     val zoomStart by screenModel.preferences.zoomStart().collectAsState()
-    SelectItem(
+    SettingsChipRow(R.string.pref_zoom_start) {
-        label = stringResource(R.string.pref_zoom_start),
+        ReaderPreferences.ZoomStart.mapIndexed { index, it ->
-        options = ReaderPreferences.ZoomStart.map { stringResource(it) }.toTypedArray(),
+            FilterChip(
-        selectedIndex = zoomStart - 1,
+                selected = zoomStart == index + 1,
-        onSelect = { screenModel.preferences.zoomStart().set(it + 1) },
+                onClick = { screenModel.preferences.zoomStart().set(index + 1) },
-    )
+                label = { Text(stringResource(it)) },
+            )
+        }
+    }
 
     val cropBorders by screenModel.preferences.cropBorders().collectAsState()
     CheckboxItem(
@@ -172,25 +173,14 @@ private fun ColumnScope.WebtoonViewerSettings(screenModel: ReaderSettingsScreenM
     HeadingItem(R.string.webtoon_viewer)
 
     val navigationModeWebtoon by screenModel.preferences.navigationModeWebtoon().collectAsState()
-    SelectItem(
+    val webtoonNavInverted by screenModel.preferences.webtoonNavInverted().collectAsState()
-        label = stringResource(R.string.pref_viewer_nav),
+    TapZonesItems(
-        options = ReaderPreferences.TapZones.map { stringResource(it) }.toTypedArray(),
+        selected = navigationModeWebtoon,
-        selectedIndex = navigationModeWebtoon,
+        onSelect = screenModel.preferences.navigationModeWebtoon()::set,
-        onSelect = { screenModel.preferences.navigationModeWebtoon().set(it) },
+        invertMode = webtoonNavInverted,
+        onSelectInvertMode = screenModel.preferences.webtoonNavInverted()::set,
     )
 
-    if (navigationModeWebtoon != 5) {
-        val webtoonNavInverted by screenModel.preferences.webtoonNavInverted().collectAsState()
-        SelectItem(
-            label = stringResource(R.string.pref_read_with_tapping_inverted),
-            options = tappingInvertModeOptions.map { stringResource(it.first) }.toTypedArray(),
-            selectedIndex = tappingInvertModeOptions.indexOfFirst { it.second == webtoonNavInverted },
-            onSelect = {
-                screenModel.preferences.webtoonNavInverted().set(tappingInvertModeOptions[it].second)
-            },
-        )
-    }
-
     val webtoonSidePadding by screenModel.preferences.webtoonSidePadding().collectAsState()
     SliderItem(
         label = stringResource(R.string.pref_webtoon_side_padding),
@@ -254,3 +244,33 @@ private fun ColumnScope.WebtoonViewerSettings(screenModel: ReaderSettingsScreenM
         },
     )
 }
+
+@Composable
+private fun ColumnScope.TapZonesItems(
+    selected: Int,
+    onSelect: (Int) -> Unit,
+    invertMode: ReaderPreferences.TappingInvertMode,
+    onSelectInvertMode: (ReaderPreferences.TappingInvertMode) -> Unit,
+) {
+    SettingsChipRow(R.string.pref_viewer_nav) {
+        ReaderPreferences.TapZones.mapIndexed { index, it ->
+            FilterChip(
+                selected = selected == index,
+                onClick = { onSelect(index) },
+                label = { Text(stringResource(it)) },
+            )
+        }
+    }
+
+    if (selected != 5) {
+        SettingsChipRow(R.string.pref_read_with_tapping_inverted) {
+            tappingInvertModeOptions.map { (stringRes, mode) ->
+                FilterChip(
+                    selected = mode == invertMode,
+                    onClick = { onSelectInvertMode(mode) },
+                    label = { Text(stringResource(stringRes)) },
+                )
+            }
+        }
+    }
+}

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

@@ -229,7 +229,7 @@ fun SelectItem(
         )
 
         ExposedDropdownMenu(
-            modifier = Modifier.exposedDropdownSize(matchTextFieldWidth = true),
+            modifier = Modifier.exposedDropdownSize(),
             expanded = expanded,
             onDismissRequest = { expanded = false },
         ) {
@@ -318,7 +318,7 @@ fun TextItem(
 }
 
 @Composable
-fun SettingsFlowRow(
+fun SettingsChipRow(
     @StringRes labelRes: Int,
     content: @Composable FlowRowScope.() -> Unit,
 ) {