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
This commit is contained in:
Claude Opus 4.8
@@ -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));
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 };
|
||||
});
|
||||
@@ -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 & 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" />
|
||||
|
||||
Reference in New Issue
Block a user