refactor(slint): split qbz-slint into qbz-ui lib + qbz bin; reclaim qbz binary
Slint cannot split the .slint compilation across crates, but a Slint LIBRARY crate exposes its generated Rust types to dependent crates (verified with a minimal proof). So: - NEW crate `qbz-ui` (lib): owns the whole .slint tree + build.rs + bundled translations; `slint::include_modules!()` + the generated types (AppWindow, MiniPlayerWindow, all globals/structs) are re-exported. Translation domain is now `qbz-ui` (the .po files renamed accordingly). - `qbz-slint` (bin) -> renamed to `qbz` (package + `[[bin]] name = "qbz"`), reclaiming the binary name from the retired Tauri app. It depends on `qbz-ui` and does `pub use qbz_ui::*;` so existing `crate::AppWindow` / `crate::*State` references resolve unchanged. This splits the single ~20 GB rustc into two crates (UI/codegen vs the 75k LOC of logic) — the foundation for lower build peak, incremental caching, and the upcoming per-feature crate extraction. Also fixed for the move: qbz-i18n bundled-.po include paths, the font/WGSL `include_bytes!`/`include_str!` paths (-> ../../qbz-ui/ui/), workspace members, dev scripts (`-p qbz`), and the CI workflows. `cargo check -p qbz` is green. cc
This commit is contained in:
465 files changed
+129
-89
No files matched your search
@@ -0,0 +1,484 @@
|
||||
// Discover — Home view: a fixed 56px toolbar (tab pill + genre filter +
|
||||
// settings gear) over a scrollable column of section carousels.
|
||||
//
|
||||
// Section data is supplied by the Rust home controller through the
|
||||
// HomeState global. The Editor's Picks / For You tabs, the genre filter,
|
||||
// and the settings gear are visual for now; wiring them is a later
|
||||
// increment.
|
||||
|
||||
import { Theme } from "../foundation/semantic-colors.slint";
|
||||
import { Typography } from "../foundation/typography.slint";
|
||||
import { HomeState, HomeActions, DiscoverState, DiscoverActions, GenreFilterState, GenreFilterActions, NavState, ContentView, ShellState } from "../state.slint";
|
||||
import { Carousel } from "Carousel.slint";
|
||||
import { SlimCarousel } from "SlimCarousel.slint";
|
||||
import { PlaylistCarousel } from "PlaylistCarousel.slint";
|
||||
import { PlaylistTagFilter } from "PlaylistTagFilter.slint";
|
||||
import { HomeSkeleton } from "HomeSkeleton.slint";
|
||||
import { ForYouView } from "ForYouView.slint";
|
||||
import { GenreFilterPopup } from "GenreFilterPopup.slint";
|
||||
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
||||
import { ListScrollbar } from "../primitives/ListScrollbar.slint";
|
||||
import { NavButtons } from "../shell/NavButtons.slint";
|
||||
|
||||
// Header + hint shown for a recently-played module while it has no data
|
||||
// yet (the play history fills once the playback session records plays).
|
||||
component RecentPlaceholder inherits VerticalLayout {
|
||||
in property <string> title;
|
||||
in property <string> hint;
|
||||
spacing: 10px;
|
||||
Text {
|
||||
text: root.title;
|
||||
color: Theme.text-primary;
|
||||
font-size: 18px;
|
||||
font-weight: Typography.semibold;
|
||||
}
|
||||
Text {
|
||||
text: root.hint;
|
||||
color: Theme.text-muted;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
component Tab inherits Rectangle {
|
||||
in property <string> label;
|
||||
in property <bool> active: false;
|
||||
callback clicked();
|
||||
|
||||
border-radius: 4px;
|
||||
background: root.active ? Theme.surface-main
|
||||
: ta.has-hover ? Theme.surface-hover : transparent;
|
||||
|
||||
HorizontalLayout {
|
||||
padding-left: 14px;
|
||||
padding-right: 14px;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
Text {
|
||||
text: root.label;
|
||||
color: root.active ? Theme.text-primary : Theme.text-muted;
|
||||
font-size: 13px;
|
||||
font-weight: Typography.medium;
|
||||
}
|
||||
}
|
||||
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component GenreButton inherits Rectangle {
|
||||
callback clicked();
|
||||
|
||||
// Accent-filled + "N genres" label when a filter is active,
|
||||
// matching Tauri.
|
||||
property <bool> active: GenreFilterState.selected-count > 0;
|
||||
|
||||
// Hug the content — the button is only as wide as its label.
|
||||
width: genre-row.preferred-width;
|
||||
height: 32px;
|
||||
border-radius: 6px;
|
||||
background: root.active
|
||||
? Theme.accent
|
||||
: (ta.has-hover ? Theme.surface-hover : Theme.surface-elevated);
|
||||
|
||||
genre-row := HorizontalLayout {
|
||||
padding-left: 12px;
|
||||
padding-right: 14px;
|
||||
spacing: 7px;
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
QbzIcon {
|
||||
source: @image-url("../assets/icons/list-filter.svg");
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
tint: root.active ? #ffffff : Theme.text-secondary;
|
||||
}
|
||||
}
|
||||
Text {
|
||||
text: root.active
|
||||
? (GenreFilterState.selected-count == 1
|
||||
? @tr("1 genre")
|
||||
: @tr("{} genres", GenreFilterState.selected-count))
|
||||
: @tr("Filter by genre");
|
||||
color: root.active ? #ffffff : Theme.text-secondary;
|
||||
font-size: 13px;
|
||||
font-weight: root.active ? Typography.medium : Typography.regular;
|
||||
vertical-alignment: center;
|
||||
}
|
||||
}
|
||||
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
component GearButton inherits Rectangle {
|
||||
callback clicked();
|
||||
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
background: ta.has-hover ? Theme.surface-hover : transparent;
|
||||
|
||||
QbzIcon {
|
||||
source: @image-url("../assets/icons/home-gear.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: ta.has-hover ? Theme.text-primary : Theme.text-muted;
|
||||
}
|
||||
|
||||
ta := TouchArea {
|
||||
mouse-cursor: pointer;
|
||||
clicked => {
|
||||
root.clicked();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export component HomeView inherits Rectangle {
|
||||
callback album-clicked(string);
|
||||
callback open-artist(string);
|
||||
callback media-action(string, string, string);
|
||||
// Open the Discover "View all" full-list page for a section
|
||||
// (endpoint, title). Only sections with a non-empty endpoint show
|
||||
// the link.
|
||||
callback discover-view-all(string, string);
|
||||
|
||||
background: Theme.surface-main;
|
||||
|
||||
VerticalLayout {
|
||||
spacing: 0px;
|
||||
|
||||
// --- Toolbar (fixed 56px) ----------------------------------------
|
||||
// Side controls are anchored to the toolbar edges; the three-tab
|
||||
// pill is absolutely centered on the toolbar so it stays at the
|
||||
// true horizontal center regardless of the side controls' widths.
|
||||
Rectangle {
|
||||
height: 56px;
|
||||
background: Theme.surface-main;
|
||||
|
||||
// History pair + the three-tab nav bar, grouped at the left
|
||||
// with a gap delimiting the two clusters. Explicit width
|
||||
// (= content) so the layout does not fill the toolbar and
|
||||
// overlap the right controls.
|
||||
left-controls := HorizontalLayout {
|
||||
x: 32px;
|
||||
// Align the toolbar content's vertical center to y=25 —
|
||||
// 11px (the back/forward padding-top used by the album /
|
||||
// artist / settings views) + 14px (half the 28px nav
|
||||
// buttons). Keeps the [<] [>] pair at the same screen
|
||||
// position across every view, with no jump on navigation.
|
||||
y: 25px - self.height / 2;
|
||||
width: self.preferred-width;
|
||||
// Explicit height too — without it the layout fills the
|
||||
// 56px toolbar, so `y` resolves to 0 and the tab pill
|
||||
// sticks to the top instead of centering.
|
||||
height: self.preferred-height;
|
||||
spacing: 16px;
|
||||
VerticalLayout {
|
||||
alignment: center;
|
||||
NavButtons { }
|
||||
}
|
||||
tab-pill := Rectangle {
|
||||
width: tab-row.preferred-width;
|
||||
height: tab-row.preferred-height;
|
||||
background: Theme.surface-elevated;
|
||||
border-radius: 6px;
|
||||
tab-row := HorizontalLayout {
|
||||
padding: 3px;
|
||||
spacing: 4px;
|
||||
Tab {
|
||||
label: @tr("Home");
|
||||
active: HomeState.active-tab == "home";
|
||||
clicked => { HomeActions.select-tab("home"); }
|
||||
}
|
||||
Tab {
|
||||
label: @tr("Editor's Picks");
|
||||
active: HomeState.active-tab == "editorPicks";
|
||||
clicked => { HomeActions.select-tab("editorPicks"); }
|
||||
}
|
||||
Tab {
|
||||
label: @tr("For You");
|
||||
active: HomeState.active-tab == "forYou";
|
||||
clicked => { HomeActions.select-tab("forYou"); }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Genre filter + sort gear, anchored right. Explicit width
|
||||
// (= content) so `x` resolves correctly — without it the
|
||||
// layout fills the toolbar and the cluster lands far left,
|
||||
// on top of the history arrows.
|
||||
right-controls := HorizontalLayout {
|
||||
x: parent.width - self.width - 32px;
|
||||
// Same y baseline as the left controls (see above).
|
||||
y: 25px - self.height / 2;
|
||||
width: self.preferred-width;
|
||||
height: self.preferred-height;
|
||||
spacing: 6px;
|
||||
GenreButton {
|
||||
clicked => {
|
||||
GenreFilterActions.set-context("discover");
|
||||
GenreFilterState.open = !GenreFilterState.open;
|
||||
}
|
||||
}
|
||||
// Per-tab show/hide + reorder control for the Discover
|
||||
// sections (not global Settings — that lives in the header
|
||||
// menu). Opens the configurator modal for the active tab.
|
||||
GearButton {
|
||||
clicked => {
|
||||
DiscoverActions.open-configurator();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Rectangle {
|
||||
height: 1px;
|
||||
background: Theme.border-subtle;
|
||||
}
|
||||
|
||||
// --- Scrollable sections -----------------------------------------
|
||||
// A Flickable (not a ScrollView): wheel scrolling with no scrollbar
|
||||
// gutters at all. viewport-width is pinned to the Flickable width so
|
||||
// the carousels' clipped content can never scroll horizontally.
|
||||
// Wrapped in a non-layout Rectangle so the shared ListScrollbar can
|
||||
// overlay the right gutter without stealing layout space (see the
|
||||
// scrollbar homologation note in ListScrollbar.slint).
|
||||
scroll-host := Rectangle {
|
||||
vertical-stretch: 1;
|
||||
flick := Flickable {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
viewport-width: self.width;
|
||||
viewport-height: home-content.preferred-height;
|
||||
// Scroll-position restore on back/forward (see nav::scope_for).
|
||||
property <string> sr-armed: NavState.restore-scope;
|
||||
function sr-restore() {
|
||||
if (NavState.restore-scope == "home" && self.viewport-height > self.height) {
|
||||
self.viewport-y = NavState.scroll-restore;
|
||||
NavState.restore-scope = "";
|
||||
}
|
||||
}
|
||||
init => { self.sr-restore(); }
|
||||
changed sr-armed => { self.sr-restore(); }
|
||||
changed viewport-height => { self.sr-restore(); }
|
||||
changed viewport-y => { NavState.report-scroll(self.viewport-y); }
|
||||
|
||||
home-content := VerticalLayout {
|
||||
padding: 32px;
|
||||
spacing: 40px;
|
||||
alignment: start;
|
||||
|
||||
// Loading skeleton: shown while a discover load is in flight and
|
||||
// the active tab's descriptor list is still empty (For You has
|
||||
// its own skeleton inside ForYouView).
|
||||
// Show the skeleton while the initial discover fetch is in
|
||||
// flight. The descriptor list already carries the non-album rows
|
||||
// (recent/continue/playlists) at seed time, so a length check
|
||||
// would suppress it — gate on `loading` alone. The empty-data
|
||||
// placeholders below are gated off while loading, so ONLY the
|
||||
// skeleton shows during the fetch (1:1 Tauri).
|
||||
if DiscoverState.active-tab != "forYou" && HomeState.loading: HomeSkeleton { }
|
||||
|
||||
// Prefs-driven render loop (Slice 5). Rust pushes the ordered
|
||||
// ENABLED descriptor list for the active tab (home-sections /
|
||||
// editor-sections); the For You tab's lists are pushed empty so
|
||||
// this repeater renders nothing for it (the unconditional-
|
||||
// repeater form — content is controlled purely via the model,
|
||||
// avoiding an `if cond: for ...`). The delegate is a single-root
|
||||
// VerticalLayout whose inner if-chain mounts the right component
|
||||
// and binds the matching data; exactly one arm matches per id.
|
||||
for desc in (DiscoverState.active-tab == "editorPicks"
|
||||
? DiscoverState.editor-sections
|
||||
: DiscoverState.home-sections): VerticalLayout {
|
||||
spacing: 0px;
|
||||
|
||||
// Generic album carousels (data embedded in desc.section by
|
||||
// Rust): newReleases / pressAwards / idealDiscography /
|
||||
// editorPicks / qobuzissimes, plus mostStreamed when it
|
||||
// renders as an album carousel (Editor's Picks).
|
||||
if desc.id == "newReleases"
|
||||
|| desc.id == "pressAwards"
|
||||
|| desc.id == "idealDiscography"
|
||||
|| desc.id == "editorPicks"
|
||||
|| desc.id == "qobuzissimes"
|
||||
|| (desc.id == "mostStreamed" && desc.kind == "albumCarousel"): Carousel {
|
||||
section: desc.section;
|
||||
show-view-all: desc.section.endpoint != "";
|
||||
album-clicked(id) => {
|
||||
root.album-clicked(id);
|
||||
}
|
||||
media-action(kind, id, action) => {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
view-all-clicked => {
|
||||
root.discover-view-all(desc.section.endpoint, desc.section.title);
|
||||
}
|
||||
}
|
||||
|
||||
// Qobuz Playlists row — body=open, overlay=play (1:1 Tauri).
|
||||
// A category multi-select dropdown (ADR-008: no pills) sits
|
||||
// on the title line and filters the row client-side. Mounted
|
||||
// when the row has playlists OR there are category tags to
|
||||
// offer (so a zero-result filter can still be cleared).
|
||||
if desc.id == "qobuzPlaylists"
|
||||
&& (HomeState.playlists.length > 0 || HomeState.playlist-tags.length > 0): VerticalLayout {
|
||||
spacing: 12px;
|
||||
|
||||
// Title + filter dropdown on one line (the carousel
|
||||
// below renders its own paging controls, no title).
|
||||
HorizontalLayout {
|
||||
spacing: 12px;
|
||||
Text {
|
||||
text: @tr("Qobuz Playlists");
|
||||
color: Theme.text-primary;
|
||||
font-size: 18px;
|
||||
font-weight: Typography.semibold;
|
||||
vertical-alignment: center;
|
||||
horizontal-stretch: 1;
|
||||
}
|
||||
if HomeState.playlist-tags.length > 0: VerticalLayout {
|
||||
alignment: center;
|
||||
PlaylistTagFilter { }
|
||||
}
|
||||
}
|
||||
|
||||
if HomeState.playlists.length > 0: PlaylistCarousel {
|
||||
// Title shown on the header row above, not here.
|
||||
title: "";
|
||||
playlists: HomeState.playlists;
|
||||
body-opens: true;
|
||||
show-view-all: false;
|
||||
media-action(kind, id, action) => {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
}
|
||||
|
||||
// Empty-result hint when a filter excludes everything.
|
||||
if HomeState.playlists.length == 0: Text {
|
||||
text: @tr("No playlists match the selected categories.");
|
||||
color: Theme.text-muted;
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
// Recently Played Albums — carousel when it has data, else a
|
||||
// placeholder (always present on Home, 1:1 Tauri).
|
||||
if desc.id == "recentlyPlayedAlbums" && HomeState.recent-albums.length > 0: Carousel {
|
||||
section: {
|
||||
title: @tr("Recently Played Albums"),
|
||||
albums: HomeState.recent-albums,
|
||||
};
|
||||
album-clicked(id) => {
|
||||
root.album-clicked(id);
|
||||
}
|
||||
media-action(kind, id, action) => {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
}
|
||||
if desc.id == "recentlyPlayedAlbums" && HomeState.recent-albums.length == 0 && !HomeState.loading: RecentPlaceholder {
|
||||
title: @tr("Recently Played Albums");
|
||||
hint: @tr("Albums you play will appear here.");
|
||||
}
|
||||
|
||||
// Recently Played Tracks — slim carousel when it has data,
|
||||
// else a placeholder (continueListening id).
|
||||
if desc.id == "continueListening" && HomeState.recent.length > 0: SlimCarousel {
|
||||
title: @tr("Recently Played Tracks");
|
||||
items: HomeState.recent;
|
||||
item-clicked(id) => {
|
||||
root.media-action("track", id, "play");
|
||||
}
|
||||
}
|
||||
if desc.id == "continueListening" && HomeState.recent.length == 0 && !HomeState.loading: RecentPlaceholder {
|
||||
title: @tr("Recently Played Tracks");
|
||||
hint: @tr("Tracks you play will appear here.");
|
||||
}
|
||||
|
||||
// Most Streamed on Home renders as the Popular slim grid
|
||||
// (kind == "slimGrid"); on Editor's Picks it is the album
|
||||
// carousel handled by the generic arm above.
|
||||
if desc.id == "mostStreamed" && desc.kind == "slimGrid"
|
||||
&& HomeState.popular.length > 0: SlimCarousel {
|
||||
title: @tr("Popular albums");
|
||||
items: HomeState.popular;
|
||||
item-clicked(id) => {
|
||||
root.album-clicked(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// For You renders its own ordered, heterogeneous
|
||||
// sections from ForYouState.
|
||||
if DiscoverState.active-tab == "forYou": ForYouView {
|
||||
open-album(id) => {
|
||||
root.album-clicked(id);
|
||||
}
|
||||
open-artist(id) => {
|
||||
root.open-artist(id);
|
||||
}
|
||||
media-action(kind, id, action) => {
|
||||
root.media-action(kind, id, action);
|
||||
}
|
||||
play-track(id) => {
|
||||
root.media-action("track", id, "play");
|
||||
}
|
||||
play-top-tracks(id) => {
|
||||
root.media-action("artist", id, "play-top");
|
||||
}
|
||||
start-radio(id) => {
|
||||
root.media-action("artist", id, "radio");
|
||||
}
|
||||
start-radio-album(id) => {
|
||||
root.media-action("album", id, "radio");
|
||||
}
|
||||
open-mix(which) => {
|
||||
root.media-action("mix", which, "open");
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// Shared scrollbar in the right gutter (homologated cross-view).
|
||||
ListScrollbar {
|
||||
x: parent.width - self.width - 4px;
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
viewport-height: flick.viewport-height;
|
||||
visible-height: flick.height;
|
||||
viewport-y <=> flick.viewport-y;
|
||||
auto-hide: true;
|
||||
hover-active: ShellState.pointer-in-window
|
||||
&& ShellState.pointer-x >= scroll-host.absolute-position.x
|
||||
&& ShellState.pointer-x <= scroll-host.absolute-position.x + scroll-host.width
|
||||
&& ShellState.pointer-y >= scroll-host.absolute-position.y
|
||||
&& ShellState.pointer-y <= scroll-host.absolute-position.y + scroll-host.height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// --- Genre filter overlay --------------------------------------------
|
||||
// Backdrop closes the popup on outside click; the panel anchors to
|
||||
// the top-right under the Filter-by-genre button.
|
||||
if GenreFilterState.open: Rectangle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
TouchArea {
|
||||
clicked => {
|
||||
GenreFilterState.open = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
if GenreFilterState.open: GenreFilterPopup {
|
||||
x: root.width - self.width - 32px;
|
||||
y: 52px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user