From 2046600a95ba697fd59cec6954e746648faaa381 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Sun, 19 Jul 2026 21:56:14 -0400
Subject: [PATCH] M2 labels frontend: sidebar shell + label filter, chips,
 picker, manage
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AppShell: persistent left sidebar (Notes · labels · Archive · Trash) + top bar
  (site name, admin Settings, sign out); BoardView now renders inside it.
- labels store (list/create/rename/delete); Note gains labels[]; notes store
  gains setLabels + label-aware reconcile + /api/notes?label= loading.
- /label/:id route → label-filtered board.
- LabelPicker (tag a note, create-on-the-fly) in the editor; label chips shown
  on cards and in the editor; LabelsModal to create/rename/delete labels.
- api client PUT; new icons (note/tag/pencil/plus/check); nav-link styles.

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              |   1 +
 frontend/src/components/AppShell.vue    | 106 ++++++++++++++++++++++++
 frontend/src/components/Icon.vue        |   5 ++
 frontend/src/components/LabelPicker.vue | 101 ++++++++++++++++++++++
 frontend/src/components/LabelsModal.vue |  73 ++++++++++++++++
 frontend/src/components/NoteCard.vue    |   9 ++
 frontend/src/components/NoteEditor.vue  |  35 +++++++-
 frontend/src/router/index.ts            |   6 ++
 frontend/src/stores/labels.ts           |  46 ++++++++++
 frontend/src/stores/notes.ts            |  39 ++++++---
 frontend/src/style.css                  |   8 ++
 frontend/src/views/BoardView.vue        |  92 ++++----------------
 12 files changed, 432 insertions(+), 89 deletions(-)
 create mode 100644 frontend/src/components/AppShell.vue
 create mode 100644 frontend/src/components/LabelPicker.vue
 create mode 100644 frontend/src/components/LabelsModal.vue
 create mode 100644 frontend/src/stores/labels.ts

diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index a70ef48..6e1038c 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -30,5 +30,6 @@ 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),
+  put: <T>(path: string, body?: unknown) => request<T>("PUT", path, body),
   del: <T>(path: string) => request<T>("DELETE", path),
 };
diff --git a/frontend/src/components/AppShell.vue b/frontend/src/components/AppShell.vue
new file mode 100644
index 0000000..2abd2a1
--- /dev/null
+++ b/frontend/src/components/AppShell.vue
@@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useSessionStore } from "../stores/session";
+import { useConfigStore } from "../stores/config";
+import { useLabelsStore } from "../stores/labels";
+import Icon from "./Icon.vue";
+import LabelsModal from "./LabelsModal.vue";
+
+const route = useRoute();
+const router = useRouter();
+const session = useSessionStore();
+const config = useConfigStore();
+const labels = useLabelsStore();
+
+const managing = ref(false);
+
+onMounted(() => {
+  if (!labels.loaded) void labels.load();
+});
+
+const currentLabelId = computed(() => (route.name === "label" ? String(route.params.id) : null));
+
+async function signOut() {
+  await session.logout();
+  await router.replace("/login");
+}
+</script>
+
+<template>
+  <div class="flex min-h-full flex-col">
+    <header
+      class="sticky top-0 z-20 border-b border-neutral-200 bg-neutral-50/90 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/90"
+    >
+      <div class="flex 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="hidden font-semibold sm:inline">{{ config.siteName }}</span>
+        </div>
+        <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>
+          <RouterLink
+            v-if="session.user?.is_admin"
+            to="/settings"
+            class="icon-btn"
+            title="Settings"
+            aria-label="Settings"
+          >
+            <Icon name="settings" />
+          </RouterLink>
+          <button type="button" class="icon-btn" title="Sign out" aria-label="Sign out" @click="signOut">
+            <Icon name="logout" />
+          </button>
+        </div>
+      </div>
+    </header>
+
+    <div class="flex flex-1">
+      <aside class="hidden w-56 shrink-0 border-r border-neutral-200 p-3 sm:block dark:border-neutral-800">
+        <nav class="flex flex-col gap-0.5 text-sm">
+          <RouterLink to="/" class="nav-link" :class="route.name === 'board' ? 'nav-link-active' : ''">
+            <Icon name="note" /> Notes
+          </RouterLink>
+
+          <div class="mt-3 flex items-center justify-between px-3 pb-1">
+            <span class="text-xs font-semibold uppercase tracking-wide text-neutral-400">Labels</span>
+            <button
+              type="button"
+              class="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200"
+              title="Edit labels"
+              aria-label="Edit labels"
+              @click="managing = true"
+            >
+              <Icon name="pencil" />
+            </button>
+          </div>
+          <p v-if="!labels.items.length" class="px-3 py-1 text-xs text-neutral-400">No labels yet</p>
+          <RouterLink
+            v-for="lb in labels.items"
+            :key="lb.id"
+            :to="`/label/${lb.id}`"
+            class="nav-link"
+            :class="currentLabelId === lb.id ? 'nav-link-active' : ''"
+          >
+            <Icon name="tag" /> <span class="truncate">{{ lb.name }}</span>
+          </RouterLink>
+
+          <RouterLink to="/archive" class="nav-link mt-3" :class="route.name === 'archive' ? 'nav-link-active' : ''">
+            <Icon name="archive" /> Archive
+          </RouterLink>
+          <RouterLink to="/trash" class="nav-link" :class="route.name === 'trash' ? 'nav-link-active' : ''">
+            <Icon name="trash" /> Trash
+          </RouterLink>
+        </nav>
+      </aside>
+
+      <main class="min-w-0 flex-1"><slot /></main>
+    </div>
+
+    <LabelsModal v-if="managing" @close="managing = false" />
+  </div>
+</template>
diff --git a/frontend/src/components/Icon.vue b/frontend/src/components/Icon.vue
index ca8718d..321df71 100644
--- a/frontend/src/components/Icon.vue
+++ b/frontend/src/components/Icon.vue
@@ -9,6 +9,11 @@ const paths: Record<string, string> = {
   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"/>',
   settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
+  note: '<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"/>',
+  tag: '<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/>',
+  pencil: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
+  plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
+  check: '<path d="M20 6 9 17l-5-5"/>',
 };
 </script>
 
diff --git a/frontend/src/components/LabelPicker.vue b/frontend/src/components/LabelPicker.vue
new file mode 100644
index 0000000..07f4d9e
--- /dev/null
+++ b/frontend/src/components/LabelPicker.vue
@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
+import { useLabelsStore } from "../stores/labels";
+import Icon from "./Icon.vue";
+import type { NoteLabel } from "../stores/notes";
+
+const props = defineProps<{ modelValue: NoteLabel[] }>();
+const emit = defineEmits<{ (e: "update:modelValue", value: NoteLabel[]): void }>();
+const labels = useLabelsStore();
+
+const open = ref(false);
+const filter = ref("");
+const root = ref<HTMLElement | null>(null);
+
+const selectedIds = computed(() => new Set(props.modelValue.map((lb) => lb.id)));
+const shown = computed(() =>
+  labels.items.filter((lb) => lb.name.toLowerCase().includes(filter.value.trim().toLowerCase())),
+);
+const canCreate = computed(() => {
+  const name = filter.value.trim();
+  return name.length > 0 && !labels.items.some((lb) => lb.name.toLowerCase() === name.toLowerCase());
+});
+
+function toggle(lb: NoteLabel) {
+  const next = selectedIds.value.has(lb.id)
+    ? props.modelValue.filter((x) => x.id !== lb.id)
+    : [...props.modelValue, lb];
+  emit("update:modelValue", next);
+}
+
+async function createAndAdd() {
+  const created = await labels.create(filter.value.trim());
+  filter.value = "";
+  if (!selectedIds.value.has(created.id)) emit("update:modelValue", [...props.modelValue, created]);
+}
+
+function onDocMousedown(e: MouseEvent) {
+  if (open.value && root.value && !root.value.contains(e.target as Node)) open.value = false;
+}
+onMounted(() => document.addEventListener("mousedown", onDocMousedown));
+onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown));
+</script>
+
+<template>
+  <div ref="root" class="relative">
+    <button type="button" class="icon-btn" title="Labels" aria-label="Labels" @click="open = !open">
+      <Icon name="tag" />
+    </button>
+    <div
+      v-if="open"
+      class="absolute bottom-full right-0 z-10 mb-1 w-56 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg dark:border-neutral-700 dark:bg-neutral-800"
+    >
+      <input
+        v-model="filter"
+        type="text"
+        placeholder="Label note…"
+        class="mb-1 w-full rounded-md border border-neutral-300 bg-white px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-600 dark:bg-neutral-900"
+      />
+      <ul class="max-h-48 overflow-y-auto">
+        <li v-for="lb in shown" :key="lb.id">
+          <button
+            type="button"
+            class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-neutral-100 dark:hover:bg-neutral-700"
+            @click="toggle(lb)"
+          >
+            <span
+              class="flex h-4 w-4 shrink-0 items-center justify-center rounded border"
+              :class="
+                selectedIds.has(lb.id)
+                  ? 'border-brand bg-brand text-neutral-900'
+                  : 'border-neutral-400 dark:border-neutral-500'
+              "
+            >
+              <svg
+                v-if="selectedIds.has(lb.id)"
+                class="h-3 w-3"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="3"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M20 6 9 17l-5-5" />
+              </svg>
+            </span>
+            <span class="truncate">{{ lb.name }}</span>
+          </button>
+        </li>
+      </ul>
+      <button
+        v-if="canCreate"
+        type="button"
+        class="mt-1 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-brand-700 hover:bg-neutral-100 dark:text-brand dark:hover:bg-neutral-700"
+        @click="createAndAdd"
+      >
+        <Icon name="plus" /> Create "{{ filter.trim() }}"
+      </button>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/LabelsModal.vue b/frontend/src/components/LabelsModal.vue
new file mode 100644
index 0000000..4433f4b
--- /dev/null
+++ b/frontend/src/components/LabelsModal.vue
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useLabelsStore } from "../stores/labels";
+import Icon from "./Icon.vue";
+
+const emit = defineEmits<{ (e: "close"): void }>();
+const labels = useLabelsStore();
+const newName = ref("");
+
+async function add() {
+  const name = newName.value.trim();
+  if (!name) return;
+  await labels.create(name);
+  newName.value = "";
+}
+
+async function rename(id: string, value: string) {
+  const name = value.trim();
+  if (name) await labels.rename(id, name);
+}
+</script>
+
+<template>
+  <div
+    class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/40 p-4 pt-[12vh]"
+    @mousedown.self="emit('close')"
+  >
+    <div
+      class="w-full max-w-sm 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="emit('close')"
+    >
+      <div class="flex items-center justify-between border-b border-neutral-100 px-4 py-3 dark:border-neutral-800">
+        <h2 class="text-sm font-semibold">Edit labels</h2>
+        <button type="button" class="icon-btn" aria-label="Close" @click="emit('close')"><Icon name="close" /></button>
+      </div>
+      <div class="flex flex-col gap-2 p-4">
+        <form class="flex items-center gap-2" @submit.prevent="add">
+          <Icon name="plus" />
+          <input
+            v-model="newName"
+            type="text"
+            placeholder="Create label"
+            class="flex-1 rounded-md border border-neutral-300 bg-white px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:bg-neutral-800"
+          />
+        </form>
+        <ul class="flex flex-col gap-1 pt-1">
+          <li v-for="lb in labels.items" :key="lb.id" class="flex items-center gap-2">
+            <Icon name="tag" />
+            <input
+              :value="lb.name"
+              class="flex-1 rounded-md bg-transparent px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-brand"
+              @change="rename(lb.id, ($event.target as HTMLInputElement).value)"
+            />
+            <button
+              type="button"
+              class="icon-btn"
+              title="Delete label"
+              aria-label="Delete label"
+              @click="labels.remove(lb.id)"
+            >
+              <Icon name="trash" />
+            </button>
+          </li>
+        </ul>
+        <p v-if="!labels.items.length" class="py-2 text-center text-xs text-neutral-400">
+          No labels yet — create one above.
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/NoteCard.vue b/frontend/src/components/NoteCard.vue
index 5766a0c..8253861 100644
--- a/frontend/src/components/NoteCard.vue
+++ b/frontend/src/components/NoteCard.vue
@@ -32,6 +32,15 @@ function cardClass(color: NoteColor): string {
       <p v-if="!note.title && !note.body" class="text-sm italic text-neutral-400">Empty note</p>
     </button>
 
+    <div v-if="note.labels.length" class="mt-2 flex flex-wrap gap-1">
+      <span
+        v-for="lb in note.labels"
+        :key="lb.id"
+        class="rounded-full bg-black/5 px-2 py-0.5 text-xs text-neutral-600 dark:bg-white/10 dark:text-neutral-300"
+        >{{ lb.name }}</span
+      >
+    </div>
+
     <div
       class="mt-2 flex items-center justify-end gap-0.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100"
     >
diff --git a/frontend/src/components/NoteEditor.vue b/frontend/src/components/NoteEditor.vue
index 2b11e17..471943f 100644
--- a/frontend/src/components/NoteEditor.vue
+++ b/frontend/src/components/NoteEditor.vue
@@ -3,7 +3,8 @@ 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 LabelPicker from "./LabelPicker.vue";
+import type { Note, NoteLabel } from "../stores/notes";
 import type { NoteColor } from "../notes/colors";
 
 const props = defineProps<{ note: Note }>();
@@ -13,6 +14,7 @@ const notes = useNotesStore();
 const title = ref(props.note.title ?? "");
 const body = ref(props.note.body);
 const color = ref<NoteColor>(props.note.color);
+const labelList = ref<NoteLabel[]>([...props.note.labels]);
 const bodyInput = ref<HTMLTextAreaElement | null>(null);
 
 watch(
@@ -21,6 +23,7 @@ watch(
     title.value = n.title ?? "";
     body.value = n.body;
     color.value = n.color;
+    labelList.value = [...n.labels];
   },
 );
 
@@ -29,6 +32,18 @@ onMounted(async () => {
   bodyInput.value?.focus();
 });
 
+async function onLabelsChange(next: NoteLabel[]) {
+  labelList.value = next;
+  await notes.setLabels(
+    props.note.id,
+    next.map((lb) => lb.id),
+  );
+}
+
+async function removeLabel(id: string) {
+  await onLabelsChange(labelList.value.filter((lb) => lb.id !== id));
+}
+
 async function close() {
   const changed =
     (title.value.trim() || null) !== (props.note.title ?? null) ||
@@ -71,10 +86,28 @@ async function act(fn: () => Promise<void>) {
           placeholder="Take a note…"
           class="w-full resize-none bg-transparent text-sm leading-relaxed outline-none placeholder:text-neutral-400"
         />
+        <div v-if="labelList.length" class="flex flex-wrap gap-1.5 pt-1">
+          <span
+            v-for="lb in labelList"
+            :key="lb.id"
+            class="inline-flex items-center gap-1 rounded-full bg-black/5 px-2 py-0.5 text-xs text-neutral-600 dark:bg-white/10 dark:text-neutral-300"
+          >
+            {{ lb.name }}
+            <button
+              type="button"
+              class="text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-100"
+              :aria-label="`Remove ${lb.name}`"
+              @click="removeLabel(lb.id)"
+            >
+              ×
+            </button>
+          </span>
+        </div>
       </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">
+          <LabelPicker v-if="!note.trashed" :model-value="labelList" @update:model-value="onLabelsChange" />
           <template v-if="!note.trashed">
             <button
               type="button"
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index f82ace2..8647854 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -23,6 +23,12 @@ const router = createRouter({
       component: () => import("../views/BoardView.vue"),
       meta: { requiresAuth: true },
     },
+    {
+      path: "/label/:id",
+      name: "label",
+      component: () => import("../views/BoardView.vue"),
+      meta: { requiresAuth: true },
+    },
     {
       path: "/settings",
       name: "settings",
diff --git a/frontend/src/stores/labels.ts b/frontend/src/stores/labels.ts
new file mode 100644
index 0000000..1aa032a
--- /dev/null
+++ b/frontend/src/stores/labels.ts
@@ -0,0 +1,46 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { api } from "../api/client";
+
+export interface Label {
+  id: string;
+  name: string;
+}
+
+export const useLabelsStore = defineStore("labels", () => {
+  const items = ref<Label[]>([]);
+  const loaded = ref(false);
+
+  function sort() {
+    items.value.sort((a, b) => a.name.localeCompare(b.name));
+  }
+
+  async function load(): Promise<void> {
+    const res = await api.get<{ labels: Label[] }>("/api/labels");
+    items.value = res.labels;
+    loaded.value = true;
+  }
+
+  async function create(name: string): Promise<Label> {
+    const label = await api.post<Label>("/api/labels", { name });
+    if (!items.value.some((lb) => lb.id === label.id)) {
+      items.value.push(label);
+      sort();
+    }
+    return label;
+  }
+
+  async function rename(id: string, name: string): Promise<void> {
+    const updated = await api.patch<Label>(`/api/labels/${id}`, { name });
+    const idx = items.value.findIndex((lb) => lb.id === id);
+    if (idx >= 0) items.value[idx] = updated;
+    sort();
+  }
+
+  async function remove(id: string): Promise<void> {
+    await api.del(`/api/labels/${id}`);
+    items.value = items.value.filter((lb) => lb.id !== id);
+  }
+
+  return { items, loaded, load, create, rename, remove };
+});
diff --git a/frontend/src/stores/notes.ts b/frontend/src/stores/notes.ts
index bbd5b14..0f09ead 100644
--- a/frontend/src/stores/notes.ts
+++ b/frontend/src/stores/notes.ts
@@ -5,6 +5,11 @@ import type { NoteColor } from "../notes/colors";
 
 export type NoteView = "active" | "archived" | "trash";
 
+export interface NoteLabel {
+  id: string;
+  name: string;
+}
+
 export interface Note {
   id: string;
   title: string | null;
@@ -13,34 +18,36 @@ export interface Note {
   pinned: boolean;
   archived: boolean;
   trashed: boolean;
+  labels: NoteLabel[];
   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");
+  const activeLabel = ref<string | null>(null);
 
   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 belongsHere(n: Note): boolean {
+    const v = view.value;
+    const inView =
+      v === "trash" ? n.trashed : v === "archived" ? !n.trashed && n.archived : !n.trashed && !n.archived;
+    if (!inView) return false;
+    if (activeLabel.value) return n.labels.some((lb) => lb.id === activeLabel.value);
+    return true;
+  }
+
   function reconcile(note: Note): void {
     const idx = items.value.findIndex((n) => n.id === note.id);
-    if (belongsToView(note, view.value)) {
+    if (belongsHere(note)) {
       if (idx >= 0) items.value[idx] = note;
       else items.value.push(note);
       sortItems();
@@ -49,11 +56,13 @@ export const useNotesStore = defineStore("notes", () => {
     }
   }
 
-  async function load(v: NoteView): Promise<void> {
+  async function load(v: NoteView, labelId: string | null = null): Promise<void> {
     view.value = v;
+    activeLabel.value = labelId;
     loading.value = true;
     try {
-      const res = await api.get<{ notes: Note[] }>(`/api/notes?filter=${v}`);
+      const query = labelId ? `/api/notes?filter=${v}&label=${labelId}` : `/api/notes?filter=${v}`;
+      const res = await api.get<{ notes: Note[] }>(query);
       items.value = res.notes;
       sortItems();
     } finally {
@@ -77,6 +86,10 @@ export const useNotesStore = defineStore("notes", () => {
   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 setLabels(id: string, labelIds: string[]): Promise<void> {
+    reconcile(await api.put<Note>(`/api/notes/${id}/labels`, { label_ids: labelIds }));
+  }
+
   async function trash(id: string): Promise<void> {
     reconcile(await api.post<Note>(`/api/notes/${id}/trash`));
   }
@@ -95,12 +108,14 @@ export const useNotesStore = defineStore("notes", () => {
     items,
     loading,
     view,
+    activeLabel,
     load,
     create,
     setPinned,
     setArchived,
     setColor,
     saveEdit,
+    setLabels,
     trash,
     restore,
     deleteForever,
diff --git a/frontend/src/style.css b/frontend/src/style.css
index e858695..de91db8 100644
--- a/frontend/src/style.css
+++ b/frontend/src/style.css
@@ -23,4 +23,12 @@ body {
     @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;
   }
+  .nav-link {
+    @apply flex items-center gap-2 rounded-lg px-3 py-2 font-medium text-neutral-600 transition
+      hover:bg-neutral-200/60 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand
+      dark:text-neutral-300 dark:hover:bg-neutral-800;
+  }
+  .nav-link-active {
+    @apply bg-neutral-200 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100;
+  }
 }
diff --git a/frontend/src/views/BoardView.vue b/frontend/src/views/BoardView.vue
index 6efa45a..0f2eb0e 100644
--- a/frontend/src/views/BoardView.vue
+++ b/frontend/src/views/BoardView.vue
@@ -1,36 +1,28 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
-import { useRoute, useRouter } from "vue-router";
-import { useSessionStore } from "../stores/session";
-import { useConfigStore } from "../stores/config";
+import { useRoute } from "vue-router";
 import { useNotesStore, type Note, type NoteView } from "../stores/notes";
+import AppShell from "../components/AppShell.vue";
 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 config = useConfigStore();
 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";
+  return "active"; // board + label views
 }
 
 const currentView = computed<NoteView>(() => viewForRoute(route.name));
+const currentLabel = computed<string | null>(() => (route.name === "label" ? String(route.params.id) : null));
+
+// Quick-add + pinned/others split only on the main board (not archive/trash/label).
+const isMainBoard = computed(() => route.name === "board");
 const pinnedNotes = computed(() => notes.items.filter((n) => n.pinned));
 const otherNotes = computed(() => notes.items.filter((n) => !n.pinned));
 
@@ -38,15 +30,16 @@ 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." };
+  if (currentLabel.value) return { title: "No notes with this label", subtitle: "Tag a note to see it here." };
   return { title: "No notes yet", subtitle: "Capture your first thought in the box above." };
 });
 
 async function reload() {
-  await notes.load(currentView.value);
+  await notes.load(currentView.value, currentLabel.value);
 }
 
 onMounted(reload);
-watch(currentView, reload);
+watch([currentView, currentLabel], reload);
 
 function openEditor(note: Note) {
   editing.value = note;
@@ -54,65 +47,12 @@ function openEditor(note: Note) {
 function closeEditor() {
   editing.value = null;
 }
-
-async function signOut() {
-  await session.logout();
-  await router.replace("/login");
-}
 </script>
 
 <template>
-  <div class="flex min-h-full flex-col">
-    <header
-      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 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="hidden font-semibold sm:inline">{{ config.siteName }}</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">
-          <RouterLink
-            v-if="session.user?.is_admin"
-            to="/settings"
-            class="icon-btn"
-            title="Settings"
-            aria-label="Settings"
-          >
-            <Icon name="settings" />
-          </RouterLink>
-          <span class="hidden text-sm text-neutral-500 sm:inline dark:text-neutral-400">{{
-            session.user?.display_name
-          }}</span>
-          <BaseButton variant="ghost" @click="signOut">
-            <Icon name="logout" />
-            <span class="hidden sm:inline">Sign out</span>
-          </BaseButton>
-        </div>
-      </div>
-    </header>
-
-    <main class="mx-auto w-full max-w-6xl flex-1 px-4 py-6">
-      <QuickAdd v-if="currentView === 'active'" autofocus class="mb-8" />
+  <AppShell>
+    <div class="mx-auto w-full max-w-6xl px-4 py-6">
+      <QuickAdd v-if="isMainBoard" autofocus class="mb-8" />
 
       <div v-if="notes.loading" class="py-24 text-center text-sm text-neutral-400">Loading…</div>
 
@@ -122,7 +62,7 @@ async function signOut() {
       </div>
 
       <template v-else>
-        <template v-if="currentView === 'active'">
+        <template v-if="isMainBoard">
           <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">
@@ -146,10 +86,10 @@ async function signOut() {
           <NoteCard v-for="n in notes.items" :key="n.id" :note="n" @open="openEditor" />
         </div>
       </template>
-    </main>
+    </div>
 
     <template v-if="editing">
       <NoteEditor :note="editing" @close="closeEditor" />
     </template>
-  </div>
+  </AppShell>
 </template>