beavergram/frontend/src/lib/components/ChatList.svelte

<script lang="ts">
  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 { accounts } from "$lib/stores/accounts.svelte";
  import { chats } from "$lib/stores/chats.svelte";
  import { folders } from "$lib/stores/folders.svelte";
  import { toasts } from "$lib/stores/toasts.svelte";

  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
  );

  let viewport = $state<HTMLDivElement | null>(null);
  let viewportHeight = $state(0);
  let scrollTop = $state(0);
  let rowHeight = $state(DEFAULT_ROW_HEIGHT);
  let frame = 0;

  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;
    }
    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);
    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 (frame) {
      return;
    }
    frame = requestAnimationFrame(() => {
      frame = 0;
      measure(el);
    });
  }
</script>

<div
  class="chat-list custom-scroll"
  onscroll={onScroll}
  bind:this={viewport}
  bind:clientHeight={viewportHeight}
>
  {#if chats.loading && list.length === 0}
    {#each skeletonRows as index (index)}
      <div class="row-skeleton">
        <Skeleton circle height="3rem" width="3rem" />
        <div class="row-skeleton-lines">
          <Skeleton height="0.875rem" width="55%" />
          <Skeleton height="0.8125rem" width="80%" />
        </div>
      </div>
    {/each}
  {:else if list.length === 0}
    <EmptyState
      description={folders.selectedId === null
        ? undefined
        : "No chats match this folder yet"}
      title={folders.selectedId === null ? "No chats yet" : "Empty folder"}
    />
  {:else}
    <div style:padding-bottom="{padBottom}px" style:padding-top="{padTop}px">
      {#each visible as chat (chat.chat_id)}
        <ChatListItem
          {chat}
          onclick={() => goto(`/app/${chat.chat_id}`)}
          selected={chat.chat_id === activeChatId}
        />
      {/each}
    </div>
  {/if}
</div>

<style lang="scss">
  .chat-list {
    overflow-y: auto;
    flex: 1;
    padding: 0.25rem 0.4375rem;
  }

  .row-skeleton {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 0.5rem;
  }

  .row-skeleton-lines {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.5rem;
  }
</style>