feat(island): the animated capsule both pills are made of

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

1 files changed, 51 insertions, 0 deletions

diff --git a/desktop/island/Capsule.qml b/desktop/island/Capsule.qml
new file mode 100644
index 0000000..76329e0
--- /dev/null
+++ b/desktop/island/Capsule.qml
@@ -0,0 +1,51 @@
+// 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 QtQuick
+import ".."
+
+// One pill. Its size animates between the rest size and a panel size; the
+// radius is clamped so it is a full capsule at rest and a rounded panel when
+// open, and stays a valid shape mid-animation.
+Rectangle {
+    id: cap
+
+    property real restWidth: 0
+    property real restHeight: 34
+    property bool expanded: false
+    property real panelWidth: 0
+    property real panelHeight: 0
+    readonly property bool hovered: hover.hovered
+
+    default property alias content: inner.data
+
+    width: expanded ? panelWidth : restWidth
+    height: expanded ? panelHeight : restHeight
+
+    // Duration-driven (velocity -1) and Immediate reversing, so a panel
+    // closed mid-open turns around from where it is instead of restarting.
+    Behavior on width {
+        SmoothedAnimation { velocity: -1; duration: 220; reversingMode: SmoothedAnimation.Immediate }
+    }
+    Behavior on height {
+        SmoothedAnimation { velocity: -1; duration: 220; reversingMode: SmoothedAnimation.Immediate }
+    }
+
+    radius: Math.min(14, width / 2, height / 2)
+    color: Qt.alpha(Theme.base, 0.92)
+    border.width: 1
+    border.color: Qt.alpha(Theme.text, 0.12)
+    clip: true
+
+    HoverHandler { id: hover }
+
+    Item { id: inner; anchors.fill: parent }
+}