vicrodh
a75911b09b
Add the user-requested grid/list switch to the Playlists toolbar (parameterized the shared ViewToggle so albums + playlists both drive it) and a new PlaylistListRow (collage thumb + name + owner·tracks + play + overflow menu: play/play-next/queue/favorite), bound to playlists-view-mode. The view mode persists via favorites_prefs (playlists_view). Tauri ships grid only — the list view is a labeled Slint-better addition. cc
1209 lines
49 KiB
Plaintext
1209 lines
49 KiB
Plaintext
// Library > Favorites — the user's saved tracks / albums / artists /
|
|
// playlists / labels. A fixed chrome block (back/forward + title + the
|
|
// tab menu on row 1; per-view action buttons + toolbar on row 2) sits
|
|
// over a single scrolling content area. Tracks reuse the shared TrackRow,
|
|
// albums the shared AlbumCollectionView, artists/playlists round/tile
|
|
// grids, labels a row list.
|
|
|
|
import { Theme } from "../foundation/semantic-colors.slint";
|
|
import { Typography } from "../foundation/typography.slint";
|
|
import { Radius } from "../foundation/radius.slint";
|
|
import {
|
|
FavoritesState,
|
|
FavoritesActions,
|
|
AlbumCardItem,
|
|
TrackItem,
|
|
FavoriteArtistItem,
|
|
FavoriteLabelItem,
|
|
SearchPlaylistItem,
|
|
DragState,
|
|
GenreFilterState,
|
|
GenreFilterActions,
|
|
AlphaJump,
|
|
} from "../state.slint";
|
|
import { AlbumCollectionView } from "../discover/AlbumCollectionView.slint";
|
|
import { PlaylistCard } from "../discover/PlaylistCard.slint";
|
|
import { GenreFilterPopup } from "../discover/GenreFilterPopup.slint";
|
|
import { TrackRow } from "../primitives/TrackRow.slint";
|
|
import { ExpandableSearch } from "../primitives/ExpandableSearch.slint";
|
|
import { CircleAction } from "../primitives/CircleAction.slint";
|
|
import { MultiSelectBar } from "../primitives/MultiSelectBar.slint";
|
|
import { ToggleButton } from "../primitives/ToggleButton.slint";
|
|
import { QbzSelect } from "../primitives/QbzSelect.slint";
|
|
import { QbzIcon } from "../primitives/QbzIcon.slint";
|
|
import { ContextMenu } from "../primitives/ContextMenu.slint";
|
|
import { ContextMenuItem } from "../primitives/ContextMenuItem.slint";
|
|
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
|
|
import { ListScrollbar } from "../primitives/ListScrollbar.slint";
|
|
import { NavButtons } from "../shell/NavButtons.slint";
|
|
import { ListView } from "std-widgets.slint";
|
|
|
|
// One tab in the favorites tab menu.
|
|
component FavTab inherits Rectangle {
|
|
in property <string> label;
|
|
in property <string> id;
|
|
in property <int> count;
|
|
callback selected(string);
|
|
|
|
property <bool> active: FavoritesState.active-tab == root.id;
|
|
height: 34px;
|
|
width: tab-row.preferred-width;
|
|
|
|
tab-row := HorizontalLayout {
|
|
padding-left: 4px;
|
|
padding-right: 4px;
|
|
spacing: 6px;
|
|
Text {
|
|
text: root.label;
|
|
color: root.active ? Theme.text-primary : Theme.text-muted;
|
|
font-size: Typography.body;
|
|
font-weight: root.active ? Typography.semibold : Typography.regular;
|
|
vertical-alignment: center;
|
|
}
|
|
if root.count > 0: Text {
|
|
text: root.count;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
// Active underline.
|
|
Rectangle {
|
|
y: parent.height - 2px;
|
|
height: 2px;
|
|
width: parent.width;
|
|
background: root.active ? Theme.accent : transparent;
|
|
border-radius: 1px;
|
|
}
|
|
ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.selected(root.id);
|
|
}
|
|
}
|
|
}
|
|
|
|
// The 5 favorites tabs as one floating group (row 1, right side). Counts
|
|
// stay live (FavoritesState.*-total are seeded up front).
|
|
component FavTabMenu inherits HorizontalLayout {
|
|
spacing: 18px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
FavTab {
|
|
label: @tr("Tracks");
|
|
id: "tracks";
|
|
count: FavoritesState.tracks-total;
|
|
selected(id) => { FavoritesActions.select-tab(id); }
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
FavTab {
|
|
label: @tr("Albums");
|
|
id: "albums";
|
|
count: FavoritesState.albums-total;
|
|
selected(id) => { FavoritesActions.select-tab(id); }
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
FavTab {
|
|
label: @tr("Artists");
|
|
id: "artists";
|
|
count: FavoritesState.artists-total;
|
|
selected(id) => { FavoritesActions.select-tab(id); }
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
FavTab {
|
|
label: @tr("Playlists");
|
|
id: "playlists";
|
|
count: FavoritesState.playlists-total;
|
|
selected(id) => { FavoritesActions.select-tab(id); }
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
FavTab {
|
|
label: @tr("Labels");
|
|
id: "labels";
|
|
count: FavoritesState.labels-total;
|
|
selected(id) => { FavoritesActions.select-tab(id); }
|
|
}
|
|
}
|
|
}
|
|
|
|
// One underline sub-tab for the Playlists tab (Library / Following).
|
|
// Underline style, NOT a pill (ADR-008). Mirrors the FavTab pattern.
|
|
component PlaylistSubTab inherits Rectangle {
|
|
in property <string> label;
|
|
in property <string> tab-id; // "favorites" | "following"
|
|
in property <int> count: 0;
|
|
property <bool> active: FavoritesState.playlists-sub-tab == root.tab-id;
|
|
height: 36px;
|
|
width: row.preferred-width;
|
|
|
|
row := HorizontalLayout {
|
|
padding-left: 2px;
|
|
padding-right: 2px;
|
|
spacing: 6px;
|
|
Text {
|
|
text: root.label;
|
|
color: root.active ? Theme.text-primary : Theme.text-muted;
|
|
font-size: Typography.body;
|
|
font-weight: root.active ? Typography.semibold : Typography.regular;
|
|
vertical-alignment: center;
|
|
}
|
|
if root.count > 0: Text {
|
|
text: root.count;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
// Active underline.
|
|
Rectangle {
|
|
y: parent.height - 2px;
|
|
height: 2px;
|
|
width: parent.width;
|
|
background: root.active ? Theme.accent : transparent;
|
|
border-radius: 1px;
|
|
}
|
|
ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
FavoritesActions.playlists-set-sub-tab(root.tab-id);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Compact list row for the Favorites Playlists list view (Slint-better;
|
|
// Tauri ships grid only). Thumb + name + owner·tracks + play + more-menu.
|
|
component PlaylistListRow inherits Rectangle {
|
|
in property <SearchPlaylistItem> playlist;
|
|
in property <int> index;
|
|
callback media-action(string, string, string);
|
|
property <bool> row-hover: body-ta.has-hover || play-ta.has-hover || more-ta.has-hover;
|
|
|
|
height: 60px;
|
|
border-radius: 8px;
|
|
background: root.row-hover
|
|
? #ffffff14
|
|
: (Math.mod(root.index, 2) == 1 ? #ffffff07 : transparent);
|
|
|
|
// Full-row click target (behind the action buttons) -> open the playlist.
|
|
body-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "open");
|
|
}
|
|
}
|
|
|
|
HorizontalLayout {
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
spacing: 12px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Rectangle {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 6px;
|
|
background: Theme.surface-elevated;
|
|
clip: true;
|
|
Image {
|
|
width: 100%;
|
|
height: 100%;
|
|
image-fit: cover;
|
|
source: root.playlist.cover1;
|
|
}
|
|
if root.playlist.cover-count == 0: QbzIcon {
|
|
source: @image-url("../assets/icons/list-music.svg");
|
|
width: 20px;
|
|
height: 20px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
tint: Theme.text-muted;
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
horizontal-stretch: 1;
|
|
Text {
|
|
text: root.playlist.title;
|
|
color: Theme.text-primary;
|
|
font-size: Typography.body;
|
|
font-weight: Typography.medium;
|
|
overflow: elide;
|
|
}
|
|
Text {
|
|
text: root.playlist.subtitle;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
play-ta := TouchArea {
|
|
width: 30px;
|
|
height: 30px;
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "play");
|
|
}
|
|
QbzIcon {
|
|
source: @image-url("../assets/icons/play-fill.svg");
|
|
width: 16px;
|
|
height: 16px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
tint: root.row-hover ? Theme.text-primary : Theme.text-muted;
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
more-ta := TouchArea {
|
|
width: 30px;
|
|
height: 30px;
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
row-menu.show();
|
|
}
|
|
QbzIcon {
|
|
source: @image-url("../assets/icons/ellipsis.svg");
|
|
width: 16px;
|
|
height: 16px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
tint: Theme.text-secondary;
|
|
}
|
|
row-menu := PopupWindow {
|
|
x: -166px;
|
|
y: 32px;
|
|
width: 196px;
|
|
height: 150px;
|
|
ContextMenu {
|
|
ContextMenuItem {
|
|
icon: @image-url("../assets/icons/play.svg");
|
|
label: @tr("Play");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "play");
|
|
}
|
|
}
|
|
ContextMenuItem {
|
|
icon: @image-url("../assets/icons/list-plus.svg");
|
|
label: @tr("Play next");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "play-next");
|
|
}
|
|
}
|
|
ContextMenuItem {
|
|
icon: @image-url("../assets/icons/list-end.svg");
|
|
label: @tr("Add to queue");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "queue");
|
|
}
|
|
}
|
|
ContextMenuItem {
|
|
icon: @image-url("../assets/icons/heart.svg");
|
|
label: @tr("Favorite");
|
|
clicked => {
|
|
root.media-action("playlist", root.playlist.id, "favorite");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// One label tile in the Favorites > Labels grid — a circular cover (or
|
|
// an indigo->violet gradient + disc placeholder), name, and album count.
|
|
// Mirrors FavArtistCard; the gradient placeholder is the 1:1 match with
|
|
// Tauri's label card.
|
|
component FavLabelCard inherits Rectangle {
|
|
in property <FavoriteLabelItem> item;
|
|
callback clicked(string, string);
|
|
|
|
width: 160px;
|
|
height: 200px;
|
|
|
|
VerticalLayout {
|
|
spacing: 10px;
|
|
Rectangle {
|
|
width: 140px;
|
|
height: 140px;
|
|
x: (parent.width - self.width) / 2;
|
|
border-radius: 70px;
|
|
background: root.item.image-url == ""
|
|
? @linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%)
|
|
: Theme.surface-elevated;
|
|
clip: true;
|
|
Image {
|
|
width: 100%;
|
|
height: 100%;
|
|
source: root.item.image;
|
|
image-fit: cover;
|
|
}
|
|
if root.item.image-url == "": QbzIcon {
|
|
source: @image-url("../assets/icons/disc-3.svg");
|
|
width: 44px;
|
|
height: 44px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
tint: #ffffff;
|
|
}
|
|
ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.clicked(root.item.id, root.item.name);
|
|
}
|
|
}
|
|
}
|
|
Text {
|
|
text: root.item.name;
|
|
color: Theme.text-primary;
|
|
font-size: Typography.body;
|
|
font-weight: Typography.medium;
|
|
horizontal-alignment: center;
|
|
overflow: elide;
|
|
width: 160px;
|
|
}
|
|
if root.item.albums-line != "": Text {
|
|
text: root.item.albums-line;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
horizontal-alignment: center;
|
|
width: 160px;
|
|
}
|
|
}
|
|
}
|
|
|
|
component FavArtistCard inherits Rectangle {
|
|
in property <FavoriteArtistItem> item;
|
|
callback clicked(string);
|
|
|
|
width: 160px;
|
|
height: 200px;
|
|
|
|
VerticalLayout {
|
|
spacing: 10px;
|
|
Rectangle {
|
|
width: 140px;
|
|
height: 140px;
|
|
x: (parent.width - self.width) / 2;
|
|
border-radius: 70px;
|
|
background: Theme.surface-elevated;
|
|
clip: true;
|
|
Image {
|
|
width: 100%;
|
|
height: 100%;
|
|
source: root.item.image;
|
|
image-fit: cover;
|
|
}
|
|
if root.item.image-url == "": QbzIcon {
|
|
source: @image-url("../assets/icons/user.svg");
|
|
width: 44px;
|
|
height: 44px;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
tint: Theme.text-muted;
|
|
}
|
|
ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.clicked(root.item.id);
|
|
}
|
|
}
|
|
}
|
|
Text {
|
|
text: root.item.name;
|
|
color: Theme.text-primary;
|
|
font-size: Typography.body;
|
|
font-weight: Typography.medium;
|
|
horizontal-alignment: center;
|
|
overflow: elide;
|
|
width: 160px;
|
|
}
|
|
if root.item.albums-line != "": Text {
|
|
text: root.item.albums-line;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
horizontal-alignment: center;
|
|
width: 160px;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Genre-filter trigger for the favorites toolbars — opens the shared
|
|
// popup in the "favorites" context. Accent fill + "N genres" when active.
|
|
component FavGenreButton inherits Rectangle {
|
|
property <bool> active: GenreFilterState.selected-count > 0;
|
|
width: genre-row.preferred-width;
|
|
height: 30px;
|
|
border-radius: 6px;
|
|
background: root.active
|
|
? Theme.accent
|
|
: (ta.has-hover ? Theme.surface-hover : Theme.surface-elevated);
|
|
|
|
genre-row := HorizontalLayout {
|
|
padding-left: 10px;
|
|
padding-right: 12px;
|
|
spacing: 7px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
QbzIcon {
|
|
source: @image-url("../assets/icons/list-filter.svg");
|
|
width: 13px;
|
|
height: 13px;
|
|
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: 12px;
|
|
vertical-alignment: center;
|
|
}
|
|
}
|
|
ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
GenreFilterActions.set-context("favorites");
|
|
GenreFilterState.open = !GenreFilterState.open;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Grid/list segmented toggle. Parameterized so albums + playlists can both
|
|
// drive it with their own view-mode state.
|
|
component ViewToggle inherits Rectangle {
|
|
in property <string> view-mode; // current "grid" | "list"
|
|
callback set-view(string);
|
|
width: 60px;
|
|
height: 30px;
|
|
border-radius: 6px;
|
|
background: Theme.surface-elevated;
|
|
clip: true;
|
|
HorizontalLayout {
|
|
ToggleButton {
|
|
icon: @image-url("../assets/icons/layout-grid.svg");
|
|
active: root.view-mode == "grid";
|
|
sm: true;
|
|
clicked => {
|
|
root.set-view("grid");
|
|
}
|
|
}
|
|
ToggleButton {
|
|
icon: @image-url("../assets/icons/list.svg");
|
|
active: root.view-mode == "list";
|
|
sm: true;
|
|
clicked => {
|
|
root.set-view("list");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Vertical A-Z jump strip overlaid on the right edge of a grouped list /
|
|
// grid. Emits jump(ordinal, index); the host scrolls its list/flickable.
|
|
component AlphaStrip inherits Rectangle {
|
|
in property <[AlphaJump]> jumps;
|
|
callback jump(int /* ordinal */, int /* index */);
|
|
width: 18px;
|
|
|
|
VerticalLayout {
|
|
alignment: center;
|
|
spacing: 0px;
|
|
for j[k] in root.jumps: Rectangle {
|
|
height: 15px;
|
|
width: 18px;
|
|
Text {
|
|
text: j.letter;
|
|
color: la.has-hover ? Theme.accent : Theme.text-muted;
|
|
font-size: 9px;
|
|
font-weight: Typography.semibold;
|
|
horizontal-alignment: center;
|
|
vertical-alignment: center;
|
|
}
|
|
la := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
root.jump(k, j.index);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
export component FavoritesView inherits Rectangle {
|
|
callback open-album(string);
|
|
callback open-artist(string);
|
|
|
|
property <length> artist-w: 160px;
|
|
property <length> artist-h: 200px;
|
|
property <length> gap: 24px;
|
|
|
|
background: Theme.surface-main;
|
|
|
|
VerticalLayout {
|
|
spacing: 0px;
|
|
|
|
// ===================== FIXED CHROME =====================
|
|
|
|
// Row 1 — back/forward + title (left), tab menu (right).
|
|
HorizontalLayout {
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
padding-top: 11px;
|
|
spacing: 16px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
NavButtons { }
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
Text {
|
|
text: @tr("Favorites");
|
|
color: Theme.text-primary;
|
|
font-size: Typography.section;
|
|
font-weight: Typography.bold;
|
|
}
|
|
}
|
|
Rectangle { horizontal-stretch: 1; }
|
|
VerticalLayout {
|
|
alignment: center;
|
|
FavTabMenu { }
|
|
}
|
|
}
|
|
|
|
Rectangle { height: 12px; }
|
|
|
|
// Row 2 — per-view action buttons (left), toolbar (right).
|
|
HorizontalLayout {
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
spacing: 8px;
|
|
|
|
// --- Left: action buttons ---
|
|
if FavoritesState.active-tab == "tracks"
|
|
&& FavoritesState.tracks-visible.length > 0: HorizontalLayout {
|
|
spacing: 8px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
CircleAction {
|
|
icon: @image-url("../assets/icons/play-fill.svg");
|
|
primary: true;
|
|
clicked => {
|
|
FavoritesActions.play-all-tracks();
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
CircleAction {
|
|
icon: @image-url("../assets/icons/shuffle.svg");
|
|
clicked => {
|
|
FavoritesActions.shuffle-tracks();
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
CircleAction {
|
|
icon: @image-url("../assets/icons/square-check-big.svg");
|
|
active: FavoritesState.tracks-multi-select;
|
|
clicked => {
|
|
FavoritesActions.toggle-multi-select();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if FavoritesState.active-tab == "albums"
|
|
&& FavoritesState.albums-visible.length > 0: HorizontalLayout {
|
|
spacing: 8px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
CircleAction {
|
|
icon: @image-url("../assets/icons/shuffle.svg");
|
|
clicked => {
|
|
FavoritesActions.albums-shuffle();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle { horizontal-stretch: 1; }
|
|
|
|
// --- Right: per-view toolbar ---
|
|
if FavoritesState.active-tab == "tracks"
|
|
&& FavoritesState.tracks.length > 0: HorizontalLayout {
|
|
spacing: 8px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
ExpandableSearch {
|
|
placeholder: @tr("Search");
|
|
sm: true;
|
|
query <=> FavoritesState.tracks-search;
|
|
edited(q) => {
|
|
FavoritesActions.search-tracks(q);
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
FavGenreButton { }
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
QbzSelect {
|
|
menu-width: 150px;
|
|
options: [
|
|
@tr("Group: Off"),
|
|
@tr("Group: Album"),
|
|
@tr("Group: Artist"),
|
|
@tr("Group: Name"),
|
|
];
|
|
sm: true;
|
|
current-index: FavoritesState.tracks-group-mode == "off" ? 0
|
|
: FavoritesState.tracks-group-mode == "album" ? 1
|
|
: FavoritesState.tracks-group-mode == "artist" ? 2
|
|
: 3;
|
|
selected(i) => {
|
|
FavoritesActions.tracks-set-group(
|
|
i == 0 ? "off"
|
|
: i == 1 ? "album"
|
|
: i == 2 ? "artist"
|
|
: "name");
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if FavoritesState.active-tab == "albums"
|
|
&& FavoritesState.albums.length > 0: HorizontalLayout {
|
|
spacing: 8px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
ExpandableSearch {
|
|
placeholder: @tr("Search");
|
|
sm: true;
|
|
query <=> FavoritesState.albums-search;
|
|
edited(q) => {
|
|
FavoritesActions.albums-search(q);
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
FavGenreButton { }
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
QbzSelect {
|
|
menu-width: 150px;
|
|
options: [
|
|
@tr("Group: Off"),
|
|
@tr("Group: A-Z"),
|
|
@tr("Group: Artist"),
|
|
];
|
|
sm: true;
|
|
current-index: FavoritesState.albums-group-mode == "off" ? 0
|
|
: FavoritesState.albums-group-mode == "alpha" ? 1
|
|
: 2;
|
|
selected(i) => {
|
|
FavoritesActions.albums-set-group(
|
|
i == 0 ? "off" : i == 1 ? "alpha" : "artist");
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
QbzSelect {
|
|
menu-width: 168px;
|
|
options: [
|
|
@tr("Default"),
|
|
@tr("Title A-Z"),
|
|
@tr("Title Z-A"),
|
|
@tr("Artist A-Z"),
|
|
];
|
|
sm: true;
|
|
current-index: FavoritesState.albums-sort-by == "default" ? 0
|
|
: FavoritesState.albums-sort-by == "title-asc" ? 1
|
|
: FavoritesState.albums-sort-by == "title-desc" ? 2
|
|
: 3;
|
|
selected(i) => {
|
|
FavoritesActions.albums-set-sort(
|
|
i == 0 ? "default"
|
|
: i == 1 ? "title-asc"
|
|
: i == 2 ? "title-desc"
|
|
: "artist-asc");
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
ViewToggle {
|
|
view-mode: FavoritesState.albums-view-mode;
|
|
set-view(v) => {
|
|
FavoritesActions.albums-set-view(v);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if FavoritesState.active-tab == "labels"
|
|
&& FavoritesState.labels.length > 0: HorizontalLayout {
|
|
spacing: 8px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
ExpandableSearch {
|
|
placeholder: @tr("Search");
|
|
sm: true;
|
|
query <=> FavoritesState.labels-search;
|
|
edited(q) => {
|
|
FavoritesActions.search-labels(q);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if FavoritesState.active-tab == "playlists"
|
|
&& (FavoritesState.playlists-favorites.length > 0
|
|
|| FavoritesState.playlists-following.length > 0): HorizontalLayout {
|
|
spacing: 8px;
|
|
VerticalLayout {
|
|
alignment: center;
|
|
ExpandableSearch {
|
|
placeholder: @tr("Search");
|
|
sm: true;
|
|
query <=> FavoritesState.playlists-search;
|
|
edited(q) => {
|
|
FavoritesActions.search-playlists(q);
|
|
}
|
|
}
|
|
}
|
|
VerticalLayout {
|
|
alignment: center;
|
|
ViewToggle {
|
|
view-mode: FavoritesState.playlists-view-mode;
|
|
set-view(v) => {
|
|
FavoritesActions.playlists-set-view(v);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle { height: 14px; }
|
|
Rectangle {
|
|
height: 1px;
|
|
background: Theme.border-subtle;
|
|
}
|
|
|
|
// ===================== SCROLLING CONTENT =====================
|
|
Rectangle {
|
|
vertical-stretch: 1;
|
|
clip: true;
|
|
|
|
// Loading (any tab).
|
|
if FavoritesState.loading: VerticalLayout {
|
|
alignment: center;
|
|
HorizontalLayout {
|
|
alignment: center;
|
|
LoadingSpinner { size: 36px; }
|
|
}
|
|
}
|
|
|
|
// Load error + retry (any tab).
|
|
if !FavoritesState.loading && FavoritesState.load-error != "": VerticalLayout {
|
|
alignment: center;
|
|
spacing: 10px;
|
|
Text {
|
|
text: @tr("Couldn't load favorites.");
|
|
color: Theme.text-primary;
|
|
font-size: Typography.body;
|
|
font-weight: Typography.semibold;
|
|
horizontal-alignment: center;
|
|
}
|
|
Text {
|
|
text: FavoritesState.load-error;
|
|
color: Theme.text-muted;
|
|
font-size: Typography.legal;
|
|
horizontal-alignment: center;
|
|
}
|
|
HorizontalLayout {
|
|
alignment: center;
|
|
Rectangle {
|
|
width: retry-label.preferred-width + 28px;
|
|
height: 32px;
|
|
border-radius: 6px;
|
|
background: retry-ta.has-hover ? Theme.surface-hover : Theme.surface-elevated;
|
|
border-width: 1px;
|
|
border-color: Theme.border-subtle;
|
|
retry-label := Text {
|
|
text: @tr("Retry");
|
|
color: Theme.text-primary;
|
|
font-size: Typography.legal;
|
|
x: (parent.width - self.width) / 2;
|
|
y: (parent.height - self.height) / 2;
|
|
}
|
|
retry-ta := TouchArea {
|
|
mouse-cursor: pointer;
|
|
clicked => {
|
|
FavoritesActions.retry-load();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Tracks tab — virtualized self-scrolling list --------------
|
|
if !FavoritesState.loading && FavoritesState.load-error == ""
|
|
&& FavoritesState.active-tab == "tracks": VerticalLayout {
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
padding-top: 16px;
|
|
spacing: 0px;
|
|
|
|
// Bulk action bar — visible in multi-select edit mode.
|
|
if FavoritesState.tracks-multi-select: MultiSelectBar {
|
|
selected-count: FavoritesState.tracks-selected-count;
|
|
actions: [
|
|
{ id: "select-all", label: @tr("Select all"), danger: false, needs-selection: false },
|
|
{ id: "play-next", label: @tr("Play next"), danger: false, needs-selection: true },
|
|
{ id: "queue", label: @tr("Add to queue"), danger: false, needs-selection: true },
|
|
{ id: "add-to-playlist", label: @tr("Add to playlist"), danger: false, needs-selection: true },
|
|
{ id: "remove-selected", label: @tr("Remove from favorites"), danger: true, needs-selection: true },
|
|
{ id: "clear", label: @tr("Clear"), danger: false, needs-selection: true },
|
|
];
|
|
action(id) => {
|
|
FavoritesActions.bulk-action(id);
|
|
}
|
|
}
|
|
if FavoritesState.tracks-multi-select: Rectangle { height: 8px; }
|
|
|
|
if FavoritesState.tracks.length == 0: Text {
|
|
text: @tr("No favorite tracks yet.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
if FavoritesState.tracks.length > 0
|
|
&& FavoritesState.tracks-visible.length == 0: Text {
|
|
text: @tr("No tracks match your search.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
|
|
Rectangle {
|
|
vertical-stretch: 1;
|
|
track-list := ListView {
|
|
width: 100%;
|
|
height: 100%;
|
|
vertical-scrollbar-policy: ScrollBarPolicy.always-off;
|
|
for track[i] in FavoritesState.tracks-visible: VerticalLayout {
|
|
spacing: 0px;
|
|
// Group header rows when grouping by album / artist.
|
|
if FavoritesState.tracks-group-mode == "album" && track.album != ""
|
|
&& (i == 0 || FavoritesState.tracks-visible[i - 1].album != track.album): Rectangle {
|
|
height: 32px;
|
|
Text {
|
|
x: 2px;
|
|
width: parent.width - 4px;
|
|
height: 100%;
|
|
text: track.album;
|
|
color: Theme.text-secondary;
|
|
font-size: Typography.legal;
|
|
font-weight: Typography.semibold;
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
if FavoritesState.tracks-group-mode == "artist" && track.artist != ""
|
|
&& (i == 0 || FavoritesState.tracks-visible[i - 1].artist != track.artist): Rectangle {
|
|
height: 32px;
|
|
Text {
|
|
x: 2px;
|
|
width: parent.width - 4px;
|
|
height: 100%;
|
|
text: track.artist;
|
|
color: Theme.text-secondary;
|
|
font-size: Typography.legal;
|
|
font-weight: Typography.semibold;
|
|
vertical-alignment: center;
|
|
overflow: elide;
|
|
}
|
|
}
|
|
TrackRow {
|
|
track: track;
|
|
index: i;
|
|
show-artwork: true;
|
|
show-album: FavoritesState.tracks-group-mode != "album";
|
|
show-favorite: true;
|
|
multi-select-mode: FavoritesState.tracks-multi-select;
|
|
media-action(kind, id, action) => {
|
|
if (kind == "album" && action == "open") {
|
|
FavoritesActions.open-album(id);
|
|
} else if (kind == "artist" && action == "open") {
|
|
FavoritesActions.open-artist(id);
|
|
} else if (action == "favorite") {
|
|
FavoritesActions.unfavorite-track(id);
|
|
} else {
|
|
FavoritesActions.track-action(id, action);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
ListScrollbar {
|
|
x: parent.width - self.width - 4px;
|
|
width: 14px;
|
|
height: 100%;
|
|
viewport-height: track-list.viewport-height;
|
|
visible-height: track-list.visible-height;
|
|
viewport-y <=> track-list.viewport-y;
|
|
}
|
|
// A-Z jump strip (name grouping) — accurate (uniform rows).
|
|
if FavoritesState.tracks-group-mode == "name"
|
|
&& FavoritesState.tracks-alpha.length > 0: AlphaStrip {
|
|
x: parent.width - self.width - 20px;
|
|
height: 100%;
|
|
jumps: FavoritesState.tracks-alpha;
|
|
jump(ord, idx) => {
|
|
track-list.viewport-y = -Math.min(
|
|
idx * 50px / 1px,
|
|
Math.max(0, (track-list.viewport-height - track-list.visible-height) / 1px)) * 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Albums / Artists / Playlists / Labels — scrolling ---------
|
|
if !FavoritesState.loading && FavoritesState.load-error == ""
|
|
&& FavoritesState.active-tab != "tracks": Rectangle {
|
|
other-flick := Flickable {
|
|
interactive: !DragState.active;
|
|
viewport-width: self.width;
|
|
viewport-height: other-page.preferred-height;
|
|
|
|
other-page := VerticalLayout {
|
|
width: parent.width;
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
padding-top: 16px;
|
|
padding-bottom: 100px;
|
|
spacing: 0px;
|
|
alignment: start;
|
|
|
|
// --- Albums tab ---
|
|
if FavoritesState.active-tab == "albums": VerticalLayout {
|
|
spacing: 0px;
|
|
if FavoritesState.albums.length == 0: Text {
|
|
text: @tr("No favorite albums yet.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
if FavoritesState.albums.length > 0
|
|
&& FavoritesState.albums-shown == 0: Text {
|
|
text: @tr("No albums match your search.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
AlbumCollectionView {
|
|
albums: FavoritesState.albums-visible;
|
|
grouped: FavoritesState.albums-grouped;
|
|
view-mode: FavoritesState.albums-view-mode;
|
|
is-grouped: FavoritesState.albums-group-mode != "off";
|
|
show-source: false;
|
|
open-album(id) => {
|
|
root.open-album(id);
|
|
}
|
|
open-artist(id) => {
|
|
root.open-artist(id);
|
|
}
|
|
media-action(kind, id, action) => {
|
|
if (action == "favorite") {
|
|
FavoritesActions.unfavorite-album(id);
|
|
} else {
|
|
FavoritesActions.album-action(id, action);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Artists tab ---
|
|
if FavoritesState.active-tab == "artists": artists-grid := Rectangle {
|
|
property <int> columns: Math.max(
|
|
1,
|
|
Math.floor((self.width + root.gap) / (root.artist-w + root.gap)));
|
|
property <int> rows: Math.ceil(FavoritesState.artists.length / self.columns);
|
|
height: self.rows > 0
|
|
? self.rows * root.artist-h + Math.max(0, self.rows - 1) * root.gap
|
|
: 0px;
|
|
if FavoritesState.artists.length == 0: Text {
|
|
text: @tr("No favorite artists yet.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
for artist[i] in FavoritesState.artists: FavArtistCard {
|
|
x: Math.mod(i, artists-grid.columns) * (root.artist-w + root.gap);
|
|
y: Math.floor(i / artists-grid.columns) * (root.artist-h + root.gap);
|
|
item: artist;
|
|
clicked(id) => { root.open-artist(id); }
|
|
}
|
|
}
|
|
|
|
// --- Playlists tab (two sub-tabs: Library / Following) ---
|
|
if FavoritesState.active-tab == "playlists": VerticalLayout {
|
|
spacing: 0px;
|
|
// Sub-tab selector (underline tabs, no pills — ADR-008).
|
|
HorizontalLayout {
|
|
spacing: 24px;
|
|
alignment: start;
|
|
PlaylistSubTab {
|
|
label: @tr("Library");
|
|
tab-id: "favorites";
|
|
}
|
|
PlaylistSubTab {
|
|
label: @tr("Following");
|
|
tab-id: "following";
|
|
count: FavoritesState.playlists-following-count;
|
|
}
|
|
}
|
|
Rectangle { height: 16px; }
|
|
if FavoritesState.playlists-visible.length == 0
|
|
&& FavoritesState.playlists-search != "": Text {
|
|
text: @tr("No playlists match your search.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
if FavoritesState.playlists-visible.length == 0
|
|
&& FavoritesState.playlists-search == ""
|
|
&& FavoritesState.playlists-sub-tab == "following": Text {
|
|
text: @tr("No followed playlists yet.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
if FavoritesState.playlists-visible.length == 0
|
|
&& FavoritesState.playlists-search == ""
|
|
&& FavoritesState.playlists-sub-tab != "following": Text {
|
|
text: @tr("No favorite playlists yet.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
if FavoritesState.playlists-view-mode != "list": playlists-grid := Rectangle {
|
|
property <length> pl-w: 220px;
|
|
property <length> pl-h: 266px;
|
|
property <int> columns: Math.max(
|
|
1,
|
|
Math.floor((self.width + root.gap) / (self.pl-w + root.gap)));
|
|
property <int> rows: Math.ceil(FavoritesState.playlists-visible.length / self.columns);
|
|
height: self.rows > 0
|
|
? self.rows * self.pl-h + Math.max(0, self.rows - 1) * root.gap
|
|
: 0px;
|
|
for pl[i] in FavoritesState.playlists-visible: PlaylistCard {
|
|
x: Math.mod(i, playlists-grid.columns) * (playlists-grid.pl-w + root.gap);
|
|
y: Math.floor(i / playlists-grid.columns) * (playlists-grid.pl-h + root.gap);
|
|
playlist: pl;
|
|
body-opens: true;
|
|
media-action(k, id, a) => {
|
|
if (a == "open") {
|
|
FavoritesActions.open-playlist(id);
|
|
} else {
|
|
FavoritesActions.playlist-action(id, a);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if FavoritesState.playlists-view-mode == "list": VerticalLayout {
|
|
spacing: 2px;
|
|
for pl[i] in FavoritesState.playlists-visible: PlaylistListRow {
|
|
playlist: pl;
|
|
index: i;
|
|
media-action(k, id, a) => {
|
|
if (a == "open") {
|
|
FavoritesActions.open-playlist(id);
|
|
} else {
|
|
FavoritesActions.playlist-action(id, a);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// --- Labels tab ---
|
|
if FavoritesState.active-tab == "labels": labels-grid := Rectangle {
|
|
property <int> columns: Math.max(
|
|
1,
|
|
Math.floor((self.width + root.gap) / (root.artist-w + root.gap)));
|
|
property <int> rows: Math.ceil(FavoritesState.labels-visible.length / self.columns);
|
|
height: self.rows > 0
|
|
? self.rows * root.artist-h + Math.max(0, self.rows - 1) * root.gap
|
|
: 0px;
|
|
if FavoritesState.labels.length == 0: Text {
|
|
text: @tr("No favorite labels yet.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
if FavoritesState.labels.length > 0
|
|
&& FavoritesState.labels-visible.length == 0: Text {
|
|
text: @tr("No labels match your search.");
|
|
color: Theme.text-muted;
|
|
font-size: Typography.body;
|
|
}
|
|
for label[i] in FavoritesState.labels-visible: FavLabelCard {
|
|
x: Math.mod(i, labels-grid.columns) * (root.artist-w + root.gap);
|
|
y: Math.floor(i / labels-grid.columns) * (root.artist-h + root.gap);
|
|
item: label;
|
|
clicked(id, name) => { FavoritesActions.open-label(id, name); }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
ListScrollbar {
|
|
x: parent.width - self.width - 4px;
|
|
width: 14px;
|
|
height: 100%;
|
|
viewport-height: other-flick.viewport-height;
|
|
visible-height: other-flick.height;
|
|
viewport-y <=> other-flick.viewport-y;
|
|
}
|
|
// A-Z jump strip (albums alpha grouping) — proportional jump.
|
|
if FavoritesState.active-tab == "albums"
|
|
&& FavoritesState.albums-group-mode == "alpha"
|
|
&& FavoritesState.albums-alpha.length > 0: AlphaStrip {
|
|
x: parent.width - self.width - 20px;
|
|
height: 100%;
|
|
jumps: FavoritesState.albums-alpha;
|
|
jump(ord, idx) => {
|
|
other-flick.viewport-y = -(ord / Math.max(1, FavoritesState.albums-alpha.length - 1))
|
|
* Math.max(0, (other-flick.viewport-height - other-flick.height) / 1px) * 1px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Genre filter overlay — the shared popup, favorites context. Anchored
|
|
// under the toolbar's genre button (below the fixed chrome).
|
|
if GenreFilterState.open: Rectangle {
|
|
width: 100%;
|
|
height: 100%;
|
|
TouchArea {
|
|
clicked => {
|
|
GenreFilterState.open = false;
|
|
}
|
|
}
|
|
}
|
|
if GenreFilterState.open: GenreFilterPopup {
|
|
x: root.width - self.width - 32px;
|
|
y: 104px;
|
|
}
|
|
}
|