feat(slint): queue and lyrics buttons in the header

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

@@ -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>

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>

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) ----------------------------------------
+    // --- Right controls: queue, lyrics, hamburger (anchored right) ---------
-    user-area := TouchArea {
+    right-controls := HorizontalLayout {
         x: root.width - self.width - Spacing.md;
         y: (root.height - self.height) / 2;
-        width: 36px;
         height: 36px;
-        mouse-cursor: pointer;
+        spacing: 2px;
-        clicked => {
+        HeaderIconButton {
-            menu.show();
+            icon: @image-url("../assets/icons/list-music.svg");
         }
-        Rectangle {
+        HeaderIconButton {
-            width: 100%;
+            icon: @image-url("../assets/icons/captions.svg");
-            height: 100%;
-            border-radius: Radius.sm;
-            background: user-area.has-hover ? Theme.surface-hover : transparent;
         }
-        QbzIcon {
+        HeaderIconButton {
-            source: @image-url("../assets/icons/menu.svg");
+            icon: @image-url("../assets/icons/menu.svg");
-            width: 20px;
+            clicked => {
-            height: 20px;
+                menu.show();
-            x: (parent.width - self.width) / 2;
+            }
-            y: (parent.height - self.height) / 2;
-            tint: user-area.has-hover ? Theme.text-primary : Theme.text-secondary;
         }
     }