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

frontend/src/lib/components/alerts/AlertList.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+  import type { Alert } from "$lib/api/types";
+  import Button from "../ui/Button.svelte";
+  import Icon from "../ui/Icon.svelte";
+
+  interface Props {
+    alerts: Alert[];
+    onseen: (alert: Alert) => void;
+  }
+
+  const { alerts, onseen }: Props = $props();
+
+  function text(alert: Alert): string {
+    const p = alert.payload;
+    const value = p.text ?? p.message ?? p.keyword;
+    return typeof value === "string" ? value : JSON.stringify(p);
+  }
+</script>
+
+<ul class="alert-list">
+  {#each alerts as alert (alert.id)}
+    <li class="alert-item" class:unseen={!alert.seen}>
+      <div class="alert-main">
+        <p class="alert-text">{text(alert)}</p>
+        <time class="alert-date">{new Date(alert.ts).toLocaleString()}</time>
+      </div>
+      {#if !alert.seen}
+        <Button
+          variant="translucent"
+          round
+          smaller
+          onclick={() => onseen(alert)}
+          aria-label="Отметить прочитанным"
+        >
+          <Icon name="check" />
+        </Button>
+      {/if}
+    </li>
+  {/each}
+</ul>
+
+<style lang="scss">
+  .alert-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .alert-item {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    border: 1px solid var(--color-borders);
+    border-radius: 0.75rem;
+
+    &.unseen {
+      border-color: var(--color-primary);
+    }
+  }
+
+  .alert-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    min-width: 0;
+  }
+
+  .alert-text {
+    margin: 0;
+    overflow-wrap: anywhere;
+  }
+
+  .alert-date {
+    font-size: 0.75rem;
+    color: var(--color-text-secondary);
+  }
+</style>

frontend/src/lib/components/alerts/AlertsPanel.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { listAlerts, markAlertSeen } from "$lib/api/endpoints";
+  import type { Alert } from "$lib/api/types";
+  import { accounts } from "$lib/stores/accounts.svelte";
+  import Spinner from "../ui/Spinner.svelte";
+  import AlertList from "./AlertList.svelte";
+
+  let alerts = $state<Alert[]>([]);
+  let loading = $state(true);
+  let unseenOnly = $state(false);
+
+  async function load(_account: number | null, unseen: boolean) {
+    loading = true;
+    try {
+      alerts = await listAlerts(unseen ? { seen: false } : {});
+    } finally {
+      loading = false;
+    }
+  }
+
+  $effect(() => {
+    load(accounts.selectedId, unseenOnly);
+  });
+
+  async function seen(alert: Alert) {
+    await markAlertSeen(alert.id);
+    if (unseenOnly) {
+      alerts = alerts.filter((a) => a.id !== alert.id);
+    } else {
+      alerts = alerts.map((a) =>
+        a.id === alert.id ? { ...a, seen: true } : a
+      );
+    }
+  }
+</script>
+
+<div class="panel-content">
+  <label class="toggle">
+    <input type="checkbox" bind:checked={unseenOnly}>
+    <span>Только непрочитанные</span>
+  </label>
+
+  {#if loading}
+    <Spinner />
+  {:else if alerts.length === 0}
+    <p class="empty">Алертов нет.</p>
+  {:else}
+    <AlertList {alerts} onseen={seen} />
+  {/if}
+</div>
+
+<style lang="scss">
+  .panel-content {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    padding: 1rem;
+  }
+
+  .toggle {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.875rem;
+    color: var(--color-text-secondary);
+  }
+
+  .empty {
+    color: var(--color-text-secondary);
+    text-align: center;
+  }
+</style>