perf(api,frontend): index hot queries, paginate chats, fix realtime

frontend/src/lib/components/ChatHeader.svelte

@@ -12,11 +12,10 @@
   import ContextMenuItem from "$lib/components/ui/ContextMenuItem.svelte";
   import Icon from "$lib/components/ui/Icon.svelte";
   import { peerName } from "$lib/format/peer";
-  import { formatPresence } from "$lib/format/presence";
+  import { formatPresence, isOnline } from "$lib/format/presence";
   import { accounts } from "$lib/stores/accounts.svelte";
   import { chats } from "$lib/stores/chats.svelte";
   import { discover } from "$lib/stores/discover.svelte";
-  import { events } from "$lib/stores/events.svelte";
   import { toasts } from "$lib/stores/toasts.svelte";
   import { ui } from "$lib/stores/ui.svelte";
 
@@ -26,6 +25,8 @@
 
   let { chatId }: Props = $props();
 
+  const PRESENCE_INTERVAL = 30_000;
+
   const isDm = $derived(chatId > 0);
   const chat = $derived(chats.byId(chatId));
   const discovered = $derived(discover.get(chatId));
@@ -85,29 +86,27 @@
     }
     let active = true;
     presence = null;
-    getCurrentPresence(chatId)
-      .then((result) => {
-        if (active) {
-          presence = result;
-        }
-      })
-      .catch(() => {
-        if (active) {
-          presence = null;
-        }
-      });
-    const unsub = events.subscribe((event) => {
-      if (
-        event.type === "presence" &&
-        event.peer_id === chatId &&
-        event.sample
-      ) {
-        presence = event.sample;
+    const refresh = () => {
+      if (document.visibilityState !== "visible") {
+        return;
       }
-    });
+      getCurrentPresence(chatId)
+        .then((result) => {
+          if (active) {
+            presence = result;
+          }
+        })
+        .catch(() => {
+          if (active) {
+            presence = null;
+          }
+        });
+    };
+    refresh();
+    const timer = setInterval(refresh, PRESENCE_INTERVAL);
     return () => {
       active = false;
-      unsub();
+      clearInterval(timer);
     };
   });
 
@@ -170,10 +169,7 @@
         />
         <div class="info">
           <h2 class="title">{title}</h2>
-          <span
-            class="subtitle"
-            class:online={isDm && presence?.status === "online"}
-          >
+          <span class="subtitle" class:online={isDm && isOnline(presence)}>
             {subtitle}
           </span>
         </div>