refactor: created pane registry

modules/controlcenter/NavRail.qml

@@ -117,35 +117,15 @@ Item {
             }
         }
 
-        NavItem {
+        Repeater {
-            Layout.topMargin: Appearance.spacing.large * 2
+            model: PaneRegistry.count
-            icon: "router"
-            label: "network"
-        }
 
-        NavItem {
+            NavItem {
-            icon: "settings_bluetooth"
+                required property int index
-            label: "bluetooth"
+                Layout.topMargin: index === 0 ? Appearance.spacing.large * 2 : 0
-        }
+                icon: PaneRegistry.getByIndex(index).icon
-
+                label: PaneRegistry.getByIndex(index).label
-        NavItem {
+            }
-            icon: "volume_up"
-            label: "audio"
-        }
-
-        NavItem {
-            icon: "palette"
-            label: "appearance"
-        }
-
-        NavItem {
-            icon: "task_alt"
-            label: "taskbar"
-        }
-
-        NavItem {
-            icon: "apps"
-            label: "launcher"
         }
     }
 

modules/controlcenter/PaneRegistry.qml

@@ -0,0 +1,133 @@
+pragma Singleton
+
+import QtQuick
+
+/**
+ * PaneRegistry
+ * 
+ * Centralized registry for Control Center panes. This singleton provides a single
+ * source of truth for pane metadata (id, label, icon, component), eliminating
+ * the need for manual index management and making adding/removing panes trivial.
+ * 
+ * Usage:
+ * - Panes.qml: Dynamically creates panes from registry
+ * - Session.qml: Derives panes list from registry
+ * - NavRail.qml: Uses registry for navigation items
+ */
+QtObject {
+    id: root
+
+    /**
+     * Pane metadata structure:
+     * - id: Unique identifier for the pane (string)
+     * - label: Display label for the pane (string)
+     * - icon: Material icon name (string)
+     * - component: Component path relative to controlcenter module (string)
+     */
+    readonly property list<QtObject> panes: [
+        QtObject {
+            readonly property string id: "network"
+            readonly property string label: "network"
+            readonly property string icon: "router"
+            readonly property string component: "network/NetworkingPane.qml"
+        },
+        QtObject {
+            readonly property string id: "bluetooth"
+            readonly property string label: "bluetooth"
+            readonly property string icon: "settings_bluetooth"
+            readonly property string component: "bluetooth/BtPane.qml"
+        },
+        QtObject {
+            readonly property string id: "audio"
+            readonly property string label: "audio"
+            readonly property string icon: "volume_up"
+            readonly property string component: "audio/AudioPane.qml"
+        },
+        QtObject {
+            readonly property string id: "appearance"
+            readonly property string label: "appearance"
+            readonly property string icon: "palette"
+            readonly property string component: "appearance/AppearancePane.qml"
+        },
+        QtObject {
+            readonly property string id: "taskbar"
+            readonly property string label: "taskbar"
+            readonly property string icon: "task_alt"
+            readonly property string component: "taskbar/TaskbarPane.qml"
+        },
+        QtObject {
+            readonly property string id: "launcher"
+            readonly property string label: "launcher"
+            readonly property string icon: "apps"
+            readonly property string component: "launcher/LauncherPane.qml"
+        }
+    ]
+
+    /**
+     * Get the count of registered panes
+     */
+    readonly property int count: panes.length
+
+    /**
+     * Get pane labels as a list of strings
+     * Useful for Session.qml's panes property
+     */
+    readonly property var labels: {
+        const result = [];
+        for (let i = 0; i < panes.length; i++) {
+            result.push(panes[i].label);
+        }
+        return result;
+    }
+
+    /**
+     * Get pane metadata by index
+     * @param index The index of the pane
+     * @return The pane metadata object or null if index is out of bounds
+     */
+    function getByIndex(index: int): QtObject {
+        if (index >= 0 && index < panes.length) {
+            return panes[index];
+        }
+        return null;
+    }
+
+    /**
+     * Get pane index by label
+     * @param label The label to search for
+     * @return The index of the pane or -1 if not found
+     */
+    function getIndexByLabel(label: string): int {
+        for (let i = 0; i < panes.length; i++) {
+            if (panes[i].label === label) {
+                return i;
+            }
+        }
+        return -1;
+    }
+
+    /**
+     * Get pane metadata by label
+     * @param label The label to search for
+     * @return The pane metadata object or null if not found
+     */
+    function getByLabel(label: string): QtObject {
+        const index = getIndexByLabel(label);
+        return getByIndex(index);
+    }
+
+    /**
+     * Get pane metadata by id
+     * @param id The id to search for
+     * @return The pane metadata object or null if not found
+     */
+    function getById(id: string): QtObject {
+        for (let i = 0; i < panes.length; i++) {
+            if (panes[i].id === id) {
+                return panes[i];
+            }
+        }
+        return null;
+    }
+}
+

modules/controlcenter/Panes.qml

@@ -9,6 +9,7 @@ import "launcher"
 import qs.components
 import qs.services
 import qs.config
+import qs.modules.controlcenter
 import Quickshell.Widgets
 import QtQuick
 import QtQuick.Layouts
@@ -76,45 +77,13 @@ ClippingRectangle {
             }
         }
 
-        Pane {
+        Repeater {
-            index: 0
+            model: PaneRegistry.count
-            sourceComponent: NetworkingPane {
-                session: root.session
-            }
-        }
 
-        Pane {
+            Pane {
-            index: 1
+                required property int index
-            sourceComponent: BtPane {
+                paneIndex: index
-                session: root.session
+                componentPath: PaneRegistry.getByIndex(index).component
-            }
-        }
-
-        Pane {
-            index: 2
-            sourceComponent: AudioPane {
-                session: root.session
-            }
-        }
-
-        Pane {
-            index: 3
-            sourceComponent: AppearancePane {
-                session: root.session
-            }
-        }
-
-        Pane {
-            index: 4
-            sourceComponent: TaskbarPane {
-                session: root.session
-            }
-        }
-
-        Pane {
-            index: 5
-            sourceComponent: LauncherPane {
-                session: root.session
             }
         }
 
@@ -135,8 +104,8 @@ ClippingRectangle {
     component Pane: Item {
         id: pane
 
-        required property int index
+        required property int paneIndex
-        property alias sourceComponent: loader.sourceComponent
+        required property string componentPath
 
         implicitWidth: root.width
         implicitHeight: root.height
@@ -146,7 +115,7 @@ ClippingRectangle {
         
         // Function to compute if this pane should be active
         function updateActive(): void {
-            const diff = Math.abs(root.session.activeIndex - pane.index);
+            const diff = Math.abs(root.session.activeIndex - pane.paneIndex);
             const isActivePane = diff === 0;
             let shouldBeActive = false;
             
@@ -187,6 +156,13 @@ ClippingRectangle {
                 if (active && !pane.hasBeenLoaded) {
                     pane.hasBeenLoaded = true;
                 }
+                
+                // Load the component with initial properties when activated
+                if (active && !item) {
+                    loader.setSource(pane.componentPath, {
+                        "session": root.session
+                    });
+                }
             }
             
             onItemChanged: {

modules/controlcenter/Session.qml

@@ -1,8 +1,9 @@
 import QtQuick
 import "./state"
+import qs.modules.controlcenter
 
 QtObject {
-    readonly property list<string> panes: ["network", "bluetooth", "audio", "appearance", "taskbar", "launcher"]
+    readonly property list<string> panes: PaneRegistry.labels
 
     required property var root
     property bool floating: false