feat: add command palette modal for SMILES input

Opens a floating modal via Ctrl+P → "Otwórz podgląd molekuły".
Live preview renders as you type (300ms debounce) using the same
RDKit renderer. Input auto-focused for instant paste.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: mikolajrura

src/main.ts

@@ -1,6 +1,7 @@
 import { Plugin, MarkdownPostProcessorContext } from "obsidian";
 import { loadRDKit, RDKitModule } from "./rdkit-loader";
 import { renderMolecule } from "./molecule-renderer";
+import { MoleculeModal } from "./molecule-modal";
 
 export default class MoleculeViewerPlugin extends Plugin {
   private rdkit: RDKitModule | null = null;
@@ -16,6 +17,15 @@ export default class MoleculeViewerPlugin extends Plugin {
       return mod;
     });
 
+    this.addCommand({
+      id: "open-molecule-viewer",
+      name: "Otwórz podgląd molekuły (SMILES)",
+      callback: async () => {
+        if (!this.rdkit) await this.rdkitLoading;
+        new MoleculeModal(this.app, this.rdkit!).open();
+      },
+    });
+
     this.registerMarkdownCodeBlockProcessor(
       "smiles",
       this.processBlock.bind(this)

src/molecule-modal.ts

@@ -0,0 +1,43 @@
+import { App, Modal } from "obsidian";
+import { RDKitModule } from "./rdkit-loader";
+import { renderMolecule } from "./molecule-renderer";
+
+export class MoleculeModal extends Modal {
+  private rdkit: RDKitModule;
+  private debounceTimer: ReturnType<typeof setTimeout> | null = null;
+
+  constructor(app: App, rdkit: RDKitModule) {
+    super(app);
+    this.rdkit = rdkit;
+  }
+
+  onOpen() {
+    const { contentEl } = this;
+    contentEl.addClass("mol-modal");
+
+    const input = contentEl.createEl("input", {
+      type: "text",
+      placeholder: "Wklej SMILES…",
+      cls: "mol-modal-input",
+    });
+
+    const preview = contentEl.createDiv({ cls: "mol-modal-preview" });
+
+    input.addEventListener("input", () => {
+      if (this.debounceTimer) clearTimeout(this.debounceTimer);
+      this.debounceTimer = setTimeout(() => {
+        const smiles = input.value.trim();
+        if (smiles) renderMolecule(smiles, preview, this.rdkit);
+        else preview.empty();
+      }, 300);
+    });
+
+    // Focus immediately so user can paste right away
+    input.focus();
+  }
+
+  onClose() {
+    if (this.debounceTimer) clearTimeout(this.debounceTimer);
+    this.contentEl.empty();
+  }
+}

styles.css

@@ -1,5 +1,32 @@
 /* Molecule Viewer Plugin — dark theme */
 
+/* ── Command palette modal ── */
+.mol-modal {
+  padding: 0;
+}
+
+.mol-modal-input {
+  width: 100%;
+  background: #111;
+  border: 1px solid #333;
+  border-radius: 6px;
+  color: #ddd;
+  font-family: var(--font-monospace);
+  font-size: 14px;
+  padding: 8px 12px;
+  box-sizing: border-box;
+  outline: none;
+  margin-bottom: 12px;
+}
+
+.mol-modal-input:focus {
+  border-color: #555;
+}
+
+.mol-modal-preview {
+  min-height: 200px;
+}
+
 .mol-container {
   background: #000000;
   border-radius: 8px;