From 6a7784366dbcbfcb68da19c51c17906e61a97678 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Thu, 23 Jul 2026 08:31:20 -0600
Subject: [PATCH] feat(ui): restyle the lyrics translate toggle as a ghost
square
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Owner 2026-07-23: drop the mobile-parity circle — square, no border, no
shadow; bg lights up on hover, matching the Discover configurator gear
(GearButton in HomeView.slint). Glyph swapped to the owner-picked
translate-svgrepo icon (translate.svg; the Lucide languages.svg added
earlier on this branch is removed). Accent tint remains the ON state.
km
---
crates/qbz-ui/ui/assets/icons/languages.svg | 20 -------------
crates/qbz-ui/ui/assets/icons/translate.svg | 8 ++++++
crates/qbz-ui/ui/shell/LyricsSidebar.slint | 32 +++++++++------------
3 files changed, 21 insertions(+), 39 deletions(-)
delete mode 100644 crates/qbz-ui/ui/assets/icons/languages.svg
create mode 100644 crates/qbz-ui/ui/assets/icons/translate.svg
diff --git a/crates/qbz-ui/ui/assets/icons/languages.svg b/crates/qbz-ui/ui/assets/icons/languages.svg
deleted file mode 100644
index 8f18f223a..000000000
--- a/crates/qbz-ui/ui/assets/icons/languages.svg
+++ /dev/null
@@ -1,20 +0,0 @@
-
-
diff --git a/crates/qbz-ui/ui/assets/icons/translate.svg b/crates/qbz-ui/ui/assets/icons/translate.svg
new file mode 100644
index 000000000..ed4470b54
--- /dev/null
+++ b/crates/qbz-ui/ui/assets/icons/translate.svg
@@ -0,0 +1,8 @@
+
+
\ No newline at end of file
diff --git a/crates/qbz-ui/ui/shell/LyricsSidebar.slint b/crates/qbz-ui/ui/shell/LyricsSidebar.slint
index b1fc54fd9..8ff97300e 100644
--- a/crates/qbz-ui/ui/shell/LyricsSidebar.slint
+++ b/crates/qbz-ui/ui/shell/LyricsSidebar.slint
@@ -25,32 +25,26 @@ import { LyricsLinesView } from "LyricsLinesView.slint";
import { LyricsControlsPanel } from "LyricsControlsFlyout.slint";
import { ShellState, LyricsState, ArtworkActions, AppearanceState, TooltipState } from "../state.slint";
-// Floating translate toggle (Qobuz v10, owner decision 2026-07-22): circular
-// button anchored bottom-right of the lyrics body, overlaying it — mobile
-// parity (the 文A button on iOS/Android). Off = dim, on = accent. Tooltip
-// rides the shared TooltipState channel like the bar's IconButton.
+// Floating translate toggle (Qobuz v10, owner decisions 2026-07-22/23):
+// square ghost button anchored bottom-right of the lyrics body, overlaying
+// it. Styled after the Discover configurator gear (GearButton in
+// HomeView.slint): no border, bg lights up on hover; the accent tint is the
+// ON state. Tooltip rides the shared TooltipState channel.
component TranslateButton inherits Rectangle {
- width: 36px;
- height: 36px;
- border-radius: 18px;
- background: LyricsState.show-translation
- ? Theme.accent.with-alpha(0.15)
- : Theme.surface-card;
- border-width: 1px;
- border-color: LyricsState.show-translation ? Theme.accent : Theme.border-muted;
- drop-shadow-blur: 12px;
- drop-shadow-color: Theme.card-shadow;
- drop-shadow-offset-y: 3px;
+ width: 32px;
+ height: 32px;
+ border-radius: 4px;
+ background: ta.has-hover ? Theme.surface-hover : transparent;
QbzIcon {
- source: @image-url("../assets/icons/languages.svg");
- width: 18px;
- height: 18px;
+ source: @image-url("../assets/icons/translate.svg");
+ width: 20px;
+ height: 20px;
x: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
tint: LyricsState.show-translation
? Theme.accent
- : (ta.has-hover ? Theme.text-primary : Theme.text-secondary);
+ : (ta.has-hover ? Theme.text-primary : Theme.text-muted);
}
ta := TouchArea {