add server settings UI and enforcement

packages/bridge/src/settings/list-editor-modal.js

@@ -0,0 +1,134 @@
+const { Modal, Setting, Notice } = require("obsidian");
+
+// Modal editor for a list of string entries (the proxy host allowlist).
+class ListEditorModal extends Modal {
+  constructor(app, opts) {
+    super(app);
+    this.opts = opts;
+    this.values = [...(opts.values || [])];
+  }
+
+  onOpen() {
+    this.titleEl.setText(this.opts.title);
+
+    if (this.opts.recommended) {
+      new Setting(this.contentEl)
+        .setDesc(this.opts.recommended.note)
+        .addButton((btn) =>
+          btn
+            .setButtonText(
+              this.opts.recommended.buttonText || "Add recommended",
+            )
+            .onClick(() => this.addRecommended()),
+        );
+    }
+
+    this.listEl = this.contentEl.createDiv("ignis-list-editor");
+    this.renderList();
+
+    new Setting(this.contentEl)
+      .setName("Add entry")
+      .addText((text) => {
+        this.input = text;
+        text.setPlaceholder(this.opts.placeholder || "");
+
+        text.inputEl.addEventListener("keydown", (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            this.addCurrent();
+          }
+        });
+      })
+      .addButton((btn) =>
+        btn
+          .setButtonText("Add")
+          .setCta()
+          .onClick(() => this.addCurrent()),
+      );
+  }
+
+  addEntry(entry) {
+    if (this.values.includes(entry)) {
+      return false;
+    }
+
+    this.values.push(entry);
+    return true;
+  }
+
+  addCurrent() {
+    const entry = this.input.getValue().trim();
+
+    if (!entry) {
+      return;
+    }
+
+    if (!this.addEntry(entry)) {
+      new Notice("That entry is already in the list.");
+      return;
+    }
+
+    this.input.setValue("");
+    this.input.inputEl.focus();
+    this.commit();
+    this.renderList();
+  }
+
+  addRecommended() {
+    let added = 0;
+
+    for (const host of this.opts.recommended.hosts) {
+      if (this.addEntry(host)) {
+        added++;
+      }
+    }
+
+    if (added > 0) {
+      this.commit();
+      this.renderList();
+    }
+
+    new Notice(
+      added > 0
+        ? `Added ${added} host${added === 1 ? "" : "s"}.`
+        : "All recommended hosts are already in the list.",
+    );
+  }
+
+  remove(entry) {
+    this.values = this.values.filter((v) => v !== entry);
+    this.commit();
+    this.renderList();
+  }
+
+  renderList() {
+    this.listEl.empty();
+
+    if (this.values.length === 0) {
+      this.listEl.createDiv({
+        text: this.opts.emptyNote,
+        cls: "ignis-list-empty",
+      });
+      return;
+    }
+
+    for (const entry of this.values) {
+      new Setting(this.listEl).setName(entry).addExtraButton((btn) =>
+        btn
+          .setIcon("trash-2")
+          .setTooltip("Remove")
+          .onClick(() => this.remove(entry)),
+      );
+    }
+  }
+
+  commit() {
+    this.opts.onChange([...this.values]);
+  }
+
+  onClose() {
+    this.contentEl.empty();
+  }
+}
+
+module.exports = { ListEditorModal };