Joren/qbz
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(qbz-slint): header redesign, Lucide icons, scrollbar fixes

Browse Source 
- Replace every Unicode glyph placeholder with Lucide icons via QbzIcon
  (player transport, carousel nav, album-card overlay, album-page
  actions, gear, search, checkbox, sidebar).
- Header: the search field is centered to the window width and gets a
  search icon; the header and player bar now use the elevated surface,
  so all chrome (header, sidebar, player bar) shares one color over the
  darker content area.
- The sidebar user card moves to the header as a user element (name +
  QBZ logo) that opens a dropdown — Settings, Keyboard Shortcuts,
  Documentation, Report an Issue, About, plus Log Out and Close. Log Out
  clears the session and returns to login; Close quits the app.
- Content ScrollViews disable the horizontal scrollbar — no view scrolls
  horizontally, so the phantom reserved lane is gone.

cc
This commit is contained in:
vicrodh committed 2026-05-18 14:58:58 -06:00
1 parent 636b3e8a06
commit 8c27de5651
13 files changed
+389 -165
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

crates/qbz-slint/ui/shell/Sidebar.slint
+13 -54
View File
@@ -1,13 +1,13 @@
// Left navigation sidebar — playlists list plus the user card.
// Left navigation sidebar — the playlists list.
//
// The playlist list is empty until real playlist data is wired (the
// sidebar is a later milestone). No placeholder/fixture rows.
// sidebar is a later milestone). The user element now lives in the
// header, not at the bottom of the sidebar.
import { Theme } from "../foundation/semantic-colors.slint";
import { Spacing } from "../foundation/spacing.slint";
import { Typography } from "../foundation/typography.slint";
import { Layout } from "../foundation/layout.slint";
import { Radius } from "../foundation/radius.slint";
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { ScrollView } from "std-widgets.slint";
export component Sidebar inherits Rectangle {
@@ -29,66 +29,25 @@ export component Sidebar inherits Rectangle {
vertical-alignment: center;
horizontal-stretch: 1;
}
Text {
text: "+";
color: Theme.text-muted;
font-size: 18px;
vertical-alignment: center;
VerticalLayout {
alignment: center;
QbzIcon {
source: @image-url("../assets/icons/plus.svg");
width: 16px;
height: 16px;
tint: Theme.text-muted;
}
}
}
ScrollView {
vertical-stretch: 1;
horizontal-scrollbar-policy: ScrollBarPolicy.always-off;
VerticalLayout {
spacing: 2px;
// Real playlist rows are populated when the sidebar
// milestone wires playlist data. No fixtures.
}
}
Rectangle {
height: 56px;
border-radius: Radius.md;
background: Theme.surface-elevated;
HorizontalLayout {
padding: 10px;
spacing: Spacing.sm;
Rectangle {
width: 36px;
height: 36px;
border-radius: Radius.pill;
background: Theme.accent;
Text {
text: "Q";
color: Theme.accent-text;
font-weight: Typography.semibold;
horizontal-alignment: center;
vertical-alignment: center;
}
}
VerticalLayout {
alignment: center;
horizontal-stretch: 1;
Text {
text: "QBZ User";
color: Theme.text-primary;
font-size: Typography.body;
}
Text {
text: "QBZ MVP";
color: Theme.text-muted;
font-size: 11px;
}
}
Text {
text: "⚙";
color: Theme.text-muted;
font-size: 16px;
vertical-alignment: center;
}
}
}
}
}