[ENG-1237] Create feature flag infra for Obsdian

apps/obsidian/src/components/FeatureFlagModal.tsx

@@ -0,0 +1,44 @@
+import { StrictMode } from "react";
+import { App, Modal } from "obsidian";
+import { Root, createRoot } from "react-dom/client";
+import type DiscourseGraphPlugin from "~/index";
+import { ContextProvider } from "./AppContext";
+import { PluginProvider } from "./PluginContext";
+import { FeatureFlagSettings } from "./FeatureFlagSettings";
+
+export class FeatureFlagModal extends Modal {
+  private plugin: DiscourseGraphPlugin;
+  private root: Root | null = null;
+
+  constructor(app: App, plugin: DiscourseGraphPlugin) {
+    super(app);
+    this.plugin = plugin;
+  }
+
+  onOpen() {
+    const { contentEl } = this;
+    contentEl.empty();
+    this.setTitle("Feature Flag Settings");
+
+    const settingsComponentEl = contentEl.createDiv();
+    this.root = createRoot(settingsComponentEl);
+    this.root.render(
+      <StrictMode>
+        <ContextProvider app={this.app}>
+          <PluginProvider plugin={this.plugin}>
+            <FeatureFlagSettings />
+          </PluginProvider>
+        </ContextProvider>
+      </StrictMode>,
+    );
+  }
+
+  onClose() {
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
+    const { contentEl } = this;
+    contentEl.empty();
+  }
+}

apps/obsidian/src/components/FeatureFlagSettings.tsx

@@ -0,0 +1,47 @@
+import { useState, useCallback } from "react";
+import { usePlugin } from "./PluginContext";
+import { Notice } from "obsidian";
+
+export const FeatureFlagSettings = () => {
+  const plugin = usePlugin();
+  const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
+
+
+  const handleSave = async () => {
+    // Add more feature-flagged settings here as they are added
+    await plugin.saveSettings();
+    new Notice("Feature flag settings saved");
+    setHasUnsavedChanges(false);
+  };
+
+  return (
+    <div className="general-settings">
+      {/* Database Sync Settings */}
+      <div className="setting-item">
+        <div className="setting-item-info">
+          <div className="setting-item-name">Enable Database Sync</div>
+          <div className="setting-item-description">
+            Enable synchronization of Discourse Graph data to a Supabase
+            database.
+          </div>
+        </div>
+      </div>
+
+      {/* Add more feature-flagged 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/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 FeatureFlagSettings component
+  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

@@ -3,6 +3,7 @@ import type DiscourseGraphPlugin from "~/index";
 import { NodeTypeModal } from "~/components/NodeTypeModal";
 import ModifyNodeModal from "~/components/ModifyNodeModal";
 import { BulkIdentifyDiscourseNodesModal } from "~/components/BulkIdentifyDiscourseNodesModal";
+import { FeatureFlagModal } from "~/components/FeatureFlagModal";
 import { createDiscourseNode } from "./createNode";
 import { VIEW_TYPE_MARKDOWN, VIEW_TYPE_TLDRAW_DG_PREVIEW } from "~/constants";
 import { createCanvas } from "~/components/canvas/utils/tldraw";
@@ -51,10 +52,10 @@ export const registerCommands = (plugin: DiscourseGraphPlugin) => {
           } else {
             await createDiscourseNode({
               plugin,
-            nodeType,
-            text: title,
-            editor,
-          });
+              nodeType,
+              text: title,
+              editor,
+            });
           }
         },
       }).open();
@@ -130,4 +131,15 @@ export const registerCommands = (plugin: DiscourseGraphPlugin) => {
     icon: "layout-dashboard", // Using Lucide icon as per style guide
     callback: () => createCanvas(plugin),
   });
+
+  plugin.registerDomEvent(document, "keydown", (evt: KeyboardEvent) => {
+    const isMod = evt.metaKey || evt.ctrlKey;
+    const isShift = evt.shiftKey;
+
+    if (isMod && isShift && evt.key.toLowerCase() === "a") {
+      evt.preventDefault();
+      evt.stopPropagation();
+      new FeatureFlagModal(plugin.app, plugin).open();
+    }
+  });
 };