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

<script lang="ts">
  import { untrack } from "svelte";
  import {
    enqueueStoriesBackfill,
    getChatsBatch,
    getPeers,
    getStories,
  } from "#lib/api/endpoints.js";
  import { loadStoryMedia } from "#lib/api/stories.js";
  import type { StoryView } from "#lib/api/types.js";
  import StoryTile from "#lib/components/stories/StoryTile.svelte";
  import StoryViewer from "#lib/components/stories/StoryViewer.svelte";
  import Avatar from "#lib/components/ui/Avatar.svelte";
  import Button from "#lib/components/ui/Button.svelte";
  import EmptyState from "#lib/components/ui/EmptyState.svelte";
  import Icon from "#lib/components/ui/Icon.svelte";
  import Spinner from "#lib/components/ui/Spinner.svelte";
  import { peerName } from "#lib/format/peer.js";
  import { t } from "#lib/i18n/locale.svelte.js";
  import { accounts } from "#lib/stores/accounts.svelte.js";
  import { toasts } from "#lib/stores/toasts.svelte.js";

  interface Group {
    hasAvatar: boolean;
    kind: "peer" | "chat";
    name: string;
    peerId: number;
    stories: StoryView[];
  }

  const FETCH_LIMIT = 500;

  let groups = $state<Group[]>([]);
  let loading = $state(false);
  const previews = $state<Record<string, string | null>>({});
  const expanded = $state<Record<number, boolean>>({});
  let token = 0;

  function previewKey(story: StoryView): string {
    return `${story.peer_id}:${story.story_id}`;
  }

  let viewerOpen = $state(false);
  let viewerIndex = $state(0);
  let viewerItems = $state<StoryView[]>([]);
  let viewerPeerId = $state(0);
  let backfilling = $state<number | null>(null);

  async function load() {
    const current = token;
    loading = true;
    try {
      const stories = await getStories(null, { limit: FETCH_LIMIT });
      if (current !== token) {
        return;
      }
      const byPeer = new Map<number, StoryView[]>();
      for (const story of stories) {
        const bucket = byPeer.get(story.peer_id);
        if (bucket) {
          bucket.push(story);
        } else {
          byPeer.set(story.peer_id, [story]);
        }
      }
      const peerIds = [...byPeer.keys()].filter((id) => id > 0);
      const chatIds = [...byPeer.keys()].filter((id) => id < 0);
      const [peers, fetched] = await Promise.all([
        getPeers(peerIds),
        getChatsBatch(chatIds),
      ]);
      if (current !== token) {
        return;
      }
      const peerById = new Map(peers.map((peer) => [peer.peer_id, peer]));
      const chatById = new Map(fetched.map((item) => [item.chat_id, item]));
      groups = [...byPeer.entries()].map(([peerId, peerStories]) => {
        if (peerId > 0) {
          const peer = peerById.get(peerId) ?? null;
          return {
            hasAvatar: Boolean(peer?.has_avatar),
            kind: "peer" as const,
            name: peerName(peer) || `ID ${peerId}`,
            peerId,
            stories: peerStories,
          };
        }
        const chat = chatById.get(peerId);
        return {
          hasAvatar: Boolean(chat?.has_avatar),
          kind: "chat" as const,
          name: chat?.title ?? t("ui.chat", { id: peerId }),
          peerId,
          stories: peerStories,
        };
      });
    } finally {
      if (current === token) {
        loading = false;
      }
    }
  }

  $effect(() => {
    if (accounts.selectedId === null) {
      return;
    }
    untrack(() => {
      token += 1;
      groups = [];
      loading = false;
      for (const key of Object.keys(previews)) {
        delete previews[key];
      }
      for (const key of Object.keys(expanded)) {
        delete expanded[Number(key)];
      }
      load().catch(() => undefined);
    });
  });

  $effect(() => {
    const list = groups
      .filter((group) => expanded[group.peerId])
      .flatMap((group) => group.stories);
    let active = true;
    untrack(() => {
      for (const item of list) {
        const key = previewKey(item);
        if (!item.downloaded || previews[key] !== undefined) {
          continue;
        }
        previews[key] = null;
        loadStoryMedia(item.peer_id, item.story_id).then((url) => {
          if (active) {
            previews[key] = url;
          }
        });
      }
    });
    return () => {
      active = false;
    };
  });

  async function backfill(peerId: number) {
    if (backfilling !== null) {
      return;
    }
    backfilling = peerId;
    try {
      await enqueueStoriesBackfill(peerId);
      toasts.success(t("stories.backfillStarted"));
    } catch {
      toasts.error(t("stories.backfillFailed"));
    } finally {
      backfilling = null;
    }
  }

  function openViewer(group: Group, index: number) {
    viewerItems = group.stories;
    viewerPeerId = group.peerId;
    viewerIndex = index;
    viewerOpen = true;
  }

  function toggle(peerId: number) {
    expanded[peerId] = !expanded[peerId];
  }
</script>

{#if groups.length === 0}
  {#if loading}
    <div class="center"><Spinner /></div>
  {:else}
    <EmptyState title={t("stories.empty")} />
  {/if}
{:else}
  {#each groups as group (group.peerId)}
    <section class="group">
      <header class="group-head">
        <button
          aria-expanded={Boolean(expanded[group.peerId])}
          class="group-toggle"
          onclick={() => toggle(group.peerId)}
          type="button"
        >
          <Avatar
            avatar={{ id: group.peerId, kind: group.kind }}
            colorKey={group.peerId}
            hasAvatar={group.hasAvatar}
            name={group.name}
            size={2}
          />
          <span class="group-name">{group.name}</span>
          <span class="group-count">{group.stories.length}</span>
          <span class="chevron" class:open={expanded[group.peerId]}>
            <Icon name="down" size="1.25rem" />
          </span>
        </button>
        <Button
          aria-label={t("stories.loadOlderStories")}
          loading={backfilling === group.peerId}
          onclick={() => backfill(group.peerId)}
          round
          smaller
          variant="translucent"
        >
          <Icon name="cloud-download" />
        </Button>
      </header>
      {#if expanded[group.peerId]}
        <div class="grid">
          {#each group.stories as item, index (item.story_id)}
            <StoryTile
              onopen={() => openViewer(group, index)}
              preview={previews[previewKey(item)]}
              story={item}
            />
          {/each}
        </div>
      {/if}
    </section>
  {/each}

  <StoryViewer
    items={viewerItems}
    peerId={viewerPeerId}
    bind:index={viewerIndex}
    bind:open={viewerOpen}
  />
{/if}

<style lang="scss">
  .center {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
  }

  .group {
    border-bottom: 1px solid var(--color-borders);
  }

  .group-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
  }

  .group-toggle {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.625rem;

    min-width: 0;
    padding: 0;
    border: 0;

    text-align: left;
    cursor: pointer;
    background: transparent;
  }

  .chevron {
    display: flex;
    color: var(--color-text-secondary);
    transition: transform 0.2s ease;

    &.open {
      transform: rotate(180deg);
    }
  }

  .group-name {
    flex: 1;
    overflow: hidden;
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .group-count {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
  }

  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.125rem;
    padding: 0 0.125rem 0.125rem;
  }
</style>