qbz/crates/qbz-slint/ui/discover/ForYouView.slint

// Discover > For You — dedicated, ordered layout for the For You tab.
// Unlike Home / Editor's Picks (uniform album carousels from
// HomeState.sections), For You mixes album carousels, a track
// carousel, and artist carousels, so it renders from ForYouState.
// Sections hide themselves when empty.
//
// Reuses the shared cards/carousels — no new card components here.
// Qobuz Mixes, Radio Stations, Spotlight, and the reco-DB sections
// (More from library, Rediscover) are later increments.

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { ForYouState, RadioStationItem } from "../state.slint";
import { Carousel } from "Carousel.slint";
import { SlimCarousel } from "SlimCarousel.slint";
import { ArtistCarousel } from "ArtistCarousel.slint";
import { Spotlight } from "Spotlight.slint";
import { QobuzMixesRow } from "QobuzMixesRow.slint";
import { RadioCard } from "RadioCard.slint";
import { HomeSkeleton } from "HomeSkeleton.slint";

export component ForYouView inherits VerticalLayout {
    callback open-album(string);
    callback open-artist(string);
    callback media-action(string, string, string);
    callback play-track(string);
    callback play-top-tracks(string);
    callback start-radio(string);
    callback start-radio-album(string);
    callback open-mix(string);

    // While the first lazy load is in flight, show the same pulsing
    // skeleton Home uses (the Qobuz Mixes tiles stay — they're static).
    property <bool> show-skeleton:
        ForYouState.loading
        && ForYouState.release-watch.albums.length == 0
        && ForYouState.top-artists.length == 0;

    spacing: 40px;
    alignment: start;

    // 0. Qobuz Mixes (static navigation tiles).
    QobuzMixesRow {
        open-mix(which) => {
            root.open-mix(which);
        }
    }

    if root.show-skeleton: HomeSkeleton { }

    // 1. Release Watch.
    if ForYouState.release-watch.albums.length > 0: Carousel {
        section: ForYouState.release-watch;
        album-clicked(id) => {
            root.open-album(id);
        }
        media-action(kind, id, action) => {
            root.media-action(kind, id, action);
        }
    }

    // 1b. Radio Stations — album-seeded radio tiles.
    if ForYouState.radio-stations.length > 0: VerticalLayout {
        spacing: 12px;
        Text {
            text: @tr("Radio Stations");
            color: Theme.text-primary;
            font-size: 18px;
            font-weight: Typography.semibold;
        }
        Rectangle {
            height: 234px;
            clip: true;
            radio-flick := Flickable {
                width: 100%;
                height: parent.height;
                viewport-width: ForYouState.radio-stations.length * (200px + 32px);
                viewport-height: self.height;
                HorizontalLayout {
                    spacing: 32px;
                    alignment: start;
                    for st in ForYouState.radio-stations: RadioCard {
                        seed-title: st.title;
                        seed-subtitle: st.artist;
                        label: "RADIO";
                        artwork: st.artwork;
                        clicked => {
                            root.start-radio-album(st.album-id);
                        }
                        play => {
                            root.start-radio-album(st.album-id);
                        }
                    }
                }
            }
        }
    }

    // 2. Recently Played Tracks.
    if ForYouState.recent-tracks.length > 0: SlimCarousel {
        title: @tr("Recently Played Tracks");
        items: ForYouState.recent-tracks;
        item-clicked(id) => {
            root.play-track(id);
        }
    }

    // 3. Recently Played Albums.
    if ForYouState.recent-albums.albums.length > 0: Carousel {
        section: ForYouState.recent-albums;
        album-clicked(id) => {
            root.open-album(id);
        }
        media-action(kind, id, action) => {
            root.media-action(kind, id, action);
        }
    }

    // 4. Your Top Artists.
    if ForYouState.top-artists.length > 0: ArtistCarousel {
        title: @tr("Your Top Artists");
        artists: ForYouState.top-artists;
        artist-clicked(id) => {
            root.open-artist(id);
        }
        media-action(kind, id, action) => {
            root.media-action(kind, id, action);
        }
    }

    // 5. More From Your Library.
    if ForYouState.more-from-library.albums.length > 0: Carousel {
        section: ForYouState.more-from-library;
        album-clicked(id) => {
            root.open-album(id);
        }
        media-action(kind, id, action) => {
            root.media-action(kind, id, action);
        }
    }

    // 6. Rediscover Your Library.
    if ForYouState.rediscover.albums.length > 0: Carousel {
        section: ForYouState.rediscover;
        album-clicked(id) => {
            root.open-album(id);
        }
        media-action(kind, id, action) => {
            root.media-action(kind, id, action);
        }
    }

    // 6. Artists to Follow.
    if ForYouState.artists-to-follow.length > 0: ArtistCarousel {
        title: @tr("Artists to Follow");
        artists: ForYouState.artists-to-follow;
        artist-clicked(id) => {
            root.open-artist(id);
        }
        media-action(kind, id, action) => {
            root.media-action(kind, id, action);
        }
    }

    // 6. Spotlight.
    if ForYouState.spotlight-visible: Spotlight {
        open-artist(id) => {
            root.open-artist(id);
        }
        open-album(id) => {
            root.open-album(id);
        }
        play-top-tracks(id) => {
            root.play-top-tracks(id);
        }
        start-radio(id) => {
            root.start-radio(id);
        }
        media-action(kind, id, action) => {
            root.media-action(kind, id, action);
        }
    }
}