Let the Dock choose an edge, choose its screens, and be dragged into order

Three things that were parked, and the reasons they were parked turned out to be
the useful part of doing them.

The Dock can sit on the left or the right as well as the bottom. Everything that
assumed the bottom edge is now asked which edge it is on: the anchors, the axis
that gets an implicit size, the sliver of input region that survives hiding, the
direction the body slides away in, and which side a tooltip opens towards. The
body was a Row and is a Grid, because one declaration then serves both
orientations -- Row and Column would each need their own children, and the
cross-axis anchors that centre items in a Row are the wrong axis in a Column.

Bottom is unchanged in every particular, and the settings default to it, so a
hot reload in the middle of this work left the running dock exactly where it
was.

One bug worth recording because static review would never have found it: a dock
spans the edge it lives on, which means anchoring BOTH ends of that edge. The
first side dock anchored top and left only, was free to collapse to its implicit
height, and came out one pixel tall. It parsed, it loaded, and it rendered
nothing. The contract measures the geometry rather than reading the source for
that reason, and was verified by putting the single-ended anchor back.

Per-screen is a list of names where empty means every screen, because a list is
what goes stale when a display is unplugged and "all" should not be spelled as
one. Turning off the last screen collapses to "all" rather than leaving no dock
anywhere and no obvious way back.

Pins can be dragged by a grip. The objection this file recorded for a long time
was real -- dragging inside a Flickable inside a scrolling page fails in a way
that reads as breakage -- and the answer is preventStealing on the grip, so the
page cannot claim a gesture that started there. The arrow buttons stay: they are
the keyboard-reachable path and a grip is not. The order is held locally during
the drag and written once on release, rather than rewriting settings.json for
every slot crossed.

Claude-Session: https://claude.ai/code/session_01BRvzt4H8XXLPVH5MyYdk9L

config/dot/quickshell/modules/dock/DockBody.qml

@@ -111,30 +111,51 @@ Rectangle {
         inset: parent.radius
     }
 
-    implicitWidth: row.implicitWidth + Theme.dockPadding * 2
-    implicitHeight: row.implicitHeight + Theme.dockPadding * 2
+    implicitWidth: strip.implicitWidth + Theme.dockPadding * 2
+    implicitHeight: strip.implicitHeight + Theme.dockPadding * 2
 
     // The item the tooltip is currently describing, or null.
     property Item hoveredItem: null
 
-    Row {
-        id: row
+    // Set by the Dock. A side dock runs the same strip down the screen instead
+    // of across it.
+    property bool vertical: false
+
+    // Which way a tooltip points on a side dock: away from the screen edge, so
+    // it never opens off-screen.
+    property bool leftSide: true
+
+    // Explicit rather than left to Grid's wrapping. This is always one line, so
+    // saying how many cells it holds is both simpler to read and immune to
+    // Grid's default column count quietly wrapping a long dock.
+    readonly property int cellCount: 2 + (root.items ? root.items.length : 0)
+
+    // A Grid rather than a Row so one declaration serves both orientations.
+    // Row and Column would each need their own children, and the cross-axis
+    // anchors that centre items in a Row (verticalCenter) are the wrong axis in
+    // a Column -- Grid centres through its own alignment properties instead,
+    // which is the same result without the anchors positioners disallow.
+    Grid {
+        id: strip
         anchors.centerIn: parent
         spacing: Theme.dockGap
+        rows: root.vertical ? root.cellCount : 1
+        columns: root.vertical ? 1 : root.cellCount
+        horizontalItemAlignment: Grid.AlignHCenter
+        verticalItemAlignment: Grid.AlignVCenter
 
         ShowAppsButton {
             id: showApps
-            anchors.verticalCenter: parent.verticalCenter
             onEntered: root.hoveredItem = showApps
             onExited: if (root.hoveredItem === showApps)
                 root.hoveredItem = null
         }
 
-        // Separator between the launcher and the apps, as in GNOME's dash.
+        // Separator between the launcher and the apps, as in GNOME's dash. It
+        // turns with the dock: a hairline across a column, down a row.
         Rectangle {
-            anchors.verticalCenter: parent.verticalCenter
-            width: 1
-            height: Theme.dockIconSize * 0.7
+            width: root.vertical ? Theme.dockIconSize * 0.7 : 1
+            height: root.vertical ? 1 : Theme.dockIconSize * 0.7
             border.width: 0
             color: Theme.alpha(Theme.fg, 0.14)
         }
@@ -146,7 +167,6 @@ Rectangle {
                 id: dockItem
                 required property var modelData
                 app: modelData
-                anchors.verticalCenter: parent.verticalCenter
                 onEntered: root.hoveredItem = dockItem
                 onExited: if (root.hoveredItem === dockItem)
                     root.hoveredItem = null
@@ -172,16 +192,26 @@ Rectangle {
             }
         }
 
-        // Centered on the hovered item, clamped inside the dock. Reads the item's
-        // x directly (rather than mapToItem) so the binding re-evaluates when
-        // the row reflows.
+        // Centred on the hovered item along the dock's own axis, and placed just
+        // outside the edge it lives on. Reads the item's position directly
+        // (rather than mapToItem) so the binding re-evaluates when the strip
+        // reflows.
         x: {
             if (!root.hoveredItem)
                 return 0;
-            const center = row.x + root.hoveredItem.x + root.hoveredItem.width / 2;
-            return Math.max(4, Math.min(root.width - width - 4, center - width / 2));
+            if (root.vertical)
+                return root.leftSide ? root.width + 8 : -width - 8;
+            const centre = strip.x + root.hoveredItem.x + root.hoveredItem.width / 2;
+            return Math.max(4, Math.min(root.width - width - 4, centre - width / 2));
+        }
+        y: {
+            if (!root.hoveredItem)
+                return -height - 8;
+            if (!root.vertical)
+                return -height - 8;
+            const centre = strip.y + root.hoveredItem.y + root.hoveredItem.height / 2;
+            return Math.max(4, Math.min(root.height - height - 4, centre - height / 2));
         }
-        y: -height - 8
 
         width: tipLabel.implicitWidth + Theme.popoverPadding * 2
         height: tipLabel.implicitHeight + 8