Refactor grid size slider composable for reuse

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

@@ -1,25 +1,17 @@
 package eu.kanade.presentation.library
 
 import android.content.res.Configuration
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Slider
-import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
 import eu.kanade.presentation.components.TabbedDialog
 import eu.kanade.presentation.components.TabbedDialogPaddings
 import eu.kanade.presentation.components.TriStateItem
@@ -35,7 +27,7 @@ import tachiyomi.domain.manga.model.TriStateFilter
 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.SliderItem
 import tachiyomi.presentation.core.components.SortItem
 
 @Composable
@@ -195,48 +187,28 @@ private fun ColumnScope.DisplayPage(
     }
 
     if (displayMode != LibraryDisplayMode.List) {
-        Row(
+        val configuration = LocalConfiguration.current
-            modifier = Modifier
+        val columnPreference = remember {
-                .fillMaxWidth()
+            if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
-                .padding(
+                screenModel.libraryPreferences.landscapeColumns()
-                    horizontal = SettingsItemsPaddings.Horizontal,
+            } else {
-                    vertical = SettingsItemsPaddings.Vertical,
+                screenModel.libraryPreferences.portraitColumns()
-                ),
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.spacedBy(24.dp),
-        ) {
-            val configuration = LocalConfiguration.current
-            val columnPreference = remember {
-                if (configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) {
-                    screenModel.libraryPreferences.landscapeColumns()
-                } else {
-                    screenModel.libraryPreferences.portraitColumns()
-                }
             }
-
-            val columns by columnPreference.collectAsState()
-            Column(modifier = Modifier.weight(0.5f)) {
-                Text(
-                    stringResource(id = R.string.pref_library_columns),
-                    style = MaterialTheme.typography.bodyMedium,
-                )
-                Text(
-                    if (columns > 0) {
-                        stringResource(id = R.string.pref_library_columns_per_row, columns)
-                    } else {
-                        stringResource(id = R.string.label_default)
-                    },
-                )
-            }
-
-            Slider(
-                value = columns.toFloat(),
-                onValueChange = { columnPreference.set(it.toInt()) },
-                modifier = Modifier.weight(1.5f),
-                valueRange = 0f..10f,
-                steps = 10,
-            )
         }
+
+        val columns by columnPreference.collectAsState()
+        SliderItem(
+            label = stringResource(R.string.pref_library_columns),
+            min = 0,
+            max = 10,
+            value = columns,
+            valueText = if (columns > 0) {
+                stringResource(R.string.pref_library_columns_per_row, columns)
+            } else {
+                stringResource(R.string.label_default)
+            },
+            onChange = { columnPreference.set(it) },
+        )
     }
 
     HeadingItem(R.string.overlay_header)

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

@@ -3,6 +3,7 @@ package tachiyomi.presentation.core.components
 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.Row
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
@@ -17,6 +18,7 @@ import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.RadioButton
+import androidx.compose.material3.Slider
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -135,6 +137,43 @@ fun RadioItem(
     )
 }
 
+@Composable
+fun SliderItem(
+    label: String,
+    min: Int,
+    max: Int,
+    value: Int,
+    valueText: String,
+    onChange: (Int) -> Unit,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(
+                horizontal = SettingsItemsPaddings.Horizontal,
+                vertical = SettingsItemsPaddings.Vertical,
+            ),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(24.dp),
+    ) {
+        Column(modifier = Modifier.weight(0.5f)) {
+            Text(
+                text = label,
+                style = MaterialTheme.typography.bodyMedium,
+            )
+            Text(valueText)
+        }
+
+        Slider(
+            value = value.toFloat(),
+            onValueChange = { onChange(it.toInt()) },
+            modifier = Modifier.weight(1.5f),
+            valueRange = min.toFloat()..max.toFloat(),
+            steps = max - min,
+        )
+    }
+}
+
 @Composable
 private fun BaseSettingsItem(
     label: String,