M6 1908b: foreground reminder delivery + recurrence/snooze UI (frontend)

Completes 1908 without Web Push. While the app is open, due reminders now
actually surface; recurring reminders + snooze/done are manageable.

- reminders store (singleton): polls /api/notes/reminders every 45s while
  the app is open; each due reminder fires ONCE as a toast (with an "Open"
  action) and, if the user opts in, a page-context OS Notification — no
  service worker, no PWA. Silently primes a stale backlog on first load;
  only announces recently-due ones. AppShell starts/stops it.
- Editor reminder section: a Repeat picker (Does not repeat / Daily /
  Weekly / Monthly / Yearly) + Done (advances a recurring reminder / clears
  a one-off) + Snooze 1h/1d, shown when a reminder is set.
- RemindersView rebuilt as a chronological list: per row a due time +
  recurrence badge + Done / 1h / 1d, click to open; plus an "Enable
  notifications" opt-in and a note that background alerts come with native.
- Note type gains `recurrence`; notes store setRecurrence /
  completeReminder / snoozeReminder.

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

@@ -2,10 +2,12 @@
 import { onMounted, ref } from "vue";
 import { api } from "../api/client";
 import { useNotesStore, type Note } from "../stores/notes";
-import NoteCard from "../components/NoteCard.vue";
+import { useReminderStore } from "../stores/reminders";
+import { formatReminder, isOverdue } from "../notes/datetime";
 import NoteEditor from "../components/NoteEditor.vue";
 
 const notes = useNotesStore();
+const reminders = useReminderStore();
 const items = ref<Note[]>([]);
 const loading = ref(true);
 const error = ref("");
@@ -15,8 +17,7 @@ async function load() {
   loading.value = true;
   error.value = "";
   try {
-    const res = await api.get<{ notes: Note[] }>("/api/notes/reminders");
-    items.value = res.notes;
+    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 = [];
@@ -37,12 +38,35 @@ async function onNavigate(id: string) {
   editing.value = found ?? (await notes.fetchOne(id));
 }
 
+async function done(n: Note) {
+  await notes.completeReminder(n.id);
+  await load();
+}
+async function snooze(n: Note, minutes: number) {
+  await notes.snoozeReminder(n.id, minutes);
+  await load();
+}
+
 onMounted(load);
 </script>
 
 <template>
-  <div class="mx-auto w-full max-w-6xl px-4 py-6">
-    <h1 class="mb-4 text-lg font-semibold">Reminders</h1>
+  <div class="mx-auto w-full max-w-2xl px-4 py-6">
+    <div class="mb-2 flex items-center justify-between gap-3">
+      <h1 class="text-lg font-semibold">Reminders</h1>
+      <button
+        v-if="reminders.osSupported && !reminders.osEnabled"
+        type="button"
+        class="rounded-md border border-neutral-300 px-2.5 py-1 text-xs 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="reminders.enableOs()"
+      >
+        Enable notifications
+      </button>
+      <span v-else-if="reminders.osEnabled" class="text-xs text-neutral-400">Notifications on ✓</span>
+    </div>
+    <p class="mb-5 text-xs text-neutral-400">
+      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>
 
@@ -63,9 +87,45 @@ onMounted(load);
       <p class="mt-1 text-sm text-neutral-400">Set a reminder on a note (in its editor) to see it here.</p>
     </div>
 
-    <div v-else class="columns-1 gap-4 sm:columns-2 lg:columns-3 xl:columns-4">
-      <NoteCard v-for="n in items" :key="n.id" :note="n" @open="openEditor" />
-    </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>
 
     <template v-if="editing">
       <NoteEditor :note="editing" @close="closeEditor" @navigate="onNavigate" />