feat(island): clock pill with VM dots and flick content

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

1 files changed, 103 insertions, 0 deletions

diff --git a/desktop/island/ClockPill.qml b/desktop/island/ClockPill.qml
new file mode 100644
index 0000000..f1217f1
--- /dev/null
+++ b/desktop/island/ClockPill.qml
@@ -0,0 +1,103 @@
+// Copyright (C) 2026 Danilo M. <danix@danix.xyz>
+//
+// This program is free software; you can redistribute it and/or modify
+// it under the terms of the GNU General Public License version 2 as
+// published by the Free Software Foundation.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+
+import Quickshell
+import Quickshell.Widgets
+import QtQuick
+import ".."
+import "../modules/vm"
+import "Logic.js" as Logic
+
+// Date and time at rest, with one dot per VM that is not plainly shut off.
+// During a flick: the workspace's desktop icon, the app's icon and its name.
+Capsule {
+    id: pill
+
+    property bool flicking: false
+    property string flickWs: ""
+    property string flickApp: ""
+
+    readonly property var entry: flickApp ? DesktopEntries.heuristicLookup(flickApp) : null
+    readonly property string wsIcon: Workspaces.icon(flickWs)
+
+    restWidth: (flicking ? flickRow.implicitWidth : restRow.implicitWidth) + 28
+
+    SystemClock { id: clock; precision: SystemClock.Minutes }
+
+    Row {
+        id: restRow
+        anchors.centerIn: parent
+        spacing: 10
+        opacity: pill.flicking ? 0 : 1
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            text: Qt.formatDateTime(clock.date, "ddd dd/MM")
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
+            color: Theme.subtext
+        }
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            text: Qt.formatDateTime(clock.date, "HH:mm")
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize; weight: Font.DemiBold }
+            color: Theme.text
+        }
+        Repeater {
+            model: Virsh.names.filter(n => Logic.vmRole(Virsh.vms[n]) !== "")
+            delegate: Rectangle {
+                required property string modelData
+                anchors.verticalCenter: parent.verticalCenter
+                width: 8
+                height: 8
+                radius: 4
+                color: Theme[Logic.vmRole(Virsh.vms[modelData])]
+            }
+        }
+    }
+
+    Row {
+        id: flickRow
+        anchors.centerIn: parent
+        spacing: 8
+        opacity: pill.flicking ? 1 : 0
+        Behavior on opacity { NumberAnimation { duration: 150 } }
+
+        IconImage {
+            anchors.verticalCenter: parent.verticalCenter
+            visible: pill.wsIcon !== ""
+            implicitSize: 18
+            source: pill.wsIcon ? Quickshell.iconPath(pill.wsIcon, true) : ""
+        }
+        // A named workspace, or one past eight, has no icon: its number.
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            visible: pill.wsIcon === ""
+            text: pill.flickWs
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 1; weight: Font.DemiBold }
+            color: Theme.accent
+        }
+        IconImage {
+            anchors.verticalCenter: parent.verticalCenter
+            visible: pill.flickApp !== ""
+            implicitSize: 18
+            source: pill.flickApp
+                ? Quickshell.iconPath(pill.entry?.icon || pill.flickApp, true) : ""
+        }
+        Text {
+            anchors.verticalCenter: parent.verticalCenter
+            visible: pill.flickApp !== ""
+            text: pill.entry?.name || pill.flickApp
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 1 }
+            color: Theme.text
+        }
+    }
+}