Use segmented buttons for reader background setting in sheet

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

@@ -1,34 +1,43 @@
 package eu.kanade.presentation.reader.settings
 
 import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.padding
 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.RadioItem
+import tachiyomi.presentation.core.components.SettingsItemsPaddings
+import tachiyomi.presentation.core.components.material.SegmentedButtons
+
+private val themes = listOf(
+    R.string.black_background to 1,
+    R.string.gray_background to 2,
+    R.string.white_background to 0,
+    R.string.automatic_background to 3,
+)
 
 @Composable
 internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) {
-    // TODO: show this in a nicer way
     HeadingItem(R.string.pref_reader_theme)
     val readerTheme by screenModel.preferences.readerTheme().collectAsState()
-    listOf(
+    SegmentedButtons(
-        R.string.black_background to 1,
+        modifier = Modifier.padding(
-        R.string.gray_background to 2,
+            start = SettingsItemsPaddings.Horizontal,
-        R.string.white_background to 0,
+            top = 0.dp,
-        R.string.automatic_background to 3,
+            end = SettingsItemsPaddings.Horizontal,
-    ).map { (titleRes, theme) ->
+            bottom = SettingsItemsPaddings.Vertical,
-        RadioItem(
+        ),
-            label = stringResource(titleRes),
+        entries = themes.map { stringResource(it.first) },
-            selected = readerTheme == theme,
+        selectedIndex = themes.indexOfFirst { readerTheme == it.second },
-            onClick = { screenModel.preferences.readerTheme().set(theme) },
+        onClick = { screenModel.preferences.readerTheme().set(themes[it].second) },
-        )
+    )
-    }
 
     val showPageNumber by screenModel.preferences.showPageNumber().collectAsState()
     CheckboxItem(

i18n/src/main/res/values/strings.xml

@@ -383,7 +383,7 @@
     <string name="white_background">White</string>
     <string name="gray_background">Gray</string>
     <string name="black_background">Black</string>
-    <string name="automatic_background">Automatic</string>
+    <string name="automatic_background">Auto</string>
     <string name="pref_viewer_type">Default reading mode</string>
     <string name="l_nav">L shaped</string>
     <string name="kindlish_nav">Kindle-ish</string>

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

@@ -0,0 +1,90 @@
+package tachiyomi.presentation.core.components.material
+
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.OutlinedButton
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+
+val StartItemShape = RoundedCornerShape(topStartPercent = 100, bottomStartPercent = 100)
+val MiddleItemShape = RoundedCornerShape(0)
+val EndItemShape = RoundedCornerShape(topEndPercent = 100, bottomEndPercent = 100)
+
+@Composable
+fun SegmentedButtons(
+    modifier: Modifier = Modifier,
+    entries: List<String>,
+    selectedIndex: Int,
+    onClick: (Int) -> Unit,
+) {
+    Row(
+        modifier = modifier,
+    ) {
+        entries.mapIndexed { index, label ->
+            val shape = remember(entries, index) {
+                when (index) {
+                    0 -> StartItemShape
+                    entries.lastIndex -> EndItemShape
+                    else -> MiddleItemShape
+                }
+            }
+
+            if (index == selectedIndex) {
+                Button(
+                    modifier = Modifier.weight(1f),
+                    shape = shape,
+                    onClick = { onClick(index) },
+                ) {
+                    Text(
+                        text = label,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                }
+            } else {
+                OutlinedButton(
+                    modifier = Modifier.weight(1f),
+                    shape = shape,
+                    onClick = { onClick(index) },
+                ) {
+                    Text(
+                        text = label,
+                        maxLines = 1,
+                        overflow = TextOverflow.Ellipsis,
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun SegmentedButtonsPreview() {
+    Column {
+        SegmentedButtons(
+            entries = listOf(
+                "Day",
+                "Week",
+                "Month",
+                "Year",
+            ),
+            selectedIndex = 1,
+            onClick = {},
+        )
+
+        SegmentedButtons(
+            entries = listOf(
+                "Foo",
+                "Bar",
+            ),
+            selectedIndex = 1,
+            onClick = {},
+        )
+    }
+}