Merge pull request #906 from atdma/main

controlcenter: many setting panes and minor features

10 files changed, 1161 insertions, 0 deletions

diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml
new file mode 100644
index 0000000..b6acbe5
--- /dev/null
+++ b/modules/controlcenter/appearance/AppearancePane.qml
@@ -0,0 +1,244 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../components"
+import "./sections"
+import "../../launcher/services"
+import qs.components
+import qs.components.controls
+import qs.components.effects
+import qs.components.containers
+import qs.components.images
+import qs.services
+import qs.config
+import qs.utils
+import Caelestia.Models
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    required property Session session
+
+    property real animDurationsScale: Config.appearance.anim.durations.scale ?? 1
+    property string fontFamilyMaterial: Config.appearance.font.family.material ?? "Material Symbols Rounded"
+    property string fontFamilyMono: Config.appearance.font.family.mono ?? "CaskaydiaCove NF"
+    property string fontFamilySans: Config.appearance.font.family.sans ?? "Rubik"
+    property real fontSizeScale: Config.appearance.font.size.scale ?? 1
+    property real paddingScale: Config.appearance.padding.scale ?? 1
+    property real roundingScale: Config.appearance.rounding.scale ?? 1
+    property real spacingScale: Config.appearance.spacing.scale ?? 1
+    property bool transparencyEnabled: Config.appearance.transparency.enabled ?? false
+    property real transparencyBase: Config.appearance.transparency.base ?? 0.85
+    property real transparencyLayers: Config.appearance.transparency.layers ?? 0.4
+    property real borderRounding: Config.border.rounding ?? 1
+    property real borderThickness: Config.border.thickness ?? 1
+
+    property bool desktopClockEnabled: Config.background.desktopClock.enabled ?? false
+    property bool backgroundEnabled: Config.background.enabled ?? true
+    property bool visualiserEnabled: Config.background.visualiser.enabled ?? false
+    property bool visualiserAutoHide: Config.background.visualiser.autoHide ?? true
+    property real visualiserRounding: Config.background.visualiser.rounding ?? 1
+    property real visualiserSpacing: Config.background.visualiser.spacing ?? 1
+
+    anchors.fill: parent
+
+    function saveConfig() {
+        Config.appearance.anim.durations.scale = root.animDurationsScale;
+
+        Config.appearance.font.family.material = root.fontFamilyMaterial;
+        Config.appearance.font.family.mono = root.fontFamilyMono;
+        Config.appearance.font.family.sans = root.fontFamilySans;
+        Config.appearance.font.size.scale = root.fontSizeScale;
+
+        Config.appearance.padding.scale = root.paddingScale;
+        Config.appearance.rounding.scale = root.roundingScale;
+        Config.appearance.spacing.scale = root.spacingScale;
+
+        Config.appearance.transparency.enabled = root.transparencyEnabled;
+        Config.appearance.transparency.base = root.transparencyBase;
+        Config.appearance.transparency.layers = root.transparencyLayers;
+
+        Config.background.desktopClock.enabled = root.desktopClockEnabled;
+        Config.background.enabled = root.backgroundEnabled;
+
+        Config.background.visualiser.enabled = root.visualiserEnabled;
+        Config.background.visualiser.autoHide = root.visualiserAutoHide;
+        Config.background.visualiser.rounding = root.visualiserRounding;
+        Config.background.visualiser.spacing = root.visualiserSpacing;
+
+        Config.border.rounding = root.borderRounding;
+        Config.border.thickness = root.borderThickness;
+
+        Config.save();
+    }
+
+    Component {
+        id: appearanceRightContentComponent
+
+        Item {
+            id: rightAppearanceFlickable
+
+            ColumnLayout {
+                id: contentLayout
+
+                anchors.fill: parent
+                spacing: 0
+
+                StyledText {
+                    Layout.alignment: Qt.AlignHCenter
+                    Layout.bottomMargin: Appearance.spacing.normal
+                    text: qsTr("Wallpaper")
+                    font.pointSize: Appearance.font.size.extraLarge
+                    font.weight: 600
+                }
+
+                Loader {
+                    id: wallpaperLoader
+                    
+                    Layout.fillWidth: true
+                    Layout.fillHeight: true
+                    Layout.bottomMargin: -Appearance.padding.large * 2
+                    
+                    asynchronous: true
+                    active: {
+                        const isActive = root.session.activeIndex === 3;
+                        const isAdjacent = Math.abs(root.session.activeIndex - 3) === 1;
+                        const splitLayout = root.children[0];
+                        const loader = splitLayout && splitLayout.rightLoader ? splitLayout.rightLoader : null;
+                        const shouldActivate = loader && loader.item !== null && (isActive || isAdjacent);
+                        return shouldActivate;
+                    }
+                    
+                    onStatusChanged: {
+                        if (status === Loader.Error) {
+                            console.error("[AppearancePane] Wallpaper loader error!");
+                        }
+                    }
+                    
+                    sourceComponent: WallpaperGrid {
+                        session: root.session
+                    }
+                }
+            }
+        }
+    }
+
+    SplitPaneLayout {
+        anchors.fill: parent
+
+        leftContent: Component {
+
+            StyledFlickable {
+                id: sidebarFlickable
+                readonly property var rootPane: root
+                flickableDirection: Flickable.VerticalFlick
+                contentHeight: sidebarLayout.height
+
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: sidebarFlickable
+                }
+
+                ColumnLayout {
+                    id: sidebarLayout
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    spacing: Appearance.spacing.small
+                    
+                    readonly property var rootPane: sidebarFlickable.rootPane
+
+                    readonly property bool allSectionsExpanded: 
+                        themeModeSection.expanded &&
+                        colorVariantSection.expanded &&
+                        colorSchemeSection.expanded &&
+                        animationsSection.expanded &&
+                        fontsSection.expanded &&
+                        scalesSection.expanded &&
+                        transparencySection.expanded &&
+                        borderSection.expanded &&
+                        backgroundSection.expanded
+
+                RowLayout {
+                    spacing: Appearance.spacing.smaller
+
+                    StyledText {
+                        text: qsTr("Appearance")
+                        font.pointSize: Appearance.font.size.large
+                        font.weight: 500
+                    }
+
+                    Item {
+                        Layout.fillWidth: true
+                    }
+
+                    IconButton {
+                        icon: sidebarLayout.allSectionsExpanded ? "unfold_less" : "unfold_more"
+                        type: IconButton.Text
+                        label.animate: true
+                        onClicked: {
+                            const shouldExpand = !sidebarLayout.allSectionsExpanded;
+                            themeModeSection.expanded = shouldExpand;
+                            colorVariantSection.expanded = shouldExpand;
+                            colorSchemeSection.expanded = shouldExpand;
+                            animationsSection.expanded = shouldExpand;
+                            fontsSection.expanded = shouldExpand;
+                            scalesSection.expanded = shouldExpand;
+                            transparencySection.expanded = shouldExpand;
+                            borderSection.expanded = shouldExpand;
+                            backgroundSection.expanded = shouldExpand;
+                        }
+                    }
+                }
+
+                ThemeModeSection {
+                    id: themeModeSection
+                }
+
+                ColorVariantSection {
+                    id: colorVariantSection
+                }
+
+                ColorSchemeSection {
+                    id: colorSchemeSection
+                }
+
+                AnimationsSection {
+                    id: animationsSection
+                    rootPane: sidebarFlickable.rootPane
+                }
+
+                FontsSection {
+                    id: fontsSection
+                    rootPane: sidebarFlickable.rootPane
+                }
+
+                ScalesSection {
+                    id: scalesSection
+                    rootPane: sidebarFlickable.rootPane
+                }
+
+                TransparencySection {
+                    id: transparencySection
+                    rootPane: sidebarFlickable.rootPane
+                }
+
+                BorderSection {
+                    id: borderSection
+                    rootPane: sidebarFlickable.rootPane
+                }
+
+                BackgroundSection {
+                    id: backgroundSection
+                    rootPane: sidebarFlickable.rootPane
+                }
+            }
+        }
+        }
+
+        rightContent: appearanceRightContentComponent
+    }
+}
diff --git a/modules/controlcenter/appearance/sections/AnimationsSection.qml b/modules/controlcenter/appearance/sections/AnimationsSection.qml
new file mode 100644
index 0000000..03fc2b1
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/AnimationsSection.qml
@@ -0,0 +1,42 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../../components"
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+CollapsibleSection {
+    id: root
+
+    required property var rootPane
+
+    title: qsTr("Animations")
+    showBackground: true
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Animation duration scale")
+            value: rootPane.animDurationsScale
+            from: 0.1
+            to: 5.0
+            decimals: 1
+            suffix: "×"
+            validator: DoubleValidator { bottom: 0.1; top: 5.0 }
+            
+            onValueModified: (newValue) => {
+                rootPane.animDurationsScale = newValue;
+                rootPane.saveConfig();
+            }
+        }
+    }
+}
+
diff --git a/modules/controlcenter/appearance/sections/BackgroundSection.qml b/modules/controlcenter/appearance/sections/BackgroundSection.qml
new file mode 100644
index 0000000..8754e73
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/BackgroundSection.qml
@@ -0,0 +1,105 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../../components"
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+CollapsibleSection {
+    id: root
+
+    required property var rootPane
+
+    title: qsTr("Background")
+    showBackground: true
+
+    SwitchRow {
+        label: qsTr("Desktop clock")
+        checked: rootPane.desktopClockEnabled
+        onToggled: checked => {
+            rootPane.desktopClockEnabled = checked;
+            rootPane.saveConfig();
+        }
+    }
+
+    SwitchRow {
+        label: qsTr("Background enabled")
+        checked: rootPane.backgroundEnabled
+        onToggled: checked => {
+            rootPane.backgroundEnabled = checked;
+            rootPane.saveConfig();
+        }
+    }
+
+    StyledText {
+        Layout.topMargin: Appearance.spacing.normal
+        text: qsTr("Visualiser")
+        font.pointSize: Appearance.font.size.larger
+        font.weight: 500
+    }
+
+    SwitchRow {
+        label: qsTr("Visualiser enabled")
+        checked: rootPane.visualiserEnabled
+        onToggled: checked => {
+            rootPane.visualiserEnabled = checked;
+            rootPane.saveConfig();
+        }
+    }
+
+    SwitchRow {
+        label: qsTr("Visualiser auto hide")
+        checked: rootPane.visualiserAutoHide
+        onToggled: checked => {
+            rootPane.visualiserAutoHide = checked;
+            rootPane.saveConfig();
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Visualiser rounding")
+            value: rootPane.visualiserRounding
+            from: 0
+            to: 10
+            stepSize: 1
+            validator: IntValidator { bottom: 0; top: 10 }
+            formatValueFunction: (val) => Math.round(val).toString()
+            parseValueFunction: (text) => parseInt(text)
+            
+            onValueModified: (newValue) => {
+                rootPane.visualiserRounding = Math.round(newValue);
+                rootPane.saveConfig();
+            }
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Visualiser spacing")
+            value: rootPane.visualiserSpacing
+            from: 0
+            to: 2
+            validator: DoubleValidator { bottom: 0; top: 2 }
+            
+            onValueModified: (newValue) => {
+                rootPane.visualiserSpacing = newValue;
+                rootPane.saveConfig();
+            }
+        }
+    }
+}
+
diff --git a/modules/controlcenter/appearance/sections/BorderSection.qml b/modules/controlcenter/appearance/sections/BorderSection.qml
new file mode 100644
index 0000000..dae26c3
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/BorderSection.qml
@@ -0,0 +1,63 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../../components"
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+CollapsibleSection {
+    id: root
+
+    required property var rootPane
+
+    title: qsTr("Border")
+    showBackground: true
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Border rounding")
+            value: rootPane.borderRounding
+            from: 0.1
+            to: 100
+            decimals: 1
+            suffix: "px"
+            validator: DoubleValidator { bottom: 0.1; top: 100 }
+            
+            onValueModified: (newValue) => {
+                rootPane.borderRounding = newValue;
+                rootPane.saveConfig();
+            }
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Border thickness")
+            value: rootPane.borderThickness
+            from: 0.1
+            to: 100
+            decimals: 1
+            suffix: "px"
+            validator: DoubleValidator { bottom: 0.1; top: 100 }
+            
+            onValueModified: (newValue) => {
+                rootPane.borderThickness = newValue;
+                rootPane.saveConfig();
+            }
+        }
+    }
+}
+
diff --git a/modules/controlcenter/appearance/sections/ColorSchemeSection.qml b/modules/controlcenter/appearance/sections/ColorSchemeSection.qml
new file mode 100644
index 0000000..c0e5eb5
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/ColorSchemeSection.qml
@@ -0,0 +1,147 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../../../launcher/services"
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+CollapsibleSection {
+    title: qsTr("Color scheme")
+    description: qsTr("Available color schemes")
+    showBackground: true
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.small / 2
+
+        Repeater {
+            model: Schemes.list
+
+            delegate: StyledRect {
+                required property var modelData
+
+                Layout.fillWidth: true
+
+                readonly property string schemeKey: `${modelData.name} ${modelData.flavour}`
+                readonly property bool isCurrent: schemeKey === Schemes.currentScheme
+
+                color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
+                radius: Appearance.rounding.normal
+                border.width: isCurrent ? 1 : 0
+                border.color: Colours.palette.m3primary
+
+                StateLayer {
+                    function onClicked(): void {
+                        const name = modelData.name;
+                        const flavour = modelData.flavour;
+                        const schemeKey = `${name} ${flavour}`;
+
+                        Schemes.currentScheme = schemeKey;
+                        Quickshell.execDetached(["caelestia", "scheme", "set", "-n", name, "-f", flavour]);
+
+                        Qt.callLater(() => {
+                            reloadTimer.restart();
+                        });
+                    }
+                }
+
+                Timer {
+                    id: reloadTimer
+                    interval: 300
+                    onTriggered: {
+                        Schemes.reload();
+                    }
+                }
+
+                RowLayout {
+                    id: schemeRow
+
+                    anchors.fill: parent
+                    anchors.margins: Appearance.padding.normal
+
+                    spacing: Appearance.spacing.normal
+
+                    StyledRect {
+                        id: preview
+
+                        Layout.alignment: Qt.AlignVCenter
+
+                        border.width: 1
+                        border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5)
+
+                        color: `#${modelData.colours?.surface}`
+                        radius: Appearance.rounding.full
+                        implicitWidth: iconPlaceholder.implicitWidth
+                        implicitHeight: iconPlaceholder.implicitWidth
+
+                        MaterialIcon {
+                            id: iconPlaceholder
+                            visible: false
+                            text: "circle"
+                            font.pointSize: Appearance.font.size.large
+                        }
+
+                        Item {
+                            anchors.top: parent.top
+                            anchors.bottom: parent.bottom
+                            anchors.right: parent.right
+
+                            implicitWidth: parent.implicitWidth / 2
+                            clip: true
+
+                            StyledRect {
+                                anchors.top: parent.top
+                                anchors.bottom: parent.bottom
+                                anchors.right: parent.right
+
+                                implicitWidth: preview.implicitWidth
+                                color: `#${modelData.colours?.primary}`
+                                radius: Appearance.rounding.full
+                            }
+                        }
+                    }
+
+                    Column {
+                        Layout.fillWidth: true
+                        spacing: 0
+
+                        StyledText {
+                            text: modelData.flavour ?? ""
+                            font.pointSize: Appearance.font.size.normal
+                        }
+
+                        StyledText {
+                            text: modelData.name ?? ""
+                            font.pointSize: Appearance.font.size.small
+                            color: Colours.palette.m3outline
+
+                            elide: Text.ElideRight
+                            anchors.left: parent.left
+                            anchors.right: parent.right
+                        }
+                    }
+
+                    Loader {
+                        active: isCurrent
+                        asynchronous: true
+
+                        sourceComponent: MaterialIcon {
+                            text: "check"
+                            color: Colours.palette.m3onSurfaceVariant
+                            font.pointSize: Appearance.font.size.large
+                        }
+                    }
+                }
+
+                implicitHeight: schemeRow.implicitHeight + Appearance.padding.normal * 2
+            }
+        }
+    }
+}
+
diff --git a/modules/controlcenter/appearance/sections/ColorVariantSection.qml b/modules/controlcenter/appearance/sections/ColorVariantSection.qml
new file mode 100644
index 0000000..98c3d7c
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/ColorVariantSection.qml
@@ -0,0 +1,92 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../../../launcher/services"
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+
+CollapsibleSection {
+    title: qsTr("Color variant")
+    description: qsTr("Material theme variant")
+    showBackground: true
+
+    ColumnLayout {
+        Layout.fillWidth: true
+        spacing: Appearance.spacing.small / 2
+
+        Repeater {
+            model: M3Variants.list
+
+            delegate: StyledRect {
+                required property var modelData
+
+                Layout.fillWidth: true
+
+                color: Qt.alpha(Colours.tPalette.m3surfaceContainer, modelData.variant === Schemes.currentVariant ? Colours.tPalette.m3surfaceContainer.a : 0)
+                radius: Appearance.rounding.normal
+                border.width: modelData.variant === Schemes.currentVariant ? 1 : 0
+                border.color: Colours.palette.m3primary
+
+                StateLayer {
+                    function onClicked(): void {
+                        const variant = modelData.variant;
+
+                        Schemes.currentVariant = variant;
+                        Quickshell.execDetached(["caelestia", "scheme", "set", "-v", variant]);
+
+                        Qt.callLater(() => {
+                            reloadTimer.restart();
+                        });
+                    }
+                }
+
+                Timer {
+                    id: reloadTimer
+                    interval: 300
+                    onTriggered: {
+                        Schemes.reload();
+                    }
+                }
+
+                RowLayout {
+                    id: variantRow
+
+                    anchors.left: parent.left
+                    anchors.right: parent.right
+                    anchors.verticalCenter: parent.verticalCenter
+                    anchors.margins: Appearance.padding.normal
+
+                    spacing: Appearance.spacing.normal
+
+                    MaterialIcon {
+                        text: modelData.icon
+                        font.pointSize: Appearance.font.size.large
+                        fill: modelData.variant === Schemes.currentVariant ? 1 : 0
+                    }
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: modelData.name
+                        font.weight: modelData.variant === Schemes.currentVariant ? 500 : 400
+                    }
+
+                    MaterialIcon {
+                        visible: modelData.variant === Schemes.currentVariant
+                        text: "check"
+                        color: Colours.palette.m3primary
+                        font.pointSize: Appearance.font.size.large
+                    }
+                }
+
+                implicitHeight: variantRow.implicitHeight + Appearance.padding.normal * 2
+            }
+        }
+    }
+}
+
diff --git a/modules/controlcenter/appearance/sections/FontsSection.qml b/modules/controlcenter/appearance/sections/FontsSection.qml
new file mode 100644
index 0000000..57b10ff
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/FontsSection.qml
@@ -0,0 +1,286 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../../components"
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+CollapsibleSection {
+    id: root
+
+    required property var rootPane
+
+    title: qsTr("Fonts")
+    showBackground: true
+
+    CollapsibleSection {
+        id: materialFontSection
+        title: qsTr("Material font family")
+        expanded: true
+        showBackground: true
+        nested: true
+
+        Loader {
+            id: materialFontLoader
+            Layout.fillWidth: true
+            Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
+            asynchronous: true
+            active: materialFontSection.expanded
+
+            sourceComponent: StyledListView {
+                id: materialFontList
+                property alias contentHeight: materialFontList.contentHeight
+
+                clip: true
+                spacing: Appearance.spacing.small / 2
+                model: Qt.fontFamilies()
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: materialFontList
+                }
+
+                delegate: StyledRect {
+                    required property string modelData
+                    required property int index
+
+                    width: ListView.view.width
+
+                    readonly property bool isCurrent: modelData === rootPane.fontFamilyMaterial
+                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
+                    radius: Appearance.rounding.normal
+                    border.width: isCurrent ? 1 : 0
+                    border.color: Colours.palette.m3primary
+
+                    StateLayer {
+                        function onClicked(): void {
+                            rootPane.fontFamilyMaterial = modelData;
+                            rootPane.saveConfig();
+                        }
+                    }
+
+                    RowLayout {
+                        id: fontFamilyMaterialRow
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.margins: Appearance.padding.normal
+
+                        spacing: Appearance.spacing.normal
+
+                        StyledText {
+                            text: modelData
+                            font.pointSize: Appearance.font.size.normal
+                        }
+
+                        Item {
+                            Layout.fillWidth: true
+                        }
+
+                        Loader {
+                            active: isCurrent
+                            asynchronous: true
+
+                            sourceComponent: MaterialIcon {
+                                text: "check"
+                                color: Colours.palette.m3onSurfaceVariant
+                                font.pointSize: Appearance.font.size.large
+                            }
+                        }
+                    }
+
+                    implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2
+                }
+            }
+        }
+    }
+
+    CollapsibleSection {
+        id: monoFontSection
+        title: qsTr("Monospace font family")
+        expanded: false
+        showBackground: true
+        nested: true
+
+        Loader {
+            Layout.fillWidth: true
+            Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
+            asynchronous: true
+            active: monoFontSection.expanded
+
+            sourceComponent: StyledListView {
+                id: monoFontList
+                property alias contentHeight: monoFontList.contentHeight
+
+                clip: true
+                spacing: Appearance.spacing.small / 2
+                model: Qt.fontFamilies()
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: monoFontList
+                }
+
+                delegate: StyledRect {
+                    required property string modelData
+                    required property int index
+
+                    width: ListView.view.width
+
+                    readonly property bool isCurrent: modelData === rootPane.fontFamilyMono
+                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
+                    radius: Appearance.rounding.normal
+                    border.width: isCurrent ? 1 : 0
+                    border.color: Colours.palette.m3primary
+
+                    StateLayer {
+                        function onClicked(): void {
+                            rootPane.fontFamilyMono = modelData;
+                            rootPane.saveConfig();
+                        }
+                    }
+
+                    RowLayout {
+                        id: fontFamilyMonoRow
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.margins: Appearance.padding.normal
+
+                        spacing: Appearance.spacing.normal
+
+                        StyledText {
+                            text: modelData
+                            font.pointSize: Appearance.font.size.normal
+                        }
+
+                        Item {
+                            Layout.fillWidth: true
+                        }
+
+                        Loader {
+                            active: isCurrent
+                            asynchronous: true
+
+                            sourceComponent: MaterialIcon {
+                                text: "check"
+                                color: Colours.palette.m3onSurfaceVariant
+                                font.pointSize: Appearance.font.size.large
+                            }
+                        }
+                    }
+
+                    implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2
+                }
+            }
+        }
+    }
+
+    CollapsibleSection {
+        id: sansFontSection
+        title: qsTr("Sans-serif font family")
+        expanded: false
+        showBackground: true
+        nested: true
+
+        Loader {
+            Layout.fillWidth: true
+            Layout.preferredHeight: item ? Math.min(item.contentHeight, 300) : 0
+            asynchronous: true
+            active: sansFontSection.expanded
+
+            sourceComponent: StyledListView {
+                id: sansFontList
+                property alias contentHeight: sansFontList.contentHeight
+
+                clip: true
+                spacing: Appearance.spacing.small / 2
+                model: Qt.fontFamilies()
+
+                StyledScrollBar.vertical: StyledScrollBar {
+                    flickable: sansFontList
+                }
+
+                delegate: StyledRect {
+                    required property string modelData
+                    required property int index
+
+                    width: ListView.view.width
+
+                    readonly property bool isCurrent: modelData === rootPane.fontFamilySans
+                    color: Qt.alpha(Colours.tPalette.m3surfaceContainer, isCurrent ? Colours.tPalette.m3surfaceContainer.a : 0)
+                    radius: Appearance.rounding.normal
+                    border.width: isCurrent ? 1 : 0
+                    border.color: Colours.palette.m3primary
+
+                    StateLayer {
+                        function onClicked(): void {
+                            rootPane.fontFamilySans = modelData;
+                            rootPane.saveConfig();
+                        }
+                    }
+
+                    RowLayout {
+                        id: fontFamilySansRow
+
+                        anchors.left: parent.left
+                        anchors.right: parent.right
+                        anchors.verticalCenter: parent.verticalCenter
+                        anchors.margins: Appearance.padding.normal
+
+                        spacing: Appearance.spacing.normal
+
+                        StyledText {
+                            text: modelData
+                            font.pointSize: Appearance.font.size.normal
+                        }
+
+                        Item {
+                            Layout.fillWidth: true
+                        }
+
+                        Loader {
+                            active: isCurrent
+                            asynchronous: true
+
+                            sourceComponent: MaterialIcon {
+                                text: "check"
+                                color: Colours.palette.m3onSurfaceVariant
+                                font.pointSize: Appearance.font.size.large
+                            }
+                        }
+                    }
+
+                    implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2
+                }
+            }
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Font size scale")
+            value: rootPane.fontSizeScale
+            from: 0.7
+            to: 1.5
+            decimals: 2
+            suffix: "×"
+            validator: DoubleValidator { bottom: 0.7; top: 1.5 }
+            
+            onValueModified: (newValue) => {
+                rootPane.fontSizeScale = newValue;
+                rootPane.saveConfig();
+            }
+        }
+    }
+}
+
diff --git a/modules/controlcenter/appearance/sections/ScalesSection.qml b/modules/controlcenter/appearance/sections/ScalesSection.qml
new file mode 100644
index 0000000..f74923b
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/ScalesSection.qml
@@ -0,0 +1,84 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../../components"
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+CollapsibleSection {
+    id: root
+
+    required property var rootPane
+
+    title: qsTr("Scales")
+    showBackground: true
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Padding scale")
+            value: rootPane.paddingScale
+            from: 0.5
+            to: 2.0
+            decimals: 1
+            suffix: "×"
+            validator: DoubleValidator { bottom: 0.5; top: 2.0 }
+            
+            onValueModified: (newValue) => {
+                rootPane.paddingScale = newValue;
+                rootPane.saveConfig();
+            }
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Rounding scale")
+            value: rootPane.roundingScale
+            from: 0.1
+            to: 5.0
+            decimals: 1
+            suffix: "×"
+            validator: DoubleValidator { bottom: 0.1; top: 5.0 }
+            
+            onValueModified: (newValue) => {
+                rootPane.roundingScale = newValue;
+                rootPane.saveConfig();
+            }
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Spacing scale")
+            value: rootPane.spacingScale
+            from: 0.1
+            to: 2.0
+            decimals: 1
+            suffix: "×"
+            validator: DoubleValidator { bottom: 0.1; top: 2.0 }
+            
+            onValueModified: (newValue) => {
+                rootPane.spacingScale = newValue;
+                rootPane.saveConfig();
+            }
+        }
+    }
+}
+
diff --git a/modules/controlcenter/appearance/sections/ThemeModeSection.qml b/modules/controlcenter/appearance/sections/ThemeModeSection.qml
new file mode 100644
index 0000000..c136437
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/ThemeModeSection.qml
@@ -0,0 +1,24 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+
+CollapsibleSection {
+    title: qsTr("Theme mode")
+    description: qsTr("Light or dark theme")
+    showBackground: true
+
+    SwitchRow {
+        label: qsTr("Dark mode")
+        checked: !Colours.currentLight
+        onToggled: checked => {
+            Colours.setMode(checked ? "dark" : "light");
+        }
+    }
+}
+
diff --git a/modules/controlcenter/appearance/sections/TransparencySection.qml b/modules/controlcenter/appearance/sections/TransparencySection.qml
new file mode 100644
index 0000000..c9dbfb8
--- /dev/null
+++ b/modules/controlcenter/appearance/sections/TransparencySection.qml
@@ -0,0 +1,74 @@
+pragma ComponentBehavior: Bound
+
+import ".."
+import "../../components"
+import qs.components
+import qs.components.controls
+import qs.components.containers
+import qs.services
+import qs.config
+import QtQuick
+import QtQuick.Layouts
+
+CollapsibleSection {
+    id: root
+
+    required property var rootPane
+
+    title: qsTr("Transparency")
+    showBackground: true
+
+    SwitchRow {
+        label: qsTr("Transparency enabled")
+        checked: rootPane.transparencyEnabled
+        onToggled: checked => {
+            rootPane.transparencyEnabled = checked;
+            rootPane.saveConfig();
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Transparency base")
+            value: rootPane.transparencyBase * 100
+            from: 0
+            to: 100
+            suffix: "%"
+            validator: IntValidator { bottom: 0; top: 100 }
+            formatValueFunction: (val) => Math.round(val).toString()
+            parseValueFunction: (text) => parseInt(text)
+            
+            onValueModified: (newValue) => {
+                rootPane.transparencyBase = newValue / 100;
+                rootPane.saveConfig();
+            }
+        }
+    }
+
+    SectionContainer {
+        contentSpacing: Appearance.spacing.normal
+
+        SliderInput {
+            Layout.fillWidth: true
+            
+            label: qsTr("Transparency layers")
+            value: rootPane.transparencyLayers * 100
+            from: 0
+            to: 100
+            suffix: "%"
+            validator: IntValidator { bottom: 0; top: 100 }
+            formatValueFunction: (val) => Math.round(val).toString()
+            parseValueFunction: (text) => parseInt(text)
+            
+            onValueModified: (newValue) => {
+                rootPane.transparencyLayers = newValue / 100;
+                rootPane.saveConfig();
+            }
+        }
+    }
+}
+