remove "display name" from adding new friends

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}