ENG-514: Auto-save plugin settings (#913)

* ENG-514: Auto-save plugin settings and remove Save Changes buttons

Settings now save automatically matching Obsidian's native settings UX:
- Discrete inputs (toggles, dropdowns, color pickers): save on change
- Text inputs with validation (node type fields, relation type labels): save on blur
- Validation errors shown inline on the affected row instead of Notice toasts
- Removed Save Changes button and unsaved changes indicator from all tabs

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

* address PR comments

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: trangdoan982

apps/obsidian/src/components/AdminPanelSettings.tsx

@@ -8,31 +8,27 @@ export const AdminPanelSettings = () => {
   const [syncModeEnabled, setSyncModeEnabled] = useState<boolean>(
     plugin.settings.syncModeEnabled ?? false,
   );
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
-  const handleSyncModeToggle = useCallback((newValue: boolean) => {
-    setSyncModeEnabled(newValue);
-    setHasUnsavedChanges(true);
-  }, []);
+  const handleSyncModeToggle = useCallback(
+    async (newValue: boolean) => {
+      setSyncModeEnabled(newValue);
+      plugin.settings.syncModeEnabled = newValue;
+      await plugin.saveSettings();
 
-  const handleSave = async () => {
-    plugin.settings.syncModeEnabled = syncModeEnabled;
-    await plugin.saveSettings();
-    new Notice("Admin panel settings saved");
-    setHasUnsavedChanges(false);
-
-    if (syncModeEnabled) {
-      try {
-        await initializeSupabaseSync(plugin);
-        new Notice("Sync mode initialized successfully");
-      } catch (error) {
-        console.error("Failed to initialize sync mode:", error);
-        new Notice(
-          `Failed to initialize sync mode: ${error instanceof Error ? error.message : String(error)}`,
-        );
+      if (newValue) {
+        try {
+          await initializeSupabaseSync(plugin);
+          new Notice("Sync mode initialized successfully");
+        } catch (error) {
+          console.error("Failed to initialize sync mode:", error);
+          new Notice(
+            `Failed to initialize sync mode: ${error instanceof Error ? error.message : String(error)}`,
+          );
+        }
       }
-    }
-  };
+    },
+    [plugin],
+  );
 
   return (
     <div className="general-settings">
@@ -46,26 +42,12 @@ export const AdminPanelSettings = () => {
         <div className="setting-item-control">
           <div
             className={`checkbox-container ${syncModeEnabled ? "is-enabled" : ""}`}
-            onClick={() => handleSyncModeToggle(!syncModeEnabled)}
+            onClick={() => void handleSyncModeToggle(!syncModeEnabled)}
           >
             <input type="checkbox" checked={syncModeEnabled} />
           </div>
         </div>
       </div>
-
-      <div className="setting-item">
-        <button
-          onClick={() => void handleSave()}
-          className={hasUnsavedChanges ? "mod-cta" : ""}
-          disabled={!hasUnsavedChanges}
-        >
-          Save Changes
-        </button>
-      </div>
-
-      {hasUnsavedChanges && (
-        <div className="text-muted mt-2">You have unsaved changes</div>
-      )}
     </div>
   );
 };

apps/obsidian/src/components/GeneralSettings.tsx

@@ -1,6 +1,6 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import { usePlugin } from "./PluginContext";
-import { Notice, setIcon } from "obsidian";
+import { setIcon } from "obsidian";
 import SuggestInput from "./SuggestInput";
 import { SLACK_LOGO, WHITE_LOGO_SVG } from "~/icons";
 
@@ -157,57 +157,51 @@ const GeneralSettings = () => {
   const [nodeTagHotkey, setNodeTagHotkey] = useState<string>(
     plugin.settings.nodeTagHotkey,
   );
-  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
 
   const handleToggleChange = (newValue: boolean) => {
     setShowIdsInFrontmatter(newValue);
-    setHasUnsavedChanges(true);
+    plugin.settings.showIdsInFrontmatter = newValue;
+    void plugin.saveSettings();
   };
 
-  const handleFolderPathChange = useCallback((newValue: string) => {
-    setNodesFolderPath(newValue);
-    setHasUnsavedChanges(true);
-  }, []);
+  const handleFolderPathChange = useCallback(
+    (newValue: string) => {
+      setNodesFolderPath(newValue);
+      plugin.settings.nodesFolderPath = newValue.trim();
+      void plugin.saveSettings();
+    },
+    [plugin],
+  );
 
-  const handleCanvasFolderPathChange = useCallback((newValue: string) => {
-    setCanvasFolderPath(newValue);
-    setHasUnsavedChanges(true);
-  }, []);
+  const handleCanvasFolderPathChange = useCallback(
+    (newValue: string) => {
+      setCanvasFolderPath(newValue);
+      plugin.settings.canvasFolderPath = newValue.trim();
+      void plugin.saveSettings();
+    },
+    [plugin],
+  );
 
   const handleCanvasAttachmentsFolderPathChange = useCallback(
     (newValue: string) => {
       setCanvasAttachmentsFolderPath(newValue);
-      setHasUnsavedChanges(true);
+      plugin.settings.canvasAttachmentsFolderPath = newValue.trim();
+      void plugin.saveSettings();
     },
-    [],
+    [plugin],
   );
 
-  const handleNodeTagHotkeyChange = useCallback((newValue: string) => {
-    // Only allow single character
-    if (newValue.length <= 1) {
-      setNodeTagHotkey(newValue);
-      setHasUnsavedChanges(true);
-    }
-  }, []);
-
-  const handleSave = async () => {
-    const trimmedNodesFolderPath = nodesFolderPath.trim();
-    const trimmedCanvasFolderPath = canvasFolderPath.trim();
-    const trimmedCanvasAttachmentsFolderPath =
-      canvasAttachmentsFolderPath.trim();
-    plugin.settings.showIdsInFrontmatter = showIdsInFrontmatter;
-    plugin.settings.nodesFolderPath = trimmedNodesFolderPath;
-    plugin.settings.canvasFolderPath = trimmedCanvasFolderPath;
-    plugin.settings.canvasAttachmentsFolderPath =
-      trimmedCanvasAttachmentsFolderPath;
-    plugin.settings.nodeTagHotkey = nodeTagHotkey || "";
-    setNodesFolderPath(trimmedNodesFolderPath);
-    setCanvasFolderPath(trimmedCanvasFolderPath);
-    setCanvasAttachmentsFolderPath(trimmedCanvasAttachmentsFolderPath);
-    await plugin.saveSettings();
-    new Notice("General settings saved");
-    setHasUnsavedChanges(false);
-  };
+  const handleNodeTagHotkeyChange = useCallback(
+    (newValue: string) => {
+      // Only allow single character
+      if (newValue.length <= 1) {
+        setNodeTagHotkey(newValue);
+        plugin.settings.nodeTagHotkey = newValue;
+        void plugin.saveSettings();
+      }
+    },
+    [plugin],
+  );
 
   return (
     <div className="general-settings">
@@ -313,19 +307,6 @@ const GeneralSettings = () => {
         </div>
       </div>
 
-      <div className="setting-item">
-        <button
-          onClick={() => void handleSave()}
-          className={hasUnsavedChanges ? "mod-cta" : ""}
-          disabled={!hasUnsavedChanges}
-        >
-          Save Changes
-        </button>
-      </div>
-
-      {hasUnsavedChanges && (
-        <div className="text-muted mt-2">You have unsaved changes</div>
-      )}
       <InfoSection />
     </div>
   );