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

2026-06-01 17:15:09 +02:00
parent ed469ba8dd
commit 2465bcd184
47 changed files with 5009 additions and 242 deletions
@@ -0,0 +1,80 @@
+<script lang="ts">
+  import {
+    createWatch,
+    deleteWatch,
+    listWatches,
+    updateWatch,
+  } from "$lib/api/endpoints";
+  import type { Watch } from "$lib/api/types";
+  import { accounts } from "$lib/stores/accounts.svelte";
+  import Spinner from "../ui/Spinner.svelte";
+  import WatchEditor from "./WatchEditor.svelte";
+  import WatchList from "./WatchList.svelte";
+
+  let watches = $state<Watch[]>([]);
+  let loading = $state(true);
+  let saving = $state(false);
+
+  async function load(_account: number | null) {
+    loading = true;
+    try {
+      watches = await listWatches();
+    } finally {
+      loading = false;
+    }
+  }
+
+  $effect(() => {
+    load(accounts.selectedId);
+  });
+
+  async function add(data: {
+    kind: string;
+    params: Record<string, unknown>;
+    enabled: boolean;
+  }) {
+    saving = true;
+    try {
+      const created = await createWatch(data.kind, data.params, data.enabled);
+      watches = [created, ...watches];
+    } finally {
+      saving = false;
+    }
+  }
+
+  async function toggle(watch: Watch) {
+    const updated = await updateWatch(watch.id, watch.params, !watch.enabled);
+    watches = watches.map((w) => (w.id === updated.id ? updated : w));
+  }
+
+  async function remove(watch: Watch) {
+    await deleteWatch(watch.id);
+    watches = watches.filter((w) => w.id !== watch.id);
+  }
+</script>
+
+<div class="panel-content">
+  <WatchEditor {saving} onsave={add} />
+
+  {#if loading}
+    <Spinner />
+  {:else if watches.length === 0}
+    <p class="empty">Пока нет отслеживаний.</p>
+  {:else}
+    <WatchList {watches} ontoggle={toggle} ondelete={remove} />
+  {/if}
+</div>
+
+<style lang="scss">
+  .panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .empty {
+    color: var(--color-text-secondary);
+    text-align: center;
+  }
+</style>