community absorbs the hub: search, transfers and browse ride the same pills, one entry in the sidebar

src/views/Community.svelte

@@ -13,9 +13,11 @@
     import { onMount, untrack } from "svelte";
     import Icon from "../components/Icon.svelte";
     import Identicon, { hueOf } from "../components/Identicon.svelte";
+    import Soulseek from "./Soulseek.svelte";
     import * as api from "../lib/api.js";
     import {
         app,
+        ui,
         slsk,
         downloads,
         network,
@@ -61,6 +63,30 @@
         if (app.connection === "online") void loadBuddies();
     });
 
+    // ---- the fused hub -------------------------------------------------------
+    // Search, Transfers and Browse are the Soulseek hub rendered embedded;
+    // its old Chat / Users / Rooms tabs map onto this page's own sections.
+    const HUB_SECTIONS = new Set(["search", "transfers", "browse"]);
+    const hubOpen = $derived(HUB_SECTIONS.has(community.section));
+    function fromHub(tab) {
+        const map = { chat: "inbox", users: "people", rooms: "rooms" };
+        const s = map[tab] ?? tab;
+        if (s !== community.section) setSection(s);
+    }
+    // The hub's routable ids (the download ring, "get on soulseek", Home's
+    // CTA) arrive as ui.view; a repeat jump bumps ui.hubJump.
+    $effect(() => {
+        const v = ui.view;
+        void ui.hubJump;
+        const s = v === "search" ? "search" : v === "downloads" ? "transfers" : null;
+        if (s) untrack(() => setSection(s));
+    });
+    const TRANSFER_DONE = new Set(["complete", "failed", "cancelled"]);
+    const transfersActive = $derived(
+        Object.values(downloads.items).filter((d) => !TRANSFER_DONE.has(d.state)).length
+            + Object.values(network.uploads).filter((u) => u.state === "transferring").length,
+    );
+
     // ---- small helpers -------------------------------------------------------
     const key = $derived(personaKey());
     const profile = $derived(community.profile);
@@ -133,7 +159,7 @@
     // Hand-offs into the Soulseek hub: browse lives there.
     function browseUser(u) {
         slsk.browseRequest = u;
-        goToView("soulseek");
+        setSection("browse");
     }
     function messageUser(u) {
         openChat(u);
@@ -442,6 +468,12 @@
 
     <!-- ── the pills ──────────────────────────────────────────────────── -->
     <div class="qtabs">
+        <button class="qtab" class:on={community.section === "search"} onclick={() => setSection("search")}>Search</button>
+        <button class="qtab" class:on={community.section === "transfers"} onclick={() => setSection("transfers")}>
+            Transfers{#if transfersActive}<span class="n">{transfersActive}</span>{/if}
+        </button>
+        <button class="qtab" class:on={community.section === "browse"} onclick={() => setSection("browse")}>Browse</button>
+        <span class="pillsep" aria-hidden="true"></span>
         <button class="qtab" class:on={community.section === "inbox"} onclick={() => setSection("inbox")}>
             Inbox{#if unreadTotal}<span class="n">{unreadTotal}</span>{/if}
         </button>
@@ -462,8 +494,12 @@
         </button>
     </div>
 
+    <!-- ── SEARCH · TRANSFERS · BROWSE — the hub, embedded ─────────────── -->
+    {#if hubOpen}
+        <Soulseek embedded section={community.section} onsection={fromHub} />
+
     <!-- ── INBOX ──────────────────────────────────────────────────────── -->
-    {#if community.section === "inbox"}
+    {:else if community.section === "inbox"}
         {#if !convos.length}
             <div class="empty">
                 <Icon name="inbox" size={30} />