[ENG-1237] Create feature flag infra for Obsdian (#672)

* current progress

* hide the modal

* address PR comments

* address PR comments

Author: trangdoan982

apps/obsidian/src/components/AdminPanelSettings.tsx

@@ -0,0 +1,34 @@
+import { useState } from "react";
+import { usePlugin } from "./PluginContext";
+import { Notice } from "obsidian";
+
+export const AdminPanelSettings = () => {
+  const plugin = usePlugin();
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+  const handleSave = async () => {
+    await plugin.saveSettings();
+    new Notice("Admin panel settings saved");
+    setHasUnsavedChanges(false);
+  };
+
+  return (
+    <div className="general-settings">
+      {/* Add more admin panel settings sections here */}
+
+      <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/Settings.tsx

@@ -1,4 +1,4 @@
-import { StrictMode, useState } from "react";
+import { StrictMode, useState, useEffect } from "react";
 import { App, PluginSettingTab } from "obsidian";
 import type DiscourseGraphPlugin from "~/index";
 import { Root, createRoot } from "react-dom/client";
@@ -7,11 +7,26 @@ import RelationshipTypeSettings from "./RelationshipTypeSettings";
 import RelationshipSettings from "./RelationshipSettings";
 import NodeTypeSettings from "./NodeTypeSettings";
 import GeneralSettings from "./GeneralSettings";
+import { AdminPanelSettings } from "./AdminPanelSettings";
 import { PluginProvider } from "./PluginContext";
 
 const Settings = () => {
   const [activeTab, setActiveTab] = useState("general");
 
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      const isMod = e.metaKey || e.ctrlKey;
+      if (isMod && e.shiftKey && e.key.toLowerCase() === "a") {
+        e.stopPropagation();
+        e.preventDefault();
+        setActiveTab("admin-panel");
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyPress);
+    return () => window.removeEventListener("keydown", handleKeyPress);
+  }, []);
+
   return (
     <div className="flex flex-col gap-4">
       <h2 className="dg-h2">Discourse Graph Settings</h2>
@@ -56,13 +71,20 @@ const Settings = () => {
         >
           Discourse Relations
         </button>
+        {/* Hidden Admin Panel tab - only visible when activeTab is "admin-panel" */}
+        {activeTab === "admin-panel" && (
+          <button className="!bg-modifier-hover accent-border-bottom mr-2 cursor-pointer border-0 px-4 py-2">
+            Admin Panel
+          </button>
+        )}
       </div>
 
       {activeTab === "general" && <GeneralSettings />}
       {activeTab === "nodeTypes" && <NodeTypeSettings />}
       {activeTab === "relationTypes" && <RelationshipTypeSettings />}
       {activeTab === "relations" && <RelationshipSettings />}
       {activeTab === "frontmatter" && <GeneralSettings />}
+      {activeTab === "admin-panel" && <AdminPanelSettings />}
     </div>
   );
 };

apps/obsidian/src/constants.ts

@@ -71,6 +71,13 @@ export const DEFAULT_SETTINGS: Settings = {
   canvasAttachmentsFolderPath: "attachments",
   nodeTagHotkey: "\\",
 };
+
+export const FEATURE_FLAGS = {
+  // settings for these features are in the Admin Panel (hidden tab in Settings, toggle with Ctrl+Shift+A)
+  DATABASE_SYNC: "databaseSync",
+} as const;
+
+export type FeatureFlagKey = (typeof FEATURE_FLAGS)[keyof typeof FEATURE_FLAGS];
 export const FRONTMATTER_KEY = "tldr-dg";
 export const TLDATA_DELIMITER_START =
   "!!!_START_OF_TLDRAW_DG_DATA__DO_NOT_CHANGE_THIS_PHRASE_!!!";

apps/obsidian/src/utils/registerCommands.ts

@@ -51,10 +51,10 @@ export const registerCommands = (plugin: DiscourseGraphPlugin) => {
           } else {
             await createDiscourseNode({
               plugin,
-            nodeType,
-            text: title,
-            editor,
-          });
+              nodeType,
+              text: title,
+              editor,
+            });
           }
         },
       }).open();