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>

frontend/src/lib/components/ChatList.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
-  import { cubicOut } from "svelte/easing";
-  import { fly } from "svelte/transition";
+  import { untrack } from "svelte";
   import { goto } from "$app/navigation";
   import { page } from "$app/state";
   import ChatListItem from "$lib/components/ChatListItem.svelte";
   import EmptyState from "$lib/components/ui/EmptyState.svelte";
   import Skeleton from "$lib/components/ui/Skeleton.svelte";
-  import { folderContains } from "$lib/format/folders";
   import { accounts } from "$lib/stores/accounts.svelte";
   import { chats } from "$lib/stores/chats.svelte";
   import { folders } from "$lib/stores/folders.svelte";
@@ -14,37 +12,94 @@
 
   const skeletonRows = Array.from({ length: 9 }, (_, index) => index);
 
+  const DEFAULT_ROW_HEIGHT = 72;
+  const OVERSCAN = 6;
+  const SCROLL_THRESHOLD = 600;
+
   const activeChatId = $derived(
     page.params.chatId ? Number(page.params.chatId) : null
   );
 
-  const selectedFolder = $derived(folders.selected);
-  const visibleChats = $derived(
-    selectedFolder === null
-      ? chats.list
-      : chats.list.filter((chat) => folderContains(selectedFolder, chat))
-  );
+  let viewport = $state<HTMLDivElement | null>(null);
+  let viewportHeight = $state(0);
+  let scrollTop = $state(0);
+  let rowHeight = $state(DEFAULT_ROW_HEIGHT);
+  let frame = 0;
 
-  const SCROLL_THRESHOLD = 600;
+  const list = $derived(chats.list);
+  const start = $derived(
+    Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN)
+  );
+  const visible = $derived(
+    list.slice(
+      start,
+      start + Math.ceil(viewportHeight / rowHeight) + OVERSCAN * 2
+    )
+  );
+  const padTop = $derived(start * rowHeight);
+  const padBottom = $derived(
+    Math.max(0, (list.length - start - visible.length) * rowHeight)
+  );
 
   $effect(() => {
     if (accounts.selectedId === null) {
       return;
     }
-    chats.load().catch(() => toasts.error("Failed to load chats"));
-    folders.load().catch(() => toasts.error("Failed to load folders"));
+    untrack(() => folders.load()).catch(() =>
+      toasts.error("Failed to load folders")
+    );
   });
 
+  $effect(() => {
+    const folderId = folders.selectedId;
+    if (accounts.selectedId === null) {
+      return;
+    }
+    if (viewport) {
+      viewport.scrollTop = 0;
+      scrollTop = 0;
+    }
+    untrack(() => chats.load(folderId)).catch(() =>
+      toasts.error("Failed to load chats")
+    );
+  });
+
+  $effect(() => {
+    if (visible.length === 0 || !viewport) {
+      return;
+    }
+    const row = viewport.querySelector<HTMLElement>(".Chat");
+    if (row && row.offsetHeight > 0 && row.offsetHeight !== rowHeight) {
+      rowHeight = row.offsetHeight;
+    }
+  });
+
+  function measure(el: HTMLElement) {
+    scrollTop = el.scrollTop;
+    if (el.scrollTop + el.clientHeight >= el.scrollHeight - SCROLL_THRESHOLD) {
+      chats.loadMore(folders.selectedId).catch(() => undefined);
+    }
+  }
+
   function onScroll(event: Event) {
     const el = event.currentTarget as HTMLElement;
-    if (el.scrollTop + el.clientHeight >= el.scrollHeight - SCROLL_THRESHOLD) {
-      chats.loadMore().catch(() => undefined);
+    if (frame) {
+      return;
     }
+    frame = requestAnimationFrame(() => {
+      frame = 0;
+      measure(el);
+    });
   }
 </script>
 
-<div class="chat-list custom-scroll" onscroll={onScroll}>
-  {#if chats.loading && chats.list.length === 0}
+<div
+  bind:this={viewport}
+  bind:clientHeight={viewportHeight}
+  class="chat-list custom-scroll"
+  onscroll={onScroll}
+>
+  {#if chats.loading && list.length === 0}
     {#each skeletonRows as index (index)}
       <div class="row-skeleton">
         <Skeleton width="3rem" height="3rem" circle />
@@ -54,30 +109,23 @@
         </div>
       </div>
     {/each}
-  {:else if chats.list.length === 0}
-    <EmptyState title="No chats yet" />
+  {:else if list.length === 0}
+    <EmptyState
+      title={folders.selectedId === null ? "No chats yet" : "Empty folder"}
+      description={folders.selectedId === null
+        ? undefined
+        : "No chats match this folder yet"}
+    />
   {:else}
-    {#key folders.selectedId}
-      <div
-        class="folder-view"
-        in:fly={{ x: folders.direction * 24, duration: 200, easing: cubicOut }}
-      >
-        {#if visibleChats.length === 0 && !chats.hasMore}
-          <EmptyState
-            title="Empty folder"
-            description="No chats match this folder yet"
-          />
-        {:else}
-          {#each visibleChats as chat (chat.chat_id)}
-            <ChatListItem
-              {chat}
-              selected={chat.chat_id === activeChatId}
-              onclick={() => goto(`/app/${chat.chat_id}`)}
-            />
-          {/each}
-        {/if}
-      </div>
-    {/key}
+    <div style:padding-top="{padTop}px" style:padding-bottom="{padBottom}px">
+      {#each visible as chat (chat.chat_id)}
+        <ChatListItem
+          {chat}
+          selected={chat.chat_id === activeChatId}
+          onclick={() => goto(`/app/${chat.chat_id}`)}
+        />
+      {/each}
+    </div>
   {/if}
 </div>
 

frontend/src/lib/components/ChatListItem.svelte

@@ -119,6 +119,7 @@
     gap: 0.625rem;
 
     width: 100%;
+    height: 4.5rem;
     padding: 0.5625rem 0.5rem;
     border: 0;
     border-radius: 0.625rem;

frontend/src/lib/components/MessageList.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { tick } from "svelte";
+  import { tick, untrack } from "svelte";
   import { listMessages } from "$lib/api/endpoints";
   import { type ViewerItem, viewerItemsFrom } from "$lib/api/media";
   import type { LiveEvent, MessageView } from "$lib/api/types";
@@ -13,7 +13,6 @@
   import Spinner from "$lib/components/ui/Spinner.svelte";
   import { formatDay } from "$lib/format/datetime";
   import { accounts } from "$lib/stores/accounts.svelte";
-  import { chats } from "$lib/stores/chats.svelte";
   import { events } from "$lib/stores/events.svelte";
   import { peers } from "$lib/stores/peers.svelte";
   import { toasts } from "$lib/stores/toasts.svelte";
@@ -425,14 +424,10 @@
   });
 
   $effect(() => {
-    const deps = {
-      account: accounts.selectedId,
-      revision: chats.revision,
-    };
-    if (deps.account === null) {
+    if (accounts.selectedId === null) {
       return;
     }
-    loadInitial();
+    untrack(() => loadInitial());
   });
 </script>
 

frontend/src/lib/components/jobs/JobsPanel.svelte

@@ -9,6 +9,7 @@
   import JobList from "$lib/components/jobs/JobList.svelte";
   import Button from "$lib/components/ui/Button.svelte";
   import Icon from "$lib/components/ui/Icon.svelte";
+  import { createChatPicker } from "$lib/stores/chat-picker.svelte";
   import { chats } from "$lib/stores/chats.svelte";
   import { toasts } from "$lib/stores/toasts.svelte";
 
@@ -23,13 +24,18 @@
   let syncing = $state(false);
   let syncingContacts = $state(false);
 
-  const availableChats = $derived(
-    chats.list
-      .filter((c) =>
-        (c.title ?? "").toLowerCase().includes(filter.trim().toLowerCase())
-      )
-      .slice(0, 40)
-  );
+  const picker = createChatPicker();
+  const availableChats = $derived(picker.results);
+
+  $effect(() => {
+    picker.search(filter);
+  });
+
+  $effect(() => {
+    if (selected !== null) {
+      chats.ensure(selected);
+    }
+  });
 
   function chatTitle(id: number | null): string {
     if (id === null) {

frontend/src/lib/components/policy/PolicyEditor.svelte

@@ -16,6 +16,7 @@
   import Icon from "$lib/components/ui/Icon.svelte";
   import Spinner from "$lib/components/ui/Spinner.svelte";
   import { accounts } from "$lib/stores/accounts.svelte";
+  import { createChatPicker } from "$lib/stores/chat-picker.svelte";
   import { chats } from "$lib/stores/chats.svelte";
   import { toasts } from "$lib/stores/toasts.svelte";
 
@@ -79,15 +80,25 @@
       (f) => !folderPolicies.some((p) => p.scope_id === f.folder_id)
     )
   );
+  const picker = createChatPicker();
   const availableChats = $derived(
-    chats.list
-      .filter((c) => !chatPolicies.some((p) => p.scope_id === c.chat_id))
-      .filter((c) =>
-        (c.title ?? "").toLowerCase().includes(chatFilter.trim().toLowerCase())
-      )
-      .slice(0, 40)
+    picker.results.filter(
+      (c) => !chatPolicies.some((p) => p.scope_id === c.chat_id)
+    )
   );
 
+  $effect(() => {
+    picker.search(chatFilter);
+  });
+
+  $effect(() => {
+    for (const policy of chatPolicies) {
+      if (policy.scope_id !== null) {
+        chats.ensure(policy.scope_id);
+      }
+    }
+  });
+
   function folderTitle(id: number | null): string {
     return folders.find((f) => f.folder_id === id)?.title ?? `Папка ${id}`;
   }

frontend/src/lib/components/search/SearchMessageItem.svelte

@@ -19,6 +19,7 @@
   const ownId = $derived(accounts.selected?.tg_user_id ?? null);
 
   $effect(() => {
+    chats.ensure(hit.chat_id);
     const ids: number[] = [];
     if (hit.chat_id > 0) {
       ids.push(hit.chat_id);

frontend/src/lib/components/stories/AllStoriesArchive.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { untrack } from "svelte";
-  import { getPeers, getStories } from "$lib/api/endpoints";
+  import { getChat, getPeers, getStories } from "$lib/api/endpoints";
   import { loadStoryMedia } from "$lib/api/stories";
   import type { StoryView } from "$lib/api/types";
   import StoryViewer from "$lib/components/stories/StoryViewer.svelte";
@@ -10,7 +10,6 @@
   import Spinner from "$lib/components/ui/Spinner.svelte";
   import { peerName } from "$lib/format/peer";
   import { accounts } from "$lib/stores/accounts.svelte";
-  import { chats } from "$lib/stores/chats.svelte";
 
   interface Group {
     hasAvatar: boolean;
@@ -50,11 +49,20 @@
         }
       }
       const peerIds = [...byPeer.keys()].filter((id) => id > 0);
-      const peers = await getPeers(peerIds);
+      const chatIds = [...byPeer.keys()].filter((id) => id < 0);
+      const [peers, fetched] = await Promise.all([
+        getPeers(peerIds),
+        Promise.all(chatIds.map((id) => getChat(id))),
+      ]);
       if (current !== token) {
         return;
       }
       const peerById = new Map(peers.map((peer) => [peer.peer_id, peer]));
+      const chatById = new Map(
+        fetched
+          .filter((item) => item !== null)
+          .map((item) => [item.chat_id, item])
+      );
       groups = [...byPeer.entries()].map(([peerId, stories]) => {
         if (peerId > 0) {
           const peer = peerById.get(peerId) ?? null;
@@ -66,7 +74,7 @@
             stories,
           };
         }
-        const chat = chats.byId(peerId);
+        const chat = chatById.get(peerId);
         return {
           peerId,
           kind: "chat" as const,