refactor(ui): match the dock settings page with the bar settings page (#3829)

port 2.0

quickshell/Common/SettingsTabs.qml

@@ -160,6 +160,7 @@ Singleton {
             "children": [
                 {
                     "id": "dock_general",
+                    "hidden": true,
                     "text": I18n.tr("General"),
                     "icon": "tune",
                     "tabIndex": 5,
@@ -167,6 +168,7 @@ Singleton {
                 },
                 {
                     "id": "dock_widgets",
+                    "hidden": true,
                     "text": I18n.tr("Apps & widgets"),
                     "icon": "widgets",
                     "tabIndex": 57,
@@ -174,6 +176,7 @@ Singleton {
                 },
                 {
                     "id": "dock_appearance",
+                    "hidden": true,
                     "text": I18n.tr("Appearance"),
                     "icon": "palette",
                     "tabIndex": 58,

quickshell/Modules/Settings/DockHubHeader.qml

@@ -12,6 +12,7 @@ Column {
     property var parentModal: null
     property string editingDockId: ""
     property string renameDraft: ""
+    readonly property var dockPages: ["dock_general", "dock_widgets", "dock_appearance"].map(id => SettingsTabs.page(id)).filter(page => page)
 
     function finishRename(value) {
         const id = editingDockId;
@@ -44,11 +45,10 @@ Column {
     }
 
     SettingsCard {
-        width: parent.width
         iconName: "dock_to_bottom"
         title: I18n.tr("Docks", "noun plural, settings card title listing configured docks")
         settingKey: "dockConfiguration"
-        tags: ["dock", "configuration", "add", "remove", "name", "show", "enable"]
+        tags: ["dock", "configuration", "add", "remove", "show", "enable"]
         headerActions: DButton {
             text: I18n.tr("Add", "verb, button that adds a new item to a list")
             iconName: "add"
@@ -75,11 +75,18 @@ Column {
                 onDeleteRequested: root.removeDock(modelData.id)
             }
         }
+    }
+
+    SettingsCard {
+        iconName: "dock_to_bottom"
+        title: dock.config?.name ?? ""
+        settingKey: "dockPlacement"
+        tags: ["dock", "layout", "placement", "position", "edge", "name", "rename"]
+        visible: dock.hasConfig
 
         SettingsRow {
             title: I18n.tr("Name")
             subtitle: root.editingDockId ? "" : dock.config?.name ?? ""
-            visible: dock.hasConfig
 
             DActionButton {
                 iconName: root.editingDockId ? "check" : "edit"
@@ -120,25 +127,33 @@ Column {
                 }
             }
         }
-    }
 
-    SettingsCard {
-        width: parent.width
-        visible: dock.hasConfig
-        iconName: "dock_to_bottom"
-        title: I18n.tr("Layout")
-        settingKey: "dockPlacement"
-        tags: ["dock", "layout", "placement", "position", "edge"]
+        SettingsRow {
+            title: I18n.tr("Layout", "noun, settings section title for arrangement options")
 
-        SettingsLayoutPicker {
-            edgePlacement: true
-            choices: [SettingsData.Position.Top, SettingsData.Position.Bottom, SettingsData.Position.Left, SettingsData.Position.Right].map(position => ({
-                        key: String(position),
-                        label: dock.positionLabel(position),
-                        enabled: dock.positionChoices.includes(position)
-                    }))
-            selectedKey: String(dock.config?.position ?? SettingsData.Position.Bottom)
-            onSelected: key => dock.setEnabled(true, Number(key))
+            body: SettingsLayoutPicker {
+                edgePlacement: true
+                choices: [SettingsData.Position.Top, SettingsData.Position.Bottom, SettingsData.Position.Left, SettingsData.Position.Right].map(position => ({
+                            key: String(position),
+                            label: dock.positionLabel(position),
+                            enabled: dock.positionChoices.includes(position)
+                        }))
+                selectedKey: String(dock.config?.position ?? SettingsData.Position.Bottom)
+                onSelected: key => dock.setEnabled(true, Number(key))
+            }
+        }
+
+        Repeater {
+            model: root.dockPages
+
+            delegate: SettingsNavRow {
+                required property var modelData
+
+                iconName: modelData.icon
+                title: modelData.text
+                hint: modelData.hint ?? ""
+                onClicked: keyboard => root.parentModal?.navigateTo(modelData.id, keyboard)
+            }
         }
     }
 }

quickshell/translations/settings_search_index.json

@@ -941,6 +941,26 @@
     "icon": "dock_to_bottom",
     "description": "Position, pinned apps, trash"
   },
+  {
+    "section": "dockPlacement",
+    "label": "Dock",
+    "tabIndex": -1,
+    "category": "Dock",
+    "keywords": [
+      "dock",
+      "edge",
+      "launcher bar",
+      "layout",
+      "name",
+      "panel",
+      "placement",
+      "position",
+      "rename",
+      "taskbar"
+    ],
+    "page": "dock",
+    "icon": "dock_to_bottom"
+  },
   {
     "section": "dockConfiguration",
     "label": "Docks",
@@ -953,7 +973,6 @@
       "docks",
       "enable",
       "launcher bar",
-      "name",
       "panel",
       "remove",
       "show",
@@ -1407,24 +1426,6 @@
     "page": "theme_surfaces",
     "description": "Faint edge on cards, pills and widgets"
   },
-  {
-    "section": "dockPlacement",
-    "label": "Layout",
-    "tabIndex": -1,
-    "category": "Dock",
-    "keywords": [
-      "dock",
-      "edge",
-      "launcher bar",
-      "layout",
-      "panel",
-      "placement",
-      "position",
-      "taskbar"
-    ],
-    "page": "dock",
-    "icon": "dock_to_bottom"
-  },
   {
     "section": "iconThemeLight",
     "label": "Light mode theme",