obsidian-notif/src/reminders/ReminderListModal.ts

import { App, Modal, Setting } from "obsidian";
import { ReminderStore } from "./ReminderStore";
import { formatDateTime } from "../utils/date";

export class ReminderListModal extends Modal {
  constructor(app: App, private store: ReminderStore, private showCompleted = false) {
    super(app);
  }

  onOpen(): void {
    this.render();
  }

  private render(): void {
    const { contentEl } = this;
    contentEl.empty();
    contentEl.createEl("h2", { text: this.showCompleted ? "All reminders" : "Active reminders" });

    new Setting(contentEl)
      .addButton((button) => button
        .setButtonText(this.showCompleted ? "Show active only" : "Show all")
        .onClick(() => {
          this.showCompleted = !this.showCompleted;
          this.render();
        }));

    const reminders = this.showCompleted
      ? this.store.getAll()
      : this.store.getAll().filter((reminder) => !reminder.completed && reminder.status !== "cancelled" && reminder.status !== "sent" && reminder.status !== "done");
    if (!reminders.length) {
      contentEl.createEl("p", { text: this.showCompleted ? "No reminders." : "No active reminders." });
      return;
    }

    const list = contentEl.createDiv({ cls: "reminder-notifier-list" });
    for (const reminder of reminders) {
      const item = list.createDiv({ cls: "reminder-notifier-item" });
      item.createDiv({ cls: "reminder-notifier-item-title", text: reminder.title });
      item.createDiv({
        cls: "reminder-notifier-item-meta",
        text: `${formatDateTime(reminder.dueAt)} - ${reminder.status} - ${reminder.channels.join(", ") || "all enabled"}`,
      });
      if (reminder.sourceFile) {
        item.createDiv({
          cls: "reminder-notifier-item-meta",
          text: `${reminder.sourceFile}${reminder.sourceLine ? `:${reminder.sourceLine}` : ""}`,
        });
      }
      if (reminder.lastError) {
        item.createDiv({ cls: "reminder-notifier-item-meta", text: `Last error: ${reminder.lastError}` });
      }

      const actions = item.createDiv({ cls: "reminder-notifier-actions" });
      new Setting(actions)
        .addButton((button) => button
          .setButtonText("Snooze 15m")
          .onClick(async () => {
            await this.store.snooze(reminder.id, 15);
            this.render();
          }))
        .addButton((button) => button
          .setButtonText("Done")
          .onClick(async () => {
            await this.store.complete(reminder.id);
            this.render();
          }))
        .addButton((button) => button
          .setButtonText("Delete")
          .onClick(async () => {
            await this.store.remove(reminder.id);
            this.render();
          }));
    }
  }
}