// Left navigation sidebar — the playlists list.
//
// The playlist list is empty until real playlist data is wired (the
// sidebar is a later milestone). The user element now lives in the
// header, not at the bottom of the sidebar.

import { Theme } from "../foundation/semantic-colors.slint";
import { Spacing } from "../foundation/spacing.slint";
import { Layout } from "../foundation/layout.slint";
import { QbzIcon } from "../primitives/QbzIcon.slint";
import { ScrollView } from "std-widgets.slint";

export component Sidebar inherits Rectangle {
    width: Layout.sidebar-width;
    // The sidebar sits one surface above the content area, matching the
    // QBZ dark theme (--bg-secondary sidebar over --bg-primary content).
    background: Theme.surface-card;

    VerticalLayout {
        padding: Spacing.md;
        spacing: Spacing.md;

        HorizontalLayout {
            Text {
                text: "PLAYLISTS";
                color: Theme.text-muted;
                font-size: 11px;
                letter-spacing: 1.5px;
                vertical-alignment: center;
                horizontal-stretch: 1;
            }
            VerticalLayout {
                alignment: center;
                QbzIcon {
                    source: @image-url("../assets/icons/plus.svg");
                    width: 16px;
                    height: 16px;
                    tint: Theme.text-muted;
                }
            }
        }

        ScrollView {
            vertical-stretch: 1;
            horizontal-scrollbar-policy: ScrollBarPolicy.always-off;
            VerticalLayout {
                spacing: 2px;
                // Real playlist rows are populated when the sidebar
                // milestone wires playlist data. No fixtures.
            }
        }
    }
}