From b3d434e1fc5cdf64575367555fd535f0414ddee9 Mon Sep 17 00:00:00 2001
From: Michael Gartner <mclicks@gmail.com>
Date: Tue, 5 Mar 2024 22:55:49 -0800
Subject: [PATCH] include legacy settings for visability

---
 src/components/LegacySettings.tsx |  39 +++++
 src/components/SettingsTable.tsx  | 263 +++++++++++++++++-------------
 src/index.ts                      |  20 ++-
 src/settings.ts                   |   3 +-
 4 files changed, 203 insertions(+), 122 deletions(-)
 create mode 100644 src/components/LegacySettings.tsx

diff --git a/src/components/LegacySettings.tsx b/src/components/LegacySettings.tsx
new file mode 100644
index 0000000..64d6c7f
--- /dev/null
+++ b/src/components/LegacySettings.tsx
@@ -0,0 +1,39 @@
+import React from "react";
+import { Divider, HTMLTable } from "@blueprintjs/core";
+import { get } from "../settings";
+import { FEATURES } from "..";
+
+const LegacySettings = ({ moduleId }: { moduleId: string }) => {
+  const featureSettings = FEATURES.find((f) => f.id === moduleId)?.settings;
+  if (!featureSettings) return <>No Settings For {moduleId}</>;
+
+  const docs = FEATURES.find((f) => f.id === moduleId)?.docs;
+
+  return (
+    <div className="mx-auto">
+      <HTMLTable bordered={false}>
+        {Object.entries(featureSettings).map(([key, value]) => {
+          const setting = get(value) || "Not Set";
+          return (
+            <tr>
+              <td>{key}</td>
+              <td>{setting}</td>
+            </tr>
+          );
+        })}
+      </HTMLTable>
+      <Divider />
+      {docs && (
+        <div className="text-center">
+          <a
+            href={`https://github.com/RoamJs/workbench/blob/main/docs/${docs}`}
+          >
+            Documentation
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LegacySettings;
diff --git a/src/components/SettingsTable.tsx b/src/components/SettingsTable.tsx
index 0413fdd..e1d5d76 100644
--- a/src/components/SettingsTable.tsx
+++ b/src/components/SettingsTable.tsx
@@ -2,12 +2,15 @@ import React, { useState } from "react";
 import {
   AnchorButton,
   Button,
+  Classes,
+  Dialog,
   HTMLTable,
   Popover,
   Switch,
 } from "@blueprintjs/core";
 import { OnloadArgs } from "roamjs-components/types";
 import { Feature } from "../index";
+import LegacySettings from "./LegacySettings";
 
 const SettingsTable =
   (FEATURES: Feature[], extensionAPI: OnloadArgs["extensionAPI"]) => () => {
@@ -18,7 +21,12 @@ const SettingsTable =
     });
     const [featureToggleSettings, setFeatureToggleSettings] =
       useState(initialSettings);
-
+    const [isDialogOpen, setIsDialogOpen] = useState(false);
+    const [currentModuleId, setCurrentModuleId] = useState("");
+    const handleOpenDialog = (moduleId: string) => {
+      setCurrentModuleId(moduleId);
+      setIsDialogOpen(true);
+    };
     const settingsStyle: React.CSSProperties = {
       maxWidth: "25px",
       minWidth: "initial",
@@ -46,130 +54,155 @@ const SettingsTable =
     const isMaxWidth = window.matchMedia("(max-width: 1279px)").matches;
 
     return (
-      <HTMLTable
-        bordered={false}
-        style={{ ...noBorder }}
-        className="workbench-settings"
-      >
-        <thead>
-          <tr style={{ ...thBorder }}>
-            <th style={{ ...settingsStyle, ...noBorder }}>Enabled</th>
-            <th style={{ ...featureStyle, ...noBorder }}>Feature</th>
-            <th
-              style={{
-                ...settingsStyle,
-                ...noBorder,
-                display: isMaxWidth ? "none" : "",
-              }}
-            >
-              Info
-            </th>
-            {/* <th style={{ ...settingsStyle }}>Settings</th> */}
-            <th style={{ ...settingsStyle, ...noBorder }}>Documentation</th>
-          </tr>
-        </thead>
-        <tbody>
-          {FEATURES.map(({ id, name, docs, module, description, gif }, i) => (
-            <tr
-              key={id}
-              style={{
-                borderBottom:
-                  i === FEATURES.length - 1 ? "none" : "solid 1px #293742",
-                borderRight: "none",
-                borderLeft: "none",
-              }}
-            >
-              <td
-                aria-label="On/Off Switch"
-                style={{ ...settingsStyle, ...noBorder }}
-              >
-                <Switch
-                  checked={featureToggleSettings[id]}
-                  onChange={(e) => {
-                    const updatedSettings = {
-                      ...featureToggleSettings,
-                      [id]: (e.target as HTMLInputElement).checked,
-                    };
-                    setFeatureToggleSettings(updatedSettings);
-                    extensionAPI.settings.set(
-                      id,
-                      (e.target as HTMLInputElement).checked
-                    );
-                    module.toggleFeature(
-                      (e.target as HTMLInputElement).checked,
-                      extensionAPI
-                    );
-                  }}
-                />
-              </td>
-              <td
-                aria-label="Feature Name"
-                style={{ ...featureStyle, ...noBorder }}
+      <>
+        <HTMLTable
+          bordered={false}
+          style={{ ...noBorder }}
+          className="workbench-settings"
+        >
+          <thead>
+            <tr style={{ ...thBorder }}>
+              <th style={{ ...settingsStyle, ...noBorder }}>Enabled</th>
+              <th style={{ ...featureStyle, ...noBorder }}>Feature</th>
+              <th
+                style={{
+                  ...settingsStyle,
+                  ...noBorder,
+                  display: isMaxWidth ? "none" : "",
+                }}
               >
-                <span>{name}</span>
-              </td>
-              <td
-                aria-label="Info button"
+                Info
+              </th>
+              <th
                 style={{
                   ...settingsStyle,
                   ...noBorder,
                   display: isMaxWidth ? "none" : "",
                 }}
               >
-                <Popover
-                  content={
-                    <div style={{ width: "540px", height: "420px" }}>
-                      <p
-                        style={{
-                          padding: "10px",
-                          margin: 0,
-                          textAlign: "center",
-                          borderBottom: "1px solid lightgray",
-                        }}
-                      >
-                        {description}
-                      </p>
-                      <img
-                        style={{
-                          width: "100%",
-                          marginTop: "10px",
-                        }}
-                        src={`https://github.com/RoamJS/workbench/blob/main/docs/media/${gif}.gif?raw=true`}
-                      />
-                    </div>
-                  }
+                Settings
+              </th>
+              <th style={{ ...settingsStyle, ...noBorder }}>Documentation</th>
+            </tr>
+          </thead>
+          <tbody>
+            {FEATURES.map(
+              ({ id, name, docs, module, description, gif, settings }, i) => (
+                <tr
+                  key={id}
+                  style={{
+                    borderBottom:
+                      i === FEATURES.length - 1 ? "none" : "solid 1px #293742",
+                    borderRight: "none",
+                    borderLeft: "none",
+                  }}
                 >
-                  <Button icon="info-sign" />
-                </Popover>
-              </td>
-              {/* placeholder for when settings migrated to API */}
-              {/* https://github.com/RoamJS/workbench/issues/402 */}
-              {/* <td aria-label="Settings button" style={{ ...settingsStyle, ...cellsBorder }}>
-                  {settings ? (
-                    <Button
-                      intent="primary"
-                      icon="cog"
-                      onClick={() => {
-                        console.log("Button clicked!");
+                  <td
+                    aria-label="On/Off Switch"
+                    style={{ ...settingsStyle, ...noBorder }}
+                  >
+                    <Switch
+                      checked={featureToggleSettings[id]}
+                      onChange={(e) => {
+                        const updatedSettings = {
+                          ...featureToggleSettings,
+                          [id]: (e.target as HTMLInputElement).checked,
+                        };
+                        setFeatureToggleSettings(updatedSettings);
+                        extensionAPI.settings.set(
+                          id,
+                          (e.target as HTMLInputElement).checked
+                        );
+                        module.toggleFeature(
+                          (e.target as HTMLInputElement).checked,
+                          extensionAPI
+                        );
                       }}
                     />
-                  ) : null}
-                </td> */}
-              <td
-                aria-label="Docs Button"
-                style={{ ...settingsStyle, ...noBorder }}
-              >
-                <AnchorButton
-                  intent="primary"
-                  icon="document-open"
-                  href={`https://github.com/RoamJs/workbench/blob/main/docs/${docs}`}
-                  target="_blank"
-                />
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </HTMLTable>
+                  </td>
+                  <td
+                    aria-label="Feature Name"
+                    style={{ ...featureStyle, ...noBorder }}
+                  >
+                    <span>{name}</span>
+                  </td>
+                  <td
+                    aria-label="Info button"
+                    style={{
+                      ...settingsStyle,
+                      ...noBorder,
+                      display: isMaxWidth ? "none" : "",
+                    }}
+                  >
+                    <Popover
+                      content={
+                        <div style={{ width: "540px", height: "420px" }}>
+                          <p
+                            style={{
+                              padding: "10px",
+                              margin: 0,
+                              textAlign: "center",
+                              borderBottom: "1px solid lightgray",
+                            }}
+                          >
+                            {description}
+                          </p>
+                          <img
+                            style={{
+                              width: "100%",
+                              marginTop: "10px",
+                            }}
+                            src={`https://github.com/RoamJS/workbench/blob/main/docs/media/${gif}.gif?raw=true`}
+                          />
+                        </div>
+                      }
+                    >
+                      <Button icon="info-sign" />
+                    </Popover>
+                  </td>
+                  {/* https://github.com/RoamJS/workbench/issues/402 */}
+                  <td
+                    aria-label="Settings Button"
+                    style={{
+                      ...settingsStyle,
+                      ...noBorder,
+                      display: isMaxWidth ? "none" : "",
+                    }}
+                  >
+                    {settings ? (
+                      <Button icon="cog" onClick={() => handleOpenDialog(id)} />
+                    ) : null}
+                  </td>
+                  <td
+                    aria-label="Docs Button"
+                    style={{ ...settingsStyle, ...noBorder }}
+                  >
+                    <AnchorButton
+                      intent="primary"
+                      icon="document-open"
+                      href={`https://github.com/RoamJs/workbench/blob/main/docs/${docs}`}
+                      target="_blank"
+                    />
+                  </td>
+                </tr>
+              )
+            )}
+          </tbody>
+        </HTMLTable>
+        <Dialog
+          className="w-auto"
+          isOpen={isDialogOpen}
+          onClose={() => setIsDialogOpen(false)}
+          title="Module Settings"
+          canOutsideClickClose
+          canEscapeKeyClose
+          autoFocus={false}
+        >
+          <div className={Classes.DIALOG_BODY}>
+            <LegacySettings moduleId={currentModuleId} />
+          </div>
+        </Dialog>
+      </>
     );
   };
 
diff --git a/src/index.ts b/src/index.ts
index 1b67ab3..3b56c9b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -30,9 +30,9 @@ export type Feature = {
   module: any;
   docs: string;
   gif: string;
-  // settings: any;
+  settings?: { [key: string]: string };
 };
-const FEATURES = [
+export const FEATURES: Feature[] = [
   {
     id: "alert",
     name: "Alert",
@@ -64,7 +64,9 @@ const FEATURES = [
     name: "Daily Notes Popup",
     module: dailyNotesPopup,
     description: "A popup window with the current Daily Notes Page",
-    // settings: dailyNotesPopupSettings,
+    settings: {
+      "Daily Subtitles": "dailySubtitles",
+    },
     docs: "daily-note-popup.md",
     gif: "short-demo-dnp",
   },
@@ -74,7 +76,7 @@ const FEATURES = [
     module: decorators,
     description:
       "Decorates blocks with various configurable features for quick actions.",
-    // settings: decoratedBlocksSettings,
+    // settings: { "Move Archives": "decoratorsMoveArchives" }, // undocumented
     docs: "decorated-blocks.md",
     gif: "short-demo-decorated-blocks",
   },
@@ -91,7 +93,7 @@ const FEATURES = [
     name: "Dictionary",
     module: dictionary,
     description: "Look up terms in the dictionary",
-    // settings: dictionarySettings,
+    settings: { Format: "Dictionary format" },
     docs: "dictionary.md",
     gif: "short-demo-dictionary",
   },
@@ -109,6 +111,7 @@ const FEATURES = [
     module: jumpnav,
     description:
       "Keyboard shortcuts for interacting with the Roam user interface",
+    // settings: {"CopyRefAsAliasFormat":"CopyRefAsAliasFormat"}, // undocumented
     docs: "hot-keys.md",
     gif: "short-demo-hot-keys",
   },
@@ -134,7 +137,12 @@ const FEATURES = [
     module: livePreview,
     description:
       "See live and editable preview of pages upon hovering over tags and page links",
-    // settings: livePreviewSettings,
+    settings: {
+      Height: "LivePreviewHeight",
+      Width: "LivePreviewWidth",
+      Modifier: "LivePreviewModifier",
+      Delay: "LivePreviewDelay",
+    },
     docs: "live-preview.md",
     gif: "short-demo-live-preview",
   },
diff --git a/src/settings.ts b/src/settings.ts
index 1f190eb..6628081 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -1,4 +1,4 @@
-// There are a bunch of legacy Roam42 features that uses this settings system - plan is to migrate those over time 
+// There are a bunch of legacy Roam42 features that uses this settings system - plan is to migrate those over time
 // once I see which features actually get usage, then delete this file
 
 import getBlockUidsAndTextsReferencingPage from "roamjs-components/queries/getBlockUidsAndTextsReferencingPage";
@@ -11,6 +11,7 @@ export const get = (settingName: string) => {
       result = s.text
         .replace("#42Setting ", "")
         .replace("#[[42Setting]] ", "")
+        .replace("[[42Setting]] ", "")
         .replace(settingName, "")
         .trim();
       break;