bvandeusenandClaude Opus 4.8
590d3ff2f6
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
104 lines
4.0 KiB
Vue
104 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
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, loading, error, load } = useNoteList(() => reminders.fetchReminders(), "Couldn't load reminders.");
|
|
|
|
const { editing, open: openEditor, close: closeEditor, navigate: onNavigate } = useNoteEditor({
|
|
list: () => items.value,
|
|
onClose: load,
|
|
});
|
|
|
|
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-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>
|
|
|
|
<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" />
|
|
</template>
|
|
</div>
|
|
</template>
|