date-calculator/src/settings-tab.ts

import { App, PluginSettingTab, Setting } from "obsidian";
import type DateCalcPlugin from "../main";

const README_URL = "https://gitea.mithrilforge.dev/olivier/date-calculator";

export class DateCalcSettingTab extends PluginSettingTab {
  constructor(app: App, private plugin: DateCalcPlugin) {
    super(app, plugin);
  }

  display(): void {
    const { containerEl } = this;
    containerEl.empty();

    containerEl.createEl("h2", { text: "Date Calc" });

    const docsDiv = containerEl.createDiv({
      cls: "setting-item-description date-calc-settings-docs",
    });
    docsDiv.createEl("a", { text: "📖 Full syntax reference (README)", href: README_URL });

    new Setting(containerEl)
      .setName("Debug logging")
      .setDesc("Logs decoration activity to the console.")
      .addToggle((t) =>
        t.setValue(this.plugin.settings.debug).onChange(async (v) => {
          this.plugin.settings.debug = v;
          await this.plugin.saveData(this.plugin.settings);
        })
      );

    new Setting(containerEl)
      .setName("Hide result while cursor inside")
      .setDesc("Prevents the widget from showing while you edit inline/fenced code.")
      .addToggle((t) =>
        t.setValue(this.plugin.settings.hideResultWhileCursorInside).onChange(async (v) => {
          this.plugin.settings.hideResultWhileCursorInside = v;
          await this.plugin.saveData(this.plugin.settings);
        })
      );

    new Setting(containerEl)
      .setName("Verbose output")
      .setDesc(
        "When enabled, show longer/wordier messages. Can be overridden per-calculation with verbose=true/false."
      )
      .addToggle((t) =>
        t.setValue(this.plugin.settings.verbose).onChange(async (v) => {
          this.plugin.settings.verbose = v;
          await this.plugin.saveData(this.plugin.settings);
        })
      );

    containerEl.createEl("h3", { text: "Syntax at a glance" });
    const tldr = containerEl.createDiv({ cls: "date-calc-examples" });

    tldr.createEl("p", {
      text: "Use `date-calc: ...` inline, or a fenced ```date-calc block with type: set explicitly (or inferred from which fields you give).",
    });

    // Types table
    const typesList = tldr.createEl("ul");
    const addType = (name: string, aliases: string, desc: string, fields: string) => {
      const li = typesList.createEl("li");
      li.createEl("strong", { text: name });
      li.appendText(` (${aliases}) — ${desc} `);
      li.createEl("br");
      li.createEl("code", { text: fields });
    };
    addType(
      "birthday", "bday, age",
      "age + days until next birthday.",
      "birthday/birthdate/date, label"
    );
    addType(
      "countdown", "until, remaining",
      "time until a date, always from now.",
      "to/until/date, label"
    );
    addType(
      "since", "elapsed",
      "time since a date, always from now.",
      "since/from/date"
    );
    addType(
      "diff", "difference",
      "time between two fixed dates (neither has to be now).",
      "from/start, to/end"
    );

    tldr.createEl("h4", { text: "Relative dates" });
    tldr.createEl("p", {
      text: "today, now, tomorrow, yesterday, or an offset like +7d / -3mo / +2w (always relative to now).",
    });

    tldr.createEl("h4", { text: "Frontmatter fallback" });
    tldr.createEl("p", {
      text: "Every type reads its date(s) from frontmatter if not given inline: birthday/birthdate, to/deadline, since/created, from/start + to/end.",
    });

    tldr.createEl("h4", { text: "Examples" });
    const examplesList = tldr.createEl("ul");
    examplesList.createEl("li").createEl("code", { text: "date-calc: birthday=1992-08-16" });
    examplesList.createEl("li").createEl("code", { text: "date-calc: to=2026-12-31 label=\"New Year:\"" });
    examplesList.createEl("li").createEl("code", { text: "date-calc: since=2024-01-01" });
    examplesList.createEl("li").createEl("code", { text: "date-calc: from=2024-01-01 to=today" });

    examplesList
      .createEl("li")
      .createEl("pre", { cls: "date-calc-example-block" })
      .setText("```date-calc\ntype: countdown\nto: +30d\nlabel: \"Sprint:\"\nverbose: true\n```");

    const fullDocs = tldr.createEl("p");
    fullDocs.appendText("Full field reference, custom styling, and more examples: ");
    fullDocs.createEl("a", { text: "README on Gitea", href: README_URL });
    fullDocs.appendText(".");
  }
}