Land orphaned Graphite stack PRs (#764, #765, #769, #793, #794, #805) (#826)

* Land orphaned Graphite stack PRs (#764, #765, #769, #793, #794, #805)

  These PRs were squash-merged into parent branches instead of main
  due to a Graphite stack merge race condition. Their changes never
  landed on main despite showing as merged in Graphite.

  Includes:
  - #764 ENG-1280: Port query builder/editor for block props
  - #765 ENG-1291: Port discourse node specification (dual-write)
  - #769 ENG-1290: Port discourse node config panel
  - #793 ENG-1440: Port page groups settings in suggestive mode
  - #794 ENG-1438: Port keyboard shortcut keys/triggers
  - #805 ENG-1328: Port small blueprint misc settings

* Add #804 ENG-1217: Port section component in left sidebar

* Add #764, #765, #769 (Chain 1 orphaned PRs: query builder,
  specification, config panel)

  The initial recovery commit claimed to include these but only
  contained
  Chain 2 (#793, #794, #805, #804). Chain 1 lives on separate
  branches
  that weren't in the merge source.

  Applied using `gh pr diff` for each PR in order (#764 → #765 →
  #769).
  init.ts required manual merge — #765 and #769 both modified it
  from the
  same base. Kept #765's safeParse checks inside #769's
  restructured
  initializeSettingsBlockProps.

  - #764 ENG-1280: Port query builder and editor component for
  block props
  - #765 ENG-1291: Port discourse node specification
  - #769 ENG-1290: Port discourse node config panel

* fix lint

* prettier

Author: sid597

apps/roam/src/components/DiscourseNodeMenu.tsx

@@ -27,6 +27,7 @@ import { getNewDiscourseNodeText } from "~/utils/formatUtils";
 import { OnloadArgs } from "roamjs-components/types";
 import { formatHexColor } from "./settings/DiscourseNodeCanvasSettings";
 import posthog from "posthog-js";
+import { setPersonalSetting } from "~/components/settings/utils/accessors";
 
 type Props = {
   textarea?: HTMLTextAreaElement;
@@ -406,6 +407,13 @@ export const getModifiersFromCombo = (comboKey: IKeyCombo) => {
   ].filter(Boolean);
 };
 
+export const comboToString = (combo: IKeyCombo): string => {
+  if (!combo.key) return "";
+  const modifiers = getModifiersFromCombo(combo);
+  const comboString = [...modifiers, combo.key].join("+");
+  return normalizeKeyCombo(comboString).join("+");
+};
+
 export const NodeMenuTriggerComponent = ({
   extensionAPI,
 }: {
@@ -427,19 +435,15 @@ export const NodeMenuTriggerComponent = ({
       const comboObj = getKeyCombo(e.nativeEvent);
       if (!comboObj.key) return;
 
-      setComboKey({ key: comboObj.key, modifiers: comboObj.modifiers });
-      extensionAPI.settings.set("personal-node-menu-trigger", comboObj);
+      const combo = { key: comboObj.key, modifiers: comboObj.modifiers };
+      setComboKey(combo);
+      void extensionAPI.settings.set("personal-node-menu-trigger", combo);
+      setPersonalSetting(["Personal node menu trigger"], combo);
     },
     [extensionAPI],
   );
 
-  const shortcut = useMemo(() => {
-    if (!comboKey.key) return "";
-
-    const modifiers = getModifiersFromCombo(comboKey);
-    const comboString = [...modifiers, comboKey.key].join("+");
-    return normalizeKeyCombo(comboString).join("+");
-  }, [comboKey]);
+  const shortcut = useMemo(() => comboToString(comboKey), [comboKey]);
 
   return (
     <InputGroup
@@ -455,7 +459,8 @@ export const NodeMenuTriggerComponent = ({
           icon={"remove"}
           onClick={() => {
             setComboKey({ modifiers: 0, key: "" });
-            extensionAPI.settings.set("personal-node-menu-trigger", "");
+            void extensionAPI.settings.set("personal-node-menu-trigger", "");
+            setPersonalSetting(["Personal node menu trigger"], "");
           }}
           minimal
         />

apps/roam/src/components/DiscourseNodeSearchMenu.tsx

@@ -26,6 +26,7 @@ import getDiscourseNodeFormatExpression from "~/utils/getDiscourseNodeFormatExpr
 import { Result } from "~/utils/types";
 import { getSetting } from "~/utils/extensionSettings";
 import MiniSearch from "minisearch";
+import { setPersonalSetting } from "~/components/settings/utils/accessors";
 
 type Props = {
   textarea: HTMLTextAreaElement;
@@ -724,7 +725,8 @@ export const NodeSearchMenuTriggerSetting = ({
       .trim();
 
     setNodeSearchTrigger(trigger);
-    extensionAPI.settings.set("node-search-trigger", trigger);
+    void extensionAPI.settings.set("node-search-trigger", trigger);
+    setPersonalSetting(["Node search menu trigger"], trigger);
   };
   return (
     <InputGroup

apps/roam/src/components/QueryBuilder.tsx

@@ -31,11 +31,21 @@ type QueryPageComponent = (props: {
   pageUid: string;
   isEditBlock?: boolean;
   showAlias?: boolean;
+  discourseNodeType?: string;
+  settingKey?: "index" | "specification";
+  returnNode?: string;
 }) => JSX.Element;
 
 type Props = Parameters<QueryPageComponent>[0];
 
-const QueryBuilder = ({ pageUid, isEditBlock, showAlias }: Props) => {
+const QueryBuilder = ({
+  pageUid,
+  isEditBlock,
+  showAlias,
+  discourseNodeType,
+  settingKey,
+  returnNode,
+}: Props) => {
   const extensionAPI = useExtensionAPI();
   const hideMetadata = useMemo(
     () =>
@@ -158,6 +168,9 @@ const QueryBuilder = ({ pageUid, isEditBlock, showAlias }: Props) => {
           <>
             <QueryEditor
               parentUid={pageUid}
+              discourseNodeType={discourseNodeType}
+              settingKey={settingKey}
+              returnNode={returnNode}
               onQuery={() => {
                 setHasResults(true);
                 setIsEdit(false);

apps/roam/src/components/QueryEditor.tsx

@@ -44,6 +44,8 @@ import {
 import getShallowTreeByParentUid from "roamjs-components/queries/getShallowTreeByParentUid";
 import { ALL_SELECTION_SUGGESTIONS } from "~/utils/predefinedSelections";
 import { getAlias } from "~/utils/parseResultSettings";
+import { setDiscourseNodeSetting } from "~/components/settings/utils/accessors";
+import { IndexSchema } from "~/components/settings/utils/zodSchema";
 
 const getSourceCandidates = (cs: Condition[]): string[] =>
   cs.flatMap((c) =>
@@ -434,6 +436,9 @@ type QueryEditorComponent = (props: {
   setHasResults?: () => void;
   hideCustomSwitch?: boolean;
   showAlias?: boolean;
+  discourseNodeType?: string;
+  settingKey?: "index" | "specification";
+  returnNode?: string;
 }) => JSX.Element;
 
 const QueryEditor: QueryEditorComponent = ({
@@ -442,6 +447,9 @@ const QueryEditor: QueryEditorComponent = ({
   setHasResults,
   hideCustomSwitch,
   showAlias,
+  discourseNodeType, // eslint-disable-line react/prop-types
+  settingKey, // eslint-disable-line react/prop-types
+  returnNode, // eslint-disable-line react/prop-types
 }) => {
   useEffect(() => {
     const previewQuery = ((e: CustomEvent) => {
@@ -476,6 +484,53 @@ const QueryEditor: QueryEditorComponent = ({
   const [conditions, _setConditions] = useState(initialConditions);
   const [selections, setSelections] = useState(initialSelections);
   const [custom, setCustom] = useState(initialCustom);
+
+  const blockPropSyncTimeoutRef = useRef(0);
+  const lastSyncedIndexRef = useRef("");
+  useEffect(() => {
+    return () => window.clearTimeout(blockPropSyncTimeoutRef.current);
+  }, []);
+  useEffect(() => {
+    if (!discourseNodeType || !settingKey) return;
+
+    const stripped: unknown = JSON.parse(
+      JSON.stringify(
+        { conditions, selections, custom, returnNode },
+        (key, value: unknown) => (key === "uid" ? undefined : value),
+      ),
+    );
+
+    const serialized = JSON.stringify(stripped);
+    if (serialized === lastSyncedIndexRef.current) return;
+
+    const result = IndexSchema.safeParse(stripped);
+    if (!result.success) {
+      console.error(
+        `${settingKey} blockprop sync failed validation:`,
+        result.error,
+      );
+      return;
+    }
+
+    const path =
+      settingKey === "index" ? ["index"] : ["specification", "query"];
+
+    window.clearTimeout(blockPropSyncTimeoutRef.current);
+    blockPropSyncTimeoutRef.current = window.setTimeout(() => {
+      setDiscourseNodeSetting(discourseNodeType, path, result.data);
+      lastSyncedIndexRef.current = serialized;
+    }, 250);
+
+    return () => window.clearTimeout(blockPropSyncTimeoutRef.current);
+  }, [
+    conditions,
+    selections,
+    custom,
+    discourseNodeType,
+    settingKey,
+    returnNode,
+  ]);
+
   const customNodeOnChange = (value: string) => {
     window.clearTimeout(debounceRef.current);
     setCustom(value);

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),
+                );
               });
             }}
           />