desktop: centred About, and a resizable settings sidebar

The About text sat in the top-left corner of an otherwise empty page; it
is now centred both ways in the space beside the sidebar.

The sidebar's edge, the rule between it and the page, drags to resize it
between 160 and 420px, lit in the accent while hovered. The width lives
in Prefs, written once on release rather than on every pixel of the
drag, so it survives a restart without a file to edit by hand.

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

1 files changed, 68 insertions, 34 deletions

diff --git a/desktop/Settings.qml b/desktop/Settings.qml
index 2e6d1f1..986ec26 100644
--- a/desktop/Settings.qml
+++ b/desktop/Settings.qml
@@ -32,6 +32,11 @@ Scope {
     }
     property string query: ""
 
+    // The sidebar's width: the saved one, or the live one while its edge is
+    // dragged (-1 when not), saved once on release.
+    property real dragWidth: -1
+    readonly property real sideWidth: root.dragWidth >= 0 ? root.dragWidth : Prefs.settingsSidebar
+
     // What the search keeps, as {mod, hit, key}. A page matched by its label
     // or a keyword has key "" and opens at the top; hit is the keyword when
     // the label did not match. Then each row inside a page that matches, from
@@ -99,7 +104,7 @@ Scope {
                 Rectangle {
                     id: search
                     anchors { top: parent.top; left: parent.left; margins: 12 }
-                    width: 200
+                    width: root.sideWidth
                     height: 34
                     radius: 8
                     color: Theme.surface
@@ -150,7 +155,7 @@ Scope {
                 ListView {
                     id: side
                     anchors { top: search.bottom; left: parent.left; bottom: parent.bottom; margins: 12 }
-                    width: 200
+                    width: root.sideWidth
                     spacing: 4
                     model: root.found
 
@@ -212,44 +217,73 @@ Scope {
                     id: rule
                     anchors { top: parent.top; bottom: parent.bottom; left: side.right; leftMargin: 12 }
                     width: 1
-                    color: Qt.alpha(Theme.text, 0.12)
+                    color: grip.containsMouse || grip.pressed ? Qt.alpha(Theme.accent, 0.6) : Qt.alpha(Theme.text, 0.12)
                 }
 
-                // The landing page, where back returns to: what this shell is.
-                Column {
-                    anchors { top: parent.top; right: parent.right; left: rule.right; margins: 16 }
-                    visible: root.current === null
-                    spacing: 12
-
-                    Text {
-                        height: 44
-                        verticalAlignment: Text.AlignVCenter
-                        text: "About"
-                        font { family: Theme.fontFamily; pixelSize: Theme.fontSize + 2; bold: true }
-                        color: Theme.text
+                // The rule is the sidebar's edge: drag it to resize.
+                MouseArea {
+                    id: grip
+                    anchors { top: parent.top; bottom: parent.bottom; horizontalCenter: rule.horizontalCenter }
+                    width: 10
+                    hoverEnabled: true
+                    cursorShape: Qt.SplitHCursor
+                    onPositionChanged: mouse => {
+                        if (!pressed) return;
+                        // The rule sits 12px right of the sidebar, which starts 12px in.
+                        const x = mapToItem(parent, mouse.x, 0).x - 24;
+                        root.dragWidth = Math.max(Prefs.sidebarMin, Math.min(Prefs.sidebarMax, x));
+                    }
+                    onReleased: {
+                        if (root.dragWidth >= 0) Prefs.setSettingsSidebar(root.dragWidth);
+                        root.dragWidth = -1;
                     }
+                }
 
-                    Text {
+                // The landing page, where back returns to: what this shell is,
+                // centred in the space beside the sidebar.
+                Item {
+                    anchors { top: parent.top; right: parent.right; bottom: parent.bottom; left: rule.right; margins: 16 }
+                    visible: root.current === null
+
+                    Column {
+                        anchors.centerIn: parent
                         width: Math.min(parent.width, 560)
-                        wrapMode: Text.Wrap
-                        textFormat: Text.PlainText
-                        lineHeight: 1.25
-                        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
-                        color: Theme.text
-                        text: "A desktop shell for Hyprland, built on Quickshell.\n\n"
-                            + "SUPER alone opens the drawer, the quick area: notifications, sound, "
-                            + "network, bluetooth, mail, VMs, performance, the clipboard and the "
-                            + "rest of what changes during the day. The island at the top of the "
-                            + "main screen carries the clock, volume, tray, keyboard layout and "
-                            + "calendar, and SUPER+Home opens the assistant.\n\n"
-                            + "This window holds what is set once and left alone. Pick a page on "
-                            + "the left, or search for a setting by name."
-                    }
+                        spacing: 12
 
-                    Text {
-                        text: "GPLv2. Colours follow the wallpaper through unified-desktop-theme."
-                        font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
-                        color: Theme.subtext
+                        Text {
+                            width: parent.width
+                            horizontalAlignment: Text.AlignHCenter
+                            text: "About"
+                            font { family: Theme.fontFamily; pixelSize: Theme.fontSize + 2; bold: true }
+                            color: Theme.text
+                        }
+
+                        Text {
+                            width: parent.width
+                            horizontalAlignment: Text.AlignHCenter
+                            wrapMode: Text.Wrap
+                            textFormat: Text.PlainText
+                            lineHeight: 1.25
+                            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
+                            color: Theme.text
+                            text: "A desktop shell for Hyprland, built on Quickshell.\n\n"
+                                + "SUPER alone opens the drawer, the quick area: notifications, sound, "
+                                + "network, bluetooth, mail, VMs, performance, the clipboard and the "
+                                + "rest of what changes during the day. The island at the top of the "
+                                + "main screen carries the clock, volume, tray, keyboard layout and "
+                                + "calendar, and SUPER+Home opens the assistant.\n\n"
+                                + "This window holds what is set once and left alone. Pick a page on "
+                                + "the left, or search for a setting by name."
+                        }
+
+                        Text {
+                            width: parent.width
+                            horizontalAlignment: Text.AlignHCenter
+                            wrapMode: Text.Wrap
+                            text: "GPLv2. Colours follow the wallpaper through unified-desktop-theme."
+                            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+                            color: Theme.subtext
+                        }
                     }
                 }