refactor: ♻️ Separate settings sections into their own files

src/Settings/BreadcrumbsSettingTab.ts

@@ -0,0 +1,96 @@
+import { App, PluginSettingTab, Setting } from "obsidian";
+import KoFi from "../Components/KoFi.svelte";
+import type BCPlugin from "../main";
+import { addCreateIndexSettings } from "./CreateIndexSettings";
+import { addCSVSettings } from "./CSVSettings";
+import { addDebuggingsSettings } from "./DebuggingSettings";
+import { addDendronSettings } from "./DendronSettings";
+import { addGeneralSettings } from "./GeneralSettings";
+import { addHierarchyNoteSettings } from "./HierarchyNoteSettings";
+import { addHierarchySettings } from "./HierarchySettings";
+import { addMatrixViewSettings } from "./MatrixViewSettings";
+import { addNoSystemSettings } from "./NoSystemSettings";
+import { addRegexNoteSettings } from "./RegexNoteSettings";
+import { addRelationSettings } from "./RelationSettings";
+import { addTagNoteSettings } from "./TagNoteSettings";
+import { addThreadingSettings } from "./ThreadingSettings";
+import { addTrailViewSettings } from "./TrailSettings";
+import { addTreeViewSettings } from "./TreeViewSettings";
+import { addVisModalSettings } from "./VisModalSettings";
+import { addWriteBCsSettings } from "./WriteBCsSettings";
+
+export const fragWithHTML = (html: string) =>
+  createFragment((frag) => (frag.createDiv().innerHTML = html));
+
+export const details = (text: string, parent) =>
+  parent.createEl("details", {}, (d) => d.createEl("summary", { text }));
+
+export const subDetails = (text: string, parent: HTMLDetailsElement) =>
+  parent
+    .createDiv({
+      attr: { style: "padding-left: 10px;" },
+    })
+    .createEl("details", {}, (d) => d.createEl("summary", { text }));
+
+export class BCSettingTab extends PluginSettingTab {
+  plugin: BCPlugin;
+  app: App;
+
+  constructor(app: App, plugin: BCPlugin) {
+    super(app, plugin);
+    this.plugin = plugin;
+    this.app = app;
+  }
+
+  async display(): Promise<void> {
+    const { plugin, containerEl } = this;
+    const { settings } = plugin;
+    containerEl.empty();
+    containerEl.createEl("h2", { text: "Breadcrumbs Settings" });
+
+    addHierarchySettings(plugin, containerEl);
+    addRelationSettings(plugin, containerEl);
+    addGeneralSettings(plugin, containerEl);
+
+    const viewDetails = details("Views", containerEl);
+    addMatrixViewSettings(plugin, viewDetails);
+    addTrailViewSettings(plugin, viewDetails);
+    addVisModalSettings(plugin, viewDetails);
+    addTreeViewSettings(plugin, viewDetails);
+
+    const alternativeHierarchyDetails = details(
+      "Alternative Hierarchies",
+      containerEl
+    );
+
+    new Setting(alternativeHierarchyDetails)
+      .setName("Enable Field Suggestor")
+      .setDesc(
+        fragWithHTML(
+          'Alot of Breadcrumbs features require a metadata (or inline Dataview) field to work. For example, `BC-folder-note`.</br>The Field Suggestor will show an autocomplete menu with all available Breadcrumbs field options when the content you type matches the regex <code>/^BC-.*$/</code>. Basically, just type "BC-" at the start of a line to trigger it.'
+        )
+      )
+      .addToggle((toggle) =>
+        toggle.setValue(settings.fieldSuggestor).onChange(async (value) => {
+          settings.fieldSuggestor = value;
+          await plugin.saveSettings();
+        })
+      );
+
+    addTagNoteSettings(plugin, alternativeHierarchyDetails);
+    addRegexNoteSettings(plugin, alternativeHierarchyDetails);
+    addNoSystemSettings(plugin, alternativeHierarchyDetails);
+    addHierarchyNoteSettings(plugin, alternativeHierarchyDetails);
+    addCSVSettings(plugin, alternativeHierarchyDetails);
+    addDendronSettings(plugin, alternativeHierarchyDetails);
+
+    const cmdsDetails = details("Commands", containerEl);
+    addWriteBCsSettings(plugin, cmdsDetails);
+    addCreateIndexSettings(plugin, cmdsDetails);
+    addThreadingSettings(plugin, cmdsDetails);
+
+    addDebuggingsSettings(plugin, containerEl);
+
+    new KoFi({ target: containerEl });
+  }
+}

src/Settings/CSVSettings.ts

@@ -0,0 +1,22 @@
+import { Setting } from "obsidian";
+import type BCPlugin from "../main";
+import { subDetails } from "./BreadcrumbsSettingTab";
+
+export function addCSVSettings(
+  plugin: BCPlugin,
+  alternativeHierarchyDetails: HTMLDetailsElement
+) {
+  const { settings } = plugin;
+  const csvDetails = subDetails("CSV Notes", alternativeHierarchyDetails);
+
+  new Setting(csvDetails)
+    .setName("CSV Breadcrumb Paths")
+    .setDesc("The file path of a csv files with breadcrumbs information.")
+    .addText((text) => {
+      text.setValue(settings.CSVPaths);
+      text.inputEl.onblur = async () => {
+        settings.CSVPaths = text.inputEl.value;
+        await plugin.saveSettings();
+      };
+    });
+}

src/Settings/CreateIndexSettings.ts

@@ -0,0 +1,35 @@
+import { Setting } from "obsidian";
+import type BCPlugin from "../main";
+import { fragWithHTML, subDetails } from "./BreadcrumbsSettingTab";
+
+export function addCreateIndexSettings(
+  plugin: BCPlugin,
+  cmdsDetails: HTMLDetailsElement
+) {
+  const { settings } = plugin;
+  const createIndexDetails = subDetails("Create Index", cmdsDetails);
+
+  new Setting(createIndexDetails)
+    .setName("Add wiklink brackets")
+    .setDesc(
+      fragWithHTML(
+        "When creating an index, should it wrap the note name in wikilinks <code>[[]]</code> or not.\n✅ = yes, ❌ = no."
+      )
+    )
+    .addToggle((toggle) =>
+      toggle.setValue(settings.wikilinkIndex).onChange(async (value) => {
+        settings.wikilinkIndex = value;
+        await plugin.saveSettings();
+      })
+    );
+
+  new Setting(createIndexDetails)
+    .setName("Show aliases of notes in index")
+    .setDesc("Show the aliases of each note in brackets.\n✅ = yes, ❌ = no.")
+    .addToggle((toggle) =>
+      toggle.setValue(settings.aliasesInIndex).onChange(async (value) => {
+        settings.aliasesInIndex = value;
+        await plugin.saveSettings();
+      })
+    );
+}

src/Settings/DebuggingSettings.ts

@@ -0,0 +1,33 @@
+import log from "loglevel";
+import { Setting } from "obsidian";
+import type { DebugLevel } from "../interfaces";
+import type BCPlugin from "../main";
+import { details, fragWithHTML } from "./BreadcrumbsSettingTab";
+
+export function addDebuggingsSettings(
+  plugin: BCPlugin,
+  containerEl: HTMLElement
+) {
+  const { settings } = plugin;
+  const debugDetails = details("Debugging", containerEl);
+
+  new Setting(debugDetails)
+    .setName("Debug Mode")
+    .setDesc(
+      fragWithHTML(
+        "Set the minimum level of debug messages to console log. If you choose <code>TRACE</code>, then everything will be logged. If you choose <code>ERROR</code>, then only the most necessary issues will be logged. <code>SILENT</code> will turn off all logs."
+      )
+    )
+    .addDropdown((dd) => {
+      Object.keys(log.levels).forEach((key) => dd.addOption(key, key));
+      dd.setValue(settings.debugMode).onChange(async (value: DebugLevel) => {
+        log.setLevel(value);
+        settings.debugMode = value;
+        await plugin.saveSettings();
+      });
+    });
+
+  debugDetails.createEl("button", { text: "Console log settings" }, (el) => {
+    el.addEventListener("click", () => console.log(settings));
+  });
+}

src/Settings/DendronSettings.ts

@@ -0,0 +1,84 @@
+import { DropdownComponent, Notice, Setting } from "obsidian";
+import { getFields } from "../sharedFunctions";
+import { DEFAULT_SETTINGS, MATRIX_VIEW } from "../constants";
+import type BCPlugin from "../main";
+import { fragWithHTML, subDetails } from "./BreadcrumbsSettingTab";
+
+export function addDendronSettings(
+  plugin: BCPlugin,
+  alternativeHierarchyDetails: HTMLDetailsElement
+) {
+  const { settings } = plugin;
+  const { userHiers } = settings;
+  const fields = getFields(userHiers);
+  const dendronDetails = subDetails(
+    "Dendron Notes",
+    alternativeHierarchyDetails
+  );
+
+  new Setting(dendronDetails)
+    .setName("Add Dendron notes to graph")
+    .setDesc(
+      fragWithHTML(
+        "Dendron notes create a hierarchy using note names.</br><code>nmath.algebra</code> is a note about algebra, whose parent is <code>math</code>.</br><code>nmath.calculus.limits</code> is a note about limits whose parent is the note <code>math.calculus</code>, the parent of which is <code>math</code>."
+      )
+    )
+    .addToggle((toggle) =>
+      toggle.setValue(settings.addDendronNotes).onChange(async (value) => {
+        settings.addDendronNotes = value;
+        await plugin.saveSettings();
+      })
+    );
+  new Setting(dendronDetails)
+    .setName("Dendron note delimiter")
+    .setDesc(
+      fragWithHTML(
+        "If you choose to use Dendron notes (setting above), which delimiter should Breadcrumbs look for? The default is <code>.</code>."
+      )
+    )
+    .addText((text) => {
+      text.setPlaceholder("Delimiter").setValue(settings.dendronNoteDelimiter);
+
+      text.inputEl.onblur = async () => {
+        const value = text.getValue();
+        if (value) {
+          settings.dendronNoteDelimiter = value;
+          await plugin.saveSettings();
+        } else {
+          new Notice(`The delimiter can't be blank`);
+          settings.dendronNoteDelimiter = DEFAULT_SETTINGS.dendronNoteDelimiter;
+          await plugin.saveSettings();
+        }
+      };
+    });
+
+  new Setting(dendronDetails)
+    .setName("Trim Dendron Note Names")
+    .setDesc(
+      fragWithHTML(
+        "When displaying a dendron note name, should it be trimmed to only show the last item in the chain?</br>e.g. <code>A.B.C</code> would be trimmed to only display <code>C</code>."
+      )
+    )
+    .addToggle((toggle) =>
+      toggle.setValue(settings.trimDendronNotes).onChange(async (value) => {
+        settings.trimDendronNotes = value;
+        await plugin.saveSettings();
+        await plugin.getActiveTYPEView(MATRIX_VIEW).draw();
+      })
+    );
+
+  new Setting(dendronDetails)
+    .setName("Dendron Note Field")
+    .setDesc("Which field should Breadcrumbs use for Dendron notes?")
+    .addDropdown((cb: DropdownComponent) => {
+      fields.forEach((field) => {
+        cb.addOption(field, field);
+      });
+      cb.setValue(settings.dendronNoteField);
+
+      cb.onChange(async (value) => {
+        settings.dendronNoteField = value;
+        await plugin.saveSettings();
+      });
+    });
+}