spaces: a room carries what its members are playing, sealed in the window its chat already uses

src/components/PlayerBar.svelte

@@ -367,6 +367,45 @@
         void api.smtcMetadata(title, artist, album, art);
     });
 
+    /* A listen for any Space that asked for one (src-tauri/src/spaces.rs —
+       which rooms hear it is that side's business, since the ledger knows and
+       this bar does not). Reported from here for the same reason the OS card
+       is: `metaParts` is where a track's artist and album are reconciled, and
+       deriving them a second time would be a second set of rules.
+
+       Once per track, and only after it has actually been LISTENED to — 30s,
+       or halfway for anything shorter. A skip says nothing about taste, and
+       the Space's window is shared with its chat, so a room that posted every
+       press would push its own conversation out inside a day. */
+    const LISTEN_AFTER = 30;
+    let listened = "";
+    $effect(() => {
+        const title = player.track?.title ?? "";
+        const pos = player.position ?? 0;
+        if (!title) return;
+        const [artist, album] = metaParts;
+        // The track, not the render. Coming back to a song after playing
+        // something else changes this key twice, so it reports again — while
+        // seeking around inside one play never does. This lives in memory, so
+        // a reload with something already past the threshold reports it again;
+        // the repeat is dropped on the other side, which is the only place
+        // that knows what was last said in each room.
+        const key = `${player.track?.path ?? ""}|${title}|${artist}`;
+        if (key === listened) return;
+        const enough = Math.min(LISTEN_AFTER, (player.duration ?? LISTEN_AFTER * 2) / 2);
+        if (pos < enough) return;
+        listened = key;
+        void api
+            // No catalog id: `player.track` carries what the bar needs to draw
+            // itself and nothing more. Artist and title are what a listen is
+            // found by anyway, the same pair `slsk_hint` carries.
+            .spaceReportListen(title, artist, album, player.duration ? Math.round(player.duration) : null, null)
+            .catch(() => {
+                // A Space that cannot be posted to is not this bar's problem;
+                // the backend already logged which one and why.
+            });
+    });
+
     // Waveform canvas + hover state.
     let waveWrap = $state(null);
     let waveCanvas = $state(null);

src/lib/api.js

@@ -184,6 +184,9 @@ export const spaceInvite = (owner, space, personaKey) => invoke("space_invite",
 export const spaceRemoveMember = (owner, space, personaKey) => invoke("space_remove_member", { owner, space, personaKey });
 export const spaceSetPinned = (owner, space, playlistOwner, playlistUuid) => invoke("space_set_pinned", { owner, space, playlistOwner, playlistUuid });
 export const spaceLeave = (owner, space) => invoke("space_leave", { owner, space });
+export const spaceSetShareListens = (owner, space, on) => invoke("space_set_share_listens", { owner, space, on });
+export const spaceReportListen = (title, artist, album, durationSecs, trackId) =>
+    invoke("space_report_listen", { title, artist, album, durationSecs, trackId });
 export const spaceBoard = (owner, space) => invoke("space_board", { owner, space });
 export const spacePropose = (owner, space, base, ops, note) => invoke("space_propose", { owner, space, base, ops, note });
 export const spaceDecide = (owner, space, proposal, accept, reason) => invoke("space_decide", { owner, space, proposal, accept, reason });

src/lib/community.svelte.js

@@ -654,6 +654,10 @@ export const pinToSpace = (owner, space, playlistOwner, playlistUuid) =>
     run("space:pin", async () => {
         community.space = await api.spaceSetPinned(owner, space, playlistOwner, playlistUuid);
     });
+export const setShareListens = (owner, space, on) =>
+    run("space:listens", async () => {
+        community.space = await api.spaceSetShareListens(owner, space, on);
+    });
 export const leaveSpace = (owner, space) =>
     run("space:leave", async () => {
         await api.spaceLeave(owner, space);
@@ -726,4 +730,4 @@ export const decideProposal = (owner, space, proposal, accept, reason) =>
 // Dev handle beside `__soulstream` (state.svelte.js): probes reach the store
 // through this, never through a bare import (which would be a second copy).
 if (import.meta.env.DEV) globalThis.__community = community;
-if (import.meta.env.DEV) globalThis.__communityActions = { friendRequest, friendRequestByKey, friendAccept, friendDecline, friendRemove, friendForget, checkLink, refreshFriends, sharedPublish, sharedWithdraw, shareSend, sharePreview, shareImport, refreshShares, refreshPublished, publishInbox, checkInbox, refreshInbox, refreshSpaces, openSpace, createSpace, postToSpace, inviteToSpace, removeFromSpace, pinToSpace, leaveSpace, openBoard, proposeToBoard, decideProposal, refreshOverlap, computeOverlap, forgetOverlap, refreshInterests, setInterest };
+if (import.meta.env.DEV) globalThis.__communityActions = { friendRequest, friendRequestByKey, friendAccept, friendDecline, friendRemove, friendForget, checkLink, refreshFriends, sharedPublish, sharedWithdraw, shareSend, sharePreview, shareImport, refreshShares, refreshPublished, publishInbox, checkInbox, refreshInbox, refreshSpaces, openSpace, createSpace, postToSpace, inviteToSpace, removeFromSpace, pinToSpace, leaveSpace, setShareListens, openBoard, proposeToBoard, decideProposal, refreshOverlap, computeOverlap, forgetOverlap, refreshInterests, setInterest };

src/views/Community.svelte

@@ -22,6 +22,7 @@
         downloads,
         network,
         goToView,
+        searchNetworkFor,
         openChat,
         sendDm,
         joinRoom,
@@ -90,6 +91,7 @@
         removeFromSpace,
         pinToSpace,
         leaveSpace,
+        setShareListens,
         openBoard,
         proposeToBoard,
         decideProposal,
@@ -470,6 +472,59 @@
     let spaceText = $state("");
     let spaceInviteKey = $state("");
     let spaceTab = $state("chat");
+    /* A listen is a point in time, not a state: nothing on the wire says
+       "still playing". So the room reads one as live for a while and then
+       lets it go quiet, rather than claiming someone is listening because
+       their app never got to say they stopped. */
+    const LISTEN_LIVE_MINS = 15;
+    // Newest first, which is the opposite of the chat's order: a trail is
+    // read from the top, a conversation from the bottom.
+    const listensNewestFirst = $derived([...(sv?.listens ?? [])].sort((a, b) => b.created_at - a.created_at));
+    const nowPlaying = $derived.by(() => {
+        const seen = new Map();
+        const cutoff = Date.now() / 1000 - LISTEN_LIVE_MINS * 60;
+        for (const l of listensNewestFirst) {
+            if (!seen.has(l.author)) seen.set(l.author, { ...l, live: l.created_at >= cutoff });
+        }
+        // Whoever is playing leads; the rest are the room's most recent, and
+        // only enough of them to stay a band rather than a second list.
+        return [...seen.values()].sort((a, b) => Number(b.live) - Number(a.live) || b.created_at - a.created_at).slice(0, 8);
+    });
+    // Day separators and run-grouping are decided once, here, so the markup
+    // stays a list and the rules stay readable.
+    const trail = $derived.by(() => {
+        let lastDay = "";
+        let lastAuthor = "";
+        return listensNewestFirst.map((l) => {
+            const d = fmtWhen(l.created_at * 1000);
+            const dayLabel = new Date(l.created_at * 1000).toDateString();
+            const day = dayLabel === lastDay ? null : (lastDay = dayLabel) && (isToday(l.created_at) ? "Today" : d);
+            const run = !day && l.author === lastAuthor;
+            lastAuthor = l.author;
+            return { ...l, day, run };
+        });
+    });
+    const isToday = (secs) => new Date(secs * 1000).toDateString() === new Date().toDateString();
+    function ago(secs) {
+        const m = Math.max(0, Math.round(Date.now() / 1000 - secs) / 60);
+        if (m < 60) return `${Math.max(1, Math.round(m))}m ago`;
+        const h = m / 60;
+        return h < 24 ? `${Math.round(h)}h ago` : `${Math.round(h / 24)}d ago`;
+    }
+    /* The cover has not been resolved for a track someone else played, and
+       fetching one per row would be a lot of network for a list. A hue keyed
+       off the album gives the trail a stable colour per record instead. */
+    function artWash(seed) {
+        let h = 0x811c9dc5;
+        for (const c of String(seed)) { h ^= c.charCodeAt(0); h = Math.imul(h, 0x01000193) >>> 0; }
+        const hue = h % 360;
+        return `linear-gradient(140deg,hsl(${hue} 42% 26%),hsl(${(hue + 40) % 360} 38% 16%))`;
+    }
+    // The one action a listen affords: go and find it. Artist and title are
+    // the pair every other dead end in the app searches on, and
+    // `searchNetworkFor` is that road — it seeds the query and switches the
+    // pill, so this needs no path of its own.
+    const findListen = (l) => void searchNetworkFor(`${l.artist} ${l.title}`.trim());
     let spaceCreating = $state(false);
     const sv = $derived(community.space);
     const spaceOwner = $derived(sv?.my_role === "owner");
@@ -1234,6 +1289,7 @@
                     </div>
                     <div class="sptabs">
                         <button class="subtab" class:on={spaceTab === "chat"} onclick={() => (spaceTab = "chat")}>Chat<b>{sv.messages.length}</b></button>
+                        <button class="subtab" class:on={spaceTab === "listening"} onclick={() => (spaceTab = "listening")}>Listening{#if sv.listens.length}<b>{sv.listens.length}</b>{/if}</button>
                         <button class="subtab" class:on={spaceTab === "members"} onclick={() => (spaceTab = "members")}>Members<b>{sv.members.length}</b></button>
                         <button class="subtab" class:on={spaceTab === "about"} onclick={() => (spaceTab = "about")}>About</button>
                         <button class="subtab" class:on={spaceTab === "proposals"} onclick={() => (spaceTab = "proposals")}>Proposals{#if bv && bv.uuid === sv.pinned_uuid && bv.proposals.length}<b>{bv.proposals.length}</b>{/if}</button>
@@ -1267,6 +1323,57 @@
                                 <button class="send" type="submit" disabled={!sv.can_post || !nodeUp || !spaceText.trim() || !!community.busy["space:post"]} title="Post"><Icon name="send" size={15} /></button>
                             </form>
                         </div>
+                    {:else if spaceTab === "listening"}
+                        <div class="panel sharebar" style="margin-bottom:12px">
+                            <button class="toggle" class:on={sv.share_listens} aria-pressed={sv.share_listens} title="Share what I play here"
+                                onclick={() => setShareListens(sv.owner, sv.space_id, !sv.share_listens)} disabled={!nodeUp || !!community.busy["space:listens"]}><i></i></button>
+                            <div class="grow">
+                                <div class="ttl">Share what I play in this Space</div>
+                                <p class="hint">Per Space, off until you say so. A track is posted once it has actually played, never on a skip{#if sv.private}, and sealed to this room's epoch key — the same key its messages use{/if}. Leaving takes it with you.</p>
+                            </div>
+                            {#if sv.share_listens}<span class="chip acc">sharing</span>{:else}<span class="chip off">not sharing</span>{/if}
+                        </div>
+                        {#if nowPlaying.length}
+                            <div class="panel" style="margin-bottom:12px">
+                                <h3><Icon name="play" size={13} /> Right now{#if nowPlaying.some((n) => n.live)}<span class="chip ok">{nowPlaying.filter((n) => n.live).length} playing</span>{/if}</h3>
+                                <div class="nowband">
+                                    {#each nowPlaying as n (n.author)}
+                                        <div class="nowcard" class:quiet={!n.live}>
+                                            <Identicon seed={n.author} size={40} presence={n.live ? "online" : null} />
+                                            <div class="body">
+                                                <div class="who">{n.is_me ? "you" : n.username ? display(n.username) : fpShort(n.author)}
+                                                    {#if n.live}<span class="bars"><i></i><i></i><i></i></span>{:else}<span class="muted">{ago(n.created_at)}</span>{/if}</div>
+                                                <div class="t">{n.title}</div>
+                                                <div class="a">{n.artist}</div>
+                                            </div>
+                                        </div>
+                                    {/each}
+                                </div>
+                                <p class="hint" style="margin-top:10px">A card goes quiet after {LISTEN_LIVE_MINS} minutes with nothing new — nobody is reported as listening because the app forgot to say they stopped.</p>
+                            </div>
+                        {/if}
+                        <div class="panel">
+                            <h3><Icon name="disc" size={13} /> The trail<span class="chip off">last {sv.message_cap} kept, with the chat</span></h3>
+                            {#if !sv.listens.length}
+                                <p class="hint" style="padding:18px 0 8px">Nothing played here yet. Turn the switch above on and the next track you finish appears — for everyone in the room, and nobody outside it.</p>
+                            {:else}
+                                <div class="lf">
+                                    {#each trail as l (l.id)}
+                                        {#if l.day}<div class="daysep"><span>{l.day}</span><span class="rule"></span></div>{/if}
+                                        <div class="lr" class:self={l.is_me}>
+                                            <span class="tm">{fmtClock(l.created_at * 1000)}</span>
+                                            <span class="art" style="background:{artWash(l.album || l.artist || l.title)}">{(l.album || l.artist || l.title).slice(0, 2).toUpperCase()}</span>
+                                            <span class="meta"><span class="t">{l.title}</span><span class="a">{l.artist}</span></span>
+                                            <span class="who" class:mine={l.is_me}>
+                                                {#if l.run}<span class="runpad"></span>{:else}<Identicon seed={l.author} size={22} />{/if}
+                                                {#if !l.run}{l.is_me ? "you" : l.username ? display(l.username) : fpShort(l.author)}{/if}
+                                                <span class="acts"><button class="ico" title="Find it on Soulseek" onclick={() => findListen(l)}><Icon name="search" size={12} /></button></span>
+                                            </span>
+                                        </div>
+                                    {/each}
+                                </div>
+                            {/if}
+                        </div>
                     {:else if spaceTab === "members"}
                         <div class="panel">
                             <div class="members">
@@ -2153,6 +2260,52 @@
     .dec { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hair); font-size: 12.5px; }
     .dec:first-of-type { border-top: none; }
     .dec .rs { flex: 1; }
+    /* ── the room's listening trail ── */
+    .sharebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+    .sharebar .grow { flex: 1; min-width: 240px; }
+    .sharebar .ttl { font-size: 12.5px; font-weight: 800; }
+    .toggle { width: 38px; height: 21px; border-radius: 99px; background: var(--surf-hi); position: relative; flex: none; transition: 0.18s; }
+    .toggle i { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px; border-radius: 50%; background: var(--text-muted); transition: 0.18s; }
+    .toggle.on { background: var(--accent); }
+    .toggle.on i { left: 20px; background: #000; }
+    .toggle:disabled { opacity: 0.45; cursor: default; }
+    .nowband { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 10px; margin-top: 10px; }
+    .nowcard { display: flex; gap: 11px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--surf-hi); border: 1px solid var(--hair); min-width: 0; }
+    .nowcard .body { min-width: 0; flex: 1; }
+    .nowcard .who { font-size: 11px; font-weight: 800; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
+    .nowcard .t { font-size: 13px; font-weight: 800; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .nowcard .a { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .nowcard.quiet { opacity: 0.55; }
+    .bars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 9px; }
+    .bars i { width: 2px; background: var(--ok); border-radius: 1px; animation: eq 900ms ease-in-out infinite alternate; }
+    .bars i:nth-child(2) { animation-delay: 160ms; }
+    .bars i:nth-child(3) { animation-delay: 320ms; }
+    @keyframes eq { from { height: 2px; } to { height: 9px; } }
+    @media (prefers-reduced-motion: reduce) { .bars i { animation: none; height: 6px; } }
+    .lf { display: flex; flex-direction: column; gap: 1px; margin-top: 6px; }
+    /* Wider than the chat's 42px time column: these rows are centred rather
+       than baseline-aligned, so a locale clock that wraps ("11:49 / AM")
+       shows as two lines instead of pushing the row. */
+    .lr { display: grid; grid-template-columns: 58px auto 1fr auto; gap: 0 10px; align-items: center; padding: 0 8px; height: 44px; border-radius: 8px; }
+    .lr:hover { background: var(--surf-hi); }
+    .lr.self { background: color-mix(in srgb, var(--accent) 6%, transparent); }
+    .lr .tm { font-size: 10.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+    .lr .art { width: 32px; height: 32px; border-radius: 5px; flex: none; display: grid; place-items: center; font-size: 9px; font-weight: 900; color: rgba(255, 255, 255, 0.5); overflow: hidden; }
+    .lr .meta { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
+    .lr .t { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .lr .a { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .lr .who { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; color: var(--text-secondary); }
+    .lr .who.mine { color: #fff; }
+    /* A run keeps the name's column without repeating it, so the rows stay
+       aligned and a person still reads as one block. */
+    .lr .runpad { width: 22px; flex: none; }
+    .lr .acts { display: flex; gap: 5px; opacity: 0; }
+    .lr:hover .acts, .lr:focus-within .acts { opacity: 1; }
+    .lr .ico { width: 26px; height: 26px; border-radius: 99px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.1); }
+    .lr .ico:hover { background: rgba(255, 255, 255, 0.2); }
+    .daysep { display: flex; align-items: center; gap: 10px; padding: 12px 8px 6px; }
+    .daysep span { font-size: 10px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
+    .daysep .rule { flex: 1; height: 1px; background: var(--hair); }
     .sptabs { display: flex; gap: 2px; margin: 12px 0 14px; align-items: center; }
     .subtab { padding: 6px 13px; border-radius: 8px; font-size: 12px; font-weight: 800; color: var(--text-secondary); display: inline-flex; gap: 6px; align-items: center; }
     .subtab.on { background: var(--surf-hi); color: #fff; }