Remove Scrollable column

2025-12-10 06:42:05 +01:00 · 2021-04-26 17:18:11 -04:00
parent 2bac6d5e8c
commit 3a83037104
15 changed files with 294 additions and 321 deletions
--- a/src/main/kotlin/ca/gosyer/ui/base/components/Scrollable.kt
+++ b/src/main/kotlin/ca/gosyer/ui/base/components/Scrollable.kt
@@ -1,29 +0,0 @@
-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
-package ca.gosyer.ui.base.components
-
-import androidx.compose.foundation.gestures.Orientation
-import androidx.compose.foundation.gestures.scrollable
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.rememberScrollState
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-
-@Composable
-fun ScrollableColumn(
-    modifier: Modifier = Modifier,
-    content: @Composable () -> Unit
-) {
-    Column(
-        modifier = modifier.scrollable(
-            state = rememberScrollState(),
-            orientation = Orientation.Vertical
-        )
-    ) {
-        content()
-    }
-}
--- a/src/main/kotlin/ca/gosyer/ui/base/prefs/PreferencesUiBuilder.kt
+++ b/src/main/kotlin/ca/gosyer/ui/base/prefs/PreferencesUiBuilder.kt
@@ -48,120 +48,9 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import ca.gosyer.ui.base.WindowDialog
 import ca.gosyer.ui.base.components.ColorPickerDialog
-import ca.gosyer.ui.base.components.ScrollableColumn

@Composable
-fun PreferencesScrollableColumn(
-    modifier: Modifier = Modifier,
-    content: @Composable PreferenceScope.() -> Unit
-) {
-    Box {
-        ScrollableColumn(modifier) {
-            val scope = PreferenceScope()
-            scope.content()
-        }
-    }
-}
-
-class PreferenceScope {
-    @Composable
-    fun <Key> ChoicePref(
-        preference: PreferenceMutableStateFlow<Key>,
-        choices: Map<Key, String>,
-        title: String,
-        subtitle: String? = null
-    ) {
-        val prefValue by preference.collectAsState()
-        Pref(
-            title = title,
-            subtitle = if (subtitle == null) choices[prefValue] else null,
-            onClick = {
-                ChoiceDialog(
-                    items = choices.toList(),
-                    selected = prefValue,
-                    title = title,
-                    onSelected = { selected ->
-                        preference.value = selected
-                    }
-                )
-            }
-        )
-    }
-
-    @Composable
-    fun ColorPref(
-        preference: PreferenceMutableStateFlow<Color>,
-        title: String,
-        subtitle: String? = null,
-        unsetColor: Color = Color.Unspecified
-    ) {
-        val initialColor = preference.value.takeOrElse { unsetColor }
-        Pref(
-            title = title,
-            subtitle = subtitle,
-            onClick = {
-                    ColorPickerDialog(
-                        title = title,
-                        onSelected = {
-                            preference.value = it
-                        },
-                        initialColor = initialColor
-                    )
-            },
-            onLongClick = { preference.value = Color.Unspecified },
-            action = {
-                val prefValue by preference.collectAsState()
-                if (prefValue != Color.Unspecified || unsetColor != Color.Unspecified) {
-                    val borderColor = MaterialTheme.colors.onBackground.copy(alpha = 0.54f)
-                    Box(
-                        modifier = Modifier
-                            .padding(4.dp)
-                            .size(32.dp)
-                            .clip(CircleShape)
-                            .background(color = initialColor)
-                            .border(BorderStroke(1.dp, borderColor), CircleShape)
-                    )
-                }
-            }
-        )
-    }
-
-    private fun <T> ChoiceDialog(
-        items: List<Pair<T, String>>,
-        selected: T?,
-        onDismissRequest: () -> Unit = {},
-        onSelected: (T) -> Unit,
-        title: String,
-        buttons: @Composable (AppWindow) -> Unit = {  }
-    ) {
-        WindowDialog(onDismissRequest = onDismissRequest, buttons = buttons, title = title, content = {
-            LazyColumn {
-                items(items) { (value, text) ->
-                    Row(
-                        modifier = Modifier.requiredHeight(48.dp).fillMaxWidth().clickable(
-                            onClick = {
-                                onSelected(value)
-                                it.close()
-                            }),
-                        verticalAlignment = Alignment.CenterVertically
-                    ) {
-                        RadioButton(
-                            selected = value == selected,
-                            onClick = {
-                                onSelected(value)
-                                it.close()
-                            },
-                        )
-                        Text(text = text, modifier = Modifier.padding(start = 24.dp))
-                    }
-                }
-            }
-        })
-    }
-}
-
-@Composable
-fun Pref(
+fun PreferenceRow(
    title: String,
    icon: ImageVector? = null,
    onClick: () -> Unit = {},
@@ -213,13 +102,13 @@ fun Pref(
 }

@Composable
-fun SwitchPref(
+fun SwitchPreference(
    preference: PreferenceMutableStateFlow<Boolean>,
    title: String,
    subtitle: String? = null,
    icon: ImageVector? = null,
 ) {
-    Pref(
+    PreferenceRow(
        title = title,
        subtitle = subtitle,
        icon = icon,
@@ -232,14 +121,14 @@ fun SwitchPref(
 }

@Composable
-fun EditTextPref(
+fun EditTextPreference(
    preference: PreferenceMutableStateFlow<String>,
    title: String,
    subtitle: String? = null,
    icon: ImageVector? = null
 ) {
    var editText by remember { mutableStateOf(TextFieldValue(preference.value)) }
-    Pref(
+    PreferenceRow(
        title = title,
        subtitle = subtitle,
        icon = icon,
@@ -256,4 +145,99 @@ fun EditTextPref(
            }
        }
    )
-}
+}
+
+@Composable
+fun <Key> ChoicePreference(
+    preference: PreferenceMutableStateFlow<Key>,
+    choices: Map<Key, String>,
+    title: String,
+    subtitle: String? = null
+) {
+    val prefValue by preference.collectAsState()
+    PreferenceRow(
+        title = title,
+        subtitle = if (subtitle == null) choices[prefValue] else null,
+        onClick = {
+            ChoiceDialog(
+                items = choices.toList(),
+                selected = prefValue,
+                title = title,
+                onSelected = { selected ->
+                    preference.value = selected
+                }
+            )
+        }
+    )
+}
+
+private fun <T> ChoiceDialog(
+    items: List<Pair<T, String>>,
+    selected: T?,
+    onDismissRequest: () -> Unit = {},
+    onSelected: (T) -> Unit,
+    title: String,
+    buttons: @Composable (AppWindow) -> Unit = {  }
+) {
+    WindowDialog(onDismissRequest = onDismissRequest, buttons = buttons, title = title, content = {
+        LazyColumn {
+            items(items) { (value, text) ->
+                Row(
+                    modifier = Modifier.requiredHeight(48.dp).fillMaxWidth().clickable(
+                        onClick = {
+                            onSelected(value)
+                            it.close()
+                        }),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    RadioButton(
+                        selected = value == selected,
+                        onClick = {
+                            onSelected(value)
+                            it.close()
+                        },
+                    )
+                    Text(text = text, modifier = Modifier.padding(start = 24.dp))
+                }
+            }
+        }
+    })
+}
+
+@Composable
+fun ColorPreference(
+    preference: PreferenceMutableStateFlow<Color>,
+    title: String,
+    subtitle: String? = null,
+    unsetColor: Color = Color.Unspecified
+) {
+    val initialColor = preference.value.takeOrElse { unsetColor }
+    PreferenceRow(
+        title = title,
+        subtitle = subtitle,
+        onClick = {
+            ColorPickerDialog(
+                title = title,
+                onSelected = {
+                    preference.value = it
+                },
+                initialColor = initialColor
+            )
+        },
+        onLongClick = { preference.value = Color.Unspecified },
+        action = {
+            val prefValue by preference.collectAsState()
+            if (prefValue != Color.Unspecified || unsetColor != Color.Unspecified) {
+                val borderColor = MaterialTheme.colors.onBackground.copy(alpha = 0.54f)
+                Box(
+                    modifier = Modifier
+                        .padding(4.dp)
+                        .size(32.dp)
+                        .clip(CircleShape)
+                        .background(color = initialColor)
+                        .border(BorderStroke(1.dp, borderColor), CircleShape)
+                )
+            }
+        }
+    )
+}
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsAdvancedScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsAdvancedScreen.kt
@@ -4,18 +4,12 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
 import ca.gosyer.ui.main.Route
 import com.github.zsoltk.compose.router.BackStack

@@ -23,7 +17,7 @@ import com.github.zsoltk.compose.router.BackStack
 fun SettingsAdvancedScreen(navController: BackStack<Route>) {
    Column {
        Toolbar("Advanced Settings", navController, true)
-        PreferencesScrollableColumn {
+        LazyColumn {
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsAppearanceScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsAppearanceScreen.kt
@@ -4,12 +4,6 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.border
@@ -20,6 +14,7 @@ import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CornerSize
@@ -38,7 +33,8 @@ import androidx.compose.ui.unit.sp
 import ca.gosyer.data.ui.UiPreferences
 import ca.gosyer.data.ui.model.ThemeMode
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
+import ca.gosyer.ui.base.prefs.ChoicePreference
+import ca.gosyer.ui.base.prefs.ColorPreference
 import ca.gosyer.ui.base.theme.AppColorsPreferenceState
 import ca.gosyer.ui.base.theme.Theme
 import ca.gosyer.ui.base.theme.asStateFlow
@@ -79,39 +75,47 @@ fun SettingsAppearance(navController: BackStack<Route>) {

    Column {
        Toolbar("Appearance Settings", navController, true)
-        PreferencesScrollableColumn {
-            ChoicePref(
-                preference = vm.themeMode,
-                choices = mapOf(
-                    //ThemeMode.System to R.string.follow_system_settings,
-                    ThemeMode.Light to "Light",
-                    ThemeMode.Dark to "Dark"
-                ),
-                title = "Theme"
-            )
-            Text(
-                "Preset themes",
-                modifier = Modifier.padding(start = 16.dp, top = 16.dp, bottom = 4.dp)
-            )
-            LazyRow(modifier = Modifier.padding(horizontal = 8.dp)) {
-                items(themesForCurrentMode) { theme ->
-                    ThemeItem(theme, onClick = {
-                        (if (isLight) vm.lightTheme else vm.darkTheme).value = it.id
-                        activeColors.primaryStateFlow.value = it.colors.primary
-                        activeColors.secondaryStateFlow.value = it.colors.secondary
-                    })
+        LazyColumn {
+            item {
+                ChoicePreference(
+                    preference = vm.themeMode,
+                    choices = mapOf(
+                        //ThemeMode.System to R.string.follow_system_settings,
+                        ThemeMode.Light to "Light",
+                        ThemeMode.Dark to "Dark"
+                    ),
+                    title = "Theme"
+                )
+            }
+            item {
+                Text(
+                    "Preset themes",
+                    modifier = Modifier.padding(start = 16.dp, top = 16.dp, bottom = 4.dp)
+                )
+                LazyRow(modifier = Modifier.padding(horizontal = 8.dp)) {
+                    items(themesForCurrentMode) { theme ->
+                        ThemeItem(theme, onClick = {
+                            (if (isLight) vm.lightTheme else vm.darkTheme).value = it.id
+                            activeColors.primaryStateFlow.value = it.colors.primary
+                            activeColors.secondaryStateFlow.value = it.colors.secondary
+                        })
+                    }
                }
            }
-            ColorPref(
-                preference = activeColors.primaryStateFlow, title = "Color primary",
-                subtitle = "Displayed most frequently across your app",
-                unsetColor = MaterialTheme.colors.primary
-            )
-            ColorPref(
-                preference = activeColors.secondaryStateFlow, title = "Color secondary",
-                subtitle = "Accents select parts of the UI",
-                unsetColor = MaterialTheme.colors.secondary
-            )
+            item {
+                ColorPreference(
+                    preference = activeColors.primaryStateFlow, title = "Color primary",
+                    subtitle = "Displayed most frequently across your app",
+                    unsetColor = MaterialTheme.colors.primary
+                )
+            }
+            item {
+                ColorPreference(
+                    preference = activeColors.secondaryStateFlow, title = "Color secondary",
+                    subtitle = "Accents select parts of the UI",
+                    unsetColor = MaterialTheme.colors.secondary
+                )
+            }
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsBackupScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsBackupScreen.kt
@@ -7,9 +7,9 @@
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
 import ca.gosyer.ui.main.Route
 import com.github.zsoltk.compose.router.BackStack

@@ -17,7 +17,7 @@ import com.github.zsoltk.compose.router.BackStack
 fun SettingsBackupScreen(navController: BackStack<Route>) {
    Column {
        Toolbar("Backup Settings", navController, true)
-        PreferencesScrollableColumn {
+        LazyColumn {
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsBrowseScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsBrowseScreen.kt
@@ -7,9 +7,9 @@
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
 import ca.gosyer.ui.main.Route
 import com.github.zsoltk.compose.router.BackStack

@@ -17,7 +17,7 @@ import com.github.zsoltk.compose.router.BackStack
 fun SettingsBrowseScreen(navController: BackStack<Route>) {
    Column {
        Toolbar("Browse Settings", navController, true)
-        PreferencesScrollableColumn {
+        LazyColumn {
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsDownloadsScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsDownloadsScreen.kt
@@ -7,9 +7,9 @@
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
 import ca.gosyer.ui.main.Route
 import com.github.zsoltk.compose.router.BackStack

@@ -17,7 +17,7 @@ import com.github.zsoltk.compose.router.BackStack
 fun SettingsDownloadsScreen(navController: BackStack<Route>) {
    Column {
        Toolbar("Download Settings", navController, true)
-        PreferencesScrollableColumn {
+        LazyColumn {
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsGeneralScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsGeneralScreen.kt
@@ -4,22 +4,17 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material.Divider
 import androidx.compose.runtime.Composable
 import ca.gosyer.data.ui.UiPreferences
 import ca.gosyer.data.ui.model.StartScreen
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
-import ca.gosyer.ui.base.prefs.SwitchPref
+import ca.gosyer.ui.base.prefs.ChoicePreference
+import ca.gosyer.ui.base.prefs.SwitchPreference
 import ca.gosyer.ui.base.vm.ViewModel
 import ca.gosyer.ui.base.vm.viewModel
 import ca.gosyer.ui.main.Route
@@ -73,28 +68,38 @@ fun SettingsGeneralScreen(navController: BackStack<Route>) {
    val vm = viewModel<SettingsGeneralViewModel>()
    Column {
        Toolbar("General Settings", navController, true)
-        PreferencesScrollableColumn {
-            ChoicePref(
-                preference = vm.startScreen,
-                title = "Start Screen",
-                choices = mapOf(
-                    StartScreen.Library to "Library",
-                    StartScreen.Sources to "Sources",
-                    StartScreen.Extensions to "Extensions",
+        LazyColumn {
+            item {
+                ChoicePreference(
+                    preference = vm.startScreen,
+                    title = "Start Screen",
+                    choices = mapOf(
+                        StartScreen.Library to "Library",
+                        StartScreen.Sources to "Sources",
+                        StartScreen.Extensions to "Extensions",
+                    )
                )
-            )
-            SwitchPref(preference = vm.confirmExit, title = "Confirm Exit")
-            Divider()
-            ChoicePref(
-                preference = vm.language,
-                title = "Language",
-                choices = vm.getLanguageChoices(),
-            )
-            ChoicePref(
-                preference = vm.dateFormat,
-                title = "Date Format",
-                choices = vm.getDateChoices()
-            )
+            }
+            item {
+                SwitchPreference(preference = vm.confirmExit, title = "Confirm Exit")
+            }
+            item {
+                Divider()
+            }
+            item {
+                ChoicePreference(
+                    preference = vm.language,
+                    title = "Language",
+                    choices = vm.getLanguageChoices(),
+                )
+            }
+            item {
+                ChoicePreference(
+                    preference = vm.dateFormat,
+                    title = "Date Format",
+                    choices = vm.getDateChoices()
+                )
+            }
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsLibraryScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsLibraryScreen.kt
@@ -4,20 +4,14 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.data.library.LibraryPreferences
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
-import ca.gosyer.ui.base.prefs.SwitchPref
+import ca.gosyer.ui.base.prefs.SwitchPreference
 import ca.gosyer.ui.base.vm.ViewModel
 import ca.gosyer.ui.base.vm.viewModel
 import ca.gosyer.ui.main.Route
@@ -37,8 +31,10 @@ fun SettingsLibraryScreen(navController: BackStack<Route>) {

    Column {
        Toolbar("Library Settings", navController, true)
-        PreferencesScrollableColumn {
-            SwitchPref(preference = vm.showAllCategory, title = "Show all category")
+        LazyColumn {
+            item {
+                SwitchPreference(preference = vm.showAllCategory, title = "Show all category")
+            }
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsParentalControlsScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsParentalControlsScreen.kt
@@ -7,9 +7,9 @@
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
 import ca.gosyer.ui.main.Route
 import com.github.zsoltk.compose.router.BackStack

@@ -17,7 +17,7 @@ import com.github.zsoltk.compose.router.BackStack
 fun SettingsParentalControlsScreen(navController: BackStack<Route>) {
    Column {
        Toolbar("Parental Control Settings", navController, true)
-        PreferencesScrollableColumn {
+        LazyColumn {
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsReaderScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsReaderScreen.kt
@@ -7,9 +7,9 @@
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
 import ca.gosyer.ui.main.Route
 import com.github.zsoltk.compose.router.BackStack

@@ -17,7 +17,7 @@ import com.github.zsoltk.compose.router.BackStack
 fun SettingsReaderScreen(navController: BackStack<Route>) {
    Column {
        Toolbar("Reader Settings", navController, true)
-        PreferencesScrollableColumn {
+        LazyColumn {
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsScreen.kt
@@ -4,19 +4,13 @@
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

-/*
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at https://mozilla.org/MPL/2.0/.
- */
-
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.Pref
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
+import ca.gosyer.ui.base.prefs.PreferenceRow
 import ca.gosyer.ui.main.Route
 import com.github.zsoltk.compose.router.BackStack
 import compose.icons.FontAwesomeIcons
@@ -27,68 +21,91 @@ import compose.icons.fontawesomeicons.regular.Edit
 fun SettingsScreen(navController: BackStack<Route>) {
    Column {
        Toolbar("Settings", closable = false)
-        PreferencesScrollableColumn {
-            Pref(
-                title = "General",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsGeneral) }
-            )
-            Pref(
-                title = "Appearance",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsAppearance) }
-            )
-            Pref(
-                title = "Server",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsServer) }
-            )
-            Pref(
-                title = "Library",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsLibrary) }
-            )
-            Pref(
-                title = "Reader",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsReader) }
-            )
-            /*Pref(
-                title = "Downloads",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsDownloads) }
-            )
-            Pref(
-                title = "Tracking",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsTracking) }
-            )
-            */
-            Pref(
-                title = "Browse",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsBrowse) }
-            )
-            Pref(
-                title = "Backup",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsBackup) }
-            )
-            /*Pref(
-                title = "Security",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsSecurity) }
-            )
-            Pref(
-                title = "Parental Controls",
-                icon = FontAwesomeIcons.Regular.User,
-                onClick = { navController.push(Route.SettingsParentalControls) }
-            )*/
-            Pref(
-                title = "Advanced",
-                icon = FontAwesomeIcons.Regular.Edit,
-                onClick = { navController.push(Route.SettingsAdvanced) }
-            )
+        LazyColumn {
+            item {
+                PreferenceRow(
+                    title = "General",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsGeneral) }
+                )
+            }
+            item {
+                PreferenceRow(
+                    title = "Appearance",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsAppearance) }
+                )
+            }
+            item {
+                PreferenceRow(
+                    title = "Server",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsServer) }
+                )
+            }
+            item {
+                PreferenceRow(
+                    title = "Library",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsLibrary) }
+                )
+            }
+            item {
+                PreferenceRow(
+                    title = "Reader",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsReader) }
+                )
+            }
+            /*item {
+                Pref(
+                    title = "Downloads",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsDownloads) }
+                )
+            }
+            item {
+                Pref(
+                    title = "Tracking",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsTracking) }
+                )
+            }*/
+            item {
+                PreferenceRow(
+                    title = "Browse",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsBrowse) }
+                )
+            }
+            item {
+                PreferenceRow(
+                    title = "Backup",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsBackup) }
+                )
+            }
+            /*item {
+                Pref(
+                    title = "Security",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsSecurity) }
+                )
+            }
+            item {
+                Pref(
+                    title = "Parental Controls",
+                    icon = FontAwesomeIcons.Regular.User,
+                    onClick = { navController.push(Route.SettingsParentalControls) }
+                )
+            }*/
+            item {
+                PreferenceRow(
+                    title = "Advanced",
+                    icon = FontAwesomeIcons.Regular.Edit,
+                    onClick = { navController.push(Route.SettingsAdvanced) }
+                )
+            }
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsSecurityScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsSecurityScreen.kt
@@ -7,9 +7,9 @@
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
 import ca.gosyer.ui.main.Route
 import com.github.zsoltk.compose.router.BackStack

@@ -17,7 +17,7 @@ import com.github.zsoltk.compose.router.BackStack
 fun SettingsSecurityScreen(navController: BackStack<Route>) {
    Column {
        Toolbar("Security Settings", navController, true)
-        PreferencesScrollableColumn {
+        LazyColumn {
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsServerScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsServerScreen.kt
@@ -7,13 +7,13 @@
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import ca.gosyer.data.server.ServerPreferences
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.EditTextPref
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
-import ca.gosyer.ui.base.prefs.SwitchPref
+import ca.gosyer.ui.base.prefs.EditTextPreference
+import ca.gosyer.ui.base.prefs.SwitchPreference
 import ca.gosyer.ui.base.prefs.asStateIn
 import ca.gosyer.ui.base.vm.ViewModel
 import ca.gosyer.ui.base.vm.viewModel
@@ -33,9 +33,11 @@ fun SettingsServerScreen(navController: BackStack<Route>) {
    val vm = viewModel<SettingsServerViewModel>()
    Column {
        Toolbar("Server Settings", navController, true)
-        SwitchPref(preference = vm.host, title = "Host server inside TachideskJUI")
-        PreferencesScrollableColumn {
-            EditTextPref(vm.serverUrl, "Server Url", subtitle = vm.serverUrl.collectAsState().value)
+        SwitchPreference(preference = vm.host, title = "Host server inside TachideskJUI")
+        LazyColumn {
+            item {
+                EditTextPreference(vm.serverUrl, "Server Url", subtitle = vm.serverUrl.collectAsState().value)
+            }
        }
    }
 }
--- a/src/main/kotlin/ca/gosyer/ui/settings/SettingsTrackingScreen.kt
+++ b/src/main/kotlin/ca/gosyer/ui/settings/SettingsTrackingScreen.kt
@@ -7,9 +7,9 @@
 package ca.gosyer.ui.settings

 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.runtime.Composable
 import ca.gosyer.ui.base.components.Toolbar
-import ca.gosyer.ui.base.prefs.PreferencesScrollableColumn
 import ca.gosyer.ui.main.Route
 import com.github.zsoltk.compose.router.BackStack

@@ -17,7 +17,7 @@ import com.github.zsoltk.compose.router.BackStack
 fun SettingsTrackingScreen(navController: BackStack<Route>) {
    Column {
        Toolbar("Tracking Settings", navController, true)
-        PreferencesScrollableColumn {
+        LazyColumn {
        }
    }
 }