- 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
54 lines
1.8 KiB
Plaintext
54 lines
1.8 KiB
Plaintext
// Left navigation sidebar — the playlists list.
|
|
//
|
|
// The playlist list is empty until real playlist data is wired (the
|
|
// 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 { Layout } from "../foundation/layout.slint";
|
|
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
|
import { ScrollView } from "std-widgets.slint";
|
|
|
|
export component Sidebar inherits Rectangle {
|
|
width: Layout.sidebar-width;
|
|
// The sidebar sits one surface above the content area, matching the
|
|
// QBZ dark theme (--bg-secondary sidebar over --bg-primary content).
|
|
background: Theme.surface-card;
|
|
|
|
VerticalLayout {
|
|
padding: Spacing.md;
|
|
spacing: Spacing.md;
|
|
|
|
HorizontalLayout {
|
|
Text {
|
|
text: "PLAYLISTS";
|
|
color: Theme.text-muted;
|
|
font-size: 11px;
|
|
letter-spacing: 1.5px;
|
|
vertical-alignment: center;
|
|
horizontal-stretch: 1;
|
|
}
|
|
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.
|
|
}
|
|
}
|
|
}
|
|
}
|