ENG-1328: Port small blueprint based misc settings into props based

apps/roam/src/components/settings/AdminPanel.tsx

@@ -38,6 +38,7 @@ import createBlock from "roamjs-components/writes/createBlock";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import { USE_REIFIED_RELATIONS } from "~/data/userSettings";
 import posthog from "posthog-js";
+import { setFeatureFlag } from "~/components/settings/utils/accessors";
 
 const NodeRow = ({ node }: { node: PConceptFull }) => {
   return (
@@ -377,6 +378,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
               setSuggestiveModeUid(undefined);
             }
             setSuggestiveModeEnabled(false);
+            setFeatureFlag("Suggestive mode enabled", false);
           }
         }}
         labelElement={
@@ -399,6 +401,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
           }).then((uid) => {
             setSuggestiveModeUid(uid);
             setSuggestiveModeEnabled(true);
+            setFeatureFlag("Suggestive mode enabled", true);
             setIsAlertOpen(false);
             setIsInstructionOpen(true);
           });
@@ -447,6 +450,7 @@ const FeatureFlagsTab = (): React.ReactElement => {
           void setSetting(USE_REIFIED_RELATIONS, target.checked).catch(
             () => undefined,
           );
+          setFeatureFlag("Reified relation triples", target.checked);
           posthog.capture("Reified Relations: Toggled", {
             enabled: target.checked,
           });

apps/roam/src/components/settings/DefaultFilters.tsx

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
 import type { OnloadArgs } from "roamjs-components/types";
 import type { Filters } from "roamjs-components/components/Filter";
 import posthog from "posthog-js";
+import { setPersonalSetting } from "~/components/settings/utils/accessors";
 
 //
 // TODO - REWORK THIS COMPONENT
@@ -124,28 +125,27 @@ const DefaultFilters = ({
   );
 
   useEffect(() => {
-    extensionAPI.settings.set(
-      "default-filters",
-      Object.fromEntries(
-        Object.entries(filters).map(([k, v]) => [
-          k,
-          {
-            includes: Object.fromEntries(
-              Object.entries(v.includes || {}).map(([k, v]) => [
-                k,
-                Array.from(v),
-              ]),
-            ),
-            excludes: Object.fromEntries(
-              Object.entries(v.excludes || {}).map(([k, v]) => [
-                k,
-                Array.from(v),
-              ]),
-            ),
-          },
-        ]),
-      ),
+    const serialized = Object.fromEntries(
+      Object.entries(filters).map(([k, v]) => [
+        k,
+        {
+          includes: Object.fromEntries(
+            Object.entries(v.includes || {}).map(([k, v]) => [
+              k,
+              Array.from(v),
+            ]),
+          ),
+          excludes: Object.fromEntries(
+            Object.entries(v.excludes || {}).map(([k, v]) => [
+              k,
+              Array.from(v),
+            ]),
+          ),
+        },
+      ]),
     );
+    void extensionAPI.settings.set("default-filters", serialized);
+    setPersonalSetting(["Query", "Default filters"], serialized);
   }, [filters]);
   return (
     <div

apps/roam/src/components/settings/DiscourseNodeAttributes.tsx

@@ -5,6 +5,7 @@ import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByPar
 import getFirstChildUidByBlockUid from "roamjs-components/queries/getFirstChildUidByBlockUid";
 import updateBlock from "roamjs-components/writes/updateBlock";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
+import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
 
 type Attribute = {
   uid: string;
@@ -18,7 +19,12 @@ const NodeAttribute = ({
   value,
   onChange,
   onDelete,
-}: Attribute & { onChange: (v: string) => void; onDelete: () => void }) => {
+  onSync,
+}: Attribute & {
+  onChange: (v: string) => void;
+  onDelete: () => void;
+  onSync?: () => void;
+}) => {
   const timeoutRef = useRef(0);
   return (
     <div
@@ -40,6 +46,7 @@ const NodeAttribute = ({
               text: e.target.value,
               uid: getFirstChildUidByBlockUid(uid),
             });
+            onSync?.();
           }, 500);
         }}
       />
@@ -53,14 +60,32 @@ const NodeAttribute = ({
   );
 };
 
-const NodeAttributes = ({ uid }: { uid: string }) => {
+const toRecord = (attrs: Attribute[]): Record<string, string> =>
+  Object.fromEntries(attrs.map((a) => [a.label, a.value]));
+
+const NodeAttributes = ({
+  uid,
+  nodeType,
+}: {
+  uid: string;
+  nodeType: string;
+}) => {
   const [attributes, setAttributes] = useState<Attribute[]>(() =>
     getBasicTreeByParentUid(uid).map((t) => ({
       uid: t.uid,
       label: t.text,
       value: t.children[0]?.text,
     })),
   );
+  const attributesRef = useRef(attributes);
+  attributesRef.current = attributes;
+  const syncToBlockProps = () => {
+    setDiscourseNodeSetting(
+      nodeType,
+      ["attributes"],
+      toRecord(attributesRef.current),
+    );
+  };
   const [newAttribute, setNewAttribute] = useState("");
   return (
     <div>
@@ -77,10 +102,17 @@ const NodeAttributes = ({ uid }: { uid: string }) => {
               )
             }
             onDelete={() =>
-              deleteBlock(a.uid).then(() =>
-                setAttributes(attributes.filter((aa) => a.uid !== aa.uid)),
-              )
+              deleteBlock(a.uid).then(() => {
+                const updated = attributes.filter((aa) => a.uid !== aa.uid);
+                setAttributes(updated);
+                setDiscourseNodeSetting(
+                  nodeType,
+                  ["attributes"],
+                  toRecord(updated),
+                );
+              })
             }
+            onSync={syncToBlockProps}
           />
         ))}
       </div>
@@ -105,11 +137,17 @@ const NodeAttributes = ({ uid }: { uid: string }) => {
                 parentUid: uid,
                 order: attributes.length,
               }).then((uid) => {
-                setAttributes([
+                const updated = [
                   ...attributes,
                   { uid, label: newAttribute, value: DEFAULT },
-                ]);
+                ];
+                setAttributes(updated);
                 setNewAttribute("");
+                setDiscourseNodeSetting(
+                  nodeType,
+                  ["attributes"],
+                  toRecord(updated),
+                );
               });
             }}
           />

apps/roam/src/components/settings/DiscourseNodeCanvasSettings.tsx

@@ -11,7 +11,11 @@ import React, { useState, useMemo } from "react";
 import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
 import getSettingValueFromTree from "roamjs-components/util/getSettingValueFromTree";
 import setInputSetting from "roamjs-components/util/setInputSetting";
-import { DiscourseNodeFlagPanel } from "./components/BlockPropSettingPanels";
+import {
+  DiscourseNodeFlagPanel,
+  DiscourseNodeTextPanel,
+} from "./components/BlockPropSettingPanels";
+import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
 
 export const formatHexColor = (color: string) => {
   if (!color) return "";
@@ -37,9 +41,7 @@ const DiscourseNodeCanvasSettings = ({
     const color = getSettingValueFromTree({ tree, key: "color" });
     return formatHexColor(color);
   });
-  const [alias, setAlias] = useState<string>(() =>
-    getSettingValueFromTree({ tree, key: "alias" }),
-  );
+  const alias = getSettingValueFromTree({ tree, key: "alias" });
   const [queryBuilderAlias, setQueryBuilderAlias] = useState<string>(() =>
     getSettingValueFromTree({ tree, key: "query-builder-alias" }),
   );
@@ -60,12 +62,18 @@ const DiscourseNodeCanvasSettings = ({
             type={"color"}
             value={color}
             onChange={(e) => {
+              const colorValue = e.target.value.replace("#", ""); // remove hash to not create roam link
               setColor(e.target.value);
               void setInputSetting({
                 blockUid: uid,
                 key: "color",
-                value: e.target.value.replace("#", ""), // remove hash to not create roam link
+                value: colorValue,
               });
+              setDiscourseNodeSetting(
+                nodeType,
+                ["canvasSettings", "color"],
+                colorValue,
+              );
             }}
           />
           <Tooltip content={color ? "Unset" : "Color not set"}>
@@ -79,25 +87,30 @@ const DiscourseNodeCanvasSettings = ({
                   key: "color",
                   value: "",
                 });
+                setDiscourseNodeSetting(
+                  nodeType,
+                  ["canvasSettings", "color"],
+                  "",
+                );
               }}
             />
           </Tooltip>
         </ControlGroup>
       </div>
-      <Label style={{ width: 240 }}>
-        Display alias
-        <InputGroup
-          value={alias}
-          onChange={(e) => {
-            setAlias(e.target.value);
-            void setInputSetting({
-              blockUid: uid,
-              key: "alias",
-              value: e.target.value,
-            });
-          }}
-        />
-      </Label>
+      <DiscourseNodeTextPanel
+        nodeType={nodeType}
+        title="Display alias"
+        description=""
+        settingKeys={["canvasSettings", "alias"]}
+        initialValue={alias}
+        onChange={(val) => {
+          void setInputSetting({
+            blockUid: uid,
+            key: "alias",
+            value: val,
+          });
+        }}
+      />
       <DiscourseNodeFlagPanel
         nodeType={nodeType}
         title="Key image"
@@ -126,6 +139,11 @@ const DiscourseNodeCanvasSettings = ({
             key: "key-image-option",
             value,
           });
+          setDiscourseNodeSetting(
+            nodeType,
+            ["canvasSettings", "key-image-option"],
+            value,
+          );
         }}
       >
         <Radio label="First image on page" value="first-image" />
@@ -145,12 +163,18 @@ const DiscourseNodeCanvasSettings = ({
         disabled={keyImageOption !== "query-builder" || !isKeyImage}
         value={queryBuilderAlias}
         onChange={(e) => {
-          setQueryBuilderAlias(e.target.value);
+          const val = e.target.value;
+          setQueryBuilderAlias(val);
           void setInputSetting({
             blockUid: uid,
             key: "query-builder-alias",
-            value: e.target.value,
+            value: val,
           });
+          setDiscourseNodeSetting(
+            nodeType,
+            ["canvasSettings", "query-builder-alias"],
+            val,
+          );
         }}
       />
     </div>

apps/roam/src/components/settings/DiscourseNodeConfigPanel.tsx

@@ -13,9 +13,14 @@ import refreshConfigTree from "~/utils/refreshConfigTree";
 import createPage from "roamjs-components/writes/createPage";
 import type { CustomField } from "roamjs-components/components/ConfigPanels/types";
 import posthog from "posthog-js";
-import getDiscourseRelations from "~/utils/getDiscourseRelations";
+import getDiscourseRelations, {
+  type DiscourseRelation,
+} from "~/utils/getDiscourseRelations";
 import { deleteBlock } from "roamjs-components/writes";
 import { formatHexColor } from "./DiscourseNodeCanvasSettings";
+import setBlockProps from "~/utils/setBlockProps";
+import { DiscourseNodeSchema } from "./utils/zodSchema";
+import { getGlobalSettings, setGlobalSetting } from "./utils/accessors";
 
 type DiscourseNodeConfigPanelProps = React.ComponentProps<
   CustomField["options"]["component"]
@@ -38,7 +43,9 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
 
   const [isAlertOpen, setIsAlertOpen] = useState(false);
   const [alertMessage, setAlertMessage] = useState("");
-  const [affectedRelations, setAffectedRelations] = useState<any[]>([]);
+  const [affectedRelations, setAffectedRelations] = useState<
+    DiscourseRelation[]
+  >([]);
   const [nodeTypeIdToDelete, setNodeTypeIdToDelete] = useState<string>("");
   const navigateToNode = (uid: string) => {
     if (isPopup) {
@@ -72,28 +79,36 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
           className="select-none"
           disabled={!label}
           onClick={() => {
+            const shortcut = label.slice(0, 1).toUpperCase();
+            const format = `[[${label.slice(0, 3).toUpperCase()}]] - {content}`;
             posthog.capture("Discourse Node: Type Created", { label: label });
-            createPage({
+            void createPage({
               title: `discourse-graph/nodes/${label}`,
               tree: [
                 {
                   text: "Shortcut",
-                  children: [{ text: label.slice(0, 1).toUpperCase() }],
+                  children: [{ text: shortcut }],
                 },
                 {
                   text: "Tag",
                   children: [{ text: "" }],
                 },
                 {
                   text: "Format",
-                  children: [
-                    {
-                      text: `[[${label.slice(0, 3).toUpperCase()}]] - {content}`,
-                    },
-                  ],
+                  children: [{ text: format }],
                 },
               ],
             }).then((valueUid) => {
+              setBlockProps(
+                valueUid,
+                DiscourseNodeSchema.parse({
+                  text: label,
+                  type: valueUid,
+                  shortcut,
+                  format,
+                  backedBy: "user",
+                }),
+              );
               setNodes([
                 ...nodes,
                 {
@@ -222,6 +237,9 @@ const DiscourseNodeConfigPanel: React.FC<DiscourseNodeConfigPanelProps> = ({
                   throw error;
                 });
               }
+              const relations = { ...getGlobalSettings().Relations };
+              for (const rel of affectedRelations) delete relations[rel.id];
+              setGlobalSetting(["Relations"], relations);
               deleteNodeType(nodeTypeIdToDelete);
             } catch (error) {
               console.error(