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/TimelineView.vue

@@ -1,18 +1,17 @@
 <script setup lang="ts">
 import { computed, onMounted, ref, watch } from "vue";
 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";
 
 // The "find by WHEN" recall lens: your notes grouped by when you captured them,
 // newest first, with an optional date range. A distinct recall axis from search /
 // labels — memory is often temporal even when the content is fuzzy.
-const notes = useNotesStore();
-const items = ref<Note[]>([]);
-const loading = ref(true);
-const error = ref("");
-const editing = ref<Note | null>(null);
 
 // Optional local date-range filter (YYYY-MM-DD from <input type="date">).
 const fromDate = ref("");
@@ -39,19 +38,15 @@ function buildQuery(): string {
   return params.toString();
 }
 
-async function load() {
-  loading.value = true;
-  error.value = "";
-  try {
-    const res = await api.get<{ notes: Note[] }>(`/api/notes?${buildQuery()}`);
-    items.value = res.notes;
-  } catch (e) {
-    error.value = (e as { error?: string }).error ?? "Couldn't load the timeline.";
-    items.value = [];
-  } finally {
-    loading.value = false;
-  }
-}
+const { items, loading, error, load } = useNoteList(
+  async () => (await api.get<{ notes: Note[] }>(`/api/notes?${buildQuery()}`)).notes,
+  "Couldn't load the timeline.",
+);
+
+const { editing, open: openEditor, close: closeEditor, navigate: onNavigate } = useNoteEditor({
+  list: () => items.value,
+  onClose: load, // reflect any edits made from a card
+});
 
 function clearRange() {
   fromDate.value = "";
@@ -100,17 +95,11 @@ const groups = computed<Group[]>(() => {
   return out;
 });
 
-function openEditor(n: Note) {
-  editing.value = n;
-}
-async function closeEditor() {
-  editing.value = null;
-  await load(); // reflect any edits made from a card
-}
-async function onNavigate(id: string) {
-  const found = items.value.find((n) => n.id === id) ?? notes.items.find((n) => n.id === id);
-  editing.value = found ?? (await notes.fetchOne(id));
-}
+const empty = computed(() =>
+  hasRange.value
+    ? { title: "No notes in this range", subtitle: "Try widening the date range, or clear it to see everything." }
+    : { title: "No notes yet", subtitle: "Capture a thought on the board and it'll appear here, dated." },
+);
 
 onMounted(load);
 </script>
@@ -154,41 +143,22 @@ onMounted(load);
       Your notes by when you captured them{{ hasRange ? " — filtered to the chosen dates" : "" }}.
     </p>
 
-    <div v-if="loading" class="py-24 text-center text-sm text-neutral-400">Loading…</div>
-
-    <div v-else-if="error" class="py-24 text-center">
-      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">Couldn't load the timeline</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="load"
-      >
-        Retry
-      </button>
-    </div>
-
-    <div v-else-if="items.length === 0" class="py-24 text-center">
-      <h2 class="text-lg font-semibold text-neutral-700 dark:text-neutral-200">
-        {{ hasRange ? "No notes in this range" : "No notes yet" }}
-      </h2>
-      <p class="mt-1 text-sm text-neutral-400">
-        {{
-          hasRange
-            ? "Try widening the date range, or clear it to see everything."
-            : "Capture a thought on the board and it'll appear here, dated."
-        }}
-      </p>
-    </div>
-
-    <div v-else class="flex flex-col gap-8">
-      <section v-for="group in groups" :key="group.key">
-        <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-neutral-400">{{ group.label }}</h2>
-        <div class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
-          <NoteCard v-for="n in group.notes" :key="n.id" :note="n" @open="openEditor" />
-        </div>
-      </section>
-    </div>
+    <AsyncState
+      :loading="loading"
+      :error="error || undefined"
+      error-title="Couldn't load the timeline"
+      @retry="load"
+    >
+      <EmptyState v-if="items.length === 0" :title="empty.title" :subtitle="empty.subtitle" />
+      <div v-else class="flex flex-col gap-8">
+        <section v-for="group in groups" :key="group.key">
+          <h2 class="mb-3 text-xs font-semibold uppercase tracking-wide text-neutral-400">{{ group.label }}</h2>
+          <div class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
+            <NoteCard v-for="n in group.notes" :key="n.id" :note="n" @open="openEditor" />
+          </div>
+        </section>
+      </div>
+    </AsyncState>
 
     <template v-if="editing">
       <NoteEditor :note="editing" @close="closeEditor" @navigate="onNavigate" />