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

apps/roam/src/components/LeftSidebarView.tsx

@@ -43,6 +43,7 @@ import { DISCOURSE_CONFIG_PAGE_TITLE } from "~/utils/renderNodeConfigPage";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import { migrateLeftSidebarSettings } from "~/utils/migrateLeftSidebarSettings";
 import posthog from "posthog-js";
+import { isSmartBlockUid } from "~/utils/createDiscourseNode";
 
 const parseReference = (text: string) => {
   const extracted = extractRef(text);
@@ -120,6 +121,39 @@ const toggleFoldedState = ({
   }
 };
 
+const RoamRenderedBlock = ({ uid }: { uid: string }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.innerHTML = "";
+    void window.roamAlphaAPI.ui.components.renderBlock({
+      uid,
+      el,
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      "open?": false,
+    });
+
+    const handleClick = (e: Event) => {
+      const target = e.target as HTMLElement;
+      if (target.closest("[data-roamjs-smartblock-button]")) {
+        void window.roamAlphaAPI.ui.mainWindow.openBlock({
+          block: { uid },
+        });
+      }
+    };
+    el.addEventListener("click", handleClick);
+
+    return () => {
+      el.innerHTML = "";
+      el.removeEventListener("click", handleClick);
+    };
+  }, [uid]);
+
+  return <div ref={containerRef} className="dg-sidebar-rendered-block" />;
+};
+
 const SectionChildren = ({
   childrenNodes,
   truncateAt,
@@ -133,6 +167,18 @@ const SectionChildren = ({
       {childrenNodes.map((child) => {
         const ref = parseReference(child.text);
         const alias = child.alias?.value;
+        const isSmartBlock = ref.type === "block" && isSmartBlockUid(ref.uid);
+
+        if (isSmartBlock) {
+          return (
+            <div key={child.uid} 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 display =
           ref.type === "page"
             ? getPageTitleByPageUid(ref.display)
@@ -519,6 +565,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

@@ -39,6 +39,12 @@ import { refreshAndNotify } from "~/components/LeftSidebarView";
 import { memo, Dispatch, SetStateAction } from "react";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import posthog from "posthog-js";
+import { isSmartBlockUid } from "~/utils/createDiscourseNode";
+
+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 = (
@@ -439,6 +445,7 @@ const SectionItem = memo(
                   {(section.children || []).map((child, index) => {
                     const childAlias = child.alias?.value;
                     const isSettingsOpen = childSettingsUid === child.uid;
+                    const childIsSmartBlock = isSmartBlockRef(child.text);
                     const childDisplayTitle =
                       getPageTitleByPageUid(child.text) ||
                       getTextByBlockUid(extractRef(child.text)) ||
@@ -450,7 +457,7 @@ const SectionItem = memo(
                             className="mr-2 min-w-0 flex-1 truncate"
                             title={childDisplayTitle}
                           >
-                            {childAlias ? (
+                            {childAlias && !childIsSmartBlock ? (
                               <span>
                                 <span className="font-medium">
                                   {childAlias}
@@ -464,13 +471,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="arrow-up"
                               small

apps/roam/src/utils/createDiscourseNode.ts

@@ -12,6 +12,25 @@ import { OnloadArgs, RoamBasicNode } from "roamjs-components/types";
 import runQuery from "./runQuery";
 import updateBlock from "roamjs-components/writes/updateBlock";
 import posthog from "posthog-js";
+import getBasicTreeByParentUid from "roamjs-components/queries/getBasicTreeByParentUid";
+import getTextByBlockUid from "roamjs-components/queries/getTextByBlockUid";
+
+const hasSmartBlockSyntax = (node: RoamBasicNode): boolean => {
+  if (node.text.includes("<%")) return true;
+  if (node.children) return node.children.some(hasSmartBlockSyntax);
+  return false;
+};
+
+export const isSmartBlockUid = (uid: string): boolean => {
+  const text = getTextByBlockUid(uid);
+  if (!text) return false;
+  if (text.includes(":SmartBlock:")) return true;
+  return hasSmartBlockSyntax({
+    text,
+    uid,
+    children: getBasicTreeByParentUid(uid),
+  });
+};
 
 type Props = {
   text: string;
@@ -163,11 +182,6 @@ const createDiscourseNode = async ({
     await handleImageCreation(pageUid);
   };
 
-  const hasSmartBlockSyntax = (node: RoamBasicNode) => {
-    if (node.text.includes("<%")) return true;
-    if (node.children) return node.children.some(hasSmartBlockSyntax);
-    return false;
-  };
   const useSmartBlocks = hasSmartBlockSyntax(templateNode);
 
   if (useSmartBlocks && !window.roamjs?.extension?.smartblocks) {

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";
 
 export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
@@ -341,6 +347,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,
+          });
+        },
+      });
+    }
   }
 };
 
@@ -404,3 +426,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",
+    });
+  }
+};