Files
qbz/crates/qbz-slint/ui/shell/HeaderBar.slint
T
vicrodh 7535869e61 feat(qbz-slint): app shell frame
M1 progress. Adds the post-login shell: HeaderBar (nav tabs and
search), Sidebar (playlists list and user card), PlayerBar (transport,
now-playing, volume), and AppShell composing them with the content
region as a placeholder.

app.slint gains an AppScreen enum; clicking sign-in or start-offline
navigates login -> shell (no real auth yet — that is M2). New layout
foundation tokens (sidebar width, header/player-bar heights) plus
border and hover semantic colors.

cc
2026-05-18 12:34:01 -06:00

75 lines
2.1 KiB
Plaintext

// Top header bar — primary navigation tabs and the search field.
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 { LineEdit } from "std-widgets.slint";
component NavTab inherits Rectangle {
in property <string> label;
in property <bool> active: false;
callback clicked();
height: 32px;
border-radius: Radius.sm;
background: root.active ? Theme.surface-elevated
: ta.has-hover ? Theme.surface-hover : transparent;
HorizontalLayout {
padding-left: Spacing.md;
padding-right: Spacing.md;
Text {
text: root.label;
color: root.active ? Theme.text-primary : Theme.text-secondary;
font-size: Typography.body;
font-weight: root.active ? Typography.semibold : Typography.regular;
vertical-alignment: center;
}
}
ta := TouchArea {
mouse-cursor: pointer;
clicked => {
root.clicked();
}
}
}
export component HeaderBar inherits Rectangle {
height: Layout.header-height;
background: Theme.surface-main;
HorizontalLayout {
padding-left: Spacing.md;
padding-right: Spacing.md;
spacing: Spacing.xs;
VerticalLayout {
alignment: center;
HorizontalLayout {
spacing: Spacing.xs;
NavTab { label: "Discover"; active: true; }
NavTab { label: "Library"; }
NavTab { label: "Local Library"; }
NavTab { label: "My QBZ"; }
}
}
VerticalLayout {
alignment: center;
horizontal-stretch: 1;
HorizontalLayout {
alignment: center;
Rectangle {
width: 360px;
search := LineEdit {
placeholder-text: "Search";
}
}
}
}
}
}