M1: masonry board UI — quick-add, note cards, editor, views

- notes Pinia store (load/create/pin/archive/color/trash/restore/delete) with
  view-aware reconcile; api client patch/del methods.
- colors.ts palette (10 keys → light/dark card + swatch tints).
- QuickAdd (collapsed → expand, title/body/color, click-outside/Esc to save),
  NoteCard (color tint, click-to-edit, hover action bar), NoteEditor modal,
  ColorPicker, inline Icon set (no icon dep).
- BoardView rewrite: Notes/Archive/Trash routes, CSS-columns masonry, Pinned +
  Others sections, per-view empty states, sign-out.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm

frontend/src/components/QuickAdd.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, nextTick, ref } from "vue";
+import { useNotesStore } from "../stores/notes";
+import ColorPicker from "./ColorPicker.vue";
+import type { NoteColor } from "../notes/colors";
+
+const notes = useNotesStore();
+
+const expanded = ref(false);
+const saving = ref(false);
+const title = ref("");
+const body = ref("");
+const color = ref<NoteColor>("default");
+const root = ref<HTMLElement | null>(null);
+const bodyInput = ref<HTMLTextAreaElement | null>(null);
+
+async function open() {
+  expanded.value = true;
+  await nextTick();
+  bodyInput.value?.focus();
+}
+
+function reset() {
+  expanded.value = false;
+  title.value = "";
+  body.value = "";
+  color.value = "default";
+}
+
+async function commit() {
+  const hasContent = title.value.trim() !== "" || body.value.trim() !== "";
+  if (hasContent) {
+    saving.value = true;
+    try {
+      await notes.create({ title: title.value, body: body.value, color: color.value });
+    } finally {
+      saving.value = false;
+    }
+  }
+  reset();
+}
+
+function onDocumentMousedown(e: MouseEvent) {
+  if (expanded.value && root.value && !root.value.contains(e.target as Node)) {
+    void commit();
+  }
+}
+
+onMounted(() => document.addEventListener("mousedown", onDocumentMousedown));
+onBeforeUnmount(() => document.removeEventListener("mousedown", onDocumentMousedown));
+</script>
+
+<template>
+  <div ref="root" class="mx-auto w-full max-w-xl">
+    <div class="rounded-xl border border-neutral-200 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
+      <button
+        v-if="!expanded"
+        type="button"
+        class="w-full rounded-xl px-4 py-3 text-left text-sm text-neutral-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:text-neutral-400"
+        @click="open"
+      >
+        Take a note…
+      </button>
+
+      <div v-else class="flex flex-col gap-2 p-3">
+        <input
+          v-model="title"
+          type="text"
+          placeholder="Title"
+          class="w-full bg-transparent px-1 text-sm font-semibold outline-none placeholder:text-neutral-400"
+          @keydown.enter.prevent="bodyInput?.focus()"
+        />
+        <textarea
+          ref="bodyInput"
+          v-model="body"
+          rows="3"
+          placeholder="Take a note…"
+          class="w-full resize-none bg-transparent px-1 text-sm outline-none placeholder:text-neutral-400"
+          @keydown.esc="commit"
+        />
+        <div class="flex items-center justify-between gap-2 pt-1">
+          <ColorPicker v-model="color" />
+          <button
+            type="button"
+            class="rounded-md px-3 py-1.5 text-sm font-semibold text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-60 dark:text-neutral-200 dark:hover:bg-neutral-800"
+            :disabled="saving"
+            @click="commit"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>