feat: add annotations, user profiles, watchers, stories, search and more

frontend/src/lib/components/annotations/AnnotationsPanel.svelte

@@ -0,0 +1,104 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { page } from "$app/state";
+  import {
+    createAnnotation,
+    deleteAnnotation,
+    listAnnotations,
+    updateAnnotation,
+  } from "$lib/api/endpoints";
+  import type { Annotation } from "$lib/api/types";
+  import EmptyState from "$lib/components/ui/EmptyState.svelte";
+  import Spinner from "$lib/components/ui/Spinner.svelte";
+  import { accounts } from "$lib/stores/accounts.svelte";
+  import { ui } from "$lib/stores/ui.svelte";
+  import AnnotationEditor from "./AnnotationEditor.svelte";
+  import AnnotationList from "./AnnotationList.svelte";
+
+  const chatId = $derived(
+    page.params.chatId ? Number(page.params.chatId) : null
+  );
+  const messageId = $derived(ui.panelMessageId);
+
+  let items = $state<Annotation[]>([]);
+  let loading = $state(false);
+  let saving = $state(false);
+  let token = 0;
+
+  $effect(() => {
+    const cid = chatId;
+    const mid = messageId;
+    if (cid === null || mid === null || accounts.selectedId === null) {
+      return;
+    }
+    untrack(() => {
+      token++;
+      const current = token;
+      loading = true;
+      items = [];
+      listAnnotations({ chatId: cid, messageId: mid })
+        .then((rows) => {
+          if (current === token) {
+            items = rows;
+          }
+        })
+        .finally(() => {
+          if (current === token) {
+            loading = false;
+          }
+        });
+    });
+  });
+
+  async function add(text: string) {
+    if (chatId === null || messageId === null) {
+      return;
+    }
+    saving = true;
+    try {
+      const created = await createAnnotation(chatId, messageId, text);
+      items = [created, ...items];
+    } finally {
+      saving = false;
+    }
+  }
+
+  async function edit(annotation: Annotation, text: string) {
+    const updated = await updateAnnotation(annotation.id, text);
+    items = items.map((item) => (item.id === updated.id ? updated : item));
+  }
+
+  async function remove(annotation: Annotation) {
+    await deleteAnnotation(annotation.id);
+    items = items.filter((item) => item.id !== annotation.id);
+  }
+</script>
+
+{#if chatId === null || messageId === null}
+  <EmptyState title="Заметки" description="Сообщение не выбрано" />
+{:else}
+  <div class="panel-content">
+    <AnnotationEditor {saving} onsubmit={add} />
+
+    {#if loading && items.length === 0}
+      <div class="center"><Spinner /></div>
+    {:else if items.length > 0}
+      <AnnotationList annotations={items} ondelete={remove} onupdate={edit} />
+    {/if}
+  </div>
+{/if}
+
+<style lang="scss">
+  .panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .center {
+    display: flex;
+    justify-content: center;
+    padding: 2rem 0;
+  }
+</style>