feat: enhance configuration management with edit session and preview capabilities

- Introduced edit session management in Config.qml to track changes and handle pending modifications.
- Added functions for saving, reverting, and applying changes in ControlCenter.qml, improving user interaction with configuration settings.
- Implemented a preview system for appearance, color schemes, and wallpapers in various sections, allowing users to visualize changes before applying them.
- Enhanced user experience with new UI elements for applying, saving, and reverting changes in the control center.
- Created AppearancePreviewPane.qml to display live previews of selected themes and wallpapers, enriching the customization experience.

Author: ulises-jeremias

home/dot_config/quickshell/config/Config.qml

@@ -27,11 +27,53 @@ Singleton {
     property alias services: adapter.services
     property alias paths: adapter.paths
 
+    property bool editSessionActive: false
+    property bool hasPendingChanges: false
+
+    function beginEditSession(): void {
+        editSessionActive = true;
+    }
+
+    function endEditSession(): void {
+        editSessionActive = false;
+    }
+
+    function writeNow(): void {
+        timer.restart();
+        try {
+            let config = {};
+            try {
+                config = JSON.parse(fileView.text());
+            } catch (e) {
+                config = {};
+            }
+
+            config = serializeConfig();
+            fileView.setText(JSON.stringify(config, null, 2));
+            recentlySaved = true;
+            recentSaveCooldown.restart();
+            hasPendingChanges = false;
+        } catch (e) {
+            Toaster.toast(qsTr("Failed to serialize config"), e.message, "settings_alert", Toast.Error);
+        }
+    }
+
+    function revertChanges(): void {
+        hasPendingChanges = false;
+        recentlySaved = false;
+        fileView.reload();
+    }
+
     // Public save function - call this to persist config changes
     function save(): void {
+        if (editSessionActive) {
+            hasPendingChanges = true;
+            return;
+        }
         saveTimer.restart();
         recentlySaved = true;
         recentSaveCooldown.restart();
+        hasPendingChanges = false;
     }
 
     property bool recentlySaved: false
@@ -45,25 +87,7 @@ Singleton {
 
         interval: 500
         onTriggered: {
-            timer.restart();
-            try {
-                // Parse current config to preserve structure and comments if possible
-                let config = {};
-                try {
-                    config = JSON.parse(fileView.text());
-                } catch (e) {
-                    // If parsing fails, start with empty object
-                    config = {};
-                }
-
-                // Update config with current values
-                config = serializeConfig();
-
-                // Save to file with pretty printing
-                fileView.setText(JSON.stringify(config, null, 2));
-            } catch (e) {
-                Toaster.toast(qsTr("Failed to serialize config"), e.message, "settings_alert", Toast.Error);
-            }
+            writeNow();
         }
     }
 

home/dot_config/quickshell/modules/controlcenter/ControlCenter.qml

@@ -4,6 +4,7 @@ import qs.components
 import qs.components.controls
 import qs.services
 import qs.config
+import qs.modules.launcher.services
 import Quickshell
 import QtQuick
 import QtQuick.Layouts
@@ -24,12 +25,43 @@ Item {
         root: root
     }
 
+    readonly property bool hasPendingChanges: Config.hasPendingChanges || session.hasPendingActions
+
     function close(): void {
     }
 
+    function applyChanges(): void {
+        session.applyPendingActions();
+        Schemes.reload();
+        Appearances.reload();
+        Wallpapers.stopPreview();
+        Colours.showPreview = false;
+    }
+
+    function saveChanges(): void {
+        session.applyPendingActions();
+        Config.writeNow();
+        Schemes.reload();
+        Appearances.reload();
+        Wallpapers.stopPreview();
+        Colours.showPreview = false;
+    }
+
+    function revertChanges(): void {
+        session.clearPendingActions();
+        Config.revertChanges();
+        Schemes.reload();
+        Appearances.reload();
+        Wallpapers.stopPreview();
+        Colours.showPreview = false;
+    }
+
     implicitWidth: implicitHeight * Config.controlCenter.sizes.ratio
     implicitHeight: screen.height * Config.controlCenter.sizes.heightMult
 
+    Component.onCompleted: Config.beginEditSession()
+    Component.onDestruction: Config.endEditSession()
+
     GridLayout {
         anchors.fill: parent
 
@@ -96,5 +128,50 @@ Item {
         }
     }
 
+    StyledRect {
+        id: actionBar
+        z: 20
+
+        anchors.right: parent.right
+        anchors.bottom: parent.bottom
+        anchors.rightMargin: Appearance.padding.large
+        anchors.bottomMargin: Appearance.padding.large
+
+        color: Colours.tPalette.m3surfaceContainerHigh
+        radius: Appearance.rounding.full
+        visible: true
+        opacity: root.hasPendingChanges ? 1 : 0.9
+
+        implicitHeight: actionsRow.implicitHeight + Appearance.padding.small * 2
+        implicitWidth: actionsRow.implicitWidth + Appearance.padding.small * 2
+
+        RowLayout {
+            id: actionsRow
+            anchors.centerIn: parent
+            spacing: Appearance.spacing.small
+
+            TextButton {
+                type: TextButton.Tonal
+                text: qsTr("Apply")
+                enabled: root.hasPendingChanges
+                onClicked: root.applyChanges()
+            }
+
+            TextButton {
+                type: TextButton.Filled
+                text: qsTr("Save")
+                enabled: root.hasPendingChanges
+                onClicked: root.saveChanges()
+            }
+
+            TextButton {
+                type: TextButton.Text
+                text: qsTr("Revert")
+                enabled: root.hasPendingChanges
+                onClicked: root.revertChanges()
+            }
+        }
+    }
+
     readonly property bool initialOpeningComplete: panes.initialOpeningComplete
 }

home/dot_config/quickshell/modules/controlcenter/NavRail.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.components.controls
 import qs.services
 import qs.config
 import qs.modules.controlcenter

home/dot_config/quickshell/modules/controlcenter/Session.qml

@@ -1,6 +1,7 @@
 import QtQuick
 import "./state"
 import qs.modules.controlcenter
+import Quickshell
 
 QtObject {
     readonly property list<string> panes: PaneRegistry.labels
@@ -16,6 +17,27 @@ QtObject {
     readonly property EthernetState ethernet: EthernetState {}
     readonly property LauncherState launcher: LauncherState {}
     readonly property VpnState vpn: VpnState {}
+    property var pendingActions: ({})
+    readonly property bool hasPendingActions: Object.keys(pendingActions).length > 0
+
+    function queueAction(key: string, command: var): void {
+        const next = Object.assign({}, pendingActions);
+        next[key] = command;
+        pendingActions = next;
+    }
+
+    function clearPendingActions(): void {
+        pendingActions = ({});
+    }
+
+    function applyPendingActions(): void {
+        const entries = Object.entries(pendingActions);
+        for (const [, cmd] of entries) {
+            if (Array.isArray(cmd) && cmd.length > 0)
+                Quickshell.execDetached(cmd);
+        }
+        clearPendingActions();
+    }
 
     onActiveChanged: activeIndex = Math.max(0, panes.indexOf(active))
     onActiveIndexChanged: if (panes[activeIndex])