friends connection status system

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script>
   import FriendsList from "$lib/components/friends-list.svelte";
+  import FriendStatuses from "$lib/components/friend-statuses.svelte";
   import ConnectionStatus from "$lib/components/connection-status.svelte";
   import Profile from "$lib/components/profile.svelte";
   import RemotesList from "$lib/components/remotes-list.svelte";
@@ -13,6 +14,9 @@
   <div>
     <FriendsList />
   </div>
+  <div>
+    <FriendStatuses />
+  </div>
   <div>
     <RemotesList />
   </div>

src/routes/scene/+page.svelte

@@ -2,6 +2,7 @@
   import { onMount } from "svelte";
   import Popover from "$lib/components/popover.svelte";
   import { friends } from "$lib/listeners/friends";
+  import { onlineFriendIds } from "$lib/listeners/friend-statuses";
   import { incomingInteraction } from "$lib/listeners/interactions";
   import { liveMetadata } from "$lib/listeners/live-metadata";
   import { profile } from "$lib/listeners/profile";
@@ -28,6 +29,18 @@
     return () => window.clearTimeout(timer);
   });
 
+  $effect(() => {
+    if (
+      selectedUserId &&
+      selectedUserId !== $liveMetadata.localId &&
+      !$onlineFriendIds.has(selectedUserId)
+    ) {
+      selectedUserId = null;
+      selectedUserX = null;
+      lockedPopoverUserId = null;
+    }
+  });
+
   function displayName(userId: string) {
     return $profile?.id === userId
       ? $profile.displayName
@@ -65,7 +78,7 @@
       {@const popoverId = `scene-user-${index}`}
       {@const interaction =
         $incomingInteraction?.friendId === userId ? $incomingInteraction : null}
-      {#if cursor}
+      {#if cursor && (userId === $liveMetadata.localId || $onlineFriendIds.has(userId))}
         {@const renderedX =
           selectedUserId === userId ? selectedUserX : cursor.mapped.x}
         <div