SoulStream/src/mini/shapes/Queue.svelte

<script>
    // V8 · The Queue card — the Rdio shape in our clothes: a header player
    // over the live queue, the current row wearing the app's stepped
    // equalizer (height keyframes, never transform — the corner saga).
    import Icon from "../../components/Icon.svelte";
    import Wash from "../bits/Wash.svelte";
    import Art from "../bits/Art.svelte";
    import Lane from "../bits/Lane.svelte";
    import VolumeFly from "../bits/VolumeFly.svelte";
    import Chrome from "../bits/Chrome.svelte";
    import { mini, playing, cmd, fmt } from "../mini.svelte.js";

    let artEl = $state(null);
</script>

<div class="shape">
    <Wash artUrl={mini.artUrl} fade="head" />
    <Chrome anchor={artEl} />
    <div class="head">
        <div class="art" bind:this={artEl}>
            <Art url={mini.artUrl} />
        </div>
        <div class="hr">
            <div class="toprow">
                <div class="name">
                    <b>{mini.title ?? "Nothing playing"}</b>{mini.artist ? ` — ${mini.artist}` : ""}
                </div>
                <button class="m-mode" class:on={mini.shuffle} title="Shuffle" onclick={() => cmd("shuffle")}><Icon name="shuffle" size={15} /></button>
                <button class="m-mode" class:on={mini.repeat !== "off"} title="Repeat" onclick={() => cmd("repeat")}><Icon name={mini.repeat === "one" ? "repeat-one" : "repeat"} size={15} /></button>
                <VolumeFly />
            </div>
            <div class="ctlrow">
                <button class="m-skip" title="Previous" onclick={() => cmd("prev")}><Icon name="skip-back" size={16} /></button>
                <button class="m-disc small" title="Play/Pause" onclick={() => cmd("toggle")}><Icon name={playing() ? "pause" : "play"} size={13} /></button>
                <button class="m-skip" title="Next" onclick={() => cmd("next")}><Icon name="skip-forward" size={16} /></button>
                <Lane slim />
            </div>
        </div>
    </div>
    <div class="queue">
        <div class="qhead"><span>Queue</span><span>{mini.rows.length} tracks</span></div>
        <div class="qlist">
            {#each mini.rows as row, i (i)}
                <button class="qrow" class:now={i === mini.index} onclick={() => cmd("jump", i)}>
                    {#if i === mini.index}
                        <span class="eq" class:active={playing()}><b></b><b></b><b></b></span>
                    {:else}
                        <span class="n">{i + 1}</span>
                    {/if}
                    <span class="qt">{row.title}</span>
                    <span class="qd">{row.dur != null ? fmt(row.dur) : ""}</span>
                </button>
            {/each}
        </div>
    </div>
</div>

<style>
    .shape {
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
        background: var(--bg-player);
        display: flex;
        flex-direction: column;
    }
    .head {
        position: relative;
        z-index: 1;
        display: flex;
        gap: 11px;
        padding: 11px 12px 9px;
        flex: none;
    }
    .art {
        width: 62px;
        height: 62px;
        border-radius: 6px;
        overflow: hidden;
        flex: none;
        background: var(--bg-highlight);
    }
    .hr {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .toprow {
        display: flex;
        align-items: center;
        gap: 9px;
        min-width: 0;
    }
    .name {
        flex: 1;
        min-width: 0;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--text-secondary);
    }
    .name b {
        font-weight: 700;
        color: var(--text-primary);
    }
    .ctlrow {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .ctlrow :global(.lane) {
        flex: 1;
    }
    .queue {
        position: relative;
        z-index: 1;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .qhead {
        display: flex;
        justify-content: space-between;
        padding: 6px 12px 4px;
        font-size: 9px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--text-muted);
        flex: none;
    }
    .qlist {
        overflow-y: auto;
        min-height: 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
    }
    .qrow {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 0 12px;
        height: 30px;
        font-size: 12px;
        color: var(--text-secondary);
        text-align: left;
    }
    .qrow:hover {
        background: rgba(255, 255, 255, 0.05);
    }
    .n {
        width: 16px;
        flex: none;
        text-align: center;
        font-size: 11px;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }
    .qt {
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .qd {
        flex: none;
        font-size: 11px;
        color: var(--text-muted);
        font-variant-numeric: tabular-nums;
    }
    .qrow.now {
        color: var(--accent);
        font-weight: 700;
    }
    .qrow.now .qd {
        color: var(--accent);
    }
    /* the stepped equalizer — HEIGHT keyframes, never transform */
    .eq {
        display: inline-flex;
        align-items: flex-end;
        gap: 1.5px;
        width: 16px;
        height: 11px;
        flex: none;
        justify-content: center;
    }
    .eq b {
        width: 2.5px;
        background: var(--accent);
        border-radius: 1px;
    }
    .eq.active b {
        animation: eq 1.2s steps(1, end) infinite;
    }
    .eq b:nth-child(1) {
        height: 40%;
        --eq-hi: 40%;
        --eq-lo: 16%;
        animation-delay: -0.2s;
    }
    .eq b:nth-child(2) {
        height: 90%;
        --eq-hi: 90%;
        --eq-lo: 36%;
    }
    .eq b:nth-child(3) {
        height: 60%;
        --eq-hi: 60%;
        --eq-lo: 24%;
        animation-delay: -0.4s;
    }
    @keyframes eq {
        0%,
        100% {
            height: var(--eq-lo);
        }
        50% {
            height: var(--eq-hi);
        }
    }
</style>