community: a proposal on your board arrives as a toast, carried sealed through the inbox

src/components/ProposalToast.svelte

@@ -0,0 +1,122 @@
+<script>
+    // Someone proposed a change to a playlist of ours. The board is only read
+    // on open and Refresh, so without this a proposal arrives in silence.
+    // Same slot, pill and motion as the other toasts; like UploadToast, a
+    // second proposal for the same playlist inside the window extends the
+    // hold and counts up rather than replaying the entrance.
+    import Icon from "./Icon.svelte";
+    import { proposalToast } from "../lib/state.svelte.js";
+
+    const HOLD_MS = 4200;
+    const LEAVE_MS = 280;
+
+    let shown = $state(false);
+    let leaving = $state(false);
+    let holdTimer = 0;
+    let leaveTimer = 0;
+
+    $effect(() => {
+        const seq = proposalToast.seq;
+        if (!seq) return;
+        clearTimeout(holdTimer);
+        clearTimeout(leaveTimer);
+        leaving = false;
+        shown = true;
+        holdTimer = setTimeout(() => {
+            leaving = true;
+            leaveTimer = setTimeout(() => {
+                shown = false;
+                leaving = false;
+            }, LEAVE_MS);
+        }, HOLD_MS);
+        return () => {
+            clearTimeout(holdTimer);
+            clearTimeout(leaveTimer);
+        };
+    });
+</script>
+
+{#if shown}
+    <div class="layer" aria-live="polite">
+        <div class="toast" class:leaving>
+            <span class="mark"><Icon name="playlist" size={14} /></span>
+            {#if proposalToast.count > 1}
+                <span class="text"
+                    ><b>{proposalToast.count} proposals</b> for {proposalToast.playlist}</span
+                >
+            {:else}
+                <span class="text"
+                    ><b>{proposalToast.from}</b> proposed a change to {proposalToast.playlist}</span
+                >
+            {/if}
+        </div>
+    </div>
+{/if}
+
+<style>
+    /* The shared toast slot — UploadToast's geometry verbatim. */
+    .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 {
+        display: inline-flex;
+        align-items: center;
+        gap: 10px;
+        max-width: min(70vw, 560px);
+        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;
+        animation: toast-in 340ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    }
+    .toast.leaving {
+        animation: toast-out 260ms ease both;
+    }
+    @keyframes toast-in {
+        from {
+            opacity: 0;
+            transform: translateY(16px) scale(0.95);
+        }
+        to {
+            opacity: 1;
+            transform: none;
+        }
+    }
+    @keyframes toast-out {
+        to {
+            opacity: 0;
+            transform: translateY(12px) scale(0.97);
+        }
+    }
+    .mark {
+        display: inline-flex;
+        color: var(--accent);
+    }
+    .text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    b {
+        font-weight: 800;
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .toast,
+        .toast.leaving {
+            animation-duration: 1ms;
+        }
+    }
+</style>