Make more sliders discrete and ensure they don't look out of place (#1840)

Also cleanup the underlying code

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

@@ -252,9 +252,9 @@ private fun ColumnScope.DisplayPage(
 
         val columns by columnPreference.collectAsState()
         SliderItem(
-            label = stringResource(MR.strings.pref_library_columns),
-            max = 10,
             value = columns,
+            valueRange = 0..10,
+            label = stringResource(MR.strings.pref_library_columns),
             valueText = if (columns > 0) {
                 columns.toString()
             } else {

app/src/main/java/eu/kanade/presentation/more/settings/Preference.kt

@@ -1,5 +1,6 @@
 package eu.kanade.presentation.more.settings
 
+import androidx.annotation.IntRange
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.graphics.vector.ImageVector
@@ -50,10 +51,9 @@ sealed class Preference {
          */
         data class SliderPreference(
             val value: Int,
-            val max: Int,
-            val min: Int = 0,
-            val steps: Int = 0,
             override val title: String,
+            val valueRange: IntProgression = 0..1,
+            @IntRange(from = 0) val steps: Int = with(valueRange) { (last - first) - 1 },
             override val subtitle: String? = null,
             override val enabled: Boolean = true,
             override val onValueChanged: suspend (value: Int) -> Boolean = { true },

app/src/main/java/eu/kanade/presentation/more/settings/PreferenceItem.kt

@@ -5,6 +5,7 @@ import androidx.compose.animation.expandVertically
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.animation.shrinkVertically
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
@@ -13,16 +14,20 @@ import androidx.compose.runtime.compositionLocalOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.structuralEqualityPolicy
+import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import eu.kanade.presentation.more.settings.widget.EditTextPreferenceWidget
 import eu.kanade.presentation.more.settings.widget.InfoWidget
 import eu.kanade.presentation.more.settings.widget.ListPreferenceWidget
 import eu.kanade.presentation.more.settings.widget.MultiSelectListPreferenceWidget
+import eu.kanade.presentation.more.settings.widget.PrefsHorizontalPadding
+import eu.kanade.presentation.more.settings.widget.PrefsVerticalPadding
 import eu.kanade.presentation.more.settings.widget.SwitchPreferenceWidget
 import eu.kanade.presentation.more.settings.widget.TextPreferenceWidget
+import eu.kanade.presentation.more.settings.widget.TitleFontSize
 import eu.kanade.presentation.more.settings.widget.TrackingPreferenceWidget
 import kotlinx.coroutines.launch
-import tachiyomi.presentation.core.components.SliderItem
+import tachiyomi.presentation.core.components.BaseSliderItem
 import tachiyomi.presentation.core.util.collectAsState
 
 val LocalPreferenceHighlighted = compositionLocalOf(structuralEqualityPolicy()) { false }
@@ -77,19 +82,22 @@ internal fun PreferenceItem(
                 )
             }
             is Preference.PreferenceItem.SliderPreference -> {
-                SliderItem(
+                BaseSliderItem(
                     label = item.title,
-                    min = item.min,
-                    max = item.max,
-                    steps = item.steps,
                     value = item.value,
+                    valueRange = item.valueRange,
                     valueText = item.subtitle.takeUnless { it.isNullOrEmpty() } ?: item.value.toString(),
+                    steps = item.steps,
+                    labelStyle = MaterialTheme.typography.titleLarge.copy(fontSize = TitleFontSize),
                     onChange = {
                         scope.launch {
                             item.onValueChanged(it)
                         }
                     },
-                    labelStyle = MaterialTheme.typography.titleLarge,
+                    modifier = Modifier.padding(
+                        horizontal = PrefsHorizontalPadding,
+                        vertical = PrefsVerticalPadding,
+                    ),
                 )
             }
             is Preference.PreferenceItem.ListPreference<*> -> {

app/src/main/java/eu/kanade/presentation/more/settings/screen/SettingsReaderScreen.kt

@@ -141,9 +141,7 @@ object SettingsReaderScreen : SearchableSettings {
                 ),
                 Preference.PreferenceItem.SliderPreference(
                     value = flashMillis / ReaderPreferences.MILLI_CONVERSION,
-                    max = 15,
-                    min = 1,
-                    steps = 13,
+                    valueRange = 1..15,
                     title = stringResource(MR.strings.pref_flash_duration),
                     subtitle = stringResource(MR.strings.pref_flash_duration_summary, flashMillis),
                     enabled = flashPageState,
@@ -154,9 +152,7 @@ object SettingsReaderScreen : SearchableSettings {
                 ),
                 Preference.PreferenceItem.SliderPreference(
                     value = flashInterval,
-                    max = 10,
-                    min = 1,
-                    steps = 8,
+                    valueRange = 1..10,
                     title = stringResource(MR.strings.pref_flash_page_interval),
                     subtitle = pluralStringResource(MR.plurals.pref_pages, flashInterval, flashInterval),
                     enabled = flashPageState,
@@ -342,8 +338,9 @@ object SettingsReaderScreen : SearchableSettings {
                 ),
                 Preference.PreferenceItem.SliderPreference(
                     value = webtoonSidePadding,
-                    max = ReaderPreferences.WEBTOON_PADDING_MAX,
-                    min = ReaderPreferences.WEBTOON_PADDING_MIN,
+                    valueRange = ReaderPreferences.let {
+                        it.WEBTOON_PADDING_MIN..it.WEBTOON_PADDING_MAX
+                    },
                     title = stringResource(MR.strings.pref_webtoon_side_padding),
                     subtitle = numberFormat.format(webtoonSidePadding / 100f),
                     onValueChanged = {

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

@@ -37,11 +37,10 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel)
     if (customBrightness) {
         val customBrightnessValue by screenModel.preferences.customBrightnessValue().collectAsState()
         SliderItem(
-            label = stringResource(MR.strings.pref_custom_brightness),
-            min = -75,
-            max = 100,
             value = customBrightnessValue,
-            valueText = customBrightnessValue.toString(),
+            valueRange = -75..100,
+            steps = 0,
+            label = stringResource(MR.strings.pref_custom_brightness),
             onChange = { screenModel.preferences.customBrightnessValue().set(it) },
             pillColor = MaterialTheme.colorScheme.surfaceContainerHighest,
         )
@@ -55,10 +54,10 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel)
     if (colorFilter) {
         val colorFilterValue by screenModel.preferences.colorFilterValue().collectAsState()
         SliderItem(
-            label = stringResource(MR.strings.color_filter_r_value),
-            max = 255,
             value = colorFilterValue.red,
-            valueText = colorFilterValue.red.toString(),
+            valueRange = 0..255,
+            steps = 0,
+            label = stringResource(MR.strings.color_filter_r_value),
             onChange = { newRValue ->
                 screenModel.preferences.colorFilterValue().getAndSet {
                     getColorValue(it, newRValue, RED_MASK, 16)
@@ -67,10 +66,10 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel)
             pillColor = MaterialTheme.colorScheme.surfaceContainerHighest,
         )
         SliderItem(
-            label = stringResource(MR.strings.color_filter_g_value),
-            max = 255,
             value = colorFilterValue.green,
-            valueText = colorFilterValue.green.toString(),
+            valueRange = 0..255,
+            steps = 0,
+            label = stringResource(MR.strings.color_filter_g_value),
             onChange = { newGValue ->
                 screenModel.preferences.colorFilterValue().getAndSet {
                     getColorValue(it, newGValue, GREEN_MASK, 8)
@@ -79,10 +78,10 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel)
             pillColor = MaterialTheme.colorScheme.surfaceContainerHighest,
         )
         SliderItem(
-            label = stringResource(MR.strings.color_filter_b_value),
-            max = 255,
             value = colorFilterValue.blue,
-            valueText = colorFilterValue.blue.toString(),
+            valueRange = 0..255,
+            steps = 0,
+            label = stringResource(MR.strings.color_filter_b_value),
             onChange = { newBValue ->
                 screenModel.preferences.colorFilterValue().getAndSet {
                     getColorValue(it, newBValue, BLUE_MASK, 0)
@@ -91,10 +90,10 @@ internal fun ColumnScope.ColorFilterPage(screenModel: ReaderSettingsScreenModel)
             pillColor = MaterialTheme.colorScheme.surfaceContainerHighest,
         )
         SliderItem(
-            label = stringResource(MR.strings.color_filter_a_value),
-            max = 255,
             value = colorFilterValue.alpha,
-            valueText = colorFilterValue.alpha.toString(),
+            valueRange = 0..255,
+            steps = 0,
+            label = stringResource(MR.strings.color_filter_a_value),
             onChange = { newAValue ->
                 screenModel.preferences.colorFilterValue().getAndSet {
                     getColorValue(it, newAValue, ALPHA_MASK, 24)

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

@@ -98,24 +98,20 @@ internal fun ColumnScope.GeneralPage(screenModel: ReaderSettingsScreenModel) {
     if (flashPageState) {
         SliderItem(
             value = flashMillis / ReaderPreferences.MILLI_CONVERSION,
+            valueRange = 1..15,
             label = stringResource(MR.strings.pref_flash_duration),
             valueText = stringResource(MR.strings.pref_flash_duration_summary, flashMillis),
             onChange = { flashMillisPref.set(it * ReaderPreferences.MILLI_CONVERSION) },
-            min = 1,
-            max = 15,
-            steps = 13,
             pillColor = MaterialTheme.colorScheme.surfaceContainerHighest,
         )
         SliderItem(
             value = flashInterval,
+            valueRange = 1..10,
             label = stringResource(MR.strings.pref_flash_page_interval),
             valueText = pluralStringResource(MR.plurals.pref_pages, flashInterval, flashInterval),
             onChange = {
                 flashIntervalPref.set(it)
             },
-            min = 1,
-            max = 10,
-            steps = 8,
             pillColor = MaterialTheme.colorScheme.surfaceContainerHighest,
         )
         SettingsChipRow(MR.strings.pref_flash_with) {

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

@@ -153,10 +153,9 @@ private fun ColumnScope.WebtoonViewerSettings(screenModel: ReaderSettingsScreenM
 
     val webtoonSidePadding by screenModel.preferences.webtoonSidePadding().collectAsState()
     SliderItem(
-        label = stringResource(MR.strings.pref_webtoon_side_padding),
-        min = ReaderPreferences.WEBTOON_PADDING_MIN,
-        max = ReaderPreferences.WEBTOON_PADDING_MAX,
         value = webtoonSidePadding,
+        valueRange = ReaderPreferences.let { it.WEBTOON_PADDING_MIN..it.WEBTOON_PADDING_MAX },
+        label = stringResource(MR.strings.pref_webtoon_side_padding),
         valueText = numberFormat.format(webtoonSidePadding / 100f),
         onChange = {
             screenModel.preferences.webtoonSidePadding().set(it)