Fix and setup compose previews (#5526)

2026-02-27 15:26:58 +00:00 · 2025-06-07 14:51:31 +02:00
parent 3f0eae1d5a
commit 6c2c3caf9d
13 changed files with 189 additions and 53 deletions
--- a/lawnchair/src/app/lawnchair/ui/preferences/components/controls/ClickablePreference.kt
+++ b/lawnchair/src/app/lawnchair/ui/preferences/components/controls/ClickablePreference.kt
@@ -28,7 +28,10 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
 import app.lawnchair.ui.ModalBottomSheetContent
 import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate
+import app.lawnchair.ui.theme.LawnchairTheme
 import app.lawnchair.ui.util.bottomSheetHandler
+import app.lawnchair.ui.util.preview.PreferenceGroupPreviewContainer
+import app.lawnchair.ui.util.preview.PreviewLawnchair

@Composable
 fun ClickablePreference(
@@ -90,3 +93,17 @@ fun PreferenceClickConfirmation(
        modifier = modifier,
    )
 }
+
+@PreviewLawnchair
+@Composable
+private fun ClickablePreferencePreview() {
+    LawnchairTheme {
+        PreferenceGroupPreviewContainer {
+            ClickablePreference(
+                label = "Label",
+                subtitle = "Subtitle",
+                onClick = {},
+            )
+        }
+    }
+}
--- a/lawnchair/src/app/lawnchair/ui/preferences/components/controls/PreferenceCategory.kt
+++ b/lawnchair/src/app/lawnchair/ui/preferences/components/controls/PreferenceCategory.kt
@@ -33,7 +33,7 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate
 import app.lawnchair.ui.theme.LawnchairTheme
-import app.lawnchair.ui.util.PreviewLawnchair
+import app.lawnchair.ui.util.preview.PreviewLawnchair
 import com.android.launcher3.R

@Composable
--- a/lawnchair/src/app/lawnchair/ui/preferences/components/controls/SliderPreference.kt
+++ b/lawnchair/src/app/lawnchair/ui/preferences/components/controls/SliderPreference.kt
@@ -36,10 +36,15 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
 import app.lawnchair.preferences.PreferenceAdapter
 import app.lawnchair.preferences.rememberTransformAdapter
 import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate
+import app.lawnchair.ui.theme.LawnchairTheme
+import app.lawnchair.ui.util.preview.PreferenceGroupPreviewContainer
+import app.lawnchair.ui.util.preview.PreviewLawnchair
 import com.android.launcher3.R
 import kotlin.math.roundToInt

@@ -80,10 +85,36 @@ fun SliderPreference(
    showUnit: String = "",
 ) {
    var adapterValue by adapter
-    var sliderValue by remember { mutableFloatStateOf(adapterValue) }

-    DisposableEffect(adapterValue) {
-        sliderValue = adapterValue
+    SliderPreference(
+        label = label,
+        value = adapterValue,
+        onValueChangeFinished = { newValue ->
+            adapterValue = newValue
+        },
+        valueRange = valueRange,
+        step = step,
+        modifier = modifier,
+        showAsPercentage = showAsPercentage,
+        showUnit = showUnit,
+    )
+}
+
+@Composable
+private fun SliderPreference(
+    label: String,
+    value: Float,
+    onValueChangeFinished: (Float) -> Unit,
+    valueRange: ClosedFloatingPointRange<Float>,
+    step: Float,
+    modifier: Modifier = Modifier,
+    showAsPercentage: Boolean = false,
+    showUnit: String = "",
+) {
+    var sliderValue by remember { mutableFloatStateOf(value) }
+
+    DisposableEffect(value) {
+        sliderValue = value
        onDispose { }
    }

@@ -126,7 +157,7 @@ fun SliderPreference(
            Slider(
                value = sliderValue,
                onValueChange = { newValue -> sliderValue = newValue },
-                onValueChangeFinished = { adapterValue = sliderValue },
+                onValueChangeFinished = { onValueChangeFinished(sliderValue) },
                valueRange = valueRange,
                steps = getSteps(valueRange, step),
                modifier = Modifier
@@ -159,3 +190,26 @@ fun snapSliderValue(start: Float, value: Float, step: Float): Float {
    val snappedDistance = stepsFromStart * step
    return start + snappedDistance
 }
+
+@PreviewLawnchair
+@Composable
+private fun SliderPreferencePreview(
+    @PreviewParameter(SliderPreferencePreviewParameterProvider::class) sliderValue: Float,
+) {
+    LawnchairTheme {
+        PreferenceGroupPreviewContainer {
+            SliderPreference(
+                label = "Label",
+                value = sliderValue,
+                onValueChangeFinished = {},
+                valueRange = 0f..1f,
+                step = 0.1f,
+                showAsPercentage = true,
+            )
+        }
+    }
+}
+
+private class SliderPreferencePreviewParameterProvider : PreviewParameterProvider<Float> {
+    override val values = sequenceOf(0f, 0.25f, 0.5f, 0.75f, 1f)
+}
--- a/lawnchair/src/app/lawnchair/ui/preferences/components/controls/SwitchPreference.kt
+++ b/lawnchair/src/app/lawnchair/ui/preferences/components/controls/SwitchPreference.kt
@@ -30,12 +30,15 @@ import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
 import app.lawnchair.preferences.PreferenceAdapter
 import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate
 import app.lawnchair.ui.theme.LawnchairTheme
 import app.lawnchair.ui.theme.dividerColor
-import app.lawnchair.ui.util.PreviewLawnchair
+import app.lawnchair.ui.util.preview.PreferenceGroupPreviewContainer
+import app.lawnchair.ui.util.preview.PreviewLawnchair

@Composable
 fun SwitchPreference(
@@ -118,13 +121,21 @@ fun SwitchPreference(

@PreviewLawnchair
@Composable
-private fun SwitchPreferencePreview() {
+private fun SwitchPreferencePreview(
+    @PreviewParameter(SwitchPreferencePreviewParameterProvider::class) checked: Boolean,
+) {
    LawnchairTheme {
-        SwitchPreference(
-            checked = true,
-            onCheckedChange = {},
-            label = "Example switch",
-            description = "Sample description text",
-        )
+        PreferenceGroupPreviewContainer {
+            SwitchPreference(
+                checked = checked,
+                onCheckedChange = {},
+                label = "Label",
+                description = "Description",
+            )
+        }
    }
 }
+
+private class SwitchPreferencePreviewParameterProvider : PreviewParameterProvider<Boolean> {
+    override val values = sequenceOf(true, false)
+}
--- a/lawnchair/src/app/lawnchair/ui/preferences/components/controls/TextPreference.kt
+++ b/lawnchair/src/app/lawnchair/ui/preferences/components/controls/TextPreference.kt
@@ -19,7 +19,10 @@ import androidx.compose.ui.unit.dp
 import app.lawnchair.preferences.PreferenceAdapter
 import app.lawnchair.ui.ModalBottomSheetContent
 import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate
+import app.lawnchair.ui.theme.LawnchairTheme
 import app.lawnchair.ui.util.bottomSheetHandler
+import app.lawnchair.ui.util.preview.PreferenceGroupPreviewContainer
+import app.lawnchair.ui.util.preview.PreviewLawnchair

@Composable
 fun TextPreference(
@@ -106,3 +109,17 @@ fun TextPreferenceDialog(
        },
    )
 }
+
+@PreviewLawnchair
+@Composable
+private fun TextPreferencePreview() {
+    LawnchairTheme {
+        PreferenceGroupPreviewContainer {
+            TextPreference(
+                value = "Value",
+                onChange = {},
+                label = "Label",
+            )
+        }
+    }
+}
--- a/lawnchair/src/app/lawnchair/ui/preferences/components/controls/WarningPreference.kt
+++ b/lawnchair/src/app/lawnchair/ui/preferences/components/controls/WarningPreference.kt
@@ -8,6 +8,9 @@ import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate
+import app.lawnchair.ui.theme.LawnchairTheme
+import app.lawnchair.ui.util.preview.PreferenceGroupPreviewContainer
+import app.lawnchair.ui.util.preview.PreviewLawnchair

@Composable
 fun WarningPreference(
@@ -32,3 +35,15 @@ fun WarningPreference(
        },
    )
 }
+
+@PreviewLawnchair
+@Composable
+private fun WarningPreferencePreview() {
+    LawnchairTheme {
+        PreferenceGroupPreviewContainer {
+            WarningPreference(
+                text = "Text",
+            )
+        }
+    }
+}
--- a/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceSearchScaffold.kt
+++ b/lawnchair/src/app/lawnchair/ui/preferences/components/layout/PreferenceSearchScaffold.kt
@@ -39,7 +39,7 @@ import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import app.lawnchair.ui.theme.LawnchairTheme
-import app.lawnchair.ui.util.PreviewLawnchair
+import app.lawnchair.ui.util.preview.PreviewLawnchair

@Composable
 fun PreferenceSearchScaffold(
--- a/lawnchair/src/app/lawnchair/ui/preferences/components/search/SearchSuggestionPreference.kt
+++ b/lawnchair/src/app/lawnchair/ui/preferences/components/search/SearchSuggestionPreference.kt
@@ -29,8 +29,8 @@ import app.lawnchair.ui.preferences.components.controls.SliderPreference
 import app.lawnchair.ui.preferences.components.layout.PreferenceTemplate
 import app.lawnchair.ui.theme.LawnchairTheme
 import app.lawnchair.ui.theme.dividerColor
-import app.lawnchair.ui.util.PreviewLawnchair
 import app.lawnchair.ui.util.bottomSheetHandler
+import app.lawnchair.ui.util.preview.PreviewLawnchair
 import com.android.launcher3.R
 import com.google.accompanist.permissions.ExperimentalPermissionsApi
 import com.google.accompanist.permissions.PermissionState
--- a/lawnchair/src/app/lawnchair/ui/preferences/destinations/QuickstepPreferences.kt
+++ b/lawnchair/src/app/lawnchair/ui/preferences/destinations/QuickstepPreferences.kt
@@ -23,7 +23,7 @@ import app.lawnchair.ui.preferences.components.controls.WarningPreference
 import app.lawnchair.ui.preferences.components.layout.ExpandAndShrink
 import app.lawnchair.ui.preferences.components.layout.PreferenceGroup
 import app.lawnchair.ui.preferences.components.layout.PreferenceLayout
-import app.lawnchair.ui.util.PreviewLawnchair
+import app.lawnchair.ui.util.preview.PreviewLawnchair
 import app.lawnchair.util.isOnePlusStock
 import com.android.launcher3.R
 import com.android.launcher3.Utilities
--- a/lawnchair/src/app/lawnchair/ui/theme/Theme.kt
+++ b/lawnchair/src/app/lawnchair/ui/theme/Theme.kt
@@ -23,6 +23,8 @@ import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.LaunchedEffect
@@ -32,6 +34,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalInspectionMode
 import app.lawnchair.preferences.observeAsState
 import app.lawnchair.preferences.preferenceManager
 import app.lawnchair.preferences2.asState
@@ -84,6 +87,8 @@ fun ComponentActivity.EdgeToEdge() {

@Composable
 fun getColorScheme(darkTheme: Boolean): ColorScheme {
+    if (LocalInspectionMode.current) return getPreviewColorScheme(darkTheme)
+
    val context = LocalContext.current
    val preferenceManager2 = preferenceManager2()
    val accentColor by preferenceManager2.accentColor.asState()
@@ -96,8 +101,16 @@ fun getColorScheme(darkTheme: Boolean): ColorScheme {
    return colorScheme.toComposeColorScheme(isDark = darkTheme)
 }

+private fun getPreviewColorScheme(darkTheme: Boolean) = if (darkTheme) {
+    darkColorScheme()
+} else {
+    lightColorScheme()
+}
+
 val isSelectedThemeDark: Boolean
    @Composable get() {
+        if (LocalInspectionMode.current) return isAutoThemeDark
+
        val themeChoice by preferenceManager().launcherTheme.observeAsState()
        return when (themeChoice) {
            ThemeChoice.LIGHT -> false
--- a/lawnchair/src/app/lawnchair/ui/util/PreviewUtils.kt
+++ b/lawnchair/src/app/lawnchair/ui/util/PreviewUtils.kt
@@ -1,37 +0,0 @@
-package app.lawnchair.ui.util
-
-import android.content.res.Configuration
-import androidx.compose.ui.tooling.preview.Preview
-import androidx.compose.ui.tooling.preview.Wallpapers
-
-@Preview(
-    apiLevel = 33,
-    name = "Normal",
-    showBackground = true,
-    wallpaper = Wallpapers.NONE,
-)
-@Preview(
-    apiLevel = 33,
-    name = "Normal Night",
-    showBackground = true,
-    uiMode = Configuration.UI_MODE_NIGHT_YES,
-    wallpaper = Wallpapers.NONE,
-)
-@Preview(
-    apiLevel = 33,
-    name = "Themed",
-    showBackground = true,
-    wallpaper = Wallpapers.RED_DOMINATED_EXAMPLE,
-)
-@Preview(
-    apiLevel = 33,
-    name = "Themed Night",
-    showBackground = true,
-    uiMode = Configuration.UI_MODE_NIGHT_YES,
-    wallpaper = Wallpapers.RED_DOMINATED_EXAMPLE,
-)
-annotation class PreviewLawnchair
-
-object PreviewUtils {
-    // todo
-}
--- a/lawnchair/src/app/lawnchair/ui/util/preview/PreferenceGroupPreviewContainer.kt
+++ b/lawnchair/src/app/lawnchair/ui/util/preview/PreferenceGroupPreviewContainer.kt
@@ -0,0 +1,28 @@
+package app.lawnchair.ui.util.preview
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import app.lawnchair.ui.preferences.components.layout.PreferenceGroup
+
+@Composable
+fun PreferenceGroupPreviewContainer(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) {
+    Box(
+        modifier = modifier.background(MaterialTheme.colorScheme.surfaceDim),
+    ) {
+        PreferenceGroup(
+            heading = "Group Heading",
+            description = "Group description",
+            showDescription = true,
+            content = content,
+            modifier = Modifier.padding(vertical = 16.dp),
+        )
+    }
+}
--- a/lawnchair/src/app/lawnchair/ui/util/preview/PreviewLawnchair.kt
+++ b/lawnchair/src/app/lawnchair/ui/util/preview/PreviewLawnchair.kt
@@ -0,0 +1,18 @@
+package app.lawnchair.ui.util.preview
+
+import android.content.res.Configuration
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.Wallpapers
+
+@Preview(
+    name = "Light",
+    showBackground = true,
+    wallpaper = Wallpapers.NONE,
+)
+@Preview(
+    name = "Dark",
+    showBackground = true,
+    uiMode = Configuration.UI_MODE_NIGHT_YES,
+    wallpaper = Wallpapers.NONE,
+)
+annotation class PreviewLawnchair