M9 S3 (frontend): recall views adopt useNoteList + AsyncState/EmptyState

The Search / Timeline / Reminders views each hand-rolled the same
items+loading+error scaffold, retry button, and editor-host glue.

- useNoteList(fetcher, fallbackError) (new): the load-a-note-list scaffold
  (items/loading/error + a load() that never leaves a half-state). Views
  supply just the fetcher; the refs drive <AsyncState>.
- SearchView / TimelineView / RemindersView: adopt useNoteList + useNoteEditor
  + <AsyncState>/<EmptyState>; drop the local list/loading/error refs, the
  duplicated retry blocks, and the notes.items-shadowing navigate glue.
- GraphView: editor host now via useNoteEditor (openNode/closeEditor/onNavigate
  collapse to navigate); loading/error via <AsyncState>. Its two empty states
  keep inline markup/buttons, so they stay custom (not forced into EmptyState).
- reminders store: fetchReminders() is the single owner of /api/notes/reminders;
  both the background poll (check) and RemindersView read through it.

Frontend-only; CI vue-tsc is the type gate (no local typecheck, rule 10).

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

frontend/src/views/SearchView.vue

@@ -1,58 +1,31 @@
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, watch } from "vue";
 import { useRoute } from "vue-router";
 import { api } from "../api/client";
-import { useNotesStore, type Note } from "../stores/notes";
+import { type Note } from "../stores/notes";
+import { useNoteList } from "../composables/useNoteList";
+import { useNoteEditor } from "../composables/useNoteEditor";
+import AsyncState from "../components/AsyncState.vue";
+import EmptyState from "../components/EmptyState.vue";
 import NoteCard from "../components/NoteCard.vue";
 import NoteEditor from "../components/NoteEditor.vue";
 
 const route = useRoute();
-const notes = useNotesStore();
-
-const results = ref<Note[]>([]);
-const loading = ref(false);
-const error = ref("");
-const editing = ref<Note | null>(null);
-
 const query = computed(() => (typeof route.query.q === "string" ? route.query.q : ""));
+const noMatchSubtitle = computed(() => `Nothing found for "${query.value}".`);
 
-async function run() {
+const { items: results, loading, error, load: run } = useNoteList(async () => {
   const q = query.value.trim();
-  if (!q) {
-    results.value = [];
-    return;
-  }
-  loading.value = true;
-  error.value = "";
-  try {
-    const res = await api.get<{ notes: Note[] }>(`/api/notes/search?q=${encodeURIComponent(q)}`);
-    results.value = res.notes;
-  } catch (e) {
-    error.value = (e as { error?: string }).error ?? "Search failed.";
-    results.value = [];
-  } finally {
-    loading.value = false;
-  }
-}
+  if (!q) return [];
+  return (await api.get<{ notes: Note[] }>(`/api/notes/search?q=${encodeURIComponent(q)}`)).notes;
+}, "Search failed.");
+
+const { editing, open: openEditor, close: closeEditor, navigate: onNavigate } = useNoteEditor({
+  list: () => results.value,
+  onClose: run, // reflect any edits made from a result
+});
 
 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
-}
-async function onNavigate(id: string) {
-  const found = results.value.find((n) => n.id === id);
-  if (found) {
-    editing.value = found;
-    return;
-  }
-  const fetched = await notes.fetchOne(id);
-  if (fetched) editing.value = fetched;
-}
 </script>
 
 <template>
@@ -64,28 +37,12 @@ async function onNavigate(id: string) {
       <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="error" class="py-20 text-center">
-      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">Couldn't search</h2>
-      <p class="mt-1 text-sm text-neutral-400">{{ error }}</p>
-      <button
-        type="button"
-        class="mt-3 rounded-md border border-neutral-300 px-3 py-1.5 text-sm hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:hover:bg-neutral-800"
-        @click="run"
-      >
-        Retry
-      </button>
-    </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>
+    <AsyncState :loading="loading" :error="error || undefined" error-title="Couldn't search" @retry="run">
+      <EmptyState v-if="query && results.length === 0" title="No matches" :subtitle="noMatchSubtitle" />
+      <div v-else-if="results.length" 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>
+    </AsyncState>
   </div>
 
   <template v-if="editing">