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

@@ -1,42 +1,23 @@
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { api } from "../api/client";
+import { onMounted } from "vue";
 import { useNotesStore, type Note } from "../stores/notes";
 import { useReminderStore } from "../stores/reminders";
 import { formatReminder, isOverdue } from "../notes/datetime";
+import { useNoteList } from "../composables/useNoteList";
+import { useNoteEditor } from "../composables/useNoteEditor";
+import AsyncState from "../components/AsyncState.vue";
+import EmptyState from "../components/EmptyState.vue";
 import NoteEditor from "../components/NoteEditor.vue";
 
 const notes = useNotesStore();
 const reminders = useReminderStore();
-const items = ref<Note[]>([]);
-const loading = ref(true);
-const error = ref("");
-const editing = ref<Note | null>(null);
 
-async function load() {
-  loading.value = true;
-  error.value = "";
-  try {
-    items.value = (await api.get<{ notes: Note[] }>("/api/notes/reminders")).notes;
-  } catch (e) {
-    error.value = (e as { error?: string }).error ?? "Couldn't load reminders.";
-    items.value = [];
-  } finally {
-    loading.value = false;
-  }
-}
+const { items, loading, error, load } = useNoteList(() => reminders.fetchReminders(), "Couldn't load reminders.");
 
-function openEditor(n: Note) {
-  editing.value = n;
-}
-async function closeEditor() {
-  editing.value = null;
-  await load();
-}
-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 { editing, open: openEditor, close: closeEditor, navigate: onNavigate } = useNoteEditor({
+  list: () => items.value,
+  onClose: load,
+});
 
 async function done(n: Note) {
   await notes.completeReminder(n.id);
@@ -68,64 +49,52 @@ onMounted(load);
       Due reminders pop up while ThoughtSync is open. Background alerts arrive with the desktop &amp; mobile apps.
     </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 reminders</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">No reminders</h2>
-      <p class="mt-1 text-sm text-neutral-400">Set a reminder on a note (in its editor) to see it here.</p>
-    </div>
-
-    <ul v-else class="divide-y divide-neutral-100 dark:divide-neutral-800">
-      <li v-for="n in items" :key="n.id" class="flex items-center gap-3 py-3">
-        <button
-          type="button"
-          class="min-w-0 flex-1 rounded text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
-          @click="openEditor(n)"
-        >
-          <p class="truncate text-sm font-medium text-neutral-800 dark:text-neutral-100">
-            {{ n.display_title || "Untitled" }}
-          </p>
-          <p class="text-xs" :class="isOverdue(n.remind_at) ? 'text-red-500 dark:text-red-400' : 'text-neutral-400'">
-            {{ formatReminder(n.remind_at) }}<span v-if="n.recurrence"> · ↻ {{ n.recurrence }}</span>
-          </p>
-        </button>
-        <button
-          type="button"
-          class="shrink-0 rounded-md border border-neutral-300 px-2 py-1 text-xs text-neutral-600 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
-          @click="done(n)"
-        >
-          Done
-        </button>
-        <button
-          type="button"
-          class="shrink-0 text-xs text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
-          title="Snooze 1 hour"
-          @click="snooze(n, 60)"
-        >
-          1h
-        </button>
-        <button
-          type="button"
-          class="shrink-0 text-xs text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
-          title="Snooze 1 day"
-          @click="snooze(n, 1440)"
-        >
-          1d
-        </button>
-      </li>
-    </ul>
+    <AsyncState :loading="loading" :error="error || undefined" error-title="Couldn't load reminders" @retry="load">
+      <EmptyState
+        v-if="items.length === 0"
+        title="No reminders"
+        subtitle="Set a reminder on a note (in its editor) to see it here."
+      />
+      <ul v-else class="divide-y divide-neutral-100 dark:divide-neutral-800">
+        <li v-for="n in items" :key="n.id" class="flex items-center gap-3 py-3">
+          <button
+            type="button"
+            class="min-w-0 flex-1 rounded text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
+            @click="openEditor(n)"
+          >
+            <p class="truncate text-sm font-medium text-neutral-800 dark:text-neutral-100">
+              {{ n.display_title || "Untitled" }}
+            </p>
+            <p class="text-xs" :class="isOverdue(n.remind_at) ? 'text-red-500 dark:text-red-400' : 'text-neutral-400'">
+              {{ formatReminder(n.remind_at) }}<span v-if="n.recurrence"> · ↻ {{ n.recurrence }}</span>
+            </p>
+          </button>
+          <button
+            type="button"
+            class="shrink-0 rounded-md border border-neutral-300 px-2 py-1 text-xs text-neutral-600 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
+            @click="done(n)"
+          >
+            Done
+          </button>
+          <button
+            type="button"
+            class="shrink-0 text-xs text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
+            title="Snooze 1 hour"
+            @click="snooze(n, 60)"
+          >
+            1h
+          </button>
+          <button
+            type="button"
+            class="shrink-0 text-xs text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200"
+            title="Snooze 1 day"
+            @click="snooze(n, 1440)"
+          >
+            1d
+          </button>
+        </li>
+      </ul>
+    </AsyncState>
 
     <template v-if="editing">
       <NoteEditor :note="editing" @close="closeEditor" @navigate="onNavigate" />