feat(userbot,api,frontend): backfill stories and unbreak all-stories list

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

@@ -1,22 +1,32 @@
 <script lang="ts">
   import { untrack } from "svelte";
   import { page } from "$app/state";
-  import { getStories } from "$lib/api/endpoints";
+  import { enqueueStoriesBackfill, 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";
+  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 { poster } from "$lib/media/poster";
   import { accounts } from "$lib/stores/accounts.svelte";
+  import { toasts } from "$lib/stores/toasts.svelte";
+
+  interface Props {
+    chatId?: number | null;
+  }
+
+  let { chatId = null }: Props = $props();
 
   const PAGE = 60;
 
   const peerId = $derived(
-    page.params.chatId ? Number(page.params.chatId) : null
+    chatId ?? (page.params.chatId ? Number(page.params.chatId) : null)
   );
 
+  let backfilling = $state(false);
+
   let items = $state<StoryView[]>([]);
   let loading = $state(false);
   let done = $state(false);
@@ -90,67 +100,114 @@
     viewerIndex = index;
     viewerOpen = true;
   }
+
+  async function backfill(id: number) {
+    if (backfilling) {
+      return;
+    }
+    backfilling = true;
+    try {
+      await enqueueStoriesBackfill(id);
+      toasts.success("Загружаем старые сторис");
+    } catch {
+      toasts.error("Не удалось запустить загрузку сторис");
+    } finally {
+      backfilling = false;
+    }
+  }
+
+  async function reload(id: number) {
+    token++;
+    items = [];
+    done = false;
+    loading = false;
+    await loadMore(id);
+  }
 </script>
 
 {#if peerId === null}
   <EmptyState title="Сторис" description="Откройте чат" />
-{:else if items.length === 0}
-  {#if loading}
-    <div class="center"><Spinner /></div>
-  {:else}
-    <EmptyState title="Нет сторис" />
-  {/if}
 {:else}
-  <div class="grid">
-    {#each items as item, index (item.story_id)}
-      <button
-        type="button"
-        class="tile"
-        class:expired={item.deleted}
-        onclick={() => openViewer(index)}
-      >
-        {#if previews[item.story_id]}
-          {#if item.media_kind === "video"}
-            <video
-              src={previews[item.story_id]}
-              muted
-              playsinline
-              preload="metadata"
-              use:poster
-            ></video>
-            <span class="play"><Icon name="play" size="1.5rem" /></span>
-          {:else}
-            <img src={previews[item.story_id]} alt="">
-          {/if}
-        {:else}
-          <span class="ph"><Icon name="play-story" /></span>
-        {/if}
-        {#if item.pinned}
-          <span class="badge pin"
-            ><Icon name="story-priority" size="0.875rem" /></span
-          >
-        {/if}
-        {#if item.views}
-          <span class="badge views">
-            <Icon name="eye" size="0.875rem" />{item.views}
-          </span>
-        {/if}
-      </button>
-    {/each}
+  <div class="toolbar">
+    <Button
+      variant="secondary"
+      pill
+      smaller
+      loading={backfilling}
+      onclick={() => peerId !== null && backfill(peerId)}
+    >
+      <Icon name="cloud-download" />Загрузить старые
+    </Button>
+    <Button
+      variant="translucent"
+      round
+      smaller
+      onclick={() => peerId !== null && reload(peerId).catch(() => undefined)}
+      aria-label="Обновить"
+    >
+      <Icon name="reload" />
+    </Button>
   </div>
 
-  {#if !done}
-    <button
-      type="button"
-      class="more"
-      onclick={() => peerId !== null && loadMore(peerId)}
-      disabled={loading}
-    >
-      {loading ? "Загрузка…" : "Показать ещё"}
-    </button>
-  {/if}
+  {#if items.length === 0}
+    {#if loading}
+      <div class="center"><Spinner /></div>
+    {:else}
+      <EmptyState
+        title="Нет сторис"
+        description="Нажмите «Загрузить старые», чтобы забрать архив"
+      />
+    {/if}
+  {:else}
+    <div class="grid">
+      {#each items as item, index (item.story_id)}
+        <button
+          type="button"
+          class="tile"
+          class:expired={item.deleted}
+          onclick={() => openViewer(index)}
+        >
+          {#if previews[item.story_id]}
+            {#if item.media_kind === "video"}
+              <video
+                src={previews[item.story_id]}
+                muted
+                playsinline
+                preload="metadata"
+                use:poster
+              ></video>
+              <span class="play"><Icon name="play" size="1.5rem" /></span>
+            {:else}
+              <img src={previews[item.story_id]} alt="">
+            {/if}
+          {:else}
+            <span class="ph"><Icon name="play-story" /></span>
+          {/if}
+          {#if item.pinned}
+            <span class="badge pin"
+              ><Icon name="story-priority" size="0.875rem" /></span
+            >
+          {/if}
+          {#if item.views}
+            <span class="badge views">
+              <Icon name="eye" size="0.875rem" />{item.views}
+            </span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+
+    {#if !done}
+      <button
+        type="button"
+        class="more"
+        onclick={() => peerId !== null && loadMore(peerId)}
+        disabled={loading}
+      >
+        {loading ? "Загрузка…" : "Показать ещё"}
+      </button>
+    {/if}
 
-  {#if peerId !== null}
     <StoryViewer
       {peerId}
       {items}
@@ -167,6 +224,14 @@
     padding: 2rem 0;
   }
 
+  .toolbar {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.625rem 0.75rem;
+    border-bottom: 1px solid var(--color-borders);
+  }
+
   .grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);