From 0f20a17cb4c4d18551d63337ff3deed23defc952 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Tue, 20 May 2025 11:36:57 -0400
Subject: [PATCH 1/5] test hiding fm setting

---
 .../src/components/FrontmatterSettings.tsx    | 107 ++++++++++++++++++
 apps/obsidian/src/components/Settings.tsx     |  11 ++
 2 files changed, 118 insertions(+)
 create mode 100644 apps/obsidian/src/components/FrontmatterSettings.tsx

diff --git a/apps/obsidian/src/components/FrontmatterSettings.tsx b/apps/obsidian/src/components/FrontmatterSettings.tsx
new file mode 100644
index 000000000..507dc7428
--- /dev/null
+++ b/apps/obsidian/src/components/FrontmatterSettings.tsx
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { usePlugin } from "./PluginContext";
+import { Notice } from "obsidian";
+
+const FrontmatterSettings = () => {
+  const plugin = usePlugin();
+  const [hiddenKeys, setHiddenKeys] = useState(
+    () => plugin.settings.hiddenFrontmatterKeys || [],
+  );
+  const [newKey, setNewKey] = useState("");
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const handleAddKey = () => {
+    if (!newKey.trim()) return;
+
+    if (hiddenKeys.includes(newKey.trim())) {
+      new Notice(`Key "${newKey}" is already in the list`);
+      return;
+    }
+
+    const updatedKeys = [...hiddenKeys, newKey.trim()];
+    setHiddenKeys(updatedKeys);
+    setNewKey("");
+    setHasUnsavedChanges(true);
+  };
+
+  const handleRemoveKey = (keyToRemove: string) => {
+    const updatedKeys = hiddenKeys.filter((key) => key !== keyToRemove);
+    setHiddenKeys(updatedKeys);
+    setHasUnsavedChanges(true);
+  };
+
+  const handleSave = async () => {
+    plugin.settings.hiddenFrontmatterKeys = hiddenKeys;
+    await plugin.saveSettings();
+    new Notice("Frontmatter settings saved");
+    setHasUnsavedChanges(false);
+  };
+
+  return (
+    <div className="frontmatter-settings">
+      <h3>Hidden Frontmatter Keys</h3>
+      <p className="setting-item-description">
+        Frontmatter keys in this list will be hidden from view
+      </p>
+
+      <div className="setting-item">
+        <div className="flex w-full items-center gap-2">
+          <input
+            type="text"
+            placeholder="Key name (e.g., nodeTypeId)"
+            value={newKey}
+            onChange={(e) => setNewKey(e.target.value)}
+            className="flex-1"
+          />
+          <button
+            onClick={handleAddKey}
+            className="mod-cta"
+            disabled={!newKey.trim()}
+          >
+            Add
+          </button>
+        </div>
+      </div>
+
+      {hiddenKeys.length > 0 ? (
+        <div className="hidden-keys-list">
+          {hiddenKeys.map((key) => (
+            <div key={key} className="setting-item">
+              <div className="flex w-full items-center justify-between">
+                <span>{key}</span>
+                <button
+                  onClick={() => handleRemoveKey(key)}
+                  className="mod-warning"
+                >
+                  Remove
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="setting-item">
+          <div className="setting-item-description">
+            No hidden keys. All frontmatter will be visible.
+          </div>
+        </div>
+      )}
+
+      <div className="setting-item">
+        <button
+          onClick={handleSave}
+          className={hasUnsavedChanges ? "mod-cta" : ""}
+          disabled={!hasUnsavedChanges}
+        >
+          Save Changes
+        </button>
+      </div>
+
+      {hasUnsavedChanges && (
+        <div className="text-muted mt-2">You have unsaved changes</div>
+      )}
+    </div>
+  );
+};
+
+export default FrontmatterSettings;
diff --git a/apps/obsidian/src/components/Settings.tsx b/apps/obsidian/src/components/Settings.tsx
index 437f7f2cd..35f683442 100644
--- a/apps/obsidian/src/components/Settings.tsx
+++ b/apps/obsidian/src/components/Settings.tsx
@@ -57,12 +57,23 @@ const Settings = () => {
         >
           Discourse Relations
         </button>
+        <button
+          onClick={() => setActiveTab("frontmatter")}
+          className={`cursor-pointer px-4 py-2 ${
+            activeTab === "frontmatter"
+              ? "!bg-modifier-hover accent-border-bottom"
+              : "!bg-transparent"
+          }`}
+        >
+          Frontmatter
+        </button>
       </div>
 
       {activeTab === "general" && <GeneralSettings />}
       {activeTab === "nodeTypes" && <NodeTypeSettings />}
       {activeTab === "relationTypes" && <RelationshipTypeSettings />}
       {activeTab === "relations" && <RelationshipSettings />}
+      {activeTab === "frontmatter" && <GeneralSettings />}
     </div>
   );
 };

From f150260b8c84a7ac30621f7f758af5233197bf5a Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Thu, 5 Jun 2025 14:45:58 -0400
Subject: [PATCH 2/5] cur progress

---
 .../src/components/FrontmatterSettings.tsx    | 107 ------------------
 apps/obsidian/src/components/Settings.tsx     |  10 --
 2 files changed, 117 deletions(-)
 delete mode 100644 apps/obsidian/src/components/FrontmatterSettings.tsx

diff --git a/apps/obsidian/src/components/FrontmatterSettings.tsx b/apps/obsidian/src/components/FrontmatterSettings.tsx
deleted file mode 100644
index 507dc7428..000000000
--- a/apps/obsidian/src/components/FrontmatterSettings.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import React, { useState } from "react";
-import { usePlugin } from "./PluginContext";
-import { Notice } from "obsidian";
-
-const FrontmatterSettings = () => {
-  const plugin = usePlugin();
-  const [hiddenKeys, setHiddenKeys] = useState(
-    () => plugin.settings.hiddenFrontmatterKeys || [],
-  );
-  const [newKey, setNewKey] = useState("");
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
-
-  const handleAddKey = () => {
-    if (!newKey.trim()) return;
-
-    if (hiddenKeys.includes(newKey.trim())) {
-      new Notice(`Key "${newKey}" is already in the list`);
-      return;
-    }
-
-    const updatedKeys = [...hiddenKeys, newKey.trim()];
-    setHiddenKeys(updatedKeys);
-    setNewKey("");
-    setHasUnsavedChanges(true);
-  };
-
-  const handleRemoveKey = (keyToRemove: string) => {
-    const updatedKeys = hiddenKeys.filter((key) => key !== keyToRemove);
-    setHiddenKeys(updatedKeys);
-    setHasUnsavedChanges(true);
-  };
-
-  const handleSave = async () => {
-    plugin.settings.hiddenFrontmatterKeys = hiddenKeys;
-    await plugin.saveSettings();
-    new Notice("Frontmatter settings saved");
-    setHasUnsavedChanges(false);
-  };
-
-  return (
-    <div className="frontmatter-settings">
-      <h3>Hidden Frontmatter Keys</h3>
-      <p className="setting-item-description">
-        Frontmatter keys in this list will be hidden from view
-      </p>
-
-      <div className="setting-item">
-        <div className="flex w-full items-center gap-2">
-          <input
-            type="text"
-            placeholder="Key name (e.g., nodeTypeId)"
-            value={newKey}
-            onChange={(e) => setNewKey(e.target.value)}
-            className="flex-1"
-          />
-          <button
-            onClick={handleAddKey}
-            className="mod-cta"
-            disabled={!newKey.trim()}
-          >
-            Add
-          </button>
-        </div>
-      </div>
-
-      {hiddenKeys.length > 0 ? (
-        <div className="hidden-keys-list">
-          {hiddenKeys.map((key) => (
-            <div key={key} className="setting-item">
-              <div className="flex w-full items-center justify-between">
-                <span>{key}</span>
-                <button
-                  onClick={() => handleRemoveKey(key)}
-                  className="mod-warning"
-                >
-                  Remove
-                </button>
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : (
-        <div className="setting-item">
-          <div className="setting-item-description">
-            No hidden keys. All frontmatter will be visible.
-          </div>
-        </div>
-      )}
-
-      <div className="setting-item">
-        <button
-          onClick={handleSave}
-          className={hasUnsavedChanges ? "mod-cta" : ""}
-          disabled={!hasUnsavedChanges}
-        >
-          Save Changes
-        </button>
-      </div>
-
-      {hasUnsavedChanges && (
-        <div className="text-muted mt-2">You have unsaved changes</div>
-      )}
-    </div>
-  );
-};
-
-export default FrontmatterSettings;
diff --git a/apps/obsidian/src/components/Settings.tsx b/apps/obsidian/src/components/Settings.tsx
index 35f683442..e87d527b9 100644
--- a/apps/obsidian/src/components/Settings.tsx
+++ b/apps/obsidian/src/components/Settings.tsx
@@ -57,16 +57,6 @@ const Settings = () => {
         >
           Discourse Relations
         </button>
-        <button
-          onClick={() => setActiveTab("frontmatter")}
-          className={`cursor-pointer px-4 py-2 ${
-            activeTab === "frontmatter"
-              ? "!bg-modifier-hover accent-border-bottom"
-              : "!bg-transparent"
-          }`}
-        >
-          Frontmatter
-        </button>
       </div>
 
       {activeTab === "general" && <GeneralSettings />}

From 23d1865425c7be1e72c238c73fd8d372a6119811 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Thu, 5 Jun 2025 17:47:44 -0400
Subject: [PATCH 3/5] feature finished

---
 .../src/components/GeneralSettings.tsx        | 27 ++++++++++++
 .../obsidian/src/components/NodeTypeModal.tsx |  7 ++--
 apps/obsidian/src/constants.ts                |  1 +
 apps/obsidian/src/index.ts                    |  2 +-
 apps/obsidian/src/types.ts                    |  1 +
 .../src/utils/createNodeFromSelectedText.ts   | 42 ++++++++++++++-----
 apps/obsidian/src/utils/registerCommands.ts   |  2 +-
 7 files changed, 66 insertions(+), 16 deletions(-)

diff --git a/apps/obsidian/src/components/GeneralSettings.tsx b/apps/obsidian/src/components/GeneralSettings.tsx
index 632c6ca21..26871e6b4 100644
--- a/apps/obsidian/src/components/GeneralSettings.tsx
+++ b/apps/obsidian/src/components/GeneralSettings.tsx
@@ -7,6 +7,9 @@ const GeneralSettings = () => {
   const [showIdsInFrontmatter, setShowIdsInFrontmatter] = useState(
     plugin.settings.showIdsInFrontmatter,
   );
+  const [nodesFolderPath, setNodesFolderPath] = useState(
+    plugin.settings.nodesFolderPath,
+  );
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   const handleToggleChange = (newValue: boolean) => {
@@ -14,8 +17,14 @@ const GeneralSettings = () => {
     setHasUnsavedChanges(true);
   };
 
+  const handleFolderPathChange = (newValue: string) => {
+    setNodesFolderPath(newValue);
+    setHasUnsavedChanges(true);
+  };
+
   const handleSave = async () => {
     plugin.settings.showIdsInFrontmatter = showIdsInFrontmatter;
+    plugin.settings.nodesFolderPath = nodesFolderPath;
     await plugin.saveSettings();
     new Notice("General settings saved");
     setHasUnsavedChanges(false);
@@ -43,6 +52,24 @@ const GeneralSettings = () => {
         </div>
       </div>
 
+      <div className="setting-item">
+        <div className="setting-item-info">
+          <div className="setting-item-name">Discourse nodes folder path</div>
+          <div className="setting-item-description">
+            Specify the folder where new Discourse nodes should be created.
+            Leave empty to create nodes in the root folder.
+          </div>
+        </div>
+        <div className="setting-item-control">
+          <input
+            type="text"
+            value={nodesFolderPath}
+            onChange={(e) => handleFolderPathChange(e.target.value)}
+            placeholder="Discourse Nodes"
+          />
+        </div>
+      </div>
+
       <div className="setting-item">
         <button
           onClick={handleSave}
diff --git a/apps/obsidian/src/components/NodeTypeModal.tsx b/apps/obsidian/src/components/NodeTypeModal.tsx
index 793ffc3b5..94557306c 100644
--- a/apps/obsidian/src/components/NodeTypeModal.tsx
+++ b/apps/obsidian/src/components/NodeTypeModal.tsx
@@ -1,14 +1,15 @@
 import { App, Editor, SuggestModal, TFile, Notice } from "obsidian";
 import { DiscourseNode } from "~/types";
 import { processTextToDiscourseNode } from "~/utils/createNodeFromSelectedText";
+import type DiscourseGraphPlugin from "~/index";
 
 export class NodeTypeModal extends SuggestModal<DiscourseNode> {
   constructor(
-    app: App,
     private editor: Editor,
     private nodeTypes: DiscourseNode[],
+    private plugin: DiscourseGraphPlugin,
   ) {
-    super(app);
+    super(plugin.app);
   }
 
   getItemText(item: DiscourseNode): string {
@@ -28,7 +29,7 @@ export class NodeTypeModal extends SuggestModal<DiscourseNode> {
 
   async onChooseSuggestion(nodeType: DiscourseNode) {
     await processTextToDiscourseNode({
-      app: this.app,
+      plugin: this.plugin,
       editor: this.editor,
       nodeType,
     });
diff --git a/apps/obsidian/src/constants.ts b/apps/obsidian/src/constants.ts
index 74f61568a..fce370ee0 100644
--- a/apps/obsidian/src/constants.ts
+++ b/apps/obsidian/src/constants.ts
@@ -57,4 +57,5 @@ export const DEFAULT_SETTINGS: Settings = {
     },
   ],
   showIdsInFrontmatter: true,
+  nodesFolderPath: "Discourse Nodes",
 };
diff --git a/apps/obsidian/src/index.ts b/apps/obsidian/src/index.ts
index e35eaf8f4..22ed365a9 100644
--- a/apps/obsidian/src/index.ts
+++ b/apps/obsidian/src/index.ts
@@ -47,7 +47,7 @@ export default class DiscourseGraphPlugin extends Plugin {
                 .setIcon("file-type")
                 .onClick(async () => {
                   await processTextToDiscourseNode({
-                    app: this.app,
+                    plugin: this,
                     editor,
                     nodeType,
                   });
diff --git a/apps/obsidian/src/types.ts b/apps/obsidian/src/types.ts
index 4a374886f..81871f7c6 100644
--- a/apps/obsidian/src/types.ts
+++ b/apps/obsidian/src/types.ts
@@ -24,6 +24,7 @@ export type Settings = {
   discourseRelations: DiscourseRelation[];
   relationTypes: DiscourseRelationType[];
   showIdsInFrontmatter: boolean;
+  nodesFolderPath: string;
 };
 
 export const VIEW_TYPE_DISCOURSE_CONTEXT = "discourse-context-view";
\ No newline at end of file
diff --git a/apps/obsidian/src/utils/createNodeFromSelectedText.ts b/apps/obsidian/src/utils/createNodeFromSelectedText.ts
index 7136777e5..ef4a2b2d3 100644
--- a/apps/obsidian/src/utils/createNodeFromSelectedText.ts
+++ b/apps/obsidian/src/utils/createNodeFromSelectedText.ts
@@ -3,6 +3,7 @@ import { DiscourseNode } from "~/types";
 import { getDiscourseNodeFormatExpression } from "./getDiscourseNodeFormatExpression";
 import { checkInvalidChars } from "./validateNodeType";
 import { applyTemplate } from "./templates";
+import type DiscourseGraphPlugin from "~/index";
 
 export const formatNodeName = (
   selectedText: string,
@@ -21,24 +22,43 @@ export const formatNodeName = (
 };
 
 export const createDiscourseNodeFile = async ({
-  app,
+  plugin,
   formattedNodeName,
   nodeType,
 }: {
-  app: App;
+  plugin: DiscourseGraphPlugin;
   formattedNodeName: string;
   nodeType: DiscourseNode;
 }): Promise<TFile | null> => {
   try {
-    const existingFile = app.vault.getAbstractFileByPath(
-      `${formattedNodeName}.md`,
+    const { app, settings } = plugin;
+
+    const fileName = `${formattedNodeName}.md`;
+
+    const existingFile = app.metadataCache.getFirstLinkpathDest(
+      formattedNodeName,
+      "",
     );
-    if (existingFile && existingFile instanceof TFile) {
-      new Notice(`File ${formattedNodeName} already exists`, 3000);
+
+    if (existingFile) {
+      new Notice(
+        `File ${formattedNodeName} already exists at ${existingFile.path}`,
+        3000,
+      );
       return existingFile;
     }
 
-    const newFile = await app.vault.create(`${formattedNodeName}.md`, "");
+    const folderPath = settings.nodesFolderPath.trim();
+    const fullPath = folderPath ? `${folderPath}/${fileName}` : fileName;
+
+    if (folderPath) {
+      const folderExists = app.vault.getAbstractFileByPath(folderPath);
+      if (!folderExists) {
+        await app.vault.createFolder(folderPath);
+      }
+    }
+
+    const newFile = await app.vault.create(fullPath, "");
     await app.fileManager.processFrontMatter(newFile, (fm) => {
       fm.nodeTypeId = nodeType.id;
     });
@@ -86,16 +106,16 @@ export const createDiscourseNodeFile = async ({
 };
 
 export const processTextToDiscourseNode = async ({
-  app,
+  plugin,
   editor,
   nodeType,
 }: {
-  app: App;
+  plugin: DiscourseGraphPlugin;
   editor: Editor;
   nodeType: DiscourseNode;
 }): Promise<TFile | null> => {
   const selectedText = editor.getSelection().trim();
-  
+
   const formattedNodeName = formatNodeName(selectedText, nodeType);
   if (!formattedNodeName) return null;
 
@@ -106,7 +126,7 @@ export const processTextToDiscourseNode = async ({
   }
 
   const newFile = await createDiscourseNodeFile({
-    app,
+    plugin,
     formattedNodeName,
     nodeType,
   });
diff --git a/apps/obsidian/src/utils/registerCommands.ts b/apps/obsidian/src/utils/registerCommands.ts
index 283754ec8..22d5605a0 100644
--- a/apps/obsidian/src/utils/registerCommands.ts
+++ b/apps/obsidian/src/utils/registerCommands.ts
@@ -13,7 +13,7 @@ export const registerCommands = (plugin: DiscourseGraphPlugin) => {
         return;
       }
 
-      new NodeTypeModal(plugin.app, editor, plugin.settings.nodeTypes).open();
+      new NodeTypeModal(editor, plugin.settings.nodeTypes, plugin).open();
     },
   });
 

From 884e55bb90a245b10c118f23d2ebd103dc7d8161 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Tue, 10 Jun 2025 17:33:58 -0400
Subject: [PATCH 4/5] add generic suggest input component

---
 .../src/components/GeneralSettings.tsx        |  65 ++++++++-
 apps/obsidian/src/components/SuggestInput.tsx | 136 ++++++++++++++++++
 2 files changed, 195 insertions(+), 6 deletions(-)
 create mode 100644 apps/obsidian/src/components/SuggestInput.tsx

diff --git a/apps/obsidian/src/components/GeneralSettings.tsx b/apps/obsidian/src/components/GeneralSettings.tsx
index 26871e6b4..434b31382 100644
--- a/apps/obsidian/src/components/GeneralSettings.tsx
+++ b/apps/obsidian/src/components/GeneralSettings.tsx
@@ -1,6 +1,60 @@
-import React, { useState } from "react";
+import { useState } from "react";
 import { usePlugin } from "./PluginContext";
 import { Notice } from "obsidian";
+import SuggestInput from "./SuggestInput";
+
+export const FolderSuggestInput: React.FC<{
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+}> = ({
+  value,
+  onChange,
+  placeholder = "Enter folder path",
+  className = "",
+  disabled = false,
+}) => {
+  const plugin = usePlugin();
+
+  const getAllFolders = (): string[] => {
+    const folders = plugin.app.vault.getAllFolders();
+    return folders.map((folder) => folder.path).sort();
+  };
+
+  const getFilteredFolders = (query: string): string[] => {
+    const allFolders = getAllFolders();
+
+    if (!query.trim()) {
+      return allFolders.slice(0, 10);
+    }
+
+    return allFolders
+      .filter((path) => path.toLowerCase().includes(query.toLowerCase()))
+      .slice(0, 10);
+  };
+
+  const renderFolder = (folder: string, el: HTMLElement) => {
+    el.createDiv({
+      text: folder || "(Root folder)",
+      cls: "folder-suggestion-item",
+    });
+  };
+
+  return (
+    <SuggestInput<string>
+      value={value}
+      onChange={onChange}
+      getSuggestions={getFilteredFolders}
+      getDisplayText={(folder) => folder}
+      renderItem={renderFolder}
+      placeholder={placeholder}
+      className={className}
+      disabled={disabled}
+    />
+  );
+};
 
 const GeneralSettings = () => {
   const plugin = usePlugin();
@@ -54,17 +108,16 @@ const GeneralSettings = () => {
 
       <div className="setting-item">
         <div className="setting-item-info">
-          <div className="setting-item-name">Discourse nodes folder path</div>
+          <div className="setting-item-name">Discourse Nodes folder path</div>
           <div className="setting-item-description">
-            Specify the folder where new Discourse nodes should be created.
+            Specify the folder where new Discourse Nodes should be created.
             Leave empty to create nodes in the root folder.
           </div>
         </div>
         <div className="setting-item-control">
-          <input
-            type="text"
+          <FolderSuggestInput
             value={nodesFolderPath}
-            onChange={(e) => handleFolderPathChange(e.target.value)}
+            onChange={handleFolderPathChange}
             placeholder="Discourse Nodes"
           />
         </div>
diff --git a/apps/obsidian/src/components/SuggestInput.tsx b/apps/obsidian/src/components/SuggestInput.tsx
new file mode 100644
index 000000000..3ff946fe3
--- /dev/null
+++ b/apps/obsidian/src/components/SuggestInput.tsx
@@ -0,0 +1,136 @@
+import React, { useRef, useEffect, useState } from "react";
+import { AbstractInputSuggest, App } from "obsidian";
+import { usePlugin } from "./PluginContext";
+
+class GenericSuggestInput<T> extends AbstractInputSuggest<T> {
+  private getSuggestionsFn: (query: string) => T[];
+  private onSelectCallback: (item: T) => void;
+  private getDisplayTextFn: (item: T) => string;
+  private renderItemFn?: (item: T, el: HTMLElement) => void;
+
+  constructor(
+    app: App,
+    private textInputEl: HTMLInputElement,
+    config: {
+      getSuggestions: (query: string) => T[];
+      onSelect: (item: T) => void;
+      getDisplayText: (item: T) => string;
+      renderItem?: (item: T, el: HTMLElement) => void;
+    },
+  ) {
+    super(app, textInputEl);
+    this.getSuggestionsFn = config.getSuggestions;
+    this.onSelectCallback = config.onSelect;
+    this.getDisplayTextFn = config.getDisplayText;
+    this.renderItemFn = config.renderItem;
+  }
+
+  getSuggestions(inputStr: string): T[] {
+    return this.getSuggestionsFn(inputStr);
+  }
+
+  renderSuggestion(item: T, el: HTMLElement): void {
+    if (this.renderItemFn) {
+      this.renderItemFn(item, el);
+    } else {
+      el.createDiv({
+        text: this.getDisplayTextFn(item),
+        cls: "suggestion-item",
+      });
+    }
+  }
+
+  selectSuggestion(item: T, evt: MouseEvent | KeyboardEvent): void {
+    this.textInputEl.value = this.getDisplayTextFn(item);
+    this.onSelectCallback(item);
+    this.close();
+  }
+}
+
+type SuggestInputProps<T> = {
+  value: string;
+  onChange: (value: string) => void;
+  getSuggestions: (query: string) => T[];
+  getDisplayText: (item: T) => string;
+  onSelect?: (item: T) => void;
+  renderItem?: (item: T, el: HTMLElement) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
+};
+
+const SuggestInput = <T,>({
+  value,
+  onChange,
+  getSuggestions,
+  getDisplayText,
+  onSelect,
+  renderItem,
+  placeholder = "Enter value",
+  className = "",
+  disabled = false,
+}: SuggestInputProps<T>) => {
+  const plugin = usePlugin();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [suggest, setSuggest] = useState<GenericSuggestInput<T> | null>(null);
+
+  const handleSelect = (item: T) => {
+    const displayText = getDisplayText(item);
+    onChange(displayText);
+    onSelect?.(item);
+  };
+
+  useEffect(() => {
+    if (inputRef.current && !suggest && !disabled) {
+      const genericSuggest = new GenericSuggestInput<T>(
+        plugin.app,
+        inputRef.current,
+        {
+          getSuggestions,
+          onSelect: handleSelect,
+          getDisplayText,
+          renderItem,
+        },
+      );
+      setSuggest(genericSuggest);
+
+      return () => {
+        genericSuggest.close();
+        setSuggest(null);
+      };
+    }
+  }, [
+    plugin.app,
+    onChange,
+    onSelect,
+    getSuggestions,
+    getDisplayText,
+    renderItem,
+    disabled,
+  ]);
+
+  useEffect(() => {
+    if (inputRef.current && inputRef.current.value !== value) {
+      inputRef.current.value = value;
+    }
+  }, [value]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(e.target.value);
+  };
+
+  return (
+    <input
+      ref={inputRef}
+      type="text"
+      value={value}
+      onChange={handleChange}
+      placeholder={placeholder}
+      className={className}
+      disabled={disabled}
+      autoComplete="off"
+    />
+  );
+};
+
+export default SuggestInput;

From 85a967a1919209c7ef43428b3c8467aff0267b17 Mon Sep 17 00:00:00 2001
From: Trang Doan <doantranghp2000@gmail.com>
Date: Tue, 10 Jun 2025 18:09:05 -0400
Subject: [PATCH 5/5] add suggest folder

---
 .../src/components/GeneralSettings.tsx        | 53 ++++++++++---------
 apps/obsidian/src/components/SuggestInput.tsx | 18 ++++---
 2 files changed, 39 insertions(+), 32 deletions(-)

diff --git a/apps/obsidian/src/components/GeneralSettings.tsx b/apps/obsidian/src/components/GeneralSettings.tsx
index 434b31382..9d5eda194 100644
--- a/apps/obsidian/src/components/GeneralSettings.tsx
+++ b/apps/obsidian/src/components/GeneralSettings.tsx
@@ -1,53 +1,58 @@
-import { useState } from "react";
+import { useState, useCallback } from "react";
 import { usePlugin } from "./PluginContext";
 import { Notice } from "obsidian";
 import SuggestInput from "./SuggestInput";
 
-export const FolderSuggestInput: React.FC<{
-  value: string;
-  onChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-  disabled?: boolean;
-}> = ({
+export const FolderSuggestInput = ({
   value,
   onChange,
   placeholder = "Enter folder path",
   className = "",
   disabled = false,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder?: string;
+  className?: string;
+  disabled?: boolean;
 }) => {
   const plugin = usePlugin();
 
-  const getAllFolders = (): string[] => {
+  const getAllFolders = useCallback((): string[] => {
     const folders = plugin.app.vault.getAllFolders();
     return folders.map((folder) => folder.path).sort();
-  };
+  }, [plugin.app.vault]);
 
-  const getFilteredFolders = (query: string): string[] => {
-    const allFolders = getAllFolders();
+  const getFilteredFolders = useCallback(
+    (query: string): string[] => {
+      const allFolders = getAllFolders();
 
-    if (!query.trim()) {
-      return allFolders.slice(0, 10);
-    }
+      if (!query.trim()) {
+        return allFolders.slice(0, 10);
+      }
 
-    return allFolders
-      .filter((path) => path.toLowerCase().includes(query.toLowerCase()))
-      .slice(0, 10);
-  };
+      return allFolders
+        .filter((path) => path.toLowerCase().includes(query.toLowerCase()))
+        .slice(0, 10);
+    },
+    [getAllFolders],
+  );
 
-  const renderFolder = (folder: string, el: HTMLElement) => {
+  const renderFolder = useCallback((folder: string, el: HTMLElement) => {
     el.createDiv({
       text: folder || "(Root folder)",
       cls: "folder-suggestion-item",
     });
-  };
+  }, []);
+
+  const getDisplayText = useCallback((folder: string) => folder, []);
 
   return (
     <SuggestInput<string>
       value={value}
       onChange={onChange}
       getSuggestions={getFilteredFolders}
-      getDisplayText={(folder) => folder}
+      getDisplayText={getDisplayText}
       renderItem={renderFolder}
       placeholder={placeholder}
       className={className}
@@ -71,10 +76,10 @@ const GeneralSettings = () => {
     setHasUnsavedChanges(true);
   };
 
-  const handleFolderPathChange = (newValue: string) => {
+  const handleFolderPathChange = useCallback((newValue: string) => {
     setNodesFolderPath(newValue);
     setHasUnsavedChanges(true);
-  };
+  }, []);
 
   const handleSave = async () => {
     plugin.settings.showIdsInFrontmatter = showIdsInFrontmatter;
diff --git a/apps/obsidian/src/components/SuggestInput.tsx b/apps/obsidian/src/components/SuggestInput.tsx
index 3ff946fe3..3a449e947 100644
--- a/apps/obsidian/src/components/SuggestInput.tsx
+++ b/apps/obsidian/src/components/SuggestInput.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState } from "react";
+import React, { useRef, useEffect, useState, useCallback } from "react";
 import { AbstractInputSuggest, App } from "obsidian";
 import { usePlugin } from "./PluginContext";
 
@@ -74,11 +74,14 @@ const SuggestInput = <T,>({
   const inputRef = useRef<HTMLInputElement>(null);
   const [suggest, setSuggest] = useState<GenericSuggestInput<T> | null>(null);
 
-  const handleSelect = (item: T) => {
-    const displayText = getDisplayText(item);
-    onChange(displayText);
-    onSelect?.(item);
-  };
+  const handleSelect = useCallback(
+    (item: T) => {
+      const displayText = getDisplayText(item);
+      onChange(displayText);
+      onSelect?.(item);
+    },
+    [getDisplayText, onChange, onSelect],
+  );
 
   useEffect(() => {
     if (inputRef.current && !suggest && !disabled) {
@@ -101,12 +104,11 @@ const SuggestInput = <T,>({
     }
   }, [
     plugin.app,
-    onChange,
-    onSelect,
     getSuggestions,
     getDisplayText,
     renderItem,
     disabled,
+    handleSelect,
   ]);
 
   useEffect(() => {