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

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

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import Button from "../ui/Button.svelte";
+
+  interface Props {
+    initial?: string;
+    oncancel?: () => void;
+    onsubmit: (text: string) => void;
+    saving?: boolean;
+    submitLabel?: string;
+  }
+
+  const {
+    initial = "",
+    saving = false,
+    submitLabel = "Добавить заметку",
+    oncancel,
+    onsubmit,
+  }: Props = $props();
+
+  let text = $state(untrack(() => initial));
+
+  const valid = $derived(text.trim() !== "");
+
+  function submit() {
+    if (!valid) {
+      return;
+    }
+    onsubmit(text.trim());
+    if (oncancel === undefined) {
+      text = "";
+    }
+  }
+</script>
+
+<form
+  class="annotation-editor"
+  onsubmit={(e) => {
+    e.preventDefault();
+    submit();
+  }}
+>
+  <textarea
+    bind:value={text}
+    rows={oncancel ? 2 : 3}
+    placeholder="Заметка к сообщению…"
+  ></textarea>
+  <div class="actions">
+    {#if oncancel}
+      <Button variant="translucent" onclick={oncancel}>Отмена</Button>
+    {/if}
+    <Button type="submit" disabled={saving || !valid}>{submitLabel}</Button>
+  </div>
+</form>
+
+<style lang="scss">
+  .annotation-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  textarea {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--color-borders);
+    border-radius: 0.5rem;
+
+    color: var(--color-text);
+    font: inherit;
+
+    background: var(--color-background);
+    resize: vertical;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+</style>