android: a name of your own for anyone on the network

The desktop's local contact metadata on the phone: a peer's sheet ends in
Name and notes — a petname, a group, a private note and the Favorite and
Trusted marks, kept in the app's own config and published nowhere. The
petname stands in for the username on the buddy list, in the chat list, on
a thread's bar, in the peer sheet, in a room's roster and on a room line,
and the real username stays with it — on the line beneath, or beside the
name in a room — so a stranger is never quietly turned into someone you
know. Favourites sit at the top of the buddy list, and clearing a person's
details drops the entry rather than storing an empty one — the backend's
own rule.

src/mobile/screens/Community.svelte

@@ -7,6 +7,7 @@
     import Identicon from "../../components/Identicon.svelte";
     import { slsk, connect, connectStored, disconnect, refreshRooms, joinRoom, leaveRoom, openThread, unreadTotal } from "../slsk.svelte.js";
     import { push, patch, openHalf } from "../nav.svelte.js";
+    import { metaOf, display, realName } from "../contacts.svelte.js";
     import { player } from "../player.svelte.js";
     import { ago } from "../util.js";
 
@@ -36,7 +37,12 @@
             .map(([u, c]) => ({ u, c, last: c.messages[c.messages.length - 1] }))
             .sort((a, b) => (b.last?.ts || 0) - (a.last?.ts || 0)),
     );
-    const buddies = $derived(slsk.buddies.map((u) => ({ u, st: slsk.buddyState[u] || {} })));
+    /* favourites at the top, then by the name you gave them */
+    const buddies = $derived(
+        slsk.buddies
+            .map((u) => ({ u, st: slsk.buddyState[u] || {}, m: metaOf(u) }))
+            .sort((a, b) => (b.m.favorite ? 1 : 0) - (a.m.favorite ? 1 : 0) || display(a.u).localeCompare(display(b.u))),
+    );
     /* the hub's browse-by-name: a typed name opens the peer sheet */
     function lookUp() {
         openHalf("prompt", { title: "Look up a user", placeholder: "Soulseek username", ok: "Open", onsubmit: (v) => { const u = v.trim(); if (u) openHalf("peer", { username: u }); } });
@@ -157,8 +163,8 @@
             <button class="row" onclick={() => thread(t.u)}>
                 <span class="art round idc"><Identicon seed={t.u} size={46} /></span>
                 <span class="b">
-                    <span class="t">{t.u}{#if t.c.unread} <span class="unread">{t.c.unread}</span>{/if}</span>
-                    <span class="m">{t.last ? (t.last.me ? "you: " : "") + t.last.text : ""}</span>
+                    <span class="t">{display(t.u)}{#if t.c.unread} <span class="unread">{t.c.unread}</span>{/if}</span>
+                    <span class="m">{realName(t.u) ? realName(t.u) + " · " : ""}{t.last ? (t.last.me ? "you: " : "") + t.last.text : ""}</span>
                 </span>
                 <span class="r">{t.last ? ago(t.last.ts / 1000) : ""}</span>
             </button>
@@ -173,11 +179,11 @@
             <div class="stub"><b>No buddies on this account yet.</b>Hold a name in a room to add one, or look one up above.</div>
         {/if}
         {#each buddies as b (b.u)}
-            <button class="row" onclick={() => thread(b.u)} oncontextmenu={(e) => { e.preventDefault(); openHalf("peer", { username: b.u }); }}>
+            <button class="row bud" onclick={() => thread(b.u)} oncontextmenu={(e) => { e.preventDefault(); openHalf("peer", { username: b.u }); }}>
                 <span class="art round idc"><Identicon seed={b.u} size={46} /></span>
                 <span class="b">
-                    <span class="t">{b.u}</span>
-                    <span class="m">{status(b.st)}{b.st.file_count ? ` · ${b.st.file_count.toLocaleString()} files` : ""}</span>
+                    <span class="t">{display(b.u)}{#if b.m.favorite}<span class="nmark fav"><Icon name="star" size={12} /></span>{/if}{#if b.m.trusted}<span class="nmark tr"><Icon name="shield" size={12} /></span>{/if}</span>
+                    <span class="m">{[realName(b.u), status(b.st), b.m.group, b.st.file_count ? `${b.st.file_count.toLocaleString()} files` : ""].filter(Boolean).join(" · ")}</span>
                 </span>
                 <span class="r"><span class="dot" class:off={status(b.st) === "offline"} class:warn={status(b.st) === "away"}></span></span>
             </button>