Make Settings sidebar content scrollable

config/dot/quickshell/modules/settings/SettingsSidebar.qml

@@ -11,6 +11,11 @@ Rectangle {
 
     readonly property var results: SettingsSearch.search(root.query)
 
+    onQueryChanged: {
+        if (sidebarScroll)
+            sidebarScroll.contentY = 0;
+    }
+
     function pageLabel(page: string): string {
         const found = root.destinations.find(item => item.page === page);
         return found ? found.label : "Settings";
@@ -40,8 +45,15 @@ Rectangle {
     border.width: 0
 
     Column {
-        anchors.fill: parent
-        anchors.margins: 18
+        id: sidebarHeader
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: parent.top
+        anchors.leftMargin: 18
+        anchors.rightMargin: 18
+        anchors.topMargin: 18
+        height: implicitHeight
         spacing: 12
 
         Text {
@@ -103,12 +115,35 @@ Rectangle {
                 onClicked: searchInput.forceActiveFocus()
             }
         }
+    }
+
+    Flickable {
+        id: sidebarScroll
+
+        anchors.left: parent.left
+        anchors.right: parent.right
+        anchors.top: sidebarHeader.bottom
+        anchors.bottom: healthFooter.top
+        anchors.leftMargin: 18
+        anchors.rightMargin: 18
+        anchors.topMargin: 12
+        anchors.bottomMargin: 12
+        contentWidth: width
+        contentHeight: scrollContent.implicitHeight
+        flickableDirection: Flickable.VerticalFlick
+        boundsBehavior: Flickable.StopAtBounds
+        clip: true
 
-        // ── Search results ──────────────────────────────────────────────────
-        // Typing searches the settings themselves, not the twelve page names.
-        // "gaps", "wallpaper", and "screenshot" all used to find nothing, which
-        // made the app feel far smaller than it is.
         Column {
+            id: scrollContent
+
+            width: sidebarScroll.width
+
+            // ── Search results ──────────────────────────────────────────────
+            // Typing searches the settings themselves, not page names.
+            Column {
+                id: searchResults
+
                 width: parent.width
                 spacing: 3
                 visible: root.query !== ""
@@ -183,6 +218,8 @@ Rectangle {
             }
 
             Column {
+                id: navigationList
+
                 width: parent.width
                 spacing: 4
                 visible: root.query === ""
@@ -251,8 +288,11 @@ Rectangle {
                 }
             }
         }
+    }
 
     Rectangle {
+        id: healthFooter
+
         anchors.left: parent.left
         anchors.right: parent.right
         anchors.bottom: parent.bottom

tests/quickshell/settings-sidebar-layout-contract.sh

@@ -0,0 +1,87 @@
+#!/usr/bin/env bash
+
+set -euo pipefail
+
+repo_dir="$(cd "$(dirname "${BASH_SOURCE[0]}")/../.." && pwd)"
+sidebar="$repo_dir/config/dot/quickshell/modules/settings/SettingsSidebar.qml"
+
+fail() {
+    printf 'settings sidebar layout contract: %s\n' "$1" >&2
+    exit 1
+}
+
+python3 - "$sidebar" <<'PY' || fail 'sidebar does not keep its header and footer pinned around one vertical scroll surface'
+import re
+import sys
+
+
+text = open(sys.argv[1], encoding="utf-8").read()
+
+
+def object_block(type_name: str, object_id: str) -> tuple[int, int, str]:
+    pattern = re.compile(
+        rf"\b{re.escape(type_name)}\s*\{{(?:(?!\n\s*[A-Za-z][A-Za-z0-9.]*\s*\{{).)*?"
+        rf"\bid\s*:\s*{re.escape(object_id)}\b",
+        re.S,
+    )
+    match = pattern.search(text)
+    if not match:
+        raise AssertionError(f"missing {type_name} id {object_id}")
+
+    start = match.start()
+    opening = text.index("{", start)
+    depth = 0
+    in_string = False
+    escaped = False
+    index = opening
+    while index < len(text):
+        character = text[index]
+        if in_string:
+            if escaped:
+                escaped = False
+            elif character == "\\":
+                escaped = True
+            elif character == '"':
+                in_string = False
+        elif character == '"':
+            in_string = True
+        elif character == "{":
+            depth += 1
+        elif character == "}":
+            depth -= 1
+            if depth == 0:
+                return start, index + 1, text[start:index + 1]
+        index += 1
+    raise AssertionError(f"unterminated {type_name} id {object_id}")
+
+
+try:
+    header_start, header_end, header = object_block("Column", "sidebarHeader")
+    scroll_start, scroll_end, scroll = object_block("Flickable", "sidebarScroll")
+    footer_start, _, footer = object_block("Rectangle", "healthFooter")
+
+    assert header_start < scroll_start < scroll_end < footer_start
+    assert re.search(r"anchors\.top\s*:\s*parent\.top", header)
+    assert re.search(r"\bid\s*:\s*searchInput\b", header)
+
+    assert re.search(r"anchors\.top\s*:\s*sidebarHeader\.bottom", scroll)
+    assert re.search(r"anchors\.bottom\s*:\s*healthFooter\.top", scroll)
+    assert re.search(r"contentWidth\s*:\s*width", scroll)
+    assert re.search(r"contentHeight\s*:\s*scrollContent\.implicitHeight", scroll)
+    assert re.search(r"flickableDirection\s*:\s*Flickable\.VerticalFlick", scroll)
+    assert re.search(r"boundsBehavior\s*:\s*Flickable\.StopAtBounds", scroll)
+    assert re.search(r"clip\s*:\s*true", scroll)
+    assert scroll.count("Flickable {") == 1
+
+    assert re.search(r"\bid\s*:\s*scrollContent\b", scroll)
+    assert re.search(r"\bid\s*:\s*searchResults\b", scroll)
+    assert re.search(r"\bid\s*:\s*navigationList\b", scroll)
+    assert re.search(r"visible\s*:\s*root\.query\s*!==\s*\"\"", scroll)
+    assert re.search(r"visible\s*:\s*root\.query\s*===\s*\"\"", scroll)
+    assert re.search(r"anchors\.bottom\s*:\s*parent\.bottom", footer)
+except AssertionError as error:
+    print(error, file=sys.stderr)
+    raise SystemExit(1)
+PY
+
+printf 'settings sidebar layout contract: PASS\n'