M2 search: Postgres FTS backend + top search bar + results
CI & Build / Python lint (push) Successful in 2s
CI & Build / TypeScript typecheck (push) Successful in 5s
CI & Build / Python tests (push) Successful in 8s
CI & Build / Build & push image (push) Successful in 31s

- 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
This commit is contained in:
2026-07-19 22:03:19 -04:00
co-authored by Claude Opus 4.8
parent 2046600a95
commit ffc008bf4d
7 changed files with 216 additions and 67 deletions
+67
View File
@@ -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>