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/notes/colors.ts

@@ -0,0 +1,57 @@
+// Note color palette. Keys match the backend's NOTE_COLORS; the actual tints live
+// here (frontend concern). Class strings are full literals so Tailwind's content
+// scanner (src/**/*.ts) keeps them in the build.
+
+export const NOTE_COLOR_KEYS = [
+  "default",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "teal",
+  "blue",
+  "purple",
+  "pink",
+  "gray",
+] as const;
+
+export type NoteColor = (typeof NOTE_COLOR_KEYS)[number];
+
+export const NOTE_CARD_CLASSES: Record<NoteColor, string> = {
+  default: "bg-white border-neutral-200 dark:bg-neutral-900 dark:border-neutral-700",
+  red: "bg-red-50 border-red-200 dark:bg-red-950/40 dark:border-red-900",
+  orange: "bg-orange-50 border-orange-200 dark:bg-orange-950/40 dark:border-orange-900",
+  yellow: "bg-amber-50 border-amber-200 dark:bg-amber-950/40 dark:border-amber-900",
+  green: "bg-green-50 border-green-200 dark:bg-green-950/40 dark:border-green-900",
+  teal: "bg-teal-50 border-teal-200 dark:bg-teal-950/40 dark:border-teal-900",
+  blue: "bg-blue-50 border-blue-200 dark:bg-blue-950/40 dark:border-blue-900",
+  purple: "bg-purple-50 border-purple-200 dark:bg-purple-950/40 dark:border-purple-900",
+  pink: "bg-pink-50 border-pink-200 dark:bg-pink-950/40 dark:border-pink-900",
+  gray: "bg-neutral-100 border-neutral-300 dark:bg-neutral-800 dark:border-neutral-700",
+};
+
+export const NOTE_SWATCH_CLASSES: Record<NoteColor, string> = {
+  default: "bg-white dark:bg-neutral-600",
+  red: "bg-red-300 dark:bg-red-700",
+  orange: "bg-orange-300 dark:bg-orange-700",
+  yellow: "bg-amber-300 dark:bg-amber-700",
+  green: "bg-green-300 dark:bg-green-700",
+  teal: "bg-teal-300 dark:bg-teal-700",
+  blue: "bg-blue-300 dark:bg-blue-700",
+  purple: "bg-purple-300 dark:bg-purple-700",
+  pink: "bg-pink-300 dark:bg-pink-700",
+  gray: "bg-neutral-400 dark:bg-neutral-500",
+};
+
+export const NOTE_COLOR_LABELS: Record<NoteColor, string> = {
+  default: "Default",
+  red: "Red",
+  orange: "Orange",
+  yellow: "Yellow",
+  green: "Green",
+  teal: "Teal",
+  blue: "Blue",
+  purple: "Purple",
+  pink: "Pink",
+  gray: "Gray",
+};