ENG-889: Render SmartBlocks as interactive buttons in left sidebar

apps/roam/src/components/LeftSidebarView.tsx

@@ -48,6 +48,8 @@ import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageU
 import { migrateLeftSidebarSettings } from "~/utils/migrateLeftSidebarSettings";
 import posthog from "posthog-js";
 import { commands, cleanCommandName } from "~/components/LeftSidebarCommands";
+import { isSmartBlockUid } from "~/utils/isSmartBlockUid";
+import { RenderRoamBlock } from "~/utils/roamReactComponents";
 
 const parseReference = (text: string) => {
   const extracted = extractRef(text);
@@ -135,6 +137,26 @@ const toggleFoldedState = ({
   }
 };
 
+const RoamRenderedBlock = ({ uid }: { uid: string }) => {
+  const [version, setVersion] = useState(0);
+
+  useEffect(() => {
+    const pattern = "[:block/string]";
+    const entityId = `[:block/uid "${uid}"]`;
+    const callback = () => setVersion((v) => v + 1);
+    window.roamAlphaAPI.data.addPullWatch(pattern, entityId, callback);
+    return () => {
+      window.roamAlphaAPI.data.removePullWatch(pattern, entityId, callback);
+    };
+  }, [uid]);
+
+  return (
+    <div className="dg-sidebar-rendered-block">
+      <RenderRoamBlock key={version} uid={uid} open={false} />
+    </div>
+  );
+};
+
 type ChildNode = { uid: string; text: string; alias?: { value: string } };
 
 const ChildRow = ({
@@ -147,6 +169,17 @@ const ChildRow = ({
   onloadArgs: OnloadArgs;
 }) => {
   const ref = parseReference(child.text);
+
+  if (ref.type === "block" && isSmartBlockUid(ref.uid)) {
+    return (
+      <div className="pl-8 pr-2.5">
+        <div className="section-child-item rounded-sm leading-normal text-gray-600">
+          <RoamRenderedBlock uid={ref.uid} />
+        </div>
+      </div>
+    );
+  }
+
   const alias = child.alias?.value;
   const display =
     ref.type === "command"
@@ -701,6 +734,22 @@ export const mountLeftSidebar = async (
 ): Promise<void> => {
   if (!wrapper) return;
 
+  const styleId = "dg-sidebar-rendered-block-styles";
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement("style");
+    style.id = styleId;
+    style.textContent = `
+      .dg-sidebar-rendered-block .rm-bullet { display: none; }
+      .dg-sidebar-rendered-block .rm-block-separator { display: none; }
+      .dg-sidebar-rendered-block .controls { display: none; }
+      .dg-sidebar-rendered-block .block-expand { display: none; }
+      .dg-sidebar-rendered-block .block-border-left { display: none; }
+      .dg-sidebar-rendered-block .block-ref-count-button { display: none; }
+      .dg-sidebar-rendered-block .rm-block-main { min-height: unset; padding: 0; }
+    `;
+    document.head.appendChild(style);
+  }
+
   const id = "dg-left-sidebar-root";
   let root = wrapper.querySelector(`#${id}`) as HTMLDivElement;
   if (!root) {

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

@@ -46,6 +46,12 @@ import {
   commands,
   SidebarCommandPopover,
 } from "~/components/LeftSidebarCommands";
+import { isSmartBlockUid } from "~/utils/isSmartBlockUid";
+
+const isSmartBlockRef = (text: string): boolean => {
+  if (!text.startsWith("((") || !text.endsWith("))")) return false;
+  return isSmartBlockUid(extractRef(text));
+};
 
 /* eslint-disable @typescript-eslint/naming-convention */
 export const sectionsToBlockProps = (
@@ -429,6 +435,7 @@ const SectionItem = memo(
                   renderItem={(child, handle) => {
                     const childAlias = child.alias?.value;
                     const isSettingsOpen = childSettingsUid === child.uid;
+                    const childIsSmartBlock = isSmartBlockRef(child.text);
                     const childDisplayTitle =
                       getPageTitleByPageUid(child.text) ||
                       getTextByBlockUid(extractRef(child.text)) ||
@@ -444,7 +451,7 @@ const SectionItem = memo(
                             className="mr-2 min-w-0 flex-1 truncate"
                             title={childDisplayTitle}
                           >
-                            {childAlias ? (
+                            {childAlias && !childIsSmartBlock ? (
                               <span>
                                 <span className="font-medium">
                                   {childAlias}
@@ -458,13 +465,15 @@ const SectionItem = memo(
                             )}
                           </div>
                           <ButtonGroup minimal className="flex-shrink-0">
-                            <Button
-                              icon="settings"
-                              small
-                              onClick={() => setChildSettingsUid(child.uid)}
-                              title="Child settings"
-                              className="opacity-0 transition-opacity group-hover:opacity-100"
-                            />
+                            {!childIsSmartBlock && (
+                              <Button
+                                icon="settings"
+                                small
+                                onClick={() => setChildSettingsUid(child.uid)}
+                                title="Child settings"
+                                className="opacity-0 transition-opacity group-hover:opacity-100"
+                              />
+                            )}
                             <Button
                               icon="trash"
                               small

apps/roam/src/utils/createDiscourseNode.ts

@@ -163,7 +163,7 @@ const createDiscourseNode = async ({
     await handleImageCreation(pageUid);
   };
 
-  const hasSmartBlockSyntax = (node: RoamBasicNode) => {
+  const hasSmartBlockSyntax = (node: RoamBasicNode): boolean => {
     if (node.text.includes("<%")) return true;
     if (node.children) return node.children.some(hasSmartBlockSyntax);
     return false;

apps/roam/src/utils/isSmartBlockUid.ts

@@ -0,0 +1,7 @@
+import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
+
+export const isSmartBlockUid = (uid: string): boolean => {
+  const text = getTextByBlockUid(uid);
+  if (!text) return false;
+  return text.includes(":SmartBlock:");
+};

apps/roam/src/utils/registerCommandPaletteCommands.ts

@@ -23,11 +23,17 @@ import { HIDE_METADATA_KEY } from "~/data/userSettings";
 import posthog from "posthog-js";
 import { extractRef } from "roamjs-components/util";
 import discourseConfigRef from "~/utils/discourseConfigRef";
-import { getLeftSidebarPersonalSectionConfig } from "~/utils/getLeftSidebarSettings";
+import {
+  getLeftSidebarPersonalSectionConfig,
+  getLeftSidebarGlobalSectionConfig,
+} from "~/utils/getLeftSidebarSettings";
 import { getUidAndBooleanSetting } from "~/utils/getExportSettings";
 import refreshConfigTree from "~/utils/refreshConfigTree";
 import { refreshAndNotify } from "~/components/LeftSidebarView";
-import { setPersonalSetting } from "~/components/settings/utils/accessors";
+import {
+  setPersonalSetting,
+  setGlobalSetting,
+} from "~/components/settings/utils/accessors";
 import { sectionsToBlockProps } from "~/components/settings/LeftSidebarPersonalSettings";
 
 type BlockSelection = {
@@ -363,6 +369,22 @@ export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
         },
       });
     }
+
+    const globalSection = getLeftSidebarGlobalSectionConfig(
+      leftSidebarNode?.children || [],
+    );
+    if (globalSection.childrenUid) {
+      window.roamAlphaAPI.ui.blockContextMenu.addCommand({
+        label: "DG: Favorites - Add to Global section",
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        callback: (props: { "block-uid": string }) => {
+          void addBlockToGlobalSection({
+            blockUid: props["block-uid"],
+            globalChildrenUid: globalSection.childrenUid,
+          });
+        },
+      });
+    }
   }
 };
 
@@ -426,3 +448,38 @@ const addBlockToPersonalSection = async ({
     });
   }
 };
+
+const addBlockToGlobalSection = async ({
+  blockUid,
+  globalChildrenUid,
+}: {
+  blockUid: string;
+  globalChildrenUid: string;
+}) => {
+  const blockRef = `((${blockUid}))`;
+
+  try {
+    await createBlock({
+      parentUid: globalChildrenUid,
+      order: "last",
+      node: { text: blockRef },
+    });
+
+    refreshConfigTree();
+    const updatedChildren = getLeftSidebarGlobalSectionConfig(
+      discourseConfigRef.tree.find((n) => n.text === "Left Sidebar")
+        ?.children || [],
+    ).children;
+    setGlobalSetting(
+      ["Left sidebar", "Children"],
+      updatedChildren.map((c) => c.text),
+    );
+    refreshAndNotify();
+  } catch {
+    renderToast({
+      content: "Failed to add block to global section",
+      intent: "danger",
+      id: "add-block-to-global-section-error",
+    });
+  }
+};