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

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>