SoulStream/src/components/ImportToast.svelte

<script>
    // The import's presence while its window is closed — the same dark glass
    // pill as the follow toast (approved T2), in the same berth above the
    // player bar, but clickable and persistent: it stays up exactly as long
    // as there is something to know (a scan or copy running, or a completion
    // nobody has seen yet) and a click steps back into the import window.
    //
    // Visibility is pure derivation — the window OPEN hides it (the window
    // narrates its own work), and reopening resets terminal phases to idle
    // (ImportWindow's acknowledgment effect), so the pill never nags about
    // a state the user has already looked at.
    import { ui, importStatus } from "../lib/state.svelte.js";

    const nfmt = (n) => n.toLocaleString("en-US");
    const shown = $derived(!ui.importOpen && importStatus.phase !== "idle");
    const busy = $derived(
        importStatus.phase === "scanning" || importStatus.phase === "applying");
</script>

{#if shown}
    <div class="layer">
        <button
            class="toast"
            onclick={() => { ui.importOpen = true; }}
            title="Back to the import"
        >
            {#if busy}
                <span class="mark pulse">▸</span>
            {:else if importStatus.phase === "error" || (importStatus.phase === "applied" && importStatus.skipped)}
                <span class="mark warn">!</span>
            {:else}
                <span class="mark ok">✓</span>
            {/if}
            {#if importStatus.phase === "scanning"}
                <span>Reading your music — <b>{nfmt(importStatus.done)} of
                    {importStatus.total ? nfmt(importStatus.total) : "…"}</b> folders</span>
            {:else if importStatus.phase === "scanned"}
                <span>Scan finished — <b>{nfmt(importStatus.done)} records</b> to review</span>
            {:else if importStatus.phase === "applying"}
                <span>Importing — <b>{nfmt(importStatus.done)} of
                    {nfmt(importStatus.total)}</b> records copied</span>
            {:else if importStatus.phase === "applied"}
                <!-- A bare "Imported 0 records · 0.0 GB" is the worst thing
                     this pill can say: something was refused and the reason
                     is a click away, but nothing here admits it. The count
                     that matters leads. -->
                {#if importStatus.skipped && !importStatus.done}
                    <span><b>{nfmt(importStatus.skipped)} record{importStatus.skipped === 1
                        ? "" : "s"}</b> could not be imported — <b>click to see why</b></span>
                {:else if importStatus.skipped}
                    <span>Imported <b>{nfmt(importStatus.done)} records</b>{importStatus.label
                        ? ` · ${importStatus.label}` : ""} · <b>{nfmt(importStatus.skipped)}
                        left out</b></span>
                {:else}
                    <span>Imported <b>{nfmt(importStatus.done)} records</b>{importStatus.label
                        ? ` · ${importStatus.label}` : ""}</span>
                {/if}
            {:else if importStatus.error}
                <span>{importStatus.error} <b>Click to fix</b></span>
            {:else}
                <span>The import hit a problem — <b>click to see</b></span>
            {/if}
        </button>
    </div>
{/if}

<style>
    /* FollowToast's berth verbatim — player bar + 8px shell gutter + 26px of
       air — except the layer lets clicks through and the pill takes them. */
    .layer {
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(var(--player-height, 62px) + 8px + 26px);
        display: flex;
        justify-content: center;
        z-index: 80;
        pointer-events: none;
    }
    .toast {
        pointer-events: auto;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 9px 16px;
        border-radius: 99px;
        background: rgba(22, 23, 28, 0.94);
        border: 1px solid rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
        font-size: 12.5px;
        font-weight: 700;
        color: #fff;
        font-family: inherit;
        cursor: pointer;
        animation: toast-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .toast:hover {
        background: rgba(34, 35, 42, 0.96);
        border-color: rgba(255, 255, 255, 0.2);
    }
    .toast:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
    @keyframes toast-in {
        from {
            opacity: 0;
            transform: translateY(16px) scale(0.95);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
    .mark {
        flex: none;
        font-style: normal;
    }
    .mark.pulse {
        color: var(--accent);
        animation: mark-pulse 1s ease-in-out infinite;
    }
    @keyframes mark-pulse {
        50% {
            opacity: 0.35;
        }
    }
    .mark.ok {
        color: var(--accent);
    }
    .mark.warn {
        color: #f0cd77;
    }
    b {
        font-weight: 800;
        font-variant-numeric: tabular-nums;
    }
    @media (prefers-reduced-motion: reduce) {
        .toast {
            animation-duration: 1ms;
        }
        .mark.pulse {
            animation: none;
        }
    }
</style>