moved user presence status into global state

src/events/user-status.ts

@@ -15,6 +15,7 @@ export type UserStatus = {
 };
 
 export const friendsUserStatuses = writable<Record<string, UserStatus>>({});
+export const currentUserStatus = writable<UserStatus | null>(null);
 
 const subscription = createMultiListenerSubscription();
 
@@ -58,6 +59,14 @@ export async function initUserStatusListeners() {
     );
     subscription.addUnlisten(unlistenStatus);
 
+    const unlistenUserStatusChanged = await listen<UserStatus>(
+      AppEvents.UserStatusChanged,
+      (event) => {
+        currentUserStatus.set(event.payload);
+      },
+    );
+    subscription.addUnlisten(unlistenUserStatusChanged);
+
     const unlistenFriendDisconnected = await listen<
       [{ userId: string }] | { userId: string } | string
     >(AppEvents.FriendDisconnected, (event) => {

src/routes/scene/+page.svelte

@@ -7,38 +7,12 @@
   import { sceneInteractive } from "../../events/scene-interactive";
   import {
     friendsUserStatuses,
-    type UserStatus,
+    currentUserStatus,
   } from "../../events/user-status";
   import { invoke } from "@tauri-apps/api/core";
-  import { listen } from "@tauri-apps/api/event";
-  import { AppEvents } from "../../types/bindings/AppEventsConstants";
-  import { onMount } from "svelte";
-  import type { PresenceStatus } from "../../types/bindings/PresenceStatus";
   import DebugBar from "./components/debug-bar.svelte";
-
-  let innerWidth = $state(0);
-  let innerHeight = $state(0);
-
-  let isInteractive = $derived($sceneInteractive);
-
-  let presenceStatus: PresenceStatus | null = $state(null);
-
-  onMount(() => {
-    const unlisten = listen<UserStatus>(
-      AppEvents.UserStatusChanged,
-      (event) => {
-        presenceStatus = event.payload.presenceStatus;
-      },
-    );
-
-    return () => {
-      unlisten.then((u) => u());
-    };
-  });
 </script>
 
-<svelte:window bind:innerWidth bind:innerHeight />
-
 <div class="w-svw h-svh p-4 relative overflow-hidden">
   <button
     class="absolute inset-0 z-10 size-full"
@@ -50,13 +24,11 @@
       });
     }}>&nbsp;</button
   >
-  <div
+  <div id="debug-bar">
-    id="debug-bar"
-  >
     <DebugBar
-      {isInteractive}
+      isInteractive={$sceneInteractive}
       cursorPosition={$cursorPositionOnScreen}
-      {presenceStatus}
+      presenceStatus={$currentUserStatus?.presenceStatus ?? null}
       friendsCursorPositions={$friendsCursorPositions}
       friends={$appData?.friends ?? []}
       friendsUserStatuses={$friendsUserStatuses}