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,121 @@
+<script lang="ts">
+  import Button from "../ui/Button.svelte";
+
+  interface Props {
+    onsave: (data: {
+      kind: string;
+      params: Record<string, unknown>;
+      enabled: boolean;
+    }) => void;
+    saving?: boolean;
+  }
+
+  const { saving = false, onsave }: Props = $props();
+
+  const KINDS = [
+    { value: "keyword", label: "Keyword" },
+    { value: "peer_online", label: "Peer online" },
+  ];
+
+  let kind = $state("keyword");
+  let keyword = $state("");
+  let peerId = $state("");
+  let enabled = $state(true);
+
+  const isKeyword = $derived(kind === "keyword");
+  const valid = $derived(
+    isKeyword ? keyword.trim() !== "" : peerId.trim() !== ""
+  );
+
+  function submit() {
+    if (!valid) {
+      return;
+    }
+    const params: Record<string, unknown> = isKeyword
+      ? { keyword: keyword.trim() }
+      : { peer_id: Number(peerId.trim()) };
+    onsave({ kind, params, enabled });
+    keyword = "";
+    peerId = "";
+    enabled = true;
+  }
+</script>
+
+<form
+  class="watch-editor"
+  onsubmit={(e) => {
+    e.preventDefault();
+    submit();
+  }}
+>
+  <label class="field">
+    <span class="field-label">Type</span>
+    <select bind:value={kind}>
+      {#each KINDS as option (option.value)}
+        <option value={option.value}>{option.label}</option>
+      {/each}
+    </select>
+  </label>
+
+  {#if isKeyword}
+    <label class="field">
+      <span class="field-label">Keyword</span>
+      <input type="text" bind:value={keyword} placeholder="Text to match…">
+    </label>
+  {:else}
+    <label class="field">
+      <span class="field-label">Peer ID</span>
+      <input
+        type="text"
+        inputmode="numeric"
+        bind:value={peerId}
+        placeholder="123456789"
+      >
+    </label>
+  {/if}
+
+  <label class="field-inline">
+    <input type="checkbox" bind:checked={enabled}>
+    <span>Enabled</span>
+  </label>
+
+  <Button type="submit" disabled={saving || !valid}>Add watch</Button>
+</form>
+
+<style lang="scss">
+  .watch-editor {
+    display: flex;
+    flex-direction: column;
+    gap: 0.625rem;
+    padding: 0.75rem;
+    border: 1px solid var(--color-borders);
+    border-radius: 0.75rem;
+  }
+
+  .field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+
+  .field-label {
+    font-size: 0.8125rem;
+    color: var(--color-text-secondary);
+  }
+
+  .field-inline {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  input[type="text"],
+  select {
+    width: 100%;
+    padding: 0.5rem;
+    border: 1px solid var(--color-borders);
+    border-radius: 0.5rem;
+    background: var(--color-background);
+    color: var(--color-text);
+  }
+</style>