From 0f604f9a26377af1e9fa653b01194e398dc5da7d Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 19 Jul 2026 16:08:53 -0400
Subject: [PATCH] =?UTF-8?q?M1:=20masonry=20board=20UI=20=E2=80=94=20quick-?=
 =?UTF-8?q?add,=20note=20cards,=20editor,=20views?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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/api/client.ts              |   2 +
 frontend/src/components/ColorPicker.vue |  24 ++++
 frontend/src/components/Icon.vue        |  26 +++++
 frontend/src/components/NoteCard.vue    |  85 ++++++++++++++
 frontend/src/components/NoteEditor.vue  | 124 ++++++++++++++++++++
 frontend/src/components/QuickAdd.vue    |  95 +++++++++++++++
 frontend/src/notes/colors.ts            |  57 +++++++++
 frontend/src/router/index.ts            |  12 ++
 frontend/src/stores/notes.ts            | 108 +++++++++++++++++
 frontend/src/style.css                  |   7 ++
 frontend/src/views/BoardView.vue        | 147 ++++++++++++++++++------
 11 files changed, 649 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/ColorPicker.vue
 create mode 100644 frontend/src/components/Icon.vue
 create mode 100644 frontend/src/components/NoteCard.vue
 create mode 100644 frontend/src/components/NoteEditor.vue
 create mode 100644 frontend/src/components/QuickAdd.vue
 create mode 100644 frontend/src/notes/colors.ts
 create mode 100644 frontend/src/stores/notes.ts

diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index 9187304..a70ef48 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -29,4 +29,6 @@ async function request<T>(method: string, path: string, body?: unknown): Promise
 export const api = {
   get: <T>(path: string) => request<T>("GET", path),
   post: <T>(path: string, body?: unknown) => request<T>("POST", path, body),
+  patch: <T>(path: string, body?: unknown) => request<T>("PATCH", path, body),
+  del: <T>(path: string) => request<T>("DELETE", path),
 };
diff --git a/frontend/src/components/ColorPicker.vue b/frontend/src/components/ColorPicker.vue
new file mode 100644
index 0000000..c6fce03
--- /dev/null
+++ b/frontend/src/components/ColorPicker.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { NOTE_COLOR_KEYS, NOTE_COLOR_LABELS, NOTE_SWATCH_CLASSES, type NoteColor } from "../notes/colors";
+
+defineProps<{ modelValue: NoteColor }>();
+defineEmits<{ (e: "update:modelValue", value: NoteColor): void }>();
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-1.5">
+    <button
+      v-for="key in NOTE_COLOR_KEYS"
+      :key="key"
+      type="button"
+      :title="NOTE_COLOR_LABELS[key]"
+      :aria-label="NOTE_COLOR_LABELS[key]"
+      :aria-pressed="modelValue === key"
+      class="h-6 w-6 rounded-full border border-black/10 transition hover:scale-110
+             focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1
+             focus-visible:ring-offset-white dark:focus-visible:ring-offset-neutral-900"
+      :class="[NOTE_SWATCH_CLASSES[key], modelValue === key ? 'ring-2 ring-brand ring-offset-1' : '']"
+      @click="$emit('update:modelValue', key)"
+    />
+  </div>
+</template>
diff --git a/frontend/src/components/Icon.vue b/frontend/src/components/Icon.vue
new file mode 100644
index 0000000..94c6f9e
--- /dev/null
+++ b/frontend/src/components/Icon.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// Tiny inline icon set (lucide paths) so we don't pull an icon dependency in M1.
+defineProps<{ name: string }>();
+
+const paths: Record<string, string> = {
+  pin: '<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1Z"/>',
+  archive: '<rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/>',
+  trash: '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
+  restore: '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>',
+  logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>',
+};
+</script>
+
+<template>
+  <svg
+    class="h-[18px] w-[18px]"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    v-html="paths[name] ?? ''"
+  />
+</template>
diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
new file mode 100644
index 0000000..5766a0c
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/NoteEditor.vue b/frontend/src/components/NoteEditor.vue
new file mode 100644
index 0000000..2b11e17
--- /dev/null
+++ b/frontend/src/components/NoteEditor.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from "vue";
+import { useNotesStore } from "../stores/notes";
+import ColorPicker from "./ColorPicker.vue";
+import Icon from "./Icon.vue";
+import type { Note } from "../stores/notes";
+import type { NoteColor } from "../notes/colors";
+
+const props = defineProps<{ note: Note }>();
+const emit = defineEmits<{ (e: "close"): void }>();
+const notes = useNotesStore();
+
+const title = ref(props.note.title ?? "");
+const body = ref(props.note.body);
+const color = ref<NoteColor>(props.note.color);
+const bodyInput = ref<HTMLTextAreaElement | null>(null);
+
+watch(
+  () => props.note,
+  (n) => {
+    title.value = n.title ?? "";
+    body.value = n.body;
+    color.value = n.color;
+  },
+);
+
+onMounted(async () => {
+  await nextTick();
+  bodyInput.value?.focus();
+});
+
+async function close() {
+  const changed =
+    (title.value.trim() || null) !== (props.note.title ?? null) ||
+    body.value !== props.note.body ||
+    color.value !== props.note.color;
+  if (changed) {
+    await notes.saveEdit(props.note.id, { title: title.value, body: body.value, color: color.value });
+  }
+  emit("close");
+}
+
+async function act(fn: () => Promise<void>) {
+  await fn();
+  emit("close");
+}
+</script>
+
+<template>
+  <div
+    class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/40 p-4 pt-[10vh]"
+    @mousedown.self="close"
+  >
+    <div
+      class="w-full max-w-lg rounded-xl border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
+      role="dialog"
+      aria-modal="true"
+      @keydown.esc="close"
+    >
+      <div class="flex flex-col gap-2 p-4">
+        <input
+          v-model="title"
+          type="text"
+          placeholder="Title"
+          class="w-full bg-transparent text-base font-semibold outline-none placeholder:text-neutral-400"
+        />
+        <textarea
+          ref="bodyInput"
+          v-model="body"
+          rows="8"
+          placeholder="Take a note…"
+          class="w-full resize-none bg-transparent text-sm leading-relaxed outline-none placeholder:text-neutral-400"
+        />
+      </div>
+      <div class="flex items-center justify-between gap-2 border-t border-neutral-100 px-3 py-2 dark:border-neutral-800">
+        <ColorPicker v-model="color" />
+        <div class="flex items-center gap-0.5">
+          <template v-if="!note.trashed">
+            <button
+              type="button"
+              class="icon-btn"
+              :class="note.pinned ? 'text-brand-700 dark:text-brand' : ''"
+              :title="note.pinned ? 'Unpin' : 'Pin'"
+              @click="act(() => notes.setPinned(note.id, !note.pinned))"
+            >
+              <Icon name="pin" />
+            </button>
+            <button
+              type="button"
+              class="icon-btn"
+              :title="note.archived ? 'Unarchive' : 'Archive'"
+              @click="act(() => notes.setArchived(note.id, !note.archived))"
+            >
+              <Icon name="archive" />
+            </button>
+            <button type="button" class="icon-btn" title="Move to trash" @click="act(() => notes.trash(note.id))">
+              <Icon name="trash" />
+            </button>
+          </template>
+          <template v-else>
+            <button type="button" class="icon-btn" title="Restore" @click="act(() => notes.restore(note.id))">
+              <Icon name="restore" />
+            </button>
+            <button
+              type="button"
+              class="icon-btn"
+              title="Delete forever"
+              @click="act(() => notes.deleteForever(note.id))"
+            >
+              <Icon name="trash" />
+            </button>
+          </template>
+          <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 dark:text-neutral-200 dark:hover:bg-neutral-800"
+            @click="close"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/QuickAdd.vue b/frontend/src/components/QuickAdd.vue
new file mode 100644
index 0000000..bac9092
--- /dev/null
+++ b/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>
diff --git a/frontend/src/notes/colors.ts b/frontend/src/notes/colors.ts
new file mode 100644
index 0000000..3d0c9f0
--- /dev/null
+++ b/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",
+};
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 3e174d2..ca1cc53 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -10,6 +10,18 @@ const router = createRouter({
       component: () => import("../views/BoardView.vue"),
       meta: { requiresAuth: true },
     },
+    {
+      path: "/archive",
+      name: "archive",
+      component: () => import("../views/BoardView.vue"),
+      meta: { requiresAuth: true },
+    },
+    {
+      path: "/trash",
+      name: "trash",
+      component: () => import("../views/BoardView.vue"),
+      meta: { requiresAuth: true },
+    },
     {
       path: "/login",
       name: "login",
diff --git a/frontend/src/stores/notes.ts b/frontend/src/stores/notes.ts
new file mode 100644
index 0000000..bbd5b14
--- /dev/null
+++ b/frontend/src/stores/notes.ts
@@ -0,0 +1,108 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { api } from "../api/client";
+import type { NoteColor } from "../notes/colors";
+
+export type NoteView = "active" | "archived" | "trash";
+
+export interface Note {
+  id: string;
+  title: string | null;
+  body: string;
+  color: NoteColor;
+  pinned: boolean;
+  archived: boolean;
+  trashed: boolean;
+  created_at: string | null;
+  updated_at: string | null;
+}
+
+function belongsToView(n: Note, v: NoteView): boolean {
+  if (v === "trash") return n.trashed;
+  if (v === "archived") return !n.trashed && n.archived;
+  return !n.trashed && !n.archived;
+}
+
+export const useNotesStore = defineStore("notes", () => {
+  const items = ref<Note[]>([]);
+  const loading = ref(false);
+  const view = ref<NoteView>("active");
+
+  function sortItems(): void {
+    // Pinned first, then most-recently-updated.
+    items.value.sort((a, b) => {
+      if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
+      return (b.updated_at ?? "").localeCompare(a.updated_at ?? "");
+    });
+  }
+
+  // Put the server's version of a note where it belongs for the current view, or
+  // remove it if it no longer belongs (e.g. archived while viewing the board).
+  function reconcile(note: Note): void {
+    const idx = items.value.findIndex((n) => n.id === note.id);
+    if (belongsToView(note, view.value)) {
+      if (idx >= 0) items.value[idx] = note;
+      else items.value.push(note);
+      sortItems();
+    } else if (idx >= 0) {
+      items.value.splice(idx, 1);
+    }
+  }
+
+  async function load(v: NoteView): Promise<void> {
+    view.value = v;
+    loading.value = true;
+    try {
+      const res = await api.get<{ notes: Note[] }>(`/api/notes?filter=${v}`);
+      items.value = res.notes;
+      sortItems();
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  async function create(input: { title: string; body: string; color: NoteColor }): Promise<void> {
+    reconcile(await api.post<Note>("/api/notes", input));
+  }
+
+  async function mutate(
+    id: string,
+    changes: Partial<Pick<Note, "title" | "body" | "color" | "pinned" | "archived">>,
+  ): Promise<void> {
+    reconcile(await api.patch<Note>(`/api/notes/${id}`, changes));
+  }
+
+  const setPinned = (id: string, pinned: boolean) => mutate(id, { pinned });
+  const setArchived = (id: string, archived: boolean) => mutate(id, { archived });
+  const setColor = (id: string, color: NoteColor) => mutate(id, { color });
+  const saveEdit = (id: string, changes: { title: string; body: string; color: NoteColor }) => mutate(id, changes);
+
+  async function trash(id: string): Promise<void> {
+    reconcile(await api.post<Note>(`/api/notes/${id}/trash`));
+  }
+
+  async function restore(id: string): Promise<void> {
+    reconcile(await api.post<Note>(`/api/notes/${id}/restore`));
+  }
+
+  async function deleteForever(id: string): Promise<void> {
+    await api.del(`/api/notes/${id}`);
+    const idx = items.value.findIndex((n) => n.id === id);
+    if (idx >= 0) items.value.splice(idx, 1);
+  }
+
+  return {
+    items,
+    loading,
+    view,
+    load,
+    create,
+    setPinned,
+    setArchived,
+    setColor,
+    saveEdit,
+    trash,
+    restore,
+    deleteForever,
+  };
+});
diff --git a/frontend/src/style.css b/frontend/src/style.css
index 1bdd415..e858695 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -17,3 +17,10 @@ body {
     @apply bg-neutral-950 text-neutral-100;
   }
 }
+
+@layer components {
+  .icon-btn {
+    @apply rounded-md p-1.5 text-neutral-500 transition hover:bg-black/5 focus:outline-none
+      focus-visible:ring-2 focus-visible:ring-brand dark:text-neutral-400 dark:hover:bg-white/10;
+  }
+}
diff --git a/frontend/src/views/BoardView.vue b/frontend/src/views/BoardView.vue
index d50bbad..f65c892 100644
--- a/frontend/src/views/BoardView.vue
+++ b/frontend/src/views/BoardView.vue
@@ -1,11 +1,58 @@
 <script setup lang="ts">
-import { useRouter } from "vue-router";
+import { computed, onMounted, ref, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
 import { useSessionStore } from "../stores/session";
+import { useNotesStore, type Note, type NoteView } from "../stores/notes";
+import QuickAdd from "../components/QuickAdd.vue";
+import NoteCard from "../components/NoteCard.vue";
+import NoteEditor from "../components/NoteEditor.vue";
 import BaseButton from "../components/BaseButton.vue";
+import Icon from "../components/Icon.vue";
 
 const session = useSessionStore();
+const notes = useNotesStore();
+const route = useRoute();
 const router = useRouter();
 
+const editing = ref<Note | null>(null);
+
+const navItems = [
+  { name: "board", label: "Notes", to: "/" },
+  { name: "archive", label: "Archive", to: "/archive" },
+  { name: "trash", label: "Trash", to: "/trash" },
+];
+
+function viewForRoute(name: unknown): NoteView {
+  if (name === "archive") return "archived";
+  if (name === "trash") return "trash";
+  return "active";
+}
+
+const currentView = computed<NoteView>(() => viewForRoute(route.name));
+const pinnedNotes = computed(() => notes.items.filter((n) => n.pinned));
+const otherNotes = computed(() => notes.items.filter((n) => !n.pinned));
+
+const emptyState = computed(() => {
+  if (currentView.value === "trash") return { title: "Trash is empty", subtitle: "Notes you delete land here first." };
+  if (currentView.value === "archived")
+    return { title: "Nothing archived", subtitle: "Archived notes are tucked away here." };
+  return { title: "No notes yet", subtitle: "Capture your first thought in the box above." };
+});
+
+async function reload() {
+  await notes.load(currentView.value);
+}
+
+onMounted(reload);
+watch(currentView, reload);
+
+function openEditor(note: Note) {
+  editing.value = note;
+}
+function closeEditor() {
+  editing.value = null;
+}
+
 async function signOut() {
   await session.logout();
   await router.replace("/login");
@@ -15,59 +62,83 @@ async function signOut() {
 <template>
   <div class="flex min-h-full flex-col">
     <header
-      class="sticky top-0 z-10 border-b border-neutral-200 bg-neutral-50/80 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/80"
+      class="sticky top-0 z-10 border-b border-neutral-200 bg-neutral-50/90 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/90"
     >
-      <div class="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
+      <div class="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-3">
         <div class="flex items-center gap-2">
           <div class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand text-sm font-black text-neutral-900">
             TS
           </div>
-          <span class="font-semibold">ThoughtSync</span>
+          <span class="hidden font-semibold sm:inline">ThoughtSync</span>
         </div>
+
+        <nav class="flex items-center gap-1">
+          <RouterLink
+            v-for="item in navItems"
+            :key="item.name"
+            :to="item.to"
+            class="rounded-md px-3 py-1.5 text-sm font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
+            :class="
+              route.name === item.name
+                ? 'bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100'
+                : 'text-neutral-500 hover:bg-neutral-100 dark:text-neutral-400 dark:hover:bg-neutral-800'
+            "
+          >
+            {{ item.label }}
+          </RouterLink>
+        </nav>
+
         <div class="flex items-center gap-3">
           <span class="hidden text-sm text-neutral-500 sm:inline dark:text-neutral-400">{{
             session.user?.display_name
           }}</span>
           <BaseButton variant="ghost" @click="signOut">
-            <svg
-              class="h-4 w-4"
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              stroke-width="2"
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              aria-hidden="true"
-            >
-              <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
-              <polyline points="16 17 21 12 16 7" />
-              <line x1="21" y1="12" x2="9" y2="12" />
-            </svg>
-            Sign out
+            <Icon name="logout" />
+            <span class="hidden sm:inline">Sign out</span>
           </BaseButton>
         </div>
       </div>
     </header>
 
-    <main class="mx-auto flex w-full max-w-6xl flex-1 flex-col items-center justify-center px-4 py-20 text-center">
-      <svg
-        class="h-12 w-12 text-neutral-300 dark:text-neutral-600"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="1.75"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        aria-hidden="true"
-      >
-        <path d="M15.5 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h9l7-7V5a2 2 0 0 0-2-2Z" />
-        <path d="M14 21v-5a2 2 0 0 1 2-2h5" />
-      </svg>
-      <h1 class="mt-4 text-xl font-semibold">Your board is ready</h1>
-      <p class="mt-1.5 max-w-sm text-sm text-neutral-500 dark:text-neutral-400">
-        A Google-Keep-style masonry board for quick-capturing notes lands here next. The foundation — your account and
-        workspace — is in place.
-      </p>
+    <main class="mx-auto w-full max-w-6xl flex-1 px-4 py-6">
+      <QuickAdd v-if="currentView === 'active'" class="mb-8" />
+
+      <div v-if="notes.loading" class="py-24 text-center text-sm text-neutral-400">Loading…</div>
+
+      <div v-else-if="notes.items.length === 0" class="py-24 text-center">
+        <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">{{ emptyState.title }}</h2>
+        <p class="mt-1 text-sm text-neutral-400">{{ emptyState.subtitle }}</p>
+      </div>
+
+      <template v-else>
+        <template v-if="currentView === 'active'">
+          <section v-if="pinnedNotes.length">
+            <h2 class="mb-2 text-xs font-semibold uppercase tracking-wide text-neutral-400">Pinned</h2>
+            <div class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
+              <NoteCard v-for="n in pinnedNotes" :key="n.id" :note="n" @open="openEditor" />
+            </div>
+          </section>
+          <section v-if="otherNotes.length" :class="pinnedNotes.length ? 'mt-8' : ''">
+            <h2
+              v-if="pinnedNotes.length"
+              class="mb-2 text-xs font-semibold uppercase tracking-wide text-neutral-400"
+            >
+              Others
+            </h2>
+            <div class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
+              <NoteCard v-for="n in otherNotes" :key="n.id" :note="n" @open="openEditor" />
+            </div>
+          </section>
+        </template>
+
+        <div v-else class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
+          <NoteCard v-for="n in notes.items" :key="n.id" :note="n" @open="openEditor" />
+        </div>
+      </template>
     </main>
+
+    <template v-if="editing">
+      <NoteEditor :note="editing" @close="closeEditor" />
+    </template>
   </div>
 </template>