M2 search: Postgres FTS backend + top search bar + results

- Migration 0005: generated tsvector column (title A + body B) + GIN index on
  notes; GET /api/notes/search?q= (websearch_to_tsquery, ts_rank, ACL-scoped,
  excludes trash), labels merged into results.
- Persistent AppShell layout (parent route + <RouterView> children) so the new
  top search box keeps focus across board/search/label navigation.
- SearchView (debounced live search from the shell → /search?q=, results masonry,
  no-match empty state); BoardView/SearchView render inside the shared shell.

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

frontend/src/views/BoardView.vue

@@ -2,7 +2,6 @@
 import { computed, onMounted, ref, watch } from "vue";
 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";
@@ -50,46 +49,41 @@ function closeEditor() {
 </script>
 
 <template>
-  <AppShell>
-    <div class="mx-auto w-full max-w-6xl px-4 py-6">
-      <QuickAdd v-if="isMainBoard" autofocus class="mb-8" />
+  <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>
+    <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="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">
-              <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>
+    <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-if="editing">
-      <NoteEditor :note="editing" @close="closeEditor" />
+    <template v-else>
+      <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">
+            <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>
-  </AppShell>
+  </div>
+
+  <template v-if="editing">
+    <NoteEditor :note="editing" @close="closeEditor" />
+  </template>
 </template>

frontend/src/views/SearchView.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { computed, ref, watch } from "vue";
+import { useRoute } from "vue-router";
+import { api } from "../api/client";
+import type { Note } from "../stores/notes";
+import NoteCard from "../components/NoteCard.vue";
+import NoteEditor from "../components/NoteEditor.vue";
+
+const route = useRoute();
+
+const results = ref<Note[]>([]);
+const loading = ref(false);
+const editing = ref<Note | null>(null);
+
+const query = computed(() => (typeof route.query.q === "string" ? route.query.q : ""));
+
+async function run() {
+  const q = query.value.trim();
+  if (!q) {
+    results.value = [];
+    return;
+  }
+  loading.value = true;
+  try {
+    const res = await api.get<{ notes: Note[] }>(`/api/notes/search?q=${encodeURIComponent(q)}`);
+    results.value = res.notes;
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(query, run, { immediate: true });
+
+function openEditor(n: Note) {
+  editing.value = n;
+}
+async function closeEditor() {
+  editing.value = null;
+  await run(); // reflect any edits made from a result
+}
+</script>
+
+<template>
+  <div class="mx-auto w-full max-w-6xl px-4 py-6">
+    <p class="mb-4 text-sm text-neutral-500 dark:text-neutral-400">
+      <template v-if="query"
+        >Results for <span class="font-semibold text-neutral-800 dark:text-neutral-200">{{ query }}</span></template
+      >
+      <template v-else>Type in the search box to find your notes.</template>
+    </p>
+
+    <div v-if="loading" class="py-20 text-center text-sm text-neutral-400">Searching…</div>
+
+    <div v-else-if="query && results.length === 0" class="py-20 text-center">
+      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">No matches</h2>
+      <p class="mt-1 text-sm text-neutral-400">Nothing found for "{{ query }}".</p>
+    </div>
+
+    <div v-else class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
+      <NoteCard v-for="n in results" :key="n.id" :note="n" @open="openEditor" />
+    </div>
+  </div>
+
+  <template v-if="editing">
+    <NoteEditor :note="editing" @close="closeEditor" />
+  </template>
+</template>