qbz/crates/qbz-ui/ui/primitives/PlaylistListRow.slint

// Compact playlist list row (Slint-better; Tauri ships grid only).
// Thumb + name + owner·tracks + play + more-menu. Shared by the Favorites
// Playlists list view and the Qobuz Playlists browse page — extracted
// verbatim from FavoritesView, no styling changes.

import { Theme } from "../foundation/semantic-colors.slint";
import { Typography } from "../foundation/typography.slint";
import { SearchPlaylistItem } from "../state.slint";
import { QbzIcon } from "QbzIcon.slint";
import { ContextMenu } from "ContextMenu.slint";
import { ContextMenuItem } from "ContextMenuItem.slint";

export 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: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
                    y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
                    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: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
                    y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
                    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: Math.round((parent.width - self.width) / 2 / 1px) * 1px;
                    y: Math.round((parent.height - self.height) / 2 / 1px) * 1px;
                    tint: Theme.text-secondary;
                }
                row-menu := PopupWindow {
                    x: -166px;
                    y: 32px;
                    width: 196px;
                    // 5 rows x 33px + ContextMenu's 5/5 padding.
                    height: 5 * 33px + 10px;
                    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-start.svg");
                            label: @tr("Play next");
                            clicked => {
                                root.media-action("playlist", root.playlist.id, "play-next");
                            }
                        }
                        ContextMenuItem {
                            icon: @image-url("../assets/icons/list-plus.svg");
                            label: @tr("Play later");
                            clicked => {
                                root.media-action("playlist", root.playlist.id, "play-later");
                            }
                        }
                        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("Add to Library");
                            clicked => {
                                root.media-action("playlist", root.playlist.id, "favorite");
                            }
                        }
                    }
                }
            }
        }
    }
}