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,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>