desktop config pane

shared/src/commonMain/kotlin/org/mjdev/desktop/components/background/BackgroundImage.kt

@@ -36,7 +36,7 @@ fun BackgroundImage(
     fadeInDuration: Long = 60000L / 8,
     fadeOutDuration: Long = 60000L / 4,
     backgroundColor: Color = Color.SuperDarkGray,
-    images: MutableList<Any> = mutableListOf(),
+    images: List<Any> = listOf(),
     onError: (Throwable) -> Unit = { e -> Log.e(e) },
     onChange: (bck: Any?) -> Unit = {},
 ) = withDesktopContext {

shared/src/commonMain/kotlin/org/mjdev/desktop/components/controlcenter/pages/desktop/DesktopSettingsPage.kt

@@ -0,0 +1,237 @@
+package org.mjdev.desktop.components.controlcenter.pages.desktop
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.mjdev.desktop.components.controlcenter.base.ControlCenterPage
+import org.mjdev.desktop.components.controlcenter.settings.SettingsSection
+import org.mjdev.desktop.components.controlcenter.settings.SettingsSelectRow
+import org.mjdev.desktop.components.controlcenter.settings.SettingsSliderRow
+import org.mjdev.desktop.components.controlcenter.settings.SettingsSwitchRow
+import org.mjdev.desktop.components.text.TextAny
+import org.mjdev.desktop.context.IDesktopContext
+import org.mjdev.desktop.data.ControlCenterLocation
+import org.mjdev.desktop.data.DesktopConfigStore
+import org.mjdev.desktop.data.PanelLocation
+import org.mjdev.desktop.extensions.Colors.alpha
+import org.mjdev.desktop.extensions.Compose.preview
+import org.mjdev.desktop.icons.settings.SettingsMonitor
+
+/**
+ * Control center page that configures the whole desktop. It loads the persisted
+ * [org.mjdev.desktop.data.DesktopConfigData] from `~/.mjdev/desktop/config.json`, exposes every
+ * tunable (background, panel, control center, app menu) and the background providers, and on
+ * save writes the JSON back, applies it to the live theme and rebuilds the background sources.
+ */
+@Suppress("FunctionName")
+fun DesktopSettingsPage(context: IDesktopContext) =
+    ControlCenterPage(
+        context = context,
+        icon = SettingsMonitor,
+        name = "Desktop",
+    ) {
+        val store = remember { DesktopConfigStore(currentUser) }
+        var data by remember { mutableStateOf(store.load()) }
+
+        Box(
+            modifier = Modifier.fillMaxSize(),
+        ) {
+            Column(
+                modifier =
+                    Modifier
+                        .fillMaxSize()
+                        .verticalScroll(rememberScrollState())
+                        .padding(16.dp)
+                        .padding(bottom = 56.dp),
+            ) {
+                SettingsSection(title = "Background") {
+                    SettingsSliderRow(
+                        label = "Rotation delay",
+                        value = data.backgroundRotationDelay.toFloat(),
+                        valueRange = 5_000f..600_000f,
+                        format = { "${(it / 1000f).toInt()}s" },
+                        onValueChange = { data = data.copy(backgroundRotationDelay = it.toLong()) },
+                    )
+                    data.providers.forEach { provider ->
+                        SettingsSwitchRow(
+                            label = provider.label,
+                            checked = provider.enabled,
+                            onCheckedChange = { enabled ->
+                                data =
+                                    data.copy(
+                                        providers =
+                                            data.providers
+                                                .map { p -> if (p.id == provider.id) p.copy(enabled = enabled) else p }
+                                                .toMutableList(),
+                                    )
+                            },
+                        )
+                        if (provider.enabled && provider.hasLoadCount) {
+                            SettingsSliderRow(
+                                label = "  ${provider.label} images",
+                                value = provider.loadCount.toFloat(),
+                                valueRange = 1f..50f,
+                                steps = 48,
+                                onValueChange = { count ->
+                                    data =
+                                        data.copy(
+                                            providers =
+                                                data.providers
+                                                    .map { p -> if (p.id == provider.id) p.copy(loadCount = count.toInt()) else p }
+                                                    .toMutableList(),
+                                        )
+                                },
+                            )
+                        }
+                    }
+                }
+
+                SettingsSection(title = "Panel") {
+                    SettingsSelectRow(
+                        label = "Location",
+                        selected = data.panelLocation,
+                        options = PanelLocation.entries.map { it.name },
+                        onSelected = { data = data.copy(panelLocation = it) },
+                    )
+                    SettingsSliderRow(
+                        label = "Auto-hide delay",
+                        value = data.panelHideDelay.toFloat(),
+                        valueRange = 0f..10_000f,
+                        format = { if (it <= 0f) "off" else "${(it / 1000f).toInt()}s" },
+                        onValueChange = { data = data.copy(panelHideDelay = it.toLong()) },
+                    )
+                    SettingsSliderRow(
+                        label = "Divider width",
+                        value = data.panelDividerWidth,
+                        valueRange = 0f..32f,
+                        format = { "${it.toInt()}dp" },
+                        onValueChange = { data = data.copy(panelDividerWidth = it) },
+                    )
+                    SettingsSliderRow(
+                        label = "Content padding",
+                        value = data.panelContentPadding,
+                        valueRange = 0f..32f,
+                        format = { "${it.toInt()}dp" },
+                        onValueChange = { data = data.copy(panelContentPadding = it) },
+                    )
+                }
+
+                SettingsSection(title = "Control center") {
+                    SettingsSelectRow(
+                        label = "Location",
+                        selected = data.controlCenterLocation,
+                        options = ControlCenterLocation.entries.map { it.name },
+                        onSelected = { data = data.copy(controlCenterLocation = it) },
+                    )
+                    SettingsSliderRow(
+                        label = "Auto-hide delay",
+                        value = data.controlPanelHideDelay.toFloat(),
+                        valueRange = 0f..10_000f,
+                        format = { if (it <= 0f) "off" else "${(it / 1000f).toInt()}s" },
+                        onValueChange = { data = data.copy(controlPanelHideDelay = it.toLong()) },
+                    )
+                    SettingsSliderRow(
+                        label = "Expanded width",
+                        value = data.controlCenterExpandedWidthPercent.toFloat(),
+                        valueRange = 10f..80f,
+                        steps = 69,
+                        format = { "${it.toInt()}%" },
+                        onValueChange = { data = data.copy(controlCenterExpandedWidthPercent = it.toInt()) },
+                    )
+                    SettingsSliderRow(
+                        label = "Divider width",
+                        value = data.controlCenterDividerWidth,
+                        valueRange = 0f..32f,
+                        format = { "${it.toInt()}dp" },
+                        onValueChange = { data = data.copy(controlCenterDividerWidth = it) },
+                    )
+                    SettingsSliderRow(
+                        label = "Icon size",
+                        value = data.controlCenterIconSize,
+                        valueRange = 16f..64f,
+                        format = { "${it.toInt()}dp" },
+                        onValueChange = { data = data.copy(controlCenterIconSize = it) },
+                    )
+                    SettingsSliderRow(
+                        label = "Background opacity",
+                        value = data.controlCenterBackgroundAlpha,
+                        valueRange = 0f..1f,
+                        format = { "${(it * 100).toInt()}%" },
+                        onValueChange = { data = data.copy(controlCenterBackgroundAlpha = it) },
+                    )
+                }
+
+                SettingsSection(title = "App menu") {
+                    SettingsSliderRow(
+                        label = "Min width",
+                        value = data.appMenuMinWidthRatio,
+                        valueRange = 0.1f..1f,
+                        format = { "${(it * 100).toInt()}%" },
+                        onValueChange = { data = data.copy(appMenuMinWidthRatio = it) },
+                    )
+                    SettingsSliderRow(
+                        label = "Min height",
+                        value = data.appMenuMinHeightRatio,
+                        valueRange = 0.1f..1f,
+                        format = { "${(it * 100).toInt()}%" },
+                        onValueChange = { data = data.copy(appMenuMinHeightRatio = it) },
+                    )
+                    SettingsSliderRow(
+                        label = "Outer padding",
+                        value = data.appMenuOuterPadding,
+                        valueRange = 0f..32f,
+                        format = { "${it.toInt()}dp" },
+                        onValueChange = { data = data.copy(appMenuOuterPadding = it) },
+                    )
+                }
+            }
+
+            Box(
+                modifier =
+                    Modifier
+                        .align(Alignment.BottomCenter)
+                        .fillMaxWidth()
+                        .padding(16.dp)
+                        .border(1.dp, borderColor.alpha(0.6f), RoundedCornerShape(8.dp))
+                        .clickable {
+                            store.save(data)
+                            data.applyTo(currentUser.theme)
+                            runAsync {
+                                currentUser.config.reloadBackgrounds(data.buildProviders(currentUser))
+                            }
+                        }.padding(vertical = 12.dp),
+                contentAlignment = Alignment.Center,
+            ) {
+                TextAny(
+                    text = "Save & apply",
+                    color = textColor,
+                    fontSize = 16.sp,
+                )
+            }
+        }
+    }
+
+@Preview
+@Composable
+fun PreviewDesktopSettingsPage() =
+    preview {
+        DesktopSettingsPage(context).Render()
+    }

shared/src/commonMain/kotlin/org/mjdev/desktop/components/controlcenter/settings/SettingsSection.kt

@@ -0,0 +1,55 @@
+package org.mjdev.desktop.components.controlcenter.settings
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.mjdev.desktop.components.text.TextAny
+import org.mjdev.desktop.context.DesktopContextScope.Companion.withDesktopContext
+import org.mjdev.desktop.extensions.Colors.alpha
+import org.mjdev.desktop.extensions.Compose.preview
+
+/** A titled, rounded container that groups related desktop settings rows. */
+@Suppress("FunctionName")
+@Composable
+fun SettingsSection(
+    title: String,
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit,
+) = withDesktopContext {
+    Column(
+        modifier =
+            modifier
+                .fillMaxWidth()
+                .padding(vertical = 8.dp)
+                .clip(RoundedCornerShape(12.dp))
+                .background(backgroundColor.alpha(0.3f))
+                .padding(12.dp),
+    ) {
+        TextAny(
+            modifier = Modifier.padding(bottom = 8.dp),
+            text = title,
+            color = textColor,
+            fontSize = 16.sp,
+            fontWeight = FontWeight.Bold,
+        )
+        content()
+    }
+}
+
+@Preview
+@Composable
+fun PreviewSettingsSection() =
+    preview {
+        SettingsSection(title = "Background") {
+            TextAny(text = "content")
+        }
+    }

shared/src/commonMain/kotlin/org/mjdev/desktop/components/controlcenter/settings/SettingsSelectRow.kt

@@ -0,0 +1,108 @@
+package org.mjdev.desktop.components.controlcenter.settings
+
+import androidx.compose.foundation.BorderStroke
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.DropdownMenu
+import androidx.compose.material3.DropdownMenuItem
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.mjdev.desktop.components.text.TextAny
+import org.mjdev.desktop.context.DesktopContextScope.Companion.withDesktopContext
+import org.mjdev.desktop.extensions.Colors.alpha
+import org.mjdev.desktop.extensions.Compose.preview
+
+/** A labelled single-choice setting that opens a dropdown of [options]. */
+@Suppress("FunctionName")
+@Composable
+fun SettingsSelectRow(
+    label: String,
+    selected: String,
+    options: List<String>,
+    modifier: Modifier = Modifier,
+    onSelected: (String) -> Unit,
+) = withDesktopContext {
+    var expanded by remember { mutableStateOf(false) }
+    Row(
+        modifier =
+            modifier
+                .fillMaxWidth()
+                .padding(vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        TextAny(
+            text = label,
+            color = textColor,
+            fontSize = 14.sp,
+        )
+        Box {
+            Box(
+                modifier =
+                    Modifier
+                        .clip(RoundedCornerShape(8.dp))
+                        .background(backgroundColor)
+                        .border(1.dp, borderColor.alpha(0.5f), RoundedCornerShape(8.dp))
+                        .clickable { expanded = true }
+                        .padding(horizontal = 12.dp, vertical = 6.dp),
+            ) {
+                TextAny(
+                    text = selected,
+                    color = textColor,
+                    fontSize = 14.sp,
+                )
+            }
+            DropdownMenu(
+                expanded = expanded,
+                onDismissRequest = { expanded = false },
+                shape = RoundedCornerShape(8.dp),
+                containerColor = backgroundColor,
+                border = BorderStroke(1.dp, borderColor.alpha(0.5f)),
+            ) {
+                options.forEach { option ->
+                    DropdownMenuItem(
+                        text = {
+                            TextAny(
+                                text = option,
+                                color = textColor,
+                                fontSize = 14.sp,
+                            )
+                        },
+                        onClick = {
+                            expanded = false
+                            onSelected(option)
+                        },
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PreviewSettingsSelectRow() =
+    preview {
+        SettingsSelectRow(
+            label = "Panel location",
+            selected = "Bottom",
+            options = listOf("Bottom", "Top", "Left", "Right"),
+            onSelected = {},
+        )
+    }

shared/src/commonMain/kotlin/org/mjdev/desktop/components/controlcenter/settings/SettingsSliderRow.kt

@@ -0,0 +1,85 @@
+package org.mjdev.desktop.components.controlcenter.settings
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Slider
+import androidx.compose.material3.SliderDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.mjdev.desktop.components.text.TextAny
+import org.mjdev.desktop.context.DesktopContextScope.Companion.withDesktopContext
+import org.mjdev.desktop.extensions.Colors.alpha
+import org.mjdev.desktop.extensions.Compose.preview
+
+/**
+ * A labelled numeric setting backed by a slider. [valueRange] bounds the value and [steps]
+ * controls discrete stops (0 = continuous). [format] renders the current value next to the label.
+ */
+@Suppress("FunctionName")
+@Composable
+fun SettingsSliderRow(
+    label: String,
+    value: Float,
+    valueRange: ClosedFloatingPointRange<Float>,
+    modifier: Modifier = Modifier,
+    steps: Int = 0,
+    enabled: Boolean = true,
+    format: (Float) -> String = { it.toInt().toString() },
+    onValueChange: (Float) -> Unit,
+) = withDesktopContext {
+    Column(
+        modifier =
+            modifier
+                .fillMaxWidth()
+                .padding(vertical = 6.dp),
+    ) {
+        Row(
+            modifier = Modifier.fillMaxWidth(),
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.SpaceBetween,
+        ) {
+            TextAny(
+                text = label,
+                color = if (enabled) textColor else textColor.alpha(0.4f),
+                fontSize = 14.sp,
+            )
+            TextAny(
+                text = format(value),
+                color = textColor.alpha(0.7f),
+                fontSize = 14.sp,
+            )
+        }
+        Slider(
+            value = value,
+            onValueChange = onValueChange,
+            valueRange = valueRange,
+            steps = steps,
+            enabled = enabled,
+            colors =
+                SliderDefaults.colors(
+                    thumbColor = textColor,
+                    activeTrackColor = textColor.alpha(0.7f),
+                    inactiveTrackColor = backgroundColor.alpha(0.6f),
+                ),
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PreviewSettingsSliderRow() =
+    preview {
+        SettingsSliderRow(
+            label = "Rotation delay",
+            value = 60f,
+            valueRange = 5f..600f,
+            onValueChange = {},
+        )
+    }

shared/src/commonMain/kotlin/org/mjdev/desktop/components/controlcenter/settings/SettingsSwitchRow.kt

@@ -0,0 +1,67 @@
+package org.mjdev.desktop.components.controlcenter.settings
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Switch
+import androidx.compose.material3.SwitchDefaults
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import org.jetbrains.compose.ui.tooling.preview.Preview
+import org.mjdev.desktop.components.text.TextAny
+import org.mjdev.desktop.context.DesktopContextScope.Companion.withDesktopContext
+import org.mjdev.desktop.extensions.Colors.alpha
+import org.mjdev.desktop.extensions.Compose.preview
+
+/** A labelled on/off setting backed by a Material switch. */
+@Suppress("FunctionName")
+@Composable
+fun SettingsSwitchRow(
+    label: String,
+    checked: Boolean,
+    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
+    onCheckedChange: (Boolean) -> Unit,
+) = withDesktopContext {
+    Row(
+        modifier =
+            modifier
+                .fillMaxWidth()
+                .padding(vertical = 6.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        TextAny(
+            text = label,
+            color = if (enabled) textColor else textColor.alpha(0.4f),
+            fontSize = 14.sp,
+        )
+        Switch(
+            checked = checked,
+            enabled = enabled,
+            onCheckedChange = onCheckedChange,
+            colors =
+                SwitchDefaults.colors(
+                    checkedThumbColor = textColor,
+                    checkedTrackColor = textColor.alpha(0.4f),
+                    uncheckedThumbColor = textColor.alpha(0.6f),
+                    uncheckedTrackColor = backgroundColor.alpha(0.6f),
+                ),
+        )
+    }
+}
+
+@Preview
+@Composable
+fun PreviewSettingsSwitchRow() =
+    preview {
+        SettingsSwitchRow(
+            label = "Local folder",
+            checked = true,
+            onCheckedChange = {},
+        )
+    }

shared/src/commonMain/kotlin/org/mjdev/desktop/context/IDesktopContext.kt

@@ -10,6 +10,7 @@ import kotlinx.coroutines.launch
 import org.mjdev.desktop.components.controlcenter.pages.about.AboutPage
 import org.mjdev.desktop.components.controlcenter.pages.ai.AIPage
 import org.mjdev.desktop.components.controlcenter.pages.bluetooth.BluetoothSettingsPage
+import org.mjdev.desktop.components.controlcenter.pages.desktop.DesktopSettingsPage
 import org.mjdev.desktop.components.controlcenter.pages.devices.DevicesPage
 import org.mjdev.desktop.components.controlcenter.pages.display.DisplaySettingsPage
 import org.mjdev.desktop.components.controlcenter.pages.ethernet.EthSettingsPage
@@ -54,6 +55,7 @@ abstract class IDesktopContext : IDisposable {
             SoundSettingsPage(this),
             BluetoothSettingsPage(this),
             DisplaySettingsPage(this),
+            DesktopSettingsPage(this),
             DevicesPage(this),
             RemotesSettingsPage(this),
             ThemeSettingsPage(this),

shared/src/commonMain/kotlin/org/mjdev/desktop/data/DesktopConfig.kt

@@ -7,9 +7,6 @@ import kotlinx.coroutines.launch
 import org.mjdev.desktop.helpers.compose.ImagesProvider
 import org.mjdev.desktop.interfaces.ITheme
 import org.mjdev.desktop.interfaces.IUser
-import org.mjdev.desktop.providers.background.ProviderErzvo
-import org.mjdev.desktop.providers.background.ProviderLocal
-import org.mjdev.desktop.providers.background.ProviderSmug
 
 @Suppress("MemberVisibilityCanBePrivate", "unused")
 class DesktopConfig(
@@ -43,26 +40,33 @@ class DesktopConfig(
             }
         }
 
-    private fun addBackground(provider: ImagesProvider) =
+    fun addBackground(provider: ImagesProvider) =
         addBackground {
             provider.get()
         }
 
+    /** Clears the current wallpapers and re-populates them from the given [providers]. */
+    fun reloadBackgrounds(providers: List<ImagesProvider>) {
+        desktopBackgrounds.clear()
+        providers.forEach { provider -> addBackground(provider) }
+    }
+
     companion object {
         val configCache = mutableMapOf<String, DesktopConfig>()
 
-        private val DEFAULT =
-            DesktopConfig {
-//            addBackground(ProviderSmug())
-//            addBackground(ProviderErzvo())
-            }
+        private val DEFAULT = DesktopConfig {}
 
-        // todo load from user settings
+        // Loads the per-user desktop config from ~/.mjdev/desktop/config.json (defaults on first
+        // run), applies the persisted tunables to the theme and populates the enabled background
+        // providers.
         fun load(user: IUser): DesktopConfig =
             configCache[user.userName] ?: DEFAULT.apply {
-                theme = ITheme.load(user)
+                val themeForUser = ITheme.load(user)
+                val configData = DesktopConfigStore(user).load()
+                configData.applyTo(themeForUser)
+                theme = themeForUser
                 configCache[user.userName] = this
-                addBackground(ProviderLocal(user))
+                reloadBackgrounds(configData.buildProviders(user))
             }
     }
 }

shared/src/commonMain/kotlin/org/mjdev/desktop/data/DesktopConfigData.kt

@@ -0,0 +1,101 @@
+package org.mjdev.desktop.data
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.DpSize
+import androidx.compose.ui.unit.dp
+import org.mjdev.desktop.helpers.compose.ImagesProvider
+import org.mjdev.desktop.interfaces.ITheme
+import org.mjdev.desktop.interfaces.IUser
+import kotlin.math.roundToInt
+
+/**
+ * Serializable snapshot of the whole desktop configuration — every tunable that the desktop
+ * shell exposes ([ITheme]) plus the background [ProviderConfig] list. Persisted as JSON via
+ * [DesktopConfigStore] at `~/.mjdev/desktop/config.json` and bridged to the live [ITheme]
+ * with [applyTo] / [fromTheme].
+ *
+ * Colors are stored as packed ARGB ints and Dp values as their raw float so the JSON stays
+ * plain and portable.
+ */
+@Suppress("MemberVisibilityCanBePrivate", "unused")
+data class DesktopConfigData(
+    // background
+    var backgroundColorArgb: Int = Color(0xFF202020).toArgbInt(),
+    var backgroundRotationDelay: Long = 60_000L,
+    // panel
+    var panelLocation: String = PanelLocation.Bottom.name,
+    var panelDividerWidth: Float = 16f,
+    var panelContentPadding: Float = 4f,
+    var panelHideDelay: Long = 2_000L,
+    // control center
+    var controlCenterLocation: String = ControlCenterLocation.Right.name,
+    var controlPanelHideDelay: Long = 2_000L,
+    var controlCenterExpandedWidthPercent: Int = 25,
+    var controlCenterDividerWidth: Float = 4f,
+    var controlCenterIconSize: Float = 32f,
+    var controlCenterBackgroundAlpha: Float = 0.6f,
+    // app menu
+    var appMenuMinWidthRatio: Float = 0.3f,
+    var appMenuMinHeightRatio: Float = 0.8f,
+    var appMenuOuterPadding: Float = 2f,
+    // background sources
+    var providers: MutableList<ProviderConfig> = ProviderConfig.defaults(),
+) {
+    /** Writes every value back onto the live [theme] so the running desktop picks them up. */
+    fun applyTo(theme: ITheme) {
+        theme.backgroundColor = Color(backgroundColorArgb)
+        theme.backgroundRotationDelay = backgroundRotationDelay
+        theme.panelLocation = panelLocation.toEnum(PanelLocation.Bottom)
+        theme.panelDividerWidth = panelDividerWidth.dp
+        theme.panelContentPadding = panelContentPadding.dp
+        theme.panelHideDelay = panelHideDelay
+        theme.controlCenterLocation = controlCenterLocation.toEnum(ControlCenterLocation.Right)
+        theme.controlPanelHideDelay = controlPanelHideDelay
+        theme.controlCenterExpandedWidthPercent = controlCenterExpandedWidthPercent
+        theme.controlCenterDividerWidth = controlCenterDividerWidth.dp
+        theme.controlCenterIconSize = DpSize(controlCenterIconSize.dp, controlCenterIconSize.dp)
+        theme.controlCenterBackgroundAlpha = controlCenterBackgroundAlpha
+        theme.appMenuMinWidthRatio = appMenuMinWidthRatio
+        theme.appMenuMinHeightRatio = appMenuMinHeightRatio
+        theme.appMenuOuterPadding = appMenuOuterPadding.dp
+    }
+
+    /** Builds the enabled background providers for this config. */
+    fun buildProviders(user: IUser): List<ImagesProvider> = providers.mapNotNull { it.build(user) }
+
+    private inline fun <reified T : Enum<T>> String.toEnum(default: T): T = enumValues<T>().firstOrNull { it.name == this } ?: default
+
+    companion object {
+        /** Snapshots the current live [theme] into a persistable config, keeping [providers]. */
+        fun fromTheme(
+            theme: ITheme,
+            providers: MutableList<ProviderConfig> = ProviderConfig.defaults(),
+        ): DesktopConfigData =
+            DesktopConfigData(
+                backgroundColorArgb = theme.backgroundColor.toArgbInt(),
+                backgroundRotationDelay = theme.backgroundRotationDelay,
+                panelLocation = theme.panelLocation.name,
+                panelDividerWidth = theme.panelDividerWidth.value,
+                panelContentPadding = theme.panelContentPadding.value,
+                panelHideDelay = theme.panelHideDelay,
+                controlCenterLocation = theme.controlCenterLocation.name,
+                controlPanelHideDelay = theme.controlPanelHideDelay,
+                controlCenterExpandedWidthPercent = theme.controlCenterExpandedWidthPercent,
+                controlCenterDividerWidth = theme.controlCenterDividerWidth.value,
+                controlCenterIconSize = theme.controlCenterIconSize.width.value,
+                controlCenterBackgroundAlpha = theme.controlCenterBackgroundAlpha,
+                appMenuMinWidthRatio = theme.appMenuMinWidthRatio,
+                appMenuMinHeightRatio = theme.appMenuMinHeightRatio,
+                appMenuOuterPadding = theme.appMenuOuterPadding.value,
+                providers = providers,
+            )
+
+        private fun Color.toArgbInt(): Int {
+            val a = (alpha * 255f).roundToInt() and 0xFF
+            val r = (red * 255f).roundToInt() and 0xFF
+            val g = (green * 255f).roundToInt() and 0xFF
+            val b = (blue * 255f).roundToInt() and 0xFF
+            return (a shl 24) or (r shl 16) or (g shl 8) or b
+        }
+    }
+}

shared/src/commonMain/kotlin/org/mjdev/desktop/data/DesktopConfigStore.kt

@@ -0,0 +1,53 @@
+package org.mjdev.desktop.data
+
+import okio.Path
+import org.mjdev.desktop.extensions.PathExt.exists
+import org.mjdev.desktop.extensions.PathExt.mkdirs
+import org.mjdev.desktop.extensions.PathExt.parentFile
+import org.mjdev.desktop.extensions.PathExt.text
+import org.mjdev.desktop.extensions.PathExt.writeText
+import org.mjdev.desktop.helpers.generic.JsonHelper.fromJson
+import org.mjdev.desktop.helpers.generic.JsonHelper.toJson
+import org.mjdev.desktop.interfaces.IUser
+import org.mjdev.desktop.log.Log
+
+/**
+ * Reads and writes the whole [DesktopConfigData] as JSON at `~/.mjdev/desktop/config.json`.
+ * A missing or corrupt file falls back to defaults, so the desktop always has a valid config.
+ */
+@Suppress("MemberVisibilityCanBePrivate", "unused")
+class DesktopConfigStore(
+    private val user: IUser,
+) {
+    val configFile: Path =
+        user.homeDir
+            .resolve(CONFIG_DIR_NAME)
+            .resolve(CONFIG_SUBDIR_NAME)
+            .resolve(CONFIG_FILE_NAME)
+
+    fun load(): DesktopConfigData =
+        runCatching {
+            if (configFile.exists) {
+                fromJson<DesktopConfigData>(configFile.text)
+            } else {
+                null
+            }
+        }.onFailure { e ->
+            Log.e(e)
+        }.getOrNull() ?: DesktopConfigData()
+
+    fun save(data: DesktopConfigData) =
+        runCatching {
+            configFile.parentFile.mkdirs()
+            configFile.writeText(data.toJson())
+            Log.d("Desktop config saved to $configFile")
+        }.onFailure { e ->
+            Log.e(e)
+        }.let {}
+
+    companion object {
+        const val CONFIG_DIR_NAME = ".mjdev"
+        const val CONFIG_SUBDIR_NAME = "desktop"
+        const val CONFIG_FILE_NAME = "config.json"
+    }
+}

shared/src/commonMain/kotlin/org/mjdev/desktop/data/ProviderConfig.kt

@@ -0,0 +1,67 @@
+package org.mjdev.desktop.data
+
+import org.mjdev.desktop.helpers.compose.ImagesProvider
+import org.mjdev.desktop.interfaces.IUser
+import org.mjdev.desktop.providers.background.ProviderErzvo
+import org.mjdev.desktop.providers.background.ProviderLocal
+import org.mjdev.desktop.providers.background.ProviderSmug
+
+/**
+ * Persisted configuration of a single background [ImagesProvider]. Stored in the desktop
+ * config JSON so the user can enable/disable and tune each provider from the control center.
+ */
+@Suppress("MemberVisibilityCanBePrivate", "unused")
+data class ProviderConfig(
+    val id: String,
+    var enabled: Boolean = false,
+    var loadCount: Int = DEFAULT_LOAD_COUNT,
+) {
+    /** Human-readable label for the provider, resolved from its [id]. */
+    val label: String
+        get() = Provider.byId(id)?.label ?: id
+
+    /** Whether this provider exposes a tunable load-count (remote providers do, local does not). */
+    val hasLoadCount: Boolean
+        get() = Provider.byId(id)?.hasLoadCount ?: false
+
+    /** Builds the live [ImagesProvider] for this config, or null when disabled / unknown. */
+    fun build(user: IUser): ImagesProvider? {
+        if (!enabled) return null
+        return when (Provider.byId(id)) {
+            Provider.Local -> ProviderLocal(user)
+            Provider.Smug -> ProviderSmug(loadCount)
+            Provider.Erzvo -> ProviderErzvo(loadCount)
+            null -> null
+        }
+    }
+
+    /** Registry of the background providers the desktop knows how to construct. */
+    enum class Provider(
+        val id: String,
+        val label: String,
+        val hasLoadCount: Boolean,
+    ) {
+        Local("local", "Local folder", false),
+        Smug("smug", "WallpaperSmug", true),
+        Erzvo("erzvo", "Erzvo", true),
+        ;
+
+        companion object {
+            fun byId(id: String): Provider? = entries.firstOrNull { it.id == id }
+        }
+    }
+
+    companion object {
+        const val DEFAULT_LOAD_COUNT = 10
+
+        /** The default provider set: local backgrounds on, remote providers off. */
+        fun defaults(): MutableList<ProviderConfig> =
+            Provider.entries
+                .map { provider ->
+                    ProviderConfig(
+                        id = provider.id,
+                        enabled = provider == Provider.Local,
+                    )
+                }.toMutableList()
+    }
+}

shared/src/desktopMain/kotlin/org/mjdev/desktop/managers/theme/linux/ThemeManagerLinux.kt

@@ -230,176 +230,176 @@ class ThemeManagerLinux(
             val backdropDarkBg = lerp(bgColor, fgColor, 0.75f)
             val backdropSelBg = bgColor.darker(0.08f)
             return """
-            @define-color accent_color ${selectedBgColor.hexRgb};
-            @define-color accent_bg_color ${selectedBgColor.hexRgb};
-            @define-color accent_fg_color ${selectedFgColor.hexRgb};
-            @define-color destructive_color ${errorBgColor.hexRgb};
-            @define-color destructive_bg_color ${errorBgColor.hexRgb};
-            @define-color destructive_fg_color ${errorFgColor.hexRgb};
-            @define-color bg_color ${bgColor.hexRgb};
-            @define-color fg_color ${fgColor.hexRgb};
-            @define-color base_color ${baseColor.hexRgb};
-            @define-color text_color ${textColor.hexRgb};
-            @define-color selected_bg_color ${selectedBgColor.hexRgb};
-            @define-color selected_fg_color ${selectedFgColor.hexRgb};
-            @define-color tooltip_bg_color ${tooltipBgColor.hexRgb};
-            @define-color tooltip_fg_color ${tooltipFgColor.hexRgb};
-            @define-color info_fg_color ${infoFgColor.hexRgb};
-            @define-color info_bg_color ${infoBgColor.hexRgb};
-            @define-color warning_fg_color ${warningFgColor.hexRgb};
-            @define-color warning_bg_color ${warningBgColor.hexRgb};
-            @define-color question_fg_color ${questionFgColor.hexRgb};
-            @define-color question_bg_color ${questionBgColor.hexRgb};
-            @define-color error_fg_color ${errorFgColor.hexRgb};
-            @define-color error_bg_color ${errorBgColor.hexRgb};
-            @define-color success_color ${successBgColor.hexRgb};
-            @define-color error_color ${errorBgColor.hexRgb};
-            @define-color dark_bg_color ${bgColor.hexRgb};
-            @define-color dark_fg_color ${fgColor.hexRgb};
-            @define-color window_bg_color ${bgColor.hexRgb};
-            @define-color window_fg_color ${fgColor.hexRgb};
-            @define-color view_bg_color ${bgColor.hexRgb};
-            @define-color view_fg_color ${textColor.hexRgb};
-            @define-color headerbar_bg_color ${bgColor.hexRgb};
-            @define-color headerbar_fg_color ${fgColor.hexRgb};
-            @define-color headerbar_border_color ${borderColor.hexRgb};
-            @define-color headerbar_backdrop_color ${bgColor.hexRgb};
-            @define-color headerbar_shade_color ${borderColor.hexRgb};
-            @define-color card_bg_color ${bgColor.hexRgb};
-            @define-color card_fg_color ${fgColor.hexRgb};
-            @define-color card_shade_color ${borderColor.hexRgb};
-            @define-color osd_fg_color ${osdFgColor.hexRgb};
-            @define-color osd_bg_color ${osdBgColor.hexRgb};
-            @define-color osd_border_color ${borderColor.hexRgb};
-            @define-color dialog_bg_color ${bgColor.hexRgb};
-            @define-color dialog_fg_color ${fgColor.hexRgb};
-            @define-color popover_bg_color ${bgColor.hexRgb};
-            @define-color popover_fg_color ${fgColor.hexRgb};
-            @define-color link_color @selected_bg_color;
-            @define-color button_bg_color ${buttonBgColor.hexRgb};
-            @define-color notebook_button_bg_color ${buttonBgColor.hexRgb};
-            @define-color button_insensitive_bg_color ${buttonInsens.hexRgb};
-            @define-color backdrop_fg_color ${backdropFg.hexRgb};
-            @define-color backdrop_text_color ${backdropText.hexRgb};
-            @define-color backdrop_dark_fg_color ${backdropDarkFg.hexRgb};
-            @define-color backdrop_dark_bg_color ${backdropDarkBg.hexRgb};
-            @define-color backdrop_selected_bg_color ${backdropSelBg.hexRgb};
-            @define-color backdrop_selected_fg_color @fg_color;
-            @define-color focus_color ${selectedBgColor.hexRgb};
-            @define-color focus_bg_color ${bgColor.hexRgb};
-            @define-color shadow_color rgba(0, 0, 0, 0.5);
-            @define-color blue_1 #99c1f1;
-            @define-color blue_2 #62a0ea;
-            @define-color blue_3 #3584e4;
-            @define-color blue_4 #1c71d8;
-            @define-color blue_5 #1a5fb4;
-            @define-color green_1 #8ff0a4;
-            @define-color green_2 #57e389;
-            @define-color green_3 #33d17a;
-            @define-color green_4 #2ec27e;
-            @define-color green_5 #26a269;
-            @define-color yellow_1 #f9f06b;
-            @define-color yellow_2 #f8e45c;
-            @define-color yellow_3 #f6d32d;
-            @define-color yellow_4 #f5c211;
-            @define-color yellow_5 #e5a50a;
-            @define-color orange_1 #ffbe6f;
-            @define-color orange_2 #ffa348;
-            @define-color orange_3 #ff7800;
-            @define-color orange_4 #e66100;
-            @define-color orange_5 #c64600;
-            @define-color red_1 #f66151;
-            @define-color red_2 #ed333b;
-            @define-color red_3 #e01b24;
-            @define-color red_4 #c01c28;
-            @define-color red_5 #a51d2d;
-            @define-color purple_1 #dc8add;
-            @define-color purple_2 #c061cb;
-            @define-color purple_3 #9141ac;
-            @define-color purple_4 #813d9c;
-            @define-color purple_5 #613583;
-            @define-color brown_1 #cdab8f;
-            @define-color brown_2 #b5835a;
-            @define-color brown_3 #986a44;
-            @define-color brown_4 #865e3c;
-            @define-color brown_5 #63452c;
-            @define-color light_1 #ffffff;
-            @define-color light_2 #f6f5f4;
-            @define-color light_3 #deddda;
-            @define-color light_4 #c0bfbc;
-            @define-color light_5 #9a9996;
-            @define-color dark_1 #77767b;
-            @define-color dark_2 #5e5c64;
-            @define-color dark_3 #3d3846;
-            @define-color dark_4 #241f31;
-            @define-color dark_5 #000000;
-            
-            /* App content follows the wallpaper palette (compositor draws the outer frame). */
-            window {
-                background-image: none;
-                background-color: @window_bg_color;
-                border-radius: 0;
-                box-shadow: none;
-                border: none;
-                margin: 0;
-                padding: 0;
-            }
+                @define-color accent_color ${selectedBgColor.hexRgb};
+                @define-color accent_bg_color ${selectedBgColor.hexRgb};
+                @define-color accent_fg_color ${selectedFgColor.hexRgb};
+                @define-color destructive_color ${errorBgColor.hexRgb};
+                @define-color destructive_bg_color ${errorBgColor.hexRgb};
+                @define-color destructive_fg_color ${errorFgColor.hexRgb};
+                @define-color bg_color ${bgColor.hexRgb};
+                @define-color fg_color ${fgColor.hexRgb};
+                @define-color base_color ${baseColor.hexRgb};
+                @define-color text_color ${textColor.hexRgb};
+                @define-color selected_bg_color ${selectedBgColor.hexRgb};
+                @define-color selected_fg_color ${selectedFgColor.hexRgb};
+                @define-color tooltip_bg_color ${tooltipBgColor.hexRgb};
+                @define-color tooltip_fg_color ${tooltipFgColor.hexRgb};
+                @define-color info_fg_color ${infoFgColor.hexRgb};
+                @define-color info_bg_color ${infoBgColor.hexRgb};
+                @define-color warning_fg_color ${warningFgColor.hexRgb};
+                @define-color warning_bg_color ${warningBgColor.hexRgb};
+                @define-color question_fg_color ${questionFgColor.hexRgb};
+                @define-color question_bg_color ${questionBgColor.hexRgb};
+                @define-color error_fg_color ${errorFgColor.hexRgb};
+                @define-color error_bg_color ${errorBgColor.hexRgb};
+                @define-color success_color ${successBgColor.hexRgb};
+                @define-color error_color ${errorBgColor.hexRgb};
+                @define-color dark_bg_color ${bgColor.hexRgb};
+                @define-color dark_fg_color ${fgColor.hexRgb};
+                @define-color window_bg_color ${bgColor.hexRgb};
+                @define-color window_fg_color ${fgColor.hexRgb};
+                @define-color view_bg_color ${bgColor.hexRgb};
+                @define-color view_fg_color ${textColor.hexRgb};
+                @define-color headerbar_bg_color ${bgColor.hexRgb};
+                @define-color headerbar_fg_color ${fgColor.hexRgb};
+                @define-color headerbar_border_color ${borderColor.hexRgb};
+                @define-color headerbar_backdrop_color ${bgColor.hexRgb};
+                @define-color headerbar_shade_color ${borderColor.hexRgb};
+                @define-color card_bg_color ${bgColor.hexRgb};
+                @define-color card_fg_color ${fgColor.hexRgb};
+                @define-color card_shade_color ${borderColor.hexRgb};
+                @define-color osd_fg_color ${osdFgColor.hexRgb};
+                @define-color osd_bg_color ${osdBgColor.hexRgb};
+                @define-color osd_border_color ${borderColor.hexRgb};
+                @define-color dialog_bg_color ${bgColor.hexRgb};
+                @define-color dialog_fg_color ${fgColor.hexRgb};
+                @define-color popover_bg_color ${bgColor.hexRgb};
+                @define-color popover_fg_color ${fgColor.hexRgb};
+                @define-color link_color @selected_bg_color;
+                @define-color button_bg_color ${buttonBgColor.hexRgb};
+                @define-color notebook_button_bg_color ${buttonBgColor.hexRgb};
+                @define-color button_insensitive_bg_color ${buttonInsens.hexRgb};
+                @define-color backdrop_fg_color ${backdropFg.hexRgb};
+                @define-color backdrop_text_color ${backdropText.hexRgb};
+                @define-color backdrop_dark_fg_color ${backdropDarkFg.hexRgb};
+                @define-color backdrop_dark_bg_color ${backdropDarkBg.hexRgb};
+                @define-color backdrop_selected_bg_color ${backdropSelBg.hexRgb};
+                @define-color backdrop_selected_fg_color @fg_color;
+                @define-color focus_color ${selectedBgColor.hexRgb};
+                @define-color focus_bg_color ${bgColor.hexRgb};
+                @define-color shadow_color rgba(0, 0, 0, 0.5);
+                @define-color blue_1 #99c1f1;
+                @define-color blue_2 #62a0ea;
+                @define-color blue_3 #3584e4;
+                @define-color blue_4 #1c71d8;
+                @define-color blue_5 #1a5fb4;
+                @define-color green_1 #8ff0a4;
+                @define-color green_2 #57e389;
+                @define-color green_3 #33d17a;
+                @define-color green_4 #2ec27e;
+                @define-color green_5 #26a269;
+                @define-color yellow_1 #f9f06b;
+                @define-color yellow_2 #f8e45c;
+                @define-color yellow_3 #f6d32d;
+                @define-color yellow_4 #f5c211;
+                @define-color yellow_5 #e5a50a;
+                @define-color orange_1 #ffbe6f;
+                @define-color orange_2 #ffa348;
+                @define-color orange_3 #ff7800;
+                @define-color orange_4 #e66100;
+                @define-color orange_5 #c64600;
+                @define-color red_1 #f66151;
+                @define-color red_2 #ed333b;
+                @define-color red_3 #e01b24;
+                @define-color red_4 #c01c28;
+                @define-color red_5 #a51d2d;
+                @define-color purple_1 #dc8add;
+                @define-color purple_2 #c061cb;
+                @define-color purple_3 #9141ac;
+                @define-color purple_4 #813d9c;
+                @define-color purple_5 #613583;
+                @define-color brown_1 #cdab8f;
+                @define-color brown_2 #b5835a;
+                @define-color brown_3 #986a44;
+                @define-color brown_4 #865e3c;
+                @define-color brown_5 #63452c;
+                @define-color light_1 #ffffff;
+                @define-color light_2 #f6f5f4;
+                @define-color light_3 #deddda;
+                @define-color light_4 #c0bfbc;
+                @define-color light_5 #9a9996;
+                @define-color dark_1 #77767b;
+                @define-color dark_2 #5e5c64;
+                @define-color dark_3 #3d3846;
+                @define-color dark_4 #241f31;
+                @define-color dark_5 #000000;
+                
+                /* App content follows the wallpaper palette (compositor draws the outer frame). */
+                window {
+                    background-image: none;
+                    background-color: @window_bg_color;
+                    border-radius: 0;
+                    box-shadow: none;
+                    border: none;
+                    margin: 0;
+                    padding: 0;
+                }
 
-            /* Compositor draws min/max/close — hide client-side titlebuttons only. */
-            headerbar button.titlebutton,
-            headerbar .titlebutton {
-                opacity: 0;
-                min-width: 0;
-                min-height: 0;
-                padding: 0;
-                margin: 0;
-                border: none;
-            }
+                /* Compositor draws min/max/close — hide client-side titlebuttons only. */
+                headerbar button.titlebutton,
+                headerbar .titlebutton {
+                    opacity: 0;
+                    min-width: 0;
+                    min-height: 0;
+                    padding: 0;
+                    margin: 0;
+                    border: none;
+                }
 
-            window.ssd headerbar {
-                min-height: 0;
-                padding: 0;
-                margin: 0;
-                border: none;
-                box-shadow: none;
-                background-image: none;
-                background-color: @window_bg_color;
-            }
+                window.ssd headerbar {
+                    min-height: 0;
+                    padding: 0;
+                    margin: 0;
+                    border: none;
+                    box-shadow: none;
+                    background-image: none;
+                    background-color: @window_bg_color;
+                }
 
-            .titlebar, headerbar {
-                padding-top: 2px;
-                padding-bottom: 2px;
-                background-image: none;
-                background-color: @headerbar_bg_color;
-            }
+                .titlebar, headerbar {
+                    padding-top: 2px;
+                    padding-bottom: 2px;
+                    background-image: none;
+                    background-color: @headerbar_bg_color;
+                }
 
-            toolbarview,
-            .toolbarview,
-            .background {
-                background-color: @window_bg_color;
-                color: @text_color;
-            }
+                toolbarview,
+                .toolbarview,
+                .background {
+                    background-color: @window_bg_color;
+                    color: @text_color;
+                }
 
-            entry, textview, label {
-                color: @text_color;
-            }
+                entry, textview, label {
+                    color: @text_color;
+                }
 
-            button {
-                background-color: @button_bg_color;
-                opacity: 0.85;
-                margin: 2px;
-                padding: 4px;
-                min-width: 24px;
-                min-height: 24px;
-                text-shadow: none;
-                color: ${buttonFgColor.hexRgb};
-                border-radius: 8px;
-            }
+                button {
+                    background-color: @button_bg_color;
+                    opacity: 0.85;
+                    margin: 2px;
+                    padding: 4px;
+                    min-width: 24px;
+                    min-height: 24px;
+                    text-shadow: none;
+                    color: ${buttonFgColor.hexRgb};
+                    border-radius: 8px;
+                }
 
-            button:hover {
-                opacity: 1;
-            }
-            """.trimIndent()
+                button:hover {
+                    opacity: 1;
+                }
+                """.trimIndent()
         }
     }