qbz/crates/qbz-slint/ui/label/LabelReleasesView.slint

// LabelReleasesView — opened from the artist network sidebar's
// Labels section. Mirrors Tauri's LabelReleasesView.svelte core:
// a label header (image + name + album count) over a wrapping
// album grid with load-more pagination. The sort / filter /
// group-by-artist controls from the Tauri view are deferred.

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { Radius } from "../foundation/radius.slint";
import { LabelState, LabelActions, AlbumCardItem } from "../state.slint";
import { AlbumCard } from "../discover/AlbumCard.slint";
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { LoadingSpinner } from "../primitives/LoadingSpinner.slint";
import { NavButtons } from "../shell/NavButtons.slint";

export component LabelReleasesView inherits Rectangle {
    callback open-album(string);
    callback media-action(string, string, string);

    property <length> card-width: 220px;
    property <length> card-height: 266px;
    property <length> card-gap: 24px;

    background: Theme.surface-main;

    Flickable {
        viewport-width: self.width;
        viewport-height: page.preferred-height;

        page := VerticalLayout {
            width: parent.width;
            padding-left: 32px;
            padding-right: 32px;
            padding-top: 11px;
            padding-bottom: 100px;
            spacing: 0px;
            alignment: start;

            HorizontalLayout {
                alignment: start;
                NavButtons { }
            }

            Rectangle { height: 22px; }

            // --- Label header ------------------------------------------
            HorizontalLayout {
                spacing: 24px;
                alignment: start;
                Rectangle {
                    width: 120px;
                    height: 120px;
                    border-radius: Radius.md;
                    background: Theme.surface-elevated;
                    clip: true;
                    Image {
                        width: 100%;
                        height: 100%;
                        source: LabelState.image;
                        image-fit: cover;
                    }
                    if LabelState.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: Theme.text-muted;
                    }
                }
                VerticalLayout {
                    alignment: center;
                    spacing: 6px;
                    Text {
                        text: @tr("LABEL");
                        color: Theme.text-muted;
                        font-size: 10px;
                        font-weight: Typography.semibold;
                        letter-spacing: 1.5px;
                    }
                    Text {
                        text: LabelState.name;
                        color: Theme.text-primary;
                        font-size: Typography.title;
                        font-weight: Typography.bold;
                    }
                    if LabelState.total > 0: Text {
                        text: LabelState.total + " " + @tr("releases");
                        color: Theme.text-muted;
                        font-size: Typography.body;
                    }
                }
            }

            Rectangle { height: 32px; }

            if LabelState.loading && LabelState.albums.length == 0: HorizontalLayout {
                alignment: center;
                LoadingSpinner { size: 36px; }
            }

            // --- Album grid --------------------------------------------
            if LabelState.albums.length > 0: grid := Rectangle {
                property <int> columns: Math.max(
                    1,
                    Math.floor((self.width + root.card-gap) / (root.card-width + root.card-gap)));
                property <int> rows: Math.ceil(LabelState.albums.length / self.columns);
                height: self.rows > 0
                    ? self.rows * root.card-height + Math.max(0, self.rows - 1) * root.card-gap
                    : 0px;
                for album[i] in LabelState.albums: AlbumCard {
                    x: Math.mod(i, grid.columns) * (root.card-width + root.card-gap);
                    y: Math.floor(i / grid.columns) * (root.card-height + root.card-gap);
                    width: root.card-width;
                    height: root.card-height;
                    album: album;
                    clicked(id) => {
                        root.open-album(id);
                    }
                    media-action(kind, id, action) => {
                        root.media-action(kind, id, action);
                    }
                }
            }

            if LabelState.albums.length > 0
                && LabelState.albums.length < LabelState.total: HorizontalLayout {
                alignment: center;
                Rectangle {
                    width: load-more-text.preferred-width + 24px;
                    height: 32px;
                    load-more-text := Text {
                        text: LabelState.load-more-loading
                            ? @tr("Loading…")
                            : @tr("Load more");
                        color: load-more-ta.has-hover
                            ? Theme.text-primary
                            : Theme.text-secondary;
                        font-size: 13px;
                        x: (parent.width - self.width) / 2;
                        y: (parent.height - self.height) / 2;
                    }
                    load-more-ta := TouchArea {
                        mouse-cursor: pointer;
                        enabled: !LabelState.load-more-loading;
                        clicked => {
                            LabelActions.load-more();
                        }
                    }
                }
            }
        }
    }
}