From d8c788ac1514bb9778c9c960d82ef0b6fb35fddd Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Mon, 18 May 2026 18:07:48 -0600
Subject: [PATCH] fix(slint): track-row more button no longer vanishes on hover

The ellipsis faded on the row's hover state alone; moving onto the
button stole has-hover from the row and hid the button under the
cursor. It now stays visible while the row OR the button is hovered,
and is a proper 32px square hit area with a hover background.

cc
---
 crates/qbz-slint/ui/album/AlbumPageView.slint | 42 +++++++++++--------
 1 file changed, 25 insertions(+), 17 deletions(-)

diff --git a/crates/qbz-slint/ui/album/AlbumPageView.slint b/crates/qbz-slint/ui/album/AlbumPageView.slint
index 1e9f74fd7..d26b196b7 100644
--- a/crates/qbz-slint/ui/album/AlbumPageView.slint
+++ b/crates/qbz-slint/ui/album/AlbumPageView.slint
@@ -135,24 +135,32 @@ component TrackRow inherits Rectangle {
             vertical-alignment: center;
         }
 
-        // More button — fades in on row hover, opens the context menu.
-        Rectangle {
-            width: 32px;
-            more-ta := TouchArea {
-                mouse-cursor: pointer;
-                clicked => {
-                    track-menu.show();
-                }
-            }
-            QbzIcon {
-                source: @image-url("../assets/icons/ellipsis.svg");
-                width: 16px;
-                height: 16px;
-                x: (parent.width - self.width) / 2;
-                y: (parent.height - self.height) / 2;
-                tint: more-ta.has-hover ? Theme.text-primary : Theme.text-secondary;
-                opacity: ta.has-hover ? 1.0 : 0.0;
+        // More button — a 32px square hit area, vertically centered.
+        // Visible while the row OR the button itself is hovered (the
+        // button steals has-hover from the row, so the states are ORed).
+        VerticalLayout {
+            alignment: center;
+            Rectangle {
+                width: 32px;
+                height: 32px;
+                border-radius: Radius.sm;
+                opacity: (ta.has-hover || more-ta.has-hover) ? 1.0 : 0.0;
                 animate opacity { duration: 120ms; }
+                background: more-ta.has-hover ? Theme.surface-elevated : transparent;
+                QbzIcon {
+                    source: @image-url("../assets/icons/ellipsis.svg");
+                    width: 16px;
+                    height: 16px;
+                    x: (parent.width - self.width) / 2;
+                    y: (parent.height - self.height) / 2;
+                    tint: more-ta.has-hover ? Theme.text-primary : Theme.text-secondary;
+                }
+                more-ta := TouchArea {
+                    mouse-cursor: pointer;
+                    clicked => {
+                        track-menu.show();
+                    }
+                }
             }
         }
     }