inkwell/frontend/src/views/RemindersView.vue

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { api } from "../api/client";
import { useNotesStore, type Note } from "../stores/notes";
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("");
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;
  }
}

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));
}

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 &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>

    <template v-if="editing">
      <NoteEditor :note="editing" @close="closeEditor" @navigate="onNavigate" />
    </template>
  </div>
</template>