diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx
index 4647d3238..a1bb4bdfa 100644
--- a/apps/roam/src/components/LeftSidebarView.tsx
+++ b/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/getLeftSidebarSettings";
const parseReference = (text: string) => {
const extracted = extractRef(text);
@@ -120,6 +121,30 @@ const toggleFoldedState = ({
}
};
+const RoamRenderedBlock = ({ uid }: { uid: string }) => {
+ // @ts-expect-error - .react.block is available but not in the type definitions yet
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+ const Block = window.roamAlphaAPI.ui.components.react.block;
+
+ const handleClick = useCallback(
+ (e: React.MouseEvent) => {
+ const target = e.target as HTMLElement;
+ if (target.closest("[data-roamjs-smartblock-button]")) {
+ void window.roamAlphaAPI.ui.mainWindow.openBlock({
+ block: { uid },
+ });
+ }
+ },
+ [uid],
+ );
+
+ return (
+
+
+
+ );
+};
+
const SectionChildren = ({
childrenNodes,
truncateAt,
@@ -133,6 +158,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 (
+
+ );
+ }
+
const display =
ref.type === "page"
? getPageTitleByPageUid(ref.display)
@@ -519,6 +556,22 @@ export const mountLeftSidebar = async (
): Promise => {
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) {
diff --git a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx b/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx
index 74487b780..eca87a76e 100644
--- a/apps/roam/src/components/settings/LeftSidebarPersonalSettings.tsx
+++ b/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/getLeftSidebarSettings";
+
+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 ? (
{childAlias}
@@ -464,13 +471,15 @@ const SectionItem = memo(
)}
-