feat(frontend): notes list with tag chips and the tag in the url, from the menu and settings, capture status dot on the menu and a line in settings

frontend/src/lib/components/MainMenu.svelte

@@ -5,10 +5,12 @@
   import AddAccountDialog from "#lib/components/settings/AddAccountDialog.svelte";
   import Button from "#lib/components/ui/Button.svelte";
   import Icon from "#lib/components/ui/Icon.svelte";
+  import { captureLine } from "#lib/format/capture.js";
   import { accountName } from "#lib/format/peer.js";
   import { t } from "#lib/i18n/locale.svelte.js";
   import type { MessageKey } from "#lib/i18n/messages.js";
   import { accounts } from "#lib/stores/accounts.svelte.js";
+  import { capture } from "#lib/stores/capture.svelte.js";
   import { theme } from "#lib/stores/theme.svelte.js";
   import { type RightPanel, ui } from "#lib/stores/ui.svelte.js";
 
@@ -23,6 +25,7 @@
   const entries: Entry[] = [
     { icon: "eye", label: "settings.watches", panel: "watches" },
     { icon: "unmute", label: "settings.alerts", panel: "alerts" },
+    { icon: "note", label: "notes.title", panel: "notes" },
     { icon: "data", label: "settings.storage", panel: "storage" },
     { icon: "play-story", label: "settings.stories", panel: "stories-all" },
     { icon: "cloud-download", label: "settings.jobs", panel: "jobs" },
@@ -31,6 +34,12 @@
 
   let adding = $state(false);
 
+  const quiet = $derived(
+    capture.status !== null && !capture.status.live
+      ? captureLine(capture.status, accounts.selected?.is_bot ?? false)
+      : null
+  );
+
   function onkeydown(event: KeyboardEvent) {
     const match = DIGIT.exec(event.code);
     if (!(event.altKey && match)) {
@@ -54,14 +63,18 @@
       <span class="menu-trigger">
         <Button
           {...props}
-          aria-label={t("menu.open")}
+          aria-label={quiet ? `${t("menu.open")}. ${quiet}` : t("menu.open")}
           round
           smaller
+          title={quiet ?? undefined}
           variant="translucent"
         >
           <Icon name="menu" />
         </Button>
         <AlertBadge />
+        {#if quiet}
+          <span class="capture-dot"></span>
+        {/if}
       </span>
     {/snippet}
   </DropdownMenu.Trigger>
@@ -142,6 +155,21 @@
     flex-shrink: 0;
   }
 
+  .capture-dot {
+    pointer-events: none;
+
+    position: absolute;
+    right: 0.125rem;
+    bottom: 0.125rem;
+
+    width: 0.625rem;
+    height: 0.625rem;
+    border-radius: 50%;
+
+    background-color: var(--color-error);
+    box-shadow: 0 0 0 2px var(--color-background);
+  }
+
   :global(.main-menu) {
     width: 17rem;
     max-height: calc(100dvh - 5rem);