android: the room list filtered by name, the rest on demand

Soulseek lists hundreds of rooms; the phone showed the first 80 and no way
to the rest. Community → Rooms now has a filter by name and extends the
list 200 at a time.

src/lib/mockLibrary.js

@@ -376,7 +376,7 @@ const later = (ms, fn) => setTimeout(fn, ms);
 if (enabled && typeof window !== "undefined") window.__ssMock = { emit: mockEmit };
 
 const MOCK_USER = "mockuser";
-const ROOMS = [["Lounge", 412], ["Electronic", 98], ["Vinyl Rips", 37], ["Jazz", 61], ["Lossless Only", 23]];
+const ROOMS = [["Lounge", 412], ["Electronic", 98], ["Vinyl Rips", 37], ["Jazz", 61], ["Lossless Only", 23], ...Array.from({ length: 90 }, (_, i) => ["Room " + (i + 1), 90 - i])];
 const PEOPLE = ["ada", "bo", "cy", "dee"];
 const LINES = ["anyone got the 2024 remaster?", "the vinyl rip is warmer imo", "that folder is complete btw", "brb"];
 const PEERS = [

src/mobile/screens/Community.svelte

@@ -20,7 +20,17 @@
 
     const online = $derived(slsk.connection === "online");
     const joinedNames = $derived(Object.keys(slsk.joined));
-    const otherRooms = $derived(slsk.rooms.filter((r) => !slsk.joined[r.name]).slice(0, 80));
+    /* the server's rooms: filtered by name, the biggest first, 80 at a
+       time with a way to the rest */
+    let roomQ = $state("");
+    let roomCap = $state(80);
+    const roomsMatching = $derived.by(() => {
+        const k = roomQ.trim().toLowerCase();
+        const list = slsk.rooms.filter((r) => !slsk.joined[r.name]);
+        return k ? list.filter((r) => r.name.toLowerCase().includes(k)) : list;
+    });
+    const otherRooms = $derived(roomsMatching.slice(0, roomCap));
+    $effect(() => { void roomQ; roomCap = 80; });
     const threads = $derived(
         Object.entries(slsk.chats)
             .map(([u, c]) => ({ u, c, last: c.messages[c.messages.length - 1] }))
@@ -121,6 +131,13 @@
         <div class="sec" style="padding-top:{joinedNames.length ? 18 : 8}px"><h2>Rooms <em>· {slsk.rooms.length} on the server</em></h2></div>
         {#if !slsk.rooms.length}
             <div class="sec-note">Asking the server for its rooms…</div>
+        {:else if slsk.rooms.length > 8}
+            <div class="sfield roomfilter">
+                <Icon name="search" size={18} />
+                <input value={roomQ} oninput={(e) => (roomQ = e.currentTarget.value)} type="search" placeholder="Find a room" autocomplete="off" autocapitalize="off" spellcheck="false" aria-label="Find a room" />
+                {#if roomQ}<button class="iconbtn sm" onclick={() => (roomQ = "")} aria-label="Clear"><Icon name="x" size={18} /></button>{/if}
+            </div>
+            {#if roomQ}<div class="sec-note">{roomsMatching.length} of {slsk.rooms.length} rooms</div>{/if}
         {/if}
         {#each otherRooms as r (r.name)}
             <button class="row" onclick={() => open(r.name)}>
@@ -129,6 +146,9 @@
                 <span class="r"><Icon name="plus" size={18} /></span>
             </button>
         {/each}
+        {#if roomsMatching.length > roomCap}
+            <div style="padding: 4px var(--pad) 8px"><button class="btn btn-ghost wide" onclick={() => (roomCap += 200)}>+ {roomsMatching.length - roomCap} more rooms</button></div>
+        {/if}
     {:else if tab === "chat"}
         {#if !threads.length}
             <div class="stub"><b>No conversations yet.</b>A name in a room, or a buddy, opens one.</div>

src/mobile/shell.css

@@ -1365,3 +1365,6 @@ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="
 /* the lyrics face's way to its tools */
 .lyr-tools { display: block; margin: 18px auto 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); font-size: 12.5px; font-weight: 700; }
 .lyr-tools:active { background: rgba(255, 255, 255, 0.14); }
+
+/* Community: the room filter sits with the section, not the page's own field */
+.sfield.roomfilter { margin-top: 2px; }