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/NoteCard.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useNotesStore } from "../stores/notes";
+import { NOTE_CARD_CLASSES, type NoteColor } from "../notes/colors";
+import type { Note } from "../stores/notes";
+import Icon from "./Icon.vue";
+
+defineProps<{ note: Note }>();
+const emit = defineEmits<{ (e: "open", note: Note): void }>();
+const notes = useNotesStore();
+
+function cardClass(color: NoteColor): string {
+  return NOTE_CARD_CLASSES[color] ?? NOTE_CARD_CLASSES.default;
+}
+</script>
+
+<template>
+  <div
+    class="group relative mb-4 break-inside-avoid rounded-xl border p-3 shadow-sm transition hover:shadow-md"
+    :class="cardClass(note.color)"
+  >
+    <button
+      type="button"
+      class="block w-full cursor-text text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-transparent rounded"
+      @click="emit('open', note)"
+    >
+      <h3 v-if="note.title" class="mb-1 break-words text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+        {{ note.title }}
+      </h3>
+      <p v-if="note.body" class="whitespace-pre-wrap break-words text-sm text-neutral-700 dark:text-neutral-300">
+        {{ note.body }}
+      </p>
+      <p v-if="!note.title && !note.body" class="text-sm italic text-neutral-400">Empty note</p>
+    </button>
+
+    <div
+      class="mt-2 flex items-center justify-end gap-0.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100"
+    >
+      <template v-if="note.trashed">
+        <button type="button" class="icon-btn" title="Restore" aria-label="Restore" @click="notes.restore(note.id)">
+          <Icon name="restore" />
+        </button>
+        <button
+          type="button"
+          class="icon-btn"
+          title="Delete forever"
+          aria-label="Delete forever"
+          @click="notes.deleteForever(note.id)"
+        >
+          <Icon name="trash" />
+        </button>
+      </template>
+      <template v-else>
+        <button
+          type="button"
+          class="icon-btn"
+          :class="note.pinned ? 'text-brand-700 dark:text-brand' : ''"
+          :title="note.pinned ? 'Unpin' : 'Pin'"
+          :aria-label="note.pinned ? 'Unpin' : 'Pin'"
+          :aria-pressed="note.pinned"
+          @click="notes.setPinned(note.id, !note.pinned)"
+        >
+          <Icon name="pin" />
+        </button>
+        <button
+          type="button"
+          class="icon-btn"
+          :title="note.archived ? 'Unarchive' : 'Archive'"
+          :aria-label="note.archived ? 'Unarchive' : 'Archive'"
+          @click="notes.setArchived(note.id, !note.archived)"
+        >
+          <Icon name="archive" />
+        </button>
+        <button
+          type="button"
+          class="icon-btn"
+          title="Move to trash"
+          aria-label="Move to trash"
+          @click="notes.trash(note.id)"
+        >
+          <Icon name="trash" />
+        </button>
+      </template>
+    </div>
+  </div>
+</template>