StemRoller: desktop stem separator, Android stems player, and server daemons

- stemroller/: PySide6/QML desktop app and player for separating music into stems - android/: Plex music player that plays per-stem mixes, with Android Auto support, a graphic + parametric (Equalizer APO-style) EQ, and offline downloads - server/: stemserve (serves stems to the app) and stemd (separates the library on the server's GPU, with "Stem Now" priority requests) Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-14 21:17:17 -07:00
1 parent 716c5499ff
commit 1845f03c41
@@ -0,0 +1,84 @@
+import QtQuick
+import QtQuick.Controls.Basic
+
+// Glossy pill, 40px. variant: "filled" | "tonal" | "text". Cyan glow on hover.
+Button {
+    id: b
+    property string iconName: ""
+    property string variant: "filled"
+    property color tone: Theme.primary
+    property int pillHeight: 40
+    readonly property bool filled: variant === "filled"
+    readonly property bool tonal: variant === "tonal"
+    readonly property color fg: filled ? "#FFFFFF" : (variant === "text" ? tone : Theme.textHi)
+
+    implicitHeight: pillHeight
+    implicitWidth: Math.max(pillHeight, row.implicitWidth + leftPadding + rightPadding)
+    leftPadding: text.length ? (iconName.length ? 14 : 18) : 0
+    rightPadding: text.length ? 18 : 0
+    font.family: Theme.fontFamily
+    font.pixelSize: Theme.fs14
+    font.weight: Font.DemiBold
+    hoverEnabled: true
+    focusPolicy: Qt.TabFocus
+    opacity: enabled ? 1 : 0.4
+
+    contentItem: Item {
+        implicitWidth: row.implicitWidth
+        implicitHeight: row.implicitHeight
+        Row {
+            id: row
+            anchors.centerIn: parent
+            spacing: 8
+            Icon {
+                visible: b.iconName.length > 0
+                name: b.iconName
+                color: b.fg
+                size: 18
+                anchors.verticalCenter: parent.verticalCenter
+            }
+            Txt {
+                visible: b.text.length > 0
+                text: b.text
+                font: b.font
+                color: b.fg
+                anchors.verticalCenter: parent.verticalCenter
+            }
+        }
+    }
+
+    background: Item {
+        implicitHeight: b.pillHeight
+        Glow {
+            radius: Math.round(b.pillHeight / 2)
+            opacity: (b.hovered || b.visualFocus) && b.enabled ? (b.filled ? 0.55 : 0.35) : 0
+        }
+        Rectangle {
+            id: base
+            anchors.fill: parent
+            radius: height / 2
+            color: b.filled ? b.tone : (b.tonal ? Theme.alpha(b.tone, 0.16) : "transparent")
+            border.width: b.variant === "text" ? 0 : 1
+            border.color: b.filled ? Qt.lighter(b.tone, 1.3) : Theme.alpha(b.tone, 0.35)
+
+            // Aero gloss on the top half
+            Rectangle {
+                visible: b.variant !== "text"
+                anchors { left: parent.left; right: parent.right; top: parent.top; margins: 1 }
+                height: (parent.height - 2) / 2
+                topLeftRadius: height
+                topRightRadius: height
+                gradient: Gradient {
+                    GradientStop { position: 0; color: Qt.rgba(1, 1, 1, b.filled ? 0.32 : 0.10) }
+                    GradientStop { position: 1; color: Qt.rgba(1, 1, 1, b.filled ? 0.06 : 0.0) }
+                }
+            }
+            Rectangle {
+                anchors.fill: parent
+                radius: parent.radius
+                color: b.down ? Qt.rgba(0, 0, 0, 0.18) : (b.hovered ? Qt.rgba(1, 1, 1, 0.07) : "transparent")
+                Behavior on color { ColorAnimation { duration: Theme.fast } }
+            }
+        }
+    }
+}