controlcenter: fix wallpaper gradient overlay

1 files changed, 596 insertions, 588 deletions

diff --git a/modules/controlcenter/appearance/AppearancePane.qml b/modules/controlcenter/appearance/AppearancePane.qml
index 6f77d25..1e81205 100644
--- a/modules/controlcenter/appearance/AppearancePane.qml
+++ b/modules/controlcenter/appearance/AppearancePane.qml
@@ -48,15 +48,24 @@ RowLayout {
     spacing: 0
 
     function collapseAllSections(exceptSection) {
-        if (exceptSection !== themeModeSection) themeModeSection.expanded = false;
-        if (exceptSection !== colorVariantSection) colorVariantSection.expanded = false;
-        if (exceptSection !== colorSchemeSection) colorSchemeSection.expanded = false;
-        if (exceptSection !== animationsSection) animationsSection.expanded = false;
-        if (exceptSection !== fontsSection) fontsSection.expanded = false;
-        if (exceptSection !== scalesSection) scalesSection.expanded = false;
-        if (exceptSection !== transparencySection) transparencySection.expanded = false;
-        if (exceptSection !== borderSection) borderSection.expanded = false;
-        if (exceptSection !== backgroundSection) backgroundSection.expanded = false;
+        if (exceptSection !== themeModeSection)
+            themeModeSection.expanded = false;
+        if (exceptSection !== colorVariantSection)
+            colorVariantSection.expanded = false;
+        if (exceptSection !== colorSchemeSection)
+            colorSchemeSection.expanded = false;
+        if (exceptSection !== animationsSection)
+            animationsSection.expanded = false;
+        if (exceptSection !== fontsSection)
+            fontsSection.expanded = false;
+        if (exceptSection !== scalesSection)
+            scalesSection.expanded = false;
+        if (exceptSection !== transparencySection)
+            transparencySection.expanded = false;
+        if (exceptSection !== borderSection)
+            borderSection.expanded = false;
+        if (exceptSection !== backgroundSection)
+            backgroundSection.expanded = false;
     }
 
     function saveConfig() {
@@ -123,712 +132,712 @@ RowLayout {
 
                 spacing: Appearance.spacing.small
 
-            RowLayout {
-                spacing: Appearance.spacing.smaller
+                RowLayout {
+                    spacing: Appearance.spacing.smaller
 
-                StyledText {
-                    text: qsTr("Settings")
-                    font.pointSize: Appearance.font.size.large
-                    font.weight: 500
-                }
+                    StyledText {
+                        text: qsTr("Settings")
+                        font.pointSize: Appearance.font.size.large
+                        font.weight: 500
+                    }
 
-                Item {
-                    Layout.fillWidth: true
+                    Item {
+                        Layout.fillWidth: true
+                    }
                 }
-            }
 
-            CollapsibleSection {
-                id: themeModeSection
-                title: qsTr("Theme mode")
-                description: qsTr("Light or dark theme")
-                onToggleRequested: {
-                    root.collapseAllSections(themeModeSection);
-                }
+                CollapsibleSection {
+                    id: themeModeSection
+                    title: qsTr("Theme mode")
+                    description: qsTr("Light or dark theme")
+                    onToggleRequested: {
+                        root.collapseAllSections(themeModeSection);
+                    }
 
-                SwitchRow {
-                    label: qsTr("Dark mode")
-                    checked: !Colours.currentLight
-                    onToggled: checked => {
-                        Colours.setMode(checked ? "dark" : "light");
+                    SwitchRow {
+                        label: qsTr("Dark mode")
+                        checked: !Colours.currentLight
+                        onToggled: checked => {
+                            Colours.setMode(checked ? "dark" : "light");
+                        }
                     }
                 }
-            }
 
-            CollapsibleSection {
-                id: colorVariantSection
-                title: qsTr("Color variant")
-                description: qsTr("Material theme variant")
-                onToggleRequested: {
-                    root.collapseAllSections(colorVariantSection);
-                }
+                CollapsibleSection {
+                    id: colorVariantSection
+                    title: qsTr("Color variant")
+                    description: qsTr("Material theme variant")
+                    onToggleRequested: {
+                        root.collapseAllSections(colorVariantSection);
+                    }
 
-                StyledListView {
-                    Layout.fillWidth: true
-                    implicitHeight: colorVariantSection.expanded ? Math.min(400, M3Variants.list.length * 60) : 0
+                    StyledListView {
+                        Layout.fillWidth: true
+                        implicitHeight: colorVariantSection.expanded ? Math.min(400, M3Variants.list.length * 60) : 0
 
-                    model: M3Variants.list
-                    spacing: Appearance.spacing.small / 2
-                    clip: true
+                        model: M3Variants.list
+                        spacing: Appearance.spacing.small / 2
+                        clip: true
 
-                    StyledScrollBar.vertical: StyledScrollBar {
-                        flickable: parent
-                    }
+                        StyledScrollBar.vertical: StyledScrollBar {
+                            flickable: parent
+                        }
 
-                    delegate: StyledRect {
-                        required property var modelData
+                        delegate: StyledRect {
+                            required property var modelData
 
-                        width: parent ? parent.width : 0
+                            width: parent ? parent.width : 0
 
-                        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
+                            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;
+                            StateLayer {
+                                function onClicked(): void {
+                                    const variant = modelData.variant;
 
-                                // Optimistic update - set immediately
-                                Schemes.currentVariant = variant;
+                                    // Optimistic update - set immediately
+                                    Schemes.currentVariant = variant;
 
-                                // Execute the command
-                                Quickshell.execDetached(["caelestia", "scheme", "set", "-v", variant]);
+                                    // Execute the command
+                                    Quickshell.execDetached(["caelestia", "scheme", "set", "-v", variant]);
 
-                                // Reload after a delay to confirm
-                                Qt.callLater(() => {
-                                    reloadTimer.restart();
-                                });
+                                    // Reload after a delay to confirm
+                                    Qt.callLater(() => {
+                                        reloadTimer.restart();
+                                    });
+                                }
                             }
-                        }
 
-                        Timer {
-                            id: reloadTimer
-                            interval: 300
-                            onTriggered: {
-                                Schemes.reload();
+                            Timer {
+                                id: reloadTimer
+                                interval: 300
+                                onTriggered: {
+                                    Schemes.reload();
+                                }
                             }
-                        }
 
-                        RowLayout {
-                            id: variantRow
+                            RowLayout {
+                                id: variantRow
 
-                            anchors.left: parent.left
-                            anchors.right: parent.right
-                            anchors.verticalCenter: parent.verticalCenter
-                            anchors.margins: Appearance.padding.normal
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.margins: Appearance.padding.normal
 
-                            spacing: Appearance.spacing.normal
+                                spacing: Appearance.spacing.normal
 
-                            MaterialIcon {
-                                text: modelData.icon
-                                font.pointSize: Appearance.font.size.large
-                                fill: modelData.variant === Schemes.currentVariant ? 1 : 0
-                            }
+                                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
-                            }
+                                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
+                                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
+                            implicitHeight: variantRow.implicitHeight + Appearance.padding.normal * 2
+                        }
                     }
                 }
-            }
 
-            CollapsibleSection {
-                id: colorSchemeSection
-                title: qsTr("Color scheme")
-                description: qsTr("Available color schemes")
-                onToggleRequested: {
-                    root.collapseAllSections(colorSchemeSection);
-                }
+                CollapsibleSection {
+                    id: colorSchemeSection
+                    title: qsTr("Color scheme")
+                    description: qsTr("Available color schemes")
+                    onToggleRequested: {
+                        root.collapseAllSections(colorSchemeSection);
+                    }
 
-                StyledListView {
-                    Layout.fillWidth: true
-                    implicitHeight: colorSchemeSection.expanded ? Math.min(400, Schemes.list.length * 80) : 0
+                    StyledListView {
+                        Layout.fillWidth: true
+                        implicitHeight: colorSchemeSection.expanded ? Math.min(400, Schemes.list.length * 80) : 0
 
-                    model: Schemes.list
-                    spacing: Appearance.spacing.small / 2
-                    clip: true
+                        model: Schemes.list
+                        spacing: Appearance.spacing.small / 2
+                        clip: true
 
-                    StyledScrollBar.vertical: StyledScrollBar {
-                        flickable: parent
-                    }
+                        StyledScrollBar.vertical: StyledScrollBar {
+                            flickable: parent
+                        }
 
-                    delegate: StyledRect {
-                        required property var modelData
+                        delegate: StyledRect {
+                            required property var modelData
 
-                        width: parent ? parent.width : 0
+                            width: parent ? parent.width : 0
 
-                        readonly property string schemeKey: `${modelData.name} ${modelData.flavour}`
-                        readonly property bool isCurrent: schemeKey === Schemes.currentScheme
+                            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
+                            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}`;
+                            StateLayer {
+                                function onClicked(): void {
+                                    const name = modelData.name;
+                                    const flavour = modelData.flavour;
+                                    const schemeKey = `${name} ${flavour}`;
 
-                                // Optimistic update - set immediately
-                                Schemes.currentScheme = schemeKey;
+                                    // Optimistic update - set immediately
+                                    Schemes.currentScheme = schemeKey;
 
-                                // Execute the command
-                                Quickshell.execDetached(["caelestia", "scheme", "set", "-n", name, "-f", flavour]);
+                                    // Execute the command
+                                    Quickshell.execDetached(["caelestia", "scheme", "set", "-n", name, "-f", flavour]);
 
-                                // Reload after a delay to confirm
-                                Qt.callLater(() => {
-                                    reloadTimer.restart();
-                                });
+                                    // Reload after a delay to confirm
+                                    Qt.callLater(() => {
+                                        reloadTimer.restart();
+                                    });
+                                }
                             }
-                        }
 
-                        Timer {
-                            id: reloadTimer
-                            interval: 300
-                            onTriggered: {
-                                Schemes.reload();
+                            Timer {
+                                id: reloadTimer
+                                interval: 300
+                                onTriggered: {
+                                    Schemes.reload();
+                                }
                             }
-                        }
-
-                        RowLayout {
-                            id: schemeRow
-
-                            anchors.fill: parent
-                            anchors.margins: Appearance.padding.normal
 
-                            spacing: Appearance.spacing.normal
+                            RowLayout {
+                                id: schemeRow
 
-                            StyledRect {
-                                id: preview
+                                anchors.fill: parent
+                                anchors.margins: Appearance.padding.normal
 
-                                Layout.alignment: Qt.AlignVCenter
+                                spacing: Appearance.spacing.normal
 
-                                border.width: 1
-                                border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5)
+                                StyledRect {
+                                    id: preview
 
-                                color: `#${modelData.colours?.surface}`
-                                radius: Appearance.rounding.full
-                                implicitWidth: iconPlaceholder.implicitWidth
-                                implicitHeight: iconPlaceholder.implicitWidth
+                                    Layout.alignment: Qt.AlignVCenter
 
-                                MaterialIcon {
-                                    id: iconPlaceholder
-                                    visible: false
-                                    text: "circle"
-                                    font.pointSize: Appearance.font.size.large
-                                }
+                                    border.width: 1
+                                    border.color: Qt.alpha(`#${modelData.colours?.outline}`, 0.5)
 
-                                Item {
-                                    anchors.top: parent.top
-                                    anchors.bottom: parent.bottom
-                                    anchors.right: parent.right
+                                    color: `#${modelData.colours?.surface}`
+                                    radius: Appearance.rounding.full
+                                    implicitWidth: iconPlaceholder.implicitWidth
+                                    implicitHeight: iconPlaceholder.implicitWidth
 
-                                    implicitWidth: parent.implicitWidth / 2
-                                    clip: true
+                                    MaterialIcon {
+                                        id: iconPlaceholder
+                                        visible: false
+                                        text: "circle"
+                                        font.pointSize: Appearance.font.size.large
+                                    }
 
-                                    StyledRect {
+                                    Item {
                                         anchors.top: parent.top
                                         anchors.bottom: parent.bottom
                                         anchors.right: parent.right
 
-                                        implicitWidth: preview.implicitWidth
-                                        color: `#${modelData.colours?.primary}`
-                                        radius: Appearance.rounding.full
+                                        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
+                                Column {
+                                    Layout.fillWidth: true
+                                    spacing: 0
 
-                                StyledText {
-                                    text: modelData.flavour ?? ""
-                                    font.pointSize: Appearance.font.size.normal
-                                }
+                                    StyledText {
+                                        text: modelData.flavour ?? ""
+                                        font.pointSize: Appearance.font.size.normal
+                                    }
 
-                                StyledText {
-                                    text: modelData.name ?? ""
-                                    font.pointSize: Appearance.font.size.small
-                                    color: Colours.palette.m3outline
+                                    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
+                                        elide: Text.ElideRight
+                                        anchors.left: parent.left
+                                        anchors.right: parent.right
+                                    }
                                 }
-                            }
 
-                            Loader {
-                                active: isCurrent
-                                asynchronous: true
+                                Loader {
+                                    active: isCurrent
+                                    asynchronous: true
 
-                                sourceComponent: MaterialIcon {
-                                    text: "check"
-                                    color: Colours.palette.m3onSurfaceVariant
-                                    font.pointSize: Appearance.font.size.large
+                                    sourceComponent: MaterialIcon {
+                                        text: "check"
+                                        color: Colours.palette.m3onSurfaceVariant
+                                        font.pointSize: Appearance.font.size.large
+                                    }
                                 }
                             }
-                        }
 
-                        implicitHeight: schemeRow.implicitHeight + Appearance.padding.normal * 2
+                            implicitHeight: schemeRow.implicitHeight + Appearance.padding.normal * 2
+                        }
                     }
                 }
-            }
-
-            CollapsibleSection {
-                id: animationsSection
-                title: qsTr("Animations")
-                onToggleRequested: {
-                    root.collapseAllSections(animationsSection);
-                }
 
-                SpinBoxRow {
-                    label: qsTr("Animation duration scale")
-                    min: 0.1
-                    max: 5
-                    value: root.animDurationsScale
-                    onValueModified: value => {
-                        root.animDurationsScale = value;
-                        root.saveConfig();
+                CollapsibleSection {
+                    id: animationsSection
+                    title: qsTr("Animations")
+                    onToggleRequested: {
+                        root.collapseAllSections(animationsSection);
                     }
-                }
-            }
-
-            CollapsibleSection {
-                id: fontsSection
-                title: qsTr("Fonts")
-                onToggleRequested: {
-                    root.collapseAllSections(fontsSection);
-                }
 
-                StyledText {
-                    Layout.topMargin: Appearance.spacing.normal
-                    text: qsTr("Material font family")
-                    font.pointSize: Appearance.font.size.larger
-                    font.weight: 500
+                    SpinBoxRow {
+                        label: qsTr("Animation duration scale")
+                        min: 0.1
+                        max: 5
+                        value: root.animDurationsScale
+                        onValueModified: value => {
+                            root.animDurationsScale = value;
+                            root.saveConfig();
+                        }
+                    }
                 }
 
-                StyledListView {
-                    Layout.fillWidth: true
-                    implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
-
-                    model: Qt.fontFamilies()
-                    spacing: Appearance.spacing.small / 2
-                    clip: true
-
-                    StyledScrollBar.vertical: StyledScrollBar {
-                        flickable: parent
+                CollapsibleSection {
+                    id: fontsSection
+                    title: qsTr("Fonts")
+                    onToggleRequested: {
+                        root.collapseAllSections(fontsSection);
                     }
 
-                    delegate: StyledRect {
-                        required property string modelData
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("Material font family")
+                        font.pointSize: Appearance.font.size.larger
+                        font.weight: 500
+                    }
 
-                        anchors.left: parent.left
-                        anchors.right: parent.right
+                    StyledListView {
+                        Layout.fillWidth: true
+                        implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
 
-                        readonly property bool isCurrent: modelData === root.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
+                        model: Qt.fontFamilies()
+                        spacing: Appearance.spacing.small / 2
+                        clip: true
 
-                        StateLayer {
-                            function onClicked(): void {
-                                root.fontFamilyMaterial = modelData;
-                                root.saveConfig();
-                            }
+                        StyledScrollBar.vertical: StyledScrollBar {
+                            flickable: parent
                         }
 
-                        RowLayout {
-                            id: fontFamilyMaterialRow
+                        delegate: StyledRect {
+                            required property string modelData
 
                             anchors.left: parent.left
                             anchors.right: parent.right
-                            anchors.verticalCenter: parent.verticalCenter
-                            anchors.margins: Appearance.padding.normal
 
-                            spacing: Appearance.spacing.normal
+                            readonly property bool isCurrent: modelData === root.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
 
-                            StyledText {
-                                text: modelData
-                                font.pointSize: Appearance.font.size.normal
+                            StateLayer {
+                                function onClicked(): void {
+                                    root.fontFamilyMaterial = modelData;
+                                    root.saveConfig();
+                                }
                             }
 
-                            Item {
-                                Layout.fillWidth: true
-                            }
+                            RowLayout {
+                                id: fontFamilyMaterialRow
 
-                            Loader {
-                                active: isCurrent
-                                asynchronous: true
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.margins: Appearance.padding.normal
 
-                                sourceComponent: MaterialIcon {
-                                    text: "check"
-                                    color: Colours.palette.m3onSurfaceVariant
-                                    font.pointSize: Appearance.font.size.large
-                                }
-                            }
-                        }
+                                spacing: Appearance.spacing.normal
 
-                        implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2
-                    }
-                }
+                                StyledText {
+                                    text: modelData
+                                    font.pointSize: Appearance.font.size.normal
+                                }
 
-                StyledText {
-                    Layout.topMargin: Appearance.spacing.normal
-                    text: qsTr("Monospace font family")
-                    font.pointSize: Appearance.font.size.larger
-                    font.weight: 500
-                }
+                                Item {
+                                    Layout.fillWidth: true
+                                }
 
-                StyledListView {
-                    Layout.fillWidth: true
-                    implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
+                                Loader {
+                                    active: isCurrent
+                                    asynchronous: true
 
-                    model: Qt.fontFamilies()
-                    spacing: Appearance.spacing.small / 2
-                    clip: true
+                                    sourceComponent: MaterialIcon {
+                                        text: "check"
+                                        color: Colours.palette.m3onSurfaceVariant
+                                        font.pointSize: Appearance.font.size.large
+                                    }
+                                }
+                            }
 
-                    StyledScrollBar.vertical: StyledScrollBar {
-                        flickable: parent
+                            implicitHeight: fontFamilyMaterialRow.implicitHeight + Appearance.padding.normal * 2
+                        }
                     }
 
-                    delegate: StyledRect {
-                        required property string modelData
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("Monospace font family")
+                        font.pointSize: Appearance.font.size.larger
+                        font.weight: 500
+                    }
 
-                        anchors.left: parent.left
-                        anchors.right: parent.right
+                    StyledListView {
+                        Layout.fillWidth: true
+                        implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
 
-                        readonly property bool isCurrent: modelData === root.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
+                        model: Qt.fontFamilies()
+                        spacing: Appearance.spacing.small / 2
+                        clip: true
 
-                        StateLayer {
-                            function onClicked(): void {
-                                root.fontFamilyMono = modelData;
-                                root.saveConfig();
-                            }
+                        StyledScrollBar.vertical: StyledScrollBar {
+                            flickable: parent
                         }
 
-                        RowLayout {
-                            id: fontFamilyMonoRow
+                        delegate: StyledRect {
+                            required property string modelData
 
                             anchors.left: parent.left
                             anchors.right: parent.right
-                            anchors.verticalCenter: parent.verticalCenter
-                            anchors.margins: Appearance.padding.normal
 
-                            spacing: Appearance.spacing.normal
+                            readonly property bool isCurrent: modelData === root.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
 
-                            StyledText {
-                                text: modelData
-                                font.pointSize: Appearance.font.size.normal
+                            StateLayer {
+                                function onClicked(): void {
+                                    root.fontFamilyMono = modelData;
+                                    root.saveConfig();
+                                }
                             }
 
-                            Item {
-                                Layout.fillWidth: true
-                            }
+                            RowLayout {
+                                id: fontFamilyMonoRow
 
-                            Loader {
-                                active: isCurrent
-                                asynchronous: true
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.margins: Appearance.padding.normal
 
-                                sourceComponent: MaterialIcon {
-                                    text: "check"
-                                    color: Colours.palette.m3onSurfaceVariant
-                                    font.pointSize: Appearance.font.size.large
-                                }
-                            }
-                        }
+                                spacing: Appearance.spacing.normal
 
-                        implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2
-                    }
-                }
+                                StyledText {
+                                    text: modelData
+                                    font.pointSize: Appearance.font.size.normal
+                                }
 
-                StyledText {
-                    Layout.topMargin: Appearance.spacing.normal
-                    text: qsTr("Sans-serif font family")
-                    font.pointSize: Appearance.font.size.larger
-                    font.weight: 500
-                }
+                                Item {
+                                    Layout.fillWidth: true
+                                }
 
-                StyledListView {
-                    Layout.fillWidth: true
-                    implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
+                                Loader {
+                                    active: isCurrent
+                                    asynchronous: true
 
-                    model: Qt.fontFamilies()
-                    spacing: Appearance.spacing.small / 2
-                    clip: true
+                                    sourceComponent: MaterialIcon {
+                                        text: "check"
+                                        color: Colours.palette.m3onSurfaceVariant
+                                        font.pointSize: Appearance.font.size.large
+                                    }
+                                }
+                            }
 
-                    StyledScrollBar.vertical: StyledScrollBar {
-                        flickable: parent
+                            implicitHeight: fontFamilyMonoRow.implicitHeight + Appearance.padding.normal * 2
+                        }
                     }
 
-                    delegate: StyledRect {
-                        required property string modelData
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("Sans-serif font family")
+                        font.pointSize: Appearance.font.size.larger
+                        font.weight: 500
+                    }
 
-                        anchors.left: parent.left
-                        anchors.right: parent.right
+                    StyledListView {
+                        Layout.fillWidth: true
+                        implicitHeight: fontsSection.expanded ? Math.min(300, Qt.fontFamilies().length * 50) : 0
 
-                        readonly property bool isCurrent: modelData === root.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
+                        model: Qt.fontFamilies()
+                        spacing: Appearance.spacing.small / 2
+                        clip: true
 
-                        StateLayer {
-                            function onClicked(): void {
-                                root.fontFamilySans = modelData;
-                                root.saveConfig();
-                            }
+                        StyledScrollBar.vertical: StyledScrollBar {
+                            flickable: parent
                         }
 
-                        RowLayout {
-                            id: fontFamilySansRow
+                        delegate: StyledRect {
+                            required property string modelData
 
                             anchors.left: parent.left
                             anchors.right: parent.right
-                            anchors.verticalCenter: parent.verticalCenter
-                            anchors.margins: Appearance.padding.normal
 
-                            spacing: Appearance.spacing.normal
+                            readonly property bool isCurrent: modelData === root.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
 
-                            StyledText {
-                                text: modelData
-                                font.pointSize: Appearance.font.size.normal
+                            StateLayer {
+                                function onClicked(): void {
+                                    root.fontFamilySans = modelData;
+                                    root.saveConfig();
+                                }
                             }
 
-                            Item {
-                                Layout.fillWidth: true
-                            }
+                            RowLayout {
+                                id: fontFamilySansRow
+
+                                anchors.left: parent.left
+                                anchors.right: parent.right
+                                anchors.verticalCenter: parent.verticalCenter
+                                anchors.margins: Appearance.padding.normal
 
-                            Loader {
-                                active: isCurrent
-                                asynchronous: true
+                                spacing: Appearance.spacing.normal
 
-                                sourceComponent: MaterialIcon {
-                                    text: "check"
-                                    color: Colours.palette.m3onSurfaceVariant
-                                    font.pointSize: Appearance.font.size.large
+                                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
+                            implicitHeight: fontFamilySansRow.implicitHeight + Appearance.padding.normal * 2
+                        }
                     }
-                }
 
-                SpinBoxRow {
-                    label: qsTr("Font size scale")
-                    min: 0.1
-                    max: 5
-                    value: root.fontSizeScale
-                    onValueModified: value => {
-                        root.fontSizeScale = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Font size scale")
+                        min: 0.1
+                        max: 5
+                        value: root.fontSizeScale
+                        onValueModified: value => {
+                            root.fontSizeScale = value;
+                            root.saveConfig();
+                        }
                     }
                 }
-            }
 
-            CollapsibleSection {
-                id: scalesSection
-                title: qsTr("Scales")
-                onToggleRequested: {
-                    root.collapseAllSections(scalesSection);
-                }
+                CollapsibleSection {
+                    id: scalesSection
+                    title: qsTr("Scales")
+                    onToggleRequested: {
+                        root.collapseAllSections(scalesSection);
+                    }
 
-                SpinBoxRow {
-                    label: qsTr("Padding scale")
-                    min: 0.1
-                    max: 5
-                    value: root.paddingScale
-                    onValueModified: value => {
-                        root.paddingScale = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Padding scale")
+                        min: 0.1
+                        max: 5
+                        value: root.paddingScale
+                        onValueModified: value => {
+                            root.paddingScale = value;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                SpinBoxRow {
-                    label: qsTr("Rounding scale")
-                    min: 0.1
-                    max: 5
-                    value: root.roundingScale
-                    onValueModified: value => {
-                        root.roundingScale = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Rounding scale")
+                        min: 0.1
+                        max: 5
+                        value: root.roundingScale
+                        onValueModified: value => {
+                            root.roundingScale = value;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                SpinBoxRow {
-                    label: qsTr("Spacing scale")
-                    min: 0.1
-                    max: 5
-                    value: root.spacingScale
-                    onValueModified: value => {
-                        root.spacingScale = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Spacing scale")
+                        min: 0.1
+                        max: 5
+                        value: root.spacingScale
+                        onValueModified: value => {
+                            root.spacingScale = value;
+                            root.saveConfig();
+                        }
                     }
                 }
-            }
 
-            CollapsibleSection {
-                id: transparencySection
-                title: qsTr("Transparency")
-                onToggleRequested: {
-                    root.collapseAllSections(transparencySection);
-                }
+                CollapsibleSection {
+                    id: transparencySection
+                    title: qsTr("Transparency")
+                    onToggleRequested: {
+                        root.collapseAllSections(transparencySection);
+                    }
 
-                SwitchRow {
-                    label: qsTr("Transparency enabled")
-                    checked: root.transparencyEnabled
-                    onToggled: checked => {
-                        root.transparencyEnabled = checked;
-                        root.saveConfig();
+                    SwitchRow {
+                        label: qsTr("Transparency enabled")
+                        checked: root.transparencyEnabled
+                        onToggled: checked => {
+                            root.transparencyEnabled = checked;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                SpinBoxRow {
-                    label: qsTr("Transparency base")
-                    min: 0
-                    max: 1
-                    value: root.transparencyBase
-                    onValueModified: value => {
-                        root.transparencyBase = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Transparency base")
+                        min: 0
+                        max: 1
+                        value: root.transparencyBase
+                        onValueModified: value => {
+                            root.transparencyBase = value;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                SpinBoxRow {
-                    label: qsTr("Transparency layers")
-                    min: 0
-                    max: 1
-                    value: root.transparencyLayers
-                    onValueModified: value => {
-                        root.transparencyLayers = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Transparency layers")
+                        min: 0
+                        max: 1
+                        value: root.transparencyLayers
+                        onValueModified: value => {
+                            root.transparencyLayers = value;
+                            root.saveConfig();
+                        }
                     }
                 }
-            }
 
-            CollapsibleSection {
-                id: borderSection
-                title: qsTr("Border")
-                onToggleRequested: {
-                    root.collapseAllSections(borderSection);
-                }
+                CollapsibleSection {
+                    id: borderSection
+                    title: qsTr("Border")
+                    onToggleRequested: {
+                        root.collapseAllSections(borderSection);
+                    }
 
-                SpinBoxRow {
-                    label: qsTr("Border rounding")
-                    min: 0.1
-                    max: 5
-                    value: root.borderRounding
-                    onValueModified: value => {
-                        root.borderRounding = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Border rounding")
+                        min: 0.1
+                        max: 5
+                        value: root.borderRounding
+                        onValueModified: value => {
+                            root.borderRounding = value;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                SpinBoxRow {
-                    label: qsTr("Border thickness")
-                    min: 0.1
-                    max: 5
-                    value: root.borderThickness
-                    onValueModified: value => {
-                        root.borderThickness = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Border thickness")
+                        min: 0.1
+                        max: 5
+                        value: root.borderThickness
+                        onValueModified: value => {
+                            root.borderThickness = value;
+                            root.saveConfig();
+                        }
                     }
                 }
-            }
 
-            CollapsibleSection {
-                id: backgroundSection
-                title: qsTr("Background")
-                onToggleRequested: {
-                    root.collapseAllSections(backgroundSection);
-                }
+                CollapsibleSection {
+                    id: backgroundSection
+                    title: qsTr("Background")
+                    onToggleRequested: {
+                        root.collapseAllSections(backgroundSection);
+                    }
 
-                SwitchRow {
-                    label: qsTr("Desktop clock")
-                    checked: root.desktopClockEnabled
-                    onToggled: checked => {
-                        root.desktopClockEnabled = checked;
-                        root.saveConfig();
+                    SwitchRow {
+                        label: qsTr("Desktop clock")
+                        checked: root.desktopClockEnabled
+                        onToggled: checked => {
+                            root.desktopClockEnabled = checked;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                SwitchRow {
-                    label: qsTr("Background enabled")
-                    checked: root.backgroundEnabled
-                    onToggled: checked => {
-                        root.backgroundEnabled = checked;
-                        root.saveConfig();
+                    SwitchRow {
+                        label: qsTr("Background enabled")
+                        checked: root.backgroundEnabled
+                        onToggled: checked => {
+                            root.backgroundEnabled = checked;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                StyledText {
-                    Layout.topMargin: Appearance.spacing.normal
-                    text: qsTr("Visualiser")
-                    font.pointSize: Appearance.font.size.larger
-                    font.weight: 500
-                }
+                    StyledText {
+                        Layout.topMargin: Appearance.spacing.normal
+                        text: qsTr("Visualiser")
+                        font.pointSize: Appearance.font.size.larger
+                        font.weight: 500
+                    }
 
-                SwitchRow {
-                    label: qsTr("Visualiser enabled")
-                    checked: root.visualiserEnabled
-                    onToggled: checked => {
-                        root.visualiserEnabled = checked;
-                        root.saveConfig();
+                    SwitchRow {
+                        label: qsTr("Visualiser enabled")
+                        checked: root.visualiserEnabled
+                        onToggled: checked => {
+                            root.visualiserEnabled = checked;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                SwitchRow {
-                    label: qsTr("Visualiser auto hide")
-                    checked: root.visualiserAutoHide
-                    onToggled: checked => {
-                        root.visualiserAutoHide = checked;
-                        root.saveConfig();
+                    SwitchRow {
+                        label: qsTr("Visualiser auto hide")
+                        checked: root.visualiserAutoHide
+                        onToggled: checked => {
+                            root.visualiserAutoHide = checked;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                SpinBoxRow {
-                    label: qsTr("Visualiser rounding")
-                    min: 0
-                    max: 10
-                    value: Math.round(root.visualiserRounding)
-                    onValueModified: value => {
-                        root.visualiserRounding = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Visualiser rounding")
+                        min: 0
+                        max: 10
+                        value: Math.round(root.visualiserRounding)
+                        onValueModified: value => {
+                            root.visualiserRounding = value;
+                            root.saveConfig();
+                        }
                     }
-                }
 
-                SpinBoxRow {
-                    label: qsTr("Visualiser spacing")
-                    min: 0
-                    max: 10
-                    value: Math.round(root.visualiserSpacing)
-                    onValueModified: value => {
-                        root.visualiserSpacing = value;
-                        root.saveConfig();
+                    SpinBoxRow {
+                        label: qsTr("Visualiser spacing")
+                        min: 0
+                        max: 10
+                        value: Math.round(root.visualiserSpacing)
+                        onValueModified: value => {
+                            root.visualiserSpacing = value;
+                            root.saveConfig();
+                        }
                     }
                 }
             }
-            }
         }
 
         InnerBorder {
@@ -862,34 +871,34 @@ RowLayout {
 
                 spacing: Appearance.spacing.normal
 
-            MaterialIcon {
-                Layout.alignment: Qt.AlignHCenter
-                text: "palette"
-                font.pointSize: Appearance.font.size.extraLarge * 3
-                font.bold: true
-            }
+                MaterialIcon {
+                    Layout.alignment: Qt.AlignHCenter
+                    text: "palette"
+                    font.pointSize: Appearance.font.size.extraLarge * 3
+                    font.bold: true
+                }
 
-            StyledText {
-                Layout.alignment: Qt.AlignHCenter
-                text: qsTr("Appearance Settings")
-                font.pointSize: Appearance.font.size.large
-                font.bold: true
-            }
+                StyledText {
+                    Layout.alignment: Qt.AlignHCenter
+                    text: qsTr("Appearance Settings")
+                    font.pointSize: Appearance.font.size.large
+                    font.bold: true
+                }
 
-            StyledText {
-                Layout.topMargin: Appearance.spacing.large
-                Layout.alignment: Qt.AlignHCenter
-                text: qsTr("Wallpaper")
-                font.pointSize: Appearance.font.size.extraLarge
-                font.weight: 600
-            }
+                StyledText {
+                    Layout.topMargin: Appearance.spacing.large
+                    Layout.alignment: Qt.AlignHCenter
+                    text: qsTr("Wallpaper")
+                    font.pointSize: Appearance.font.size.extraLarge
+                    font.weight: 600
+                }
 
-            StyledText {
-                Layout.alignment: Qt.AlignHCenter
-                text: qsTr("Select a wallpaper")
-                font.pointSize: Appearance.font.size.normal
-                color: Colours.palette.m3onSurfaceVariant
-            }
+                StyledText {
+                    Layout.alignment: Qt.AlignHCenter
+                    text: qsTr("Select a wallpaper")
+                    font.pointSize: Appearance.font.size.normal
+                    color: Colours.palette.m3onSurfaceVariant
+                }
 
                 GridLayout {
                     Layout.fillWidth: true
@@ -948,10 +957,7 @@ RowLayout {
                                     anchors.fill: parent
 
                                     // Ensure sourceSize is always set to valid dimensions
-                                    sourceSize: Qt.size(
-                                        Math.max(1, Math.floor(parent.width)),
-                                        Math.max(1, Math.floor(parent.height))
-                                    )
+                                    sourceSize: Qt.size(Math.max(1, Math.floor(parent.width)), Math.max(1, Math.floor(parent.height)))
 
                                     // Show when ready, hide if fallback is showing
                                     opacity: status === Image.Ready && !fallbackImage.visible ? 1 : 0
@@ -971,10 +977,7 @@ RowLayout {
                                     source: modelData.path
                                     asynchronous: true
                                     fillMode: Image.PreserveAspectCrop
-                                    sourceSize: Qt.size(
-                                        Math.max(1, Math.floor(parent.width)),
-                                        Math.max(1, Math.floor(parent.height))
-                                    )
+                                    sourceSize: Qt.size(Math.max(1, Math.floor(parent.width)), Math.max(1, Math.floor(parent.height)))
 
                                     // Show if caching image hasn't loaded after a delay
                                     visible: opacity > 0
@@ -1019,24 +1022,35 @@ RowLayout {
                                     color: Colours.palette.m3primary
                                     font.pointSize: Appearance.font.size.large
                                 }
-                            }
 
-                            // Gradient overlay for filename with rounded bottom corners
-                            Rectangle {
-                                id: filenameOverlay
-                                anchors.left: parent.left
-                                anchors.right: parent.right
-                                anchors.bottom: parent.bottom
-                                height: filenameText.implicitHeight + Appearance.padding.normal * 2
+                                // Gradient overlay for filename with rounded bottom corners
+                                Rectangle {
+                                    id: filenameOverlay
 
-                                // Match the parent's rounded corners at the bottom
-                                radius: Appearance.rounding.normal
+                                    anchors.left: parent.left
+                                    anchors.right: parent.right
+                                    anchors.bottom: parent.bottom
+
+                                    implicitHeight: filenameText.implicitHeight + Appearance.padding.normal * 2
 
-                                gradient: Gradient {
-                                    GradientStop { position: 0.0; color: Qt.rgba(0, 0, 0, 0) }
-                                    GradientStop { position: 0.3; color: Qt.rgba(0, 0, 0, 0.3) }
-                                    GradientStop { position: 0.7; color: Qt.rgba(0, 0, 0, 0.75) }
-                                    GradientStop { position: 1.0; color: Qt.rgba(0, 0, 0, 0.85) }
+                                    gradient: Gradient {
+                                        GradientStop {
+                                            position: 0.0
+                                            color: Qt.rgba(0, 0, 0, 0)
+                                        }
+                                        GradientStop {
+                                            position: 0.3
+                                            color: Qt.rgba(0, 0, 0, 0.3)
+                                        }
+                                        GradientStop {
+                                            position: 0.7
+                                            color: Qt.rgba(0, 0, 0, 0.75)
+                                        }
+                                        GradientStop {
+                                            position: 1.0
+                                            color: Qt.rgba(0, 0, 0, 0.85)
+                                        }
+                                    }
                                 }
 
                                 opacity: 0
@@ -1075,10 +1089,6 @@ RowLayout {
                                 elide: Text.ElideMiddle
                                 maximumLineCount: 1
 
-                                // Text shadow for better readability
-                                style: Text.Outline
-                                styleColor: Qt.rgba(0, 0, 0, 0.6)
-
                                 opacity: 0
 
                                 Behavior on opacity {
@@ -1103,5 +1113,3 @@ RowLayout {
         }
     }
 }
-
-