feat(island): configurable pill order, dragged on a settings page

The pills' x positions were written per pill around a fixed centre gap.
They now come from one pillX() over Prefs.island.pills: the first two
sit left of the screen's centre and the last two right, each a gap past
the visible pills nearer the centre, so a hidden player or OBS pill
leaves no hole and a panel still widens a pill away from the centre.
The default order is the previous layout.

The Island bar group gains a Pills page: four fixed slots with the centre
marked, a pill dragged takes the nearest slot and the others step aside
while it moves. The drag holds the pointer (preventStealing) so the page
does not scroll under it.

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

1 files changed, 21 insertions, 12 deletions

diff --git a/desktop/island/Island.qml b/desktop/island/Island.qml
index f17358d..f11225b 100644
--- a/desktop/island/Island.qml
+++ b/desktop/island/Island.qml
@@ -298,13 +298,24 @@ PanelWindow {
         }
     }
 
-    // Both pills start overlapped at the sliver, above the screen edge, and
-    // travel down and apart. At reveal 1 the clock ends gap/2 left of the
-    // centre and the status gap/2 right of it; the status pill's left edge
-    // stays put while its panel widens it.
+    // The pills start overlapped at the sliver, above the screen edge, and
+    // travel down and apart. Prefs.island.pills orders them: the first two
+    // end left of the centre, the last two right, each a gap past the visible
+    // ones nearer the centre, the nearest gap/2 from it. A pill keeps its
+    // edge facing the centre while a panel widens it, and one hidden (no
+    // player, no OBS) leaves no hole.
+    readonly property var pillOrder: Prefs.island.pills
+    function pillX(w, name) {
+        const i = win.pillOrder.indexOf(name);
+        const left = i < 2;
+        const nearer = left ? win.pillOrder.slice(i + 1, 2) : win.pillOrder.slice(2, i);
+        const byName = { media: media, clock: clock, status: status, obs: obs };
+        const off = nearer.reduce((o, n) => byName[n].visible ? o + byName[n].width + win.gap : o, win.gap / 2);
+        return win.cx - w / 2 + (left ? -1 : 1) * (off + w / 2) * win.reveal;
+    }
     ClockPill {
         id: clock
-        x: win.cx - width / 2 - (win.gap / 2 + width / 2) * win.reveal
+        x: win.pillX(width, "clock")
         y: -height + (win.top + height) * win.clockDrop
         opacity: Math.min(1, win.clockDrop * 2)
         flicking: win.flicking
@@ -317,7 +328,7 @@ PanelWindow {
 
     StatusPill {
         id: status
-        x: win.cx - width / 2 + (win.gap / 2 + width / 2) * win.reveal
+        x: win.pillX(width, "status")
         y: -height + (win.top + height) * win.reveal
         opacity: Math.min(1, win.reveal * 2)
         sound: win.sound
@@ -335,8 +346,7 @@ PanelWindow {
         onOpenDrawer: { win.panel = ""; win.drawer.show("sound"); }
     }
 
-    // While something plays or is paused; it sits left of the clock pill and
-    // follows it as the calendar widens it. Hidden outright while the island
+    // While something plays or is paused. Hidden outright while the island
     // is retracted: opacity 0 alone leaves it visible, and its marquee then
     // animated off-screen for as long as anything played, repainting the
     // island every frame (measured at 42% of a core, idle).
@@ -344,19 +354,18 @@ PanelWindow {
         id: media
         visible: win.reveal > 0
             && (Player.playing || Player.current?.playbackState === MprisPlaybackState.Paused)
-        x: win.cx - width / 2 - (win.gap * 1.5 + clock.width + width / 2) * win.reveal
+        x: win.pillX(width, "media")
         y: -height + (win.top + height) * win.reveal
         opacity: Math.min(1, win.reveal * 2)
     }
 
-    // While OBS runs; right of the status pill, following it as the sound
-    // panel widens it.
+    // While OBS runs.
     ObsPill {
         id: obs
         visible: Obs.connected
         panel: win.panel
         onOpenPanel: win.panel = "obs"
-        x: win.cx - width / 2 + (win.gap * 1.5 + status.width + width / 2) * win.reveal
+        x: win.pillX(width, "obs")
         y: -height + (win.top + height) * win.reveal
         opacity: Math.min(1, win.reveal * 2)
     }