remove "display name" from adding new friends

src/lib/bindings.ts

@@ -5,13 +5,13 @@
 
 
 export const commands = {
-async createFriend(friend: User) : Promise<User> {
-    return await TAURI_INVOKE("create_friend", { friend });
+async createFriend(id: string) : Promise<Friend> {
+    return await TAURI_INVOKE("create_friend", { id });
 },
-async listFriends() : Promise<User[]> {
+async listFriends() : Promise<Friend[]> {
     return await TAURI_INVOKE("list_friends");
 },
-async getFriend(id: string) : Promise<User | null> {
+async getFriend(id: string) : Promise<Friend | null> {
     return await TAURI_INVOKE("get_friend", { id });
 },
 async deleteFriend(id: string) : Promise<boolean> {
@@ -47,6 +47,9 @@ async listStatuses() : Promise<ConnectionStatus[]> {
 async listFriendStatuses() : Promise<string[]> {
     return await TAURI_INVOKE("list_friend_statuses");
 },
+async resolveFriendDisplayName(userId: string) : Promise<string | null> {
+    return await TAURI_INVOKE("resolve_friend_display_name", { userId });
+},
 async pickAndSendImage(recipientId: string) : Promise<boolean> {
     return await TAURI_INVOKE("pick_and_send_image", { recipientId });
 },
@@ -113,10 +116,15 @@ raw: CursorPosition;
  */
 mapped: CursorPosition }
 export type ForegroundAppChanged = { meta: AppMeta }
+/**
+ * A configured public-key relationship with optional cached remote metadata.
+ * The display name remains absent until learned from a signed remote profile.
+ */
+export type Friend = { id: string; displayName: string | null }
 export type FriendForegroundAppChanged = { friendId: string; meta: AppMeta }
 export type FriendInteractionReceived = { interactionId: string; friendId: string; content: InteractionContent }
 export type FriendStatusesChanged = { friendIds: string[] }
-export type FriendsChanged = { friends: User[] }
+export type FriendsChanged = { friends: Friend[] }
 export type InteractionContent = { type: "text"; text: string } | { type: "wave" } | { type: "image"; mediaType: string; data: string }
 export type NetworkStatusChanged = { statuses: ConnectionStatus[] }
 export type ProfileChanged = { profile: User }

src/lib/components/control-panel/activity-panel.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { friends } from "$lib/listeners/friends";
+  import { friendName, friends } from "$lib/listeners/friends";
   import {
     liveMetadata,
     liveMetadataListenerError,
@@ -25,9 +25,9 @@
 
   function nameFor(id: string) {
     if (id === $liveMetadata.localId) return "You";
-    return (
-      $friends.find((friend) => friend.id === id)?.displayName ??
-      "Unknown friend"
+    return friendName(
+      $friends.find((friend) => friend.id === id),
+      "Unknown friend",
     );
   }
 

src/lib/components/control-panel/friends-panel.svelte

@@ -4,10 +4,15 @@
     friendStatusesListenerError,
     onlineFriendIds,
   } from "$lib/listeners/friend-statuses";
-  import { friends, friendsListenerError } from "$lib/listeners/friends";
+  import {
+    friendName,
+    friends,
+    friendsListenerError,
+  } from "$lib/listeners/friends";
   import { onMount } from "svelte";
   import PanelMessage from "./panel-message.svelte";
   import type { RegisterPanel } from "./types";
+  import Info from "$lib/icons/info.svelte";
 
   let { register }: { register: RegisterPanel } = $props();
 
@@ -85,8 +90,9 @@
 
   {#if mode === "remove" && selected}
     <PanelMessage kind="warning">
-      Applying will remove <strong>{selected.displayName}</strong>. They will
-      immediately go offline and stop receiving your activity.
+      Applying will remove <strong
+        >{friendName(selected, "Unknown friend")}</strong
+      >. They will immediately go offline and stop receiving your activity.
     </PanelMessage>
     <button class="btn w-fit" type="button" onclick={() => (mode = "browse")}
       >Keep friend</button
@@ -126,7 +132,23 @@
               ondblclick={() => (selectedId = friend.id)}
             >
               <span class="min-w-0">
-                <strong class="block truncate">{friend.displayName}</strong>
+                <div class="flex flex-row gap-1.5">
+                  <strong
+                    class:italic={!friend.displayName}
+                    class="block truncate"
+                    >{friendName(friend, "Unknown friend")}</strong
+                  >
+                  {#if !friend.displayName}
+                    <div
+                      class="tooltip tooltip-primary"
+                      data-tip={"Will be resolved when they're online"}
+                    >
+                      <div class="*:size-3 opacity-50">
+                        <Info />
+                      </div>
+                    </div>
+                  {/if}
+                </div>
                 <span class="block truncate font-mono text-[9px] opacity-65"
                   >{friend.id}</span
                 >

src/lib/components/debug/friend-statuses.svelte

@@ -3,7 +3,11 @@
     friendStatusesListenerError,
     onlineFriendIds,
   } from "$lib/listeners/friend-statuses";
-  import { friends, friendsListenerError } from "$lib/listeners/friends";
+  import {
+    friendName,
+    friends,
+    friendsListenerError,
+  } from "$lib/listeners/friends";
 </script>
 
 <section>
@@ -20,7 +24,7 @@
       {#each $friends as friend (friend.id)}
         {@const online = $onlineFriendIds.has(friend.id)}
         <li>
-          <strong>{friend.displayName}</strong>: {online ? "Online" : "Offline"}
+          <strong>{friendName(friend, "Unknown friend")}</strong>: {online ? "Online" : "Offline"}
           <small>({friend.id})</small>
         </li>
       {/each}

src/lib/components/debug/friends-list.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
   import { commands } from "$lib/bindings";
-  import { friends, friendsListenerError } from "$lib/listeners/friends";
+  import {
+    friendName,
+    friends,
+    friendsListenerError,
+  } from "$lib/listeners/friends";
 
   let error = "";
 
@@ -11,10 +15,7 @@
     error = "";
 
     try {
-      await commands.createFriend({
-        id: String(data.get("id") ?? ""),
-        displayName: String(data.get("displayName") ?? ""),
-      });
+      await commands.createFriend(String(data.get("id") ?? ""));
       form.reset();
     } catch (err) {
       error = String(err);
@@ -43,13 +44,6 @@
       </label>
     </p>
 
-    <p>
-      <label>
-        Display name
-        <input name="displayName" required />
-      </label>
-    </p>
-
     <button type="submit">Create friend</button>
   </form>
 
@@ -63,7 +57,7 @@
     <ul>
       {#each $friends as friend (friend.id)}
         <li>
-          <span>{friend.displayName} ({friend.id})</span>
+          <span>{friendName(friend, "Unknown friend")} ({friend.id})</span>
           <button type="button" onclick={() => deleteFriend(friend.id)}>Delete</button>
         </li>
       {/each}

src/lib/listeners/friends.ts

@@ -1,7 +1,13 @@
 import { writable } from "svelte/store";
-import { commands, events, type User } from "$lib/bindings";
+import { commands, events, type Friend } from "$lib/bindings";
 
-export const friends = writable<User[]>([]);
+export const UNRESOLVED_FRIEND_NAME = "Name pending resolution";
+
+export function friendName(friend: Friend | undefined, fallback: string) {
+  return friend?.displayName ?? (friend ? UNRESOLVED_FRIEND_NAME : fallback);
+}
+
+export const friends = writable<Friend[]>([]);
 export const friendsListenerError = writable("");
 
 export async function initFriendsListener() {