settings: the sidebar is grouped

Ten pages in one flat list had stopped reading as a list. A module now
names its group, and the sidebar sorts by it and draws a small heading
where it changes: Account (user, git), Appearance (wallpaper, theme,
icons), Desktop (HyprSunset, HyprIdle, autostart) and Assistant (the
daemon, Ask presets). Groups keep the order their first page is
declared in, so shell.qml's module order still decides.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 58 insertions, 33 deletions

diff --git a/desktop/Settings.qml b/desktop/Settings.qml
index e8895a4..dd376c7 100644
--- a/desktop/Settings.qml
+++ b/desktop/Settings.qml
@@ -24,11 +24,17 @@ Scope {
     property bool open: false
     property string page: ""
 
+    // Grouped: a group's pages together, groups in the order their first
+    // page is declared, pages in declaration order within a group.
     readonly property var pages: {
         const out = [];
         for (let i = 0; i < root.modules.length; i++)
             if (root.modules[i].settings) out.push(root.modules[i]);
-        return out;
+        const order = [];
+        for (const m of out) if (!order.includes(m.group)) order.push(m.group);
+        return out.map((m, i) => ({ m, i }))
+            .sort((a, b) => order.indexOf(a.m.group) - order.indexOf(b.m.group) || a.i - b.i)
+            .map(x => x.m);
     }
     property string query: ""
 
@@ -166,48 +172,67 @@ Scope {
                     spacing: 4
                     model: root.found
 
-                    delegate: Rectangle {
-                        id: entry
+                    // A group's heading above its first entry, then the entry.
+                    delegate: Column {
+                        id: slot
                         required property var modelData
-                        readonly property bool selected: root.current === modelData.mod && modelData.key === ""
+                        required property int index
                         width: side.width
-                        height: modelData.hit ? 46 : 36
-                        radius: 8
-                        color: selected ? Qt.alpha(Theme.accent, 0.22)
-                             : area.containsMouse ? Qt.alpha(Theme.text, 0.06) : "transparent"
 
                         Text {
-                            id: entryIcon
-                            anchors { left: parent.left; leftMargin: 10; verticalCenter: parent.verticalCenter }
-                            text: entry.modelData.mod.icon
-                            font { family: Theme.iconFamily; pixelSize: Theme.fontSize }
-                            color: Theme.text
+                            visible: slot.modelData.mod.group !== ""
+                                     && (slot.index === 0 || root.found[slot.index - 1].mod.group !== slot.modelData.mod.group)
+                            leftPadding: 10
+                            topPadding: slot.index === 0 ? 4 : 14
+                            bottomPadding: 4
+                            text: slot.modelData.mod.group.toUpperCase()
+                            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 5; bold: true; letterSpacing: 1 }
+                            color: Theme.overlay
                         }
-                        Column {
-                            anchors { left: entryIcon.right; leftMargin: 10; right: parent.right; rightMargin: 8
-                                      verticalCenter: parent.verticalCenter }
+
+                        Rectangle {
+                            id: entry
+                            readonly property var modelData: slot.modelData
+                            readonly property bool selected: root.current === modelData.mod && modelData.key === ""
+                            width: side.width
+                            height: modelData.hit ? 46 : 36
+                            radius: 8
+                            color: selected ? Qt.alpha(Theme.accent, 0.22)
+                                 : area.containsMouse ? Qt.alpha(Theme.text, 0.06) : "transparent"
+
                             Text {
-                                text: entry.modelData.mod.label
-                                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
+                                id: entryIcon
+                                anchors { left: parent.left; leftMargin: 10; verticalCenter: parent.verticalCenter }
+                                text: entry.modelData.mod.icon
+                                font { family: Theme.iconFamily; pixelSize: Theme.fontSize }
                                 color: Theme.text
                             }
-                            // Which buried setting matched, when the label did not.
-                            Text {
-                                visible: entry.modelData.hit !== ""
-                                width: parent.width
-                                elide: Text.ElideRight
-                                text: entry.modelData.hit
-                                font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 5 }
-                                color: Theme.subtext
+                            Column {
+                                anchors { left: entryIcon.right; leftMargin: 10; right: parent.right; rightMargin: 8
+                                          verticalCenter: parent.verticalCenter }
+                                Text {
+                                    text: entry.modelData.mod.label
+                                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
+                                    color: Theme.text
+                                }
+                                // Which buried setting matched, when the label did not.
+                                Text {
+                                    visible: entry.modelData.hit !== ""
+                                    width: parent.width
+                                    elide: Text.ElideRight
+                                    text: entry.modelData.hit
+                                    font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 5 }
+                                    color: Theme.subtext
+                                }
                             }
-                        }
 
-                        MouseArea {
-                            id: area
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: root.go(entry.modelData)
+                            MouseArea {
+                                id: area
+                                anchors.fill: parent
+                                hoverEnabled: true
+                                cursorShape: Qt.PointingHandCursor
+                                onClicked: root.go(entry.modelData)
+                            }
                         }
                     }
                 }