community: Discover ranks the shelves it already has into one, and every card still says where it came from

src/views/Community.svelte

@@ -13,6 +13,7 @@
     import { onMount, untrack } from "svelte";
     import Icon from "../components/Icon.svelte";
     import Identicon, { hueOf } from "../components/Identicon.svelte";
+    import { rankPeople, reasonParts } from "../lib/discover.js";
     import Soulseek from "./Soulseek.svelte";
     import * as api from "../lib/api.js";
     import {
@@ -362,6 +363,22 @@
     }
 
     // ---- discover ------------------------------------------------------------
+    // The ranked shelf: the four silos below scored as one list, each card
+    // naming the shelves it drew from. Contacts and friends are left off —
+    // they have shelves of their own; this one is for people not yet sorted.
+    const ranked = $derived.by(() =>
+        rankPeople({
+            me,
+            skip: (u) => isContact(u) || friendshipFor(u)?.state === "friends",
+            rooms: slsk.joined,
+            activeRoom: slsk.activeRoom,
+            downloads: Object.values(downloads.items),
+            uploads: Object.values(network.uploads),
+            similar: community.similar?.users ?? [],
+            overlap: community.overlap,
+            space: community.space ? { name: community.space.name, members: community.space.members } : null,
+        }),
+    );
     const roomPeople = $derived.by(() => {
         if (!activeRoom) return [];
         return activeRoom.users
@@ -1173,6 +1190,25 @@
 
     <!-- ── DISCOVER ───────────────────────────────────────────────────── -->
     {:else if community.section === "discover"}
+        <div class="shelf">
+            <div class="ax-head">
+                <h2 class="ax-title">Closest to you</h2>
+                <span class="prov"><Icon name="sparkle" size={12} /> the shelves below, scored together · every reason named</span>
+            </div>
+            {#if ranked.length}
+                <div class="track">
+                    {#each ranked as p (p.username)}
+                        <button class="pcard" onclick={() => (community.drawer = p.username)}>
+                            <span class="face" style:background="hsl({hueOf(p.username)} 30% 14%)"><Identicon seed={p.username} size={84} presence={presenceOf(p.username)} /></span>
+                            <span class="nm">{display(p.username)}</span>
+                            <span class="why">{#each p.reasons as r, i}{#if i}{" · "}{/if}{#each reasonParts(r) as seg}{#if seg.b}<b>{seg.t}</b>{:else}{seg.t}{/if}{/each}{/each}</span>
+                        </button>
+                    {/each}
+                </div>
+            {:else}
+                <div class="emptyshelf"><Icon name="sparkle" size={22} /><div><b>Nothing to rank yet.</b> This shelf is the ones below added up — join a room, browse someone, declare a like — with contacts and friends left off.</div></div>
+            {/if}
+        </div>
         <div class="shelf">
             <div class="ax-head">
                 <h2 class="ax-title">{slsk.activeRoom ? `In #${slsk.activeRoom} right now` : "In a room right now"}</h2>