community: shared playlists, a signed revision and a pointer on the network, a reference over soulseek, an import through the normal door

src/views/Playlist.svelte

@@ -26,6 +26,16 @@
     import * as api from "../lib/api.js";
     import { findCatalogTrack } from "../lib/catalogMatch.js";
     import Icon from "../components/Icon.svelte";
+    import {
+        community,
+        initCommunity,
+        refreshPublished,
+        publishedFor,
+        sharedPublish,
+        sharedWithdraw,
+        shareSend,
+        statusKind,
+    } from "../lib/community.svelte.js";
 
     const playlist = $derived(
         playlistStore.playlists.find((p) => p.id === ui.playlistId) ?? null,
@@ -37,6 +47,54 @@
     let menuOpen = $state(false);
     let confirmDelete = $state(false);
     let exportOpen = $state(false);
+    // ---- Share on SoulStream (shared_playlists.rs) ----
+    let shareOpen = $state(false);
+    let shareTo = $state("");
+    let shareNote = $state("");
+    const friendNames = $derived(community.friends.filter((f) => f.state === "friends").map((f) => f.username));
+    const nodeUp = $derived(statusKind(community.freenet?.status) === "connected");
+    const canPublish = $derived(nodeUp && !!community.persona?.persona && !community.busy["publish:" + playlist?.id]);
+    async function openShare() {
+        menuOpen = false;
+        shareOpen = true;
+        shareNote = "";
+        await initCommunity();
+        await refreshPublished();
+    }
+    async function doPublish() {
+        shareNote = "";
+        try {
+            const r = await sharedPublish(playlist.id);
+            shareNote = `Published revision ${r.revision_seq} — ${r.entry_count} tracks.`;
+        } catch (e) {
+            shareNote = String(e?.message ?? e);
+        }
+    }
+    async function doWithdraw() {
+        shareNote = "";
+        try {
+            await sharedWithdraw(playlist.id);
+            shareNote = "Withdrawn. Copies others already fetched stay with them.";
+        } catch (e) {
+            shareNote = String(e?.message ?? e);
+        }
+    }
+    async function sendShare() {
+        const to = shareTo.trim();
+        if (!to) return;
+        shareNote = "";
+        try {
+            await shareSend(to, playlist.id);
+            shareNote = `Sent to ${to} over Soulseek.`;
+        } catch (e) {
+            shareNote = String(e?.message ?? e);
+        }
+    }
+    // The sheet escapes the content pane (a containing block) to the body.
+    function portal(node) {
+        document.body.appendChild(node);
+        return { destroy: () => node.remove() };
+    }
     let renaming = $state(false);
     let nameInput = $state("");
     let editingDesc = $state(false);
@@ -782,6 +840,9 @@
                                     >
                                         <Icon name="download" size={15} /> Download all tracks
                                     </button>
+                                    <button class="mi" onclick={openShare} title="Publish a signed copy under your SoulStream ID, or send it to someone">
+                                        <Icon name="disc" size={15} /> Share on SoulStream
+                                    </button>
                                     <div class="rule"></div>
                                     <!-- svelte-ignore a11y_no_static_element_interactions -->
                                     <div
@@ -1026,6 +1087,45 @@
     </div>
 {/if}
 
+{#if shareOpen && playlist}
+    {@const pub = publishedFor(playlist.id)}
+    <div class="share-overlay" use:portal>
+        <div class="share-scrim" role="presentation" onclick={() => (shareOpen = false)}></div>
+        <div class="share-sheet" role="dialog" aria-label="Share on SoulStream">
+            <h3>Share on SoulStream</h3>
+            <p class="sh-hint">{playlist.name} · {playlist.track_count} tracks</p>
+            <div class="sh-row">
+                {#if pub && !pub.withdrawn}
+                    <span class="sh-chip ok">published · revision {pub.revision_seq}</span>
+                {:else if pub}
+                    <span class="sh-chip warn">withdrawn</span>
+                {:else}
+                    <span class="sh-chip">not published</span>
+                {/if}
+                <button class="pill" onclick={doPublish} disabled={!canPublish}>{community.busy["publish:" + playlist.id] ? "Publishing…" : pub && !pub.withdrawn ? "Publish update" : "Publish"}</button>
+                {#if pub && !pub.withdrawn}<button class="pill ghost" onclick={doWithdraw} disabled={!canPublish}>Withdraw</button>{/if}
+            </div>
+            <p class="sh-hint">
+                {#if !community.persona?.persona}
+                    Needs a SoulStream identity — Community → You.
+                {:else if !nodeUp}
+                    Needs the Freenet node connected — Community → You.
+                {:else}
+                    A signed manifest goes to the network under your SoulStream ID: titles, artists, albums, durations and your notes — never a file, never a path. Withdrawing stops pointing at it; copies others already fetched stay with them.
+                {/if}
+            </p>
+            <div class="sh-row">
+                <input placeholder="Send to a Soulseek username" bind:value={shareTo} disabled={!pub || pub.withdrawn} />
+                <button class="pill" onclick={sendShare} disabled={!pub || pub.withdrawn || !shareTo.trim() || !!community.busy["share:" + playlist.id]}>Send</button>
+            </div>
+            {#if friendNames.length}
+                <p class="sh-hint">Friends: {#each friendNames as f (f)}<button class="sh-lnk" onclick={() => (shareTo = f)}>{f}</button>{/each}</p>
+            {/if}
+            {#if shareNote}<p class="sh-hint sh-note">{shareNote}</p>{/if}
+        </div>
+    </div>
+{/if}
+
 <style>
     /* The glass bar cancels the pane's top padding so the page's box starts
        flush with the top of the pane and the banner can run under the frost;
@@ -1954,4 +2054,20 @@
     }
 
     /* Menus stay solid on purpose — see the note in Playlists.svelte. */
+
+    /* ── Share on SoulStream: a body-level sheet ── */
+    .share-scrim { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, 0.45); }
+    .share-sheet { position: fixed; z-index: 61; left: 50%; top: 18%; transform: translateX(-50%); width: min(480px, calc(100vw - 40px)); background: var(--bg-elevated); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; padding: 18px 20px 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); font-family: var(--app-font); font-size: 13px; color: var(--text-primary); }
+    .share-sheet h3 { margin: 0 0 4px; font-size: 15px; font-weight: 800; }
+    .sh-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); }
+    .sh-note { color: var(--text-secondary); }
+    .sh-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
+    .sh-row input { flex: 1; min-width: 160px; background: var(--bg-highlight); border: 1px solid transparent; border-radius: 8px; color: #fff; padding: 8px 12px; font: inherit; outline: none; }
+    .sh-row input:focus { border-color: rgba(255, 255, 255, 0.28); }
+    .sh-chip { font-size: 10px; font-weight: 900; letter-spacing: 0.05em; padding: 2px 8px; border-radius: 99px; background: var(--bg-highlight); color: var(--text-muted); }
+    .sh-chip.ok { background: color-mix(in srgb, #3ddc84 14%, transparent); color: #5ee89a; }
+    .sh-chip.warn { background: color-mix(in srgb, #e8a33d 13%, transparent); color: #e8a33d; }
+    .sh-lnk { color: var(--text-secondary); font: inherit; font-size: 11.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; margin-right: 8px; }
+    .sh-lnk:hover { color: #fff; }
+    .share-sheet .pill.ghost { background: transparent; border: 1px solid rgba(255, 255, 255, 0.28); color: var(--text-primary); }
 </style>