From 1eeaf07a87f8d0e99c680015069051597a1c7bc5 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Mon, 18 May 2026 19:25:32 -0600
Subject: [PATCH] feat(slint): queue and lyrics buttons in the header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add Queue and Lyrics icon buttons to the left of the hamburger. Visual
for now — they will toggle the right-side sidebar once it lands.

cc
---
 crates/qbz-slint/ui/assets/icons/captions.svg |  7 +++
 .../qbz-slint/ui/assets/icons/list-music.svg  |  7 +++
 crates/qbz-slint/ui/shell/HeaderBar.slint     | 57 +++++++++++++------
 3 files changed, 53 insertions(+), 18 deletions(-)
 create mode 100644 crates/qbz-slint/ui/assets/icons/captions.svg
 create mode 100644 crates/qbz-slint/ui/assets/icons/list-music.svg

diff --git a/crates/qbz-slint/ui/assets/icons/captions.svg b/crates/qbz-slint/ui/assets/icons/captions.svg
new file mode 100644
index 000000000..1d4189d18
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/captions.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <rect width="18" height="14" x="3" y="5" rx="2" />
+  <path d="M7 15h4" />
+  <path d="M15 15h2" />
+  <path d="M7 11h2" />
+  <path d="M13 11h4" />
+</svg>
diff --git a/crates/qbz-slint/ui/assets/icons/list-music.svg b/crates/qbz-slint/ui/assets/icons/list-music.svg
new file mode 100644
index 000000000..46a299bd4
--- /dev/null
+++ b/crates/qbz-slint/ui/assets/icons/list-music.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M21 15V6" />
+  <path d="M18.5 18a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
+  <path d="M12 12H3" />
+  <path d="M16 6H3" />
+  <path d="M12 18H3" />
+</svg>
diff --git a/crates/qbz-slint/ui/shell/HeaderBar.slint b/crates/qbz-slint/ui/shell/HeaderBar.slint
index 69e4f39a6..2a71996a1 100644
--- a/crates/qbz-slint/ui/shell/HeaderBar.slint
+++ b/crates/qbz-slint/ui/shell/HeaderBar.slint
@@ -97,6 +97,33 @@ component MenuItem inherits Rectangle {
     }
 }
 
+// Square icon button for the header's right-side controls.
+component HeaderIconButton inherits Rectangle {
+    in property <image> icon;
+    callback clicked();
+
+    width: 36px;
+    height: 36px;
+    border-radius: Radius.sm;
+    background: ta.has-hover ? Theme.surface-hover : transparent;
+
+    QbzIcon {
+        source: root.icon;
+        width: 19px;
+        height: 19px;
+        x: (parent.width - self.width) / 2;
+        y: (parent.height - self.height) / 2;
+        tint: ta.has-hover ? Theme.text-primary : Theme.text-secondary;
+    }
+
+    ta := TouchArea {
+        mouse-cursor: pointer;
+        clicked => {
+            root.clicked();
+        }
+    }
+}
+
 export component HeaderBar inherits Rectangle {
     callback logout();
     callback close-app();
@@ -170,29 +197,23 @@ export component HeaderBar inherits Rectangle {
         }
     }
 
-    // --- Hamburger (anchored right) ----------------------------------------
-    user-area := TouchArea {
+    // --- Right controls: queue, lyrics, hamburger (anchored right) ---------
+    right-controls := HorizontalLayout {
         x: root.width - self.width - Spacing.md;
         y: (root.height - self.height) / 2;
-        width: 36px;
         height: 36px;
-        mouse-cursor: pointer;
-        clicked => {
-            menu.show();
+        spacing: 2px;
+        HeaderIconButton {
+            icon: @image-url("../assets/icons/list-music.svg");
         }
-        Rectangle {
-            width: 100%;
-            height: 100%;
-            border-radius: Radius.sm;
-            background: user-area.has-hover ? Theme.surface-hover : transparent;
+        HeaderIconButton {
+            icon: @image-url("../assets/icons/captions.svg");
         }
-        QbzIcon {
-            source: @image-url("../assets/icons/menu.svg");
-            width: 20px;
-            height: 20px;
-            x: (parent.width - self.width) / 2;
-            y: (parent.height - self.height) / 2;
-            tint: user-area.has-hover ? Theme.text-primary : Theme.text-secondary;
+        HeaderIconButton {
+            icon: @image-url("../assets/icons/menu.svg");
+            clicked => {
+                menu.show();
+            }
         }
     }