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/components/AppShell.vue

@@ -5,6 +5,7 @@ import { useSessionStore } from "../stores/session";
 import { useConfigStore } from "../stores/config";
 import { useLabelsStore } from "../stores/labels";
 import { useSavedFiltersStore, type SavedFilter } from "../stores/savedFilters";
+import { useReminderStore } from "../stores/reminders";
 import { useUiStore } from "../stores/ui";
 import CommandPalette from "./CommandPalette.vue";
 import Icon from "./Icon.vue";
@@ -19,6 +20,7 @@ const session = useSessionStore();
 const config = useConfigStore();
 const labels = useLabelsStore();
 const savedFilters = useSavedFiltersStore();
+const reminders = useReminderStore();
 const ui = useUiStore();
 
 async function removeView(f: SavedFilter) {
@@ -153,9 +155,13 @@ function onKeydown(e: KeyboardEvent) {
 onMounted(() => {
   if (!labels.loaded) void labels.load();
   if (!savedFilters.loaded) void savedFilters.load();
+  reminders.start(); // foreground reminder delivery while the app is open
   window.addEventListener("keydown", onKeydown);
 });
-onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
+onBeforeUnmount(() => {
+  reminders.stop();
+  window.removeEventListener("keydown", onKeydown);
+});
 
 const currentLabelId = computed(() => (route.name === "label" ? String(route.params.id) : null));
 

frontend/src/components/NoteEditor.vue

@@ -68,6 +68,7 @@ const draftNote = computed<Note>(() => ({
   archived: false,
   trashed: false,
   remind_at: null,
+  recurrence: null,
   labels: labelList.value,
   items: [],
   attachments: [],
@@ -377,6 +378,17 @@ async function onReminderChange(e: Event) {
   if (!id) return;
   await notes.setReminder(id, fromLocalInput((e.target as HTMLInputElement).value));
 }
+async function onRecurrenceChange(e: Event) {
+  const id = await ensureDraft();
+  if (!id) return;
+  await notes.setRecurrence(id, (e.target as HTMLSelectElement).value || null);
+}
+async function completeReminder() {
+  if (noteId.value) await notes.completeReminder(noteId.value);
+}
+async function snoozeReminder(minutes: number) {
+  if (noteId.value) await notes.snoozeReminder(noteId.value, minutes);
+}
 
 // ---- labels ----
 async function onLabelsChange(next: NoteLabel[]) {
@@ -755,6 +767,34 @@ defineExpose({ open });
           </button>
         </div>
 
+        <div v-if="richEnabled && liveNote.remind_at" class="flex flex-wrap items-center gap-2 pl-6 text-xs">
+          <label class="text-neutral-400">Repeat</label>
+          <select
+            :value="liveNote.recurrence ?? ''"
+            class="rounded-md border border-neutral-300 bg-white px-2 py-1 text-xs text-neutral-700 outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200"
+            @change="onRecurrenceChange"
+          >
+            <option value="">Does not repeat</option>
+            <option value="daily">Daily</option>
+            <option value="weekly">Weekly</option>
+            <option value="monthly">Monthly</option>
+            <option value="yearly">Yearly</option>
+          </select>
+          <button
+            type="button"
+            class="rounded-md border border-neutral-300 px-2 py-1 text-neutral-600 hover:bg-neutral-100 dark:border-neutral-700 dark:text-neutral-300 dark:hover:bg-neutral-800"
+            @click="completeReminder"
+          >
+            Done
+          </button>
+          <button type="button" class="text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200" @click="snoozeReminder(60)">
+            Snooze 1h
+          </button>
+          <button type="button" class="text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-200" @click="snoozeReminder(1440)">
+            1d
+          </button>
+        </div>
+
         <div
           v-if="!inline && !isCreate && (outgoingLinks.length || backlinks.length)"
           class="flex flex-col gap-2 border-t border-neutral-100 pt-2 dark:border-neutral-800"

frontend/src/stores/notes.ts

@@ -77,6 +77,7 @@ export interface Note {
   archived: boolean;
   trashed: boolean;
   remind_at: string | null;
+  recurrence: string | null;
   labels: NoteLabel[];
   items: ChecklistItem[];
   attachments: Attachment[];
@@ -159,7 +160,9 @@ export const useNotesStore = defineStore("notes", () => {
 
   async function mutate(
     id: string,
-    changes: Partial<Pick<Note, "title" | "body" | "color" | "kind" | "pinned" | "archived" | "remind_at">>,
+    changes: Partial<
+      Pick<Note, "title" | "body" | "color" | "kind" | "pinned" | "archived" | "remind_at" | "recurrence">
+    >,
   ): Promise<void> {
     reconcile(await api.patch<Note>(`/api/notes/${id}`, changes));
   }
@@ -173,8 +176,16 @@ export const useNotesStore = defineStore("notes", () => {
   const setColor = (id: string, color: NoteColor) => mutate(id, { color });
   const setKind = (id: string, kind: NoteKind) => mutate(id, { kind });
   const setReminder = (id: string, remindAt: string | null) => mutate(id, { remind_at: remindAt });
+  const setRecurrence = (id: string, recurrence: string | null) => mutate(id, { recurrence });
   const saveEdit = (id: string, changes: { title: string; body: string; color: NoteColor }) => mutate(id, changes);
 
+  async function completeReminder(id: string): Promise<void> {
+    reconcile(await api.post<Note>(`/api/notes/${id}/reminder/complete`));
+  }
+  async function snoozeReminder(id: string, minutes: number): Promise<void> {
+    reconcile(await api.post<Note>(`/api/notes/${id}/reminder/snooze`, { minutes }));
+  }
+
   async function setLabels(id: string, labelIds: string[]): Promise<void> {
     reconcile(await api.put<Note>(`/api/notes/${id}/labels`, { label_ids: labelIds }));
   }
@@ -300,6 +311,9 @@ export const useNotesStore = defineStore("notes", () => {
     setColor,
     setKind,
     setReminder,
+    setRecurrence,
+    completeReminder,
+    snoozeReminder,
     saveEdit,
     setLabels,
     addItem,

frontend/src/stores/reminders.ts

@@ -0,0 +1,70 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { api } from "../api/client";
+import router from "../router";
+import { useUiStore } from "./ui";
+import type { Note } from "./notes";
+
+// Foreground reminder delivery — NO Web Push / service worker (per operator). While
+// the app is open, poll for due reminders and surface each once as a toast (and, if
+// the user opted in, a page-context OS notification). Real background delivery is a
+// native-client concern.
+const POLL_MS = 45_000;
+const RECENT_MS = 15 * 60 * 1000; // on first load, only announce reminders due this recently
+
+export const useReminderStore = defineStore("reminders", () => {
+  const osSupported = typeof Notification !== "undefined";
+  const osEnabled = ref(osSupported && Notification.permission === "granted");
+  // note id → the remind_at we already fired, so each occurrence notifies at most once.
+  const notified = new Map<string, string>();
+  let timer: ReturnType<typeof setInterval> | undefined;
+  let primed = false;
+
+  async function check(): Promise<void> {
+    const ui = useUiStore();
+    let notes: Note[];
+    try {
+      notes = (await api.get<{ notes: Note[] }>("/api/notes/reminders")).notes;
+    } catch {
+      return;
+    }
+    const now = Date.now();
+    for (const n of notes) {
+      if (!n.remind_at) continue;
+      const due = Date.parse(n.remind_at);
+      if (due > now || notified.get(n.id) === n.remind_at) continue;
+      notified.set(n.id, n.remind_at);
+      // Silently prime a stale backlog on first load; only announce recently-due ones.
+      if (!primed && now - due > RECENT_MS) continue;
+      const title = n.display_title || "Reminder";
+      ui.showToast(`⏰ ${title}`, {
+        label: "Open",
+        run: () => void router.push({ path: "/", query: { open: n.id } }),
+      });
+      if (osEnabled.value) {
+        try {
+          new Notification("ThoughtSync reminder", { body: title });
+        } catch {
+          /* notifications unavailable — the toast still fired */
+        }
+      }
+    }
+    primed = true;
+  }
+
+  function start(): void {
+    if (timer) return;
+    void check();
+    timer = setInterval(() => void check(), POLL_MS);
+  }
+  function stop(): void {
+    if (timer) clearInterval(timer);
+    timer = undefined;
+  }
+  async function enableOs(): Promise<void> {
+    if (!osSupported) return;
+    osEnabled.value = (await Notification.requestPermission()) === "granted";
+  }
+
+  return { osSupported, osEnabled, start, stop, enableOs };
+});

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 = (await api.get<{ notes: Note[] }>("/api/notes/reminders")).notes;
-    items.value = res.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">
+  <div class="mx-auto w-full max-w-2xl px-4 py-6">
-    <h1 class="mb-4 text-lg font-semibold">Reminders</h1>
+    <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">
+    <ul v-else class="divide-y divide-neutral-100 dark:divide-neutral-800">
-      <NoteCard v-for="n in items" :key="n.id" :note="n" @open="openEditor" />
+      <li v-for="n in items" :key="n.id" class="flex items-center gap-3 py-3">
-    </div>
+        <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" />