From d2bce26f9191685e450497cb655adec1d9874b98 Mon Sep 17 00:00:00 2001 From: sid597 Date: Mon, 22 Dec 2025 23:52:24 +0530 Subject: [PATCH 1/2] add left sidebar feature flag --- apps/roam/src/components/LeftSidebarView.tsx | 11 +++++ .../components/settings/GeneralSettings.tsx | 16 ++------ .../utils/initializeObserversAndListeners.ts | 40 +++++++++++++------ .../utils/pullWatchBlockPropsBasedSettings.ts | 22 +++++++++- apps/roam/src/utils/zodSchemaForSettings.ts | 1 + 5 files changed, 63 insertions(+), 27 deletions(-) diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index 34ce369ca..39a7a7f52 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -531,4 +531,15 @@ export const mountLeftSidebar = async ( ReactDOM.render(, root); }; +export const unmountLeftSidebar = (wrapper: HTMLElement): void => { + if (!wrapper) return; + const id = "dg-left-sidebar-root"; + const root = wrapper.querySelector(`#${id}`) as HTMLDivElement; + if (root) { + ReactDOM.unmountComponentAtNode(root); + root.remove(); + } + wrapper.style.padding = ""; +}; + export default LeftSidebarView; diff --git a/apps/roam/src/components/settings/GeneralSettings.tsx b/apps/roam/src/components/settings/GeneralSettings.tsx index 3270ef616..46ced2c33 100644 --- a/apps/roam/src/components/settings/GeneralSettings.tsx +++ b/apps/roam/src/components/settings/GeneralSettings.tsx @@ -1,10 +1,10 @@ import React, { useMemo, useState } from "react"; import TextPanel from "roamjs-components/components/ConfigPanels/TextPanel"; -import FlagPanel from "roamjs-components/components/ConfigPanels/FlagPanel"; import { getFormattedConfigTree } from "~/utils/discourseConfigRef"; import refreshConfigTree from "~/utils/refreshConfigTree"; import { DEFAULT_CANVAS_PAGE_FORMAT } from "~/index"; import { Alert, Intent } from "@blueprintjs/core"; +import { BlockPropFeatureFlagPanel } from "./BlockPropFeatureFlagPanel"; const DiscourseGraphHome = () => { const settings = useMemo(() => { @@ -33,20 +33,10 @@ const DiscourseGraphHome = () => { value={settings.canvasPageFormat.value} defaultValue={DEFAULT_CANVAS_PAGE_FORMAT} /> - { - if (checked) { - setIsAlertOpen(true); - } - }, - }} + featureKey="Enable Left Sidebar" /> void, delay = 250) => { let timeout: number; @@ -77,6 +82,7 @@ export const initObservers = async ({ nodeCreationPopoverListener: EventListener; }; }> => { + const topLevelBlockProps = await initSchema(); const pageTitleObserver = createHTMLObserver({ tag: "H1", className: "rm-title-display", @@ -238,25 +244,33 @@ export const initObservers = async ({ const personalTrigger = personalTriggerCombo?.key; const personalModifiers = getModifiersFromCombo(personalTriggerCombo); + let leftSidebarContainer: HTMLDivElement | null = null; + + const updateLeftSidebar = (container: HTMLDivElement) => { + const isLeftSidebarEnabled = getFeatureFlag("Enable Left Sidebar"); + if (isLeftSidebarEnabled) { + container.style.padding = "0"; + void mountLeftSidebar(container, onloadArgs); + } else { + unmountLeftSidebar(container); + } + }; const leftSidebarObserver = createHTMLObserver({ tag: "DIV", useBody: true, className: "starred-pages-wrapper", callback: (el) => { - void (async () => { - const isLeftSidebarEnabled = getUidAndBooleanSetting({ - tree: configTree, - text: "(BETA) Left Sidebar", - }).value; - const container = el as HTMLDivElement; - if (isLeftSidebarEnabled) { - container.style.padding = "0"; - await mountLeftSidebar(container, onloadArgs); - } - })(); + leftSidebarContainer = el as HTMLDivElement; + updateLeftSidebar(leftSidebarContainer); }, }); + setupPullWatchBlockPropsBasedSettings( + topLevelBlockProps, + updateLeftSidebar, + leftSidebarContainer as unknown as HTMLDivElement, + ); + const handleNodeMenuRender = (target: HTMLElement, evt: KeyboardEvent) => { if ( target.tagName === "TEXTAREA" && diff --git a/apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts b/apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts index a98fce69c..2366440c6 100644 --- a/apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts +++ b/apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts @@ -1,7 +1,10 @@ import { TOP_LEVEL_BLOCK_PROP_KEYS } from "~/data/blockPropsSettingsConfig"; +import { json, normalizeProps } from "./getBlockProps"; export const setupPullWatchBlockPropsBasedSettings = ( blockUids: Record, + updateLeftSidebar: (container: HTMLDivElement) => void, + leftSidebarContainer: HTMLDivElement, ) => { const featureFlagsBlockUid = blockUids[TOP_LEVEL_BLOCK_PROP_KEYS.featureFlags]; @@ -11,7 +14,24 @@ export const setupPullWatchBlockPropsBasedSettings = ( "[:block/props]", `[:block/uid "${featureFlagsBlockUid}"]`, (before, after) => { - console.log("feature flags changed", before, after); + const beforeProps = normalizeProps( + (before?.[":block/props"] || {}) as json, + ) as Record; + const afterProps = normalizeProps( + (after?.[":block/props"] || {}) as json, + ) as Record; + + const beforeEnabled = beforeProps["Enable Left sidebar"] as + | boolean + | undefined; + const afterEnabled = afterProps["Enable Left sidebar"] as + | boolean + | undefined; + + // Only update if the flag actually changed + if (beforeEnabled !== afterEnabled) { + updateLeftSidebar(leftSidebarContainer); + } }, ); } diff --git a/apps/roam/src/utils/zodSchemaForSettings.ts b/apps/roam/src/utils/zodSchemaForSettings.ts index f05a394e9..218dd37a3 100644 --- a/apps/roam/src/utils/zodSchemaForSettings.ts +++ b/apps/roam/src/utils/zodSchemaForSettings.ts @@ -2,6 +2,7 @@ import { z } from "zod"; /* eslint-disable @typescript-eslint/naming-convention */ export const FeatureFlagsSchema = z.object({ + "Enable Left Sidebar": z.boolean().default(false), }); /* eslint-disable @typescript-eslint/naming-convention */ From 53bf0121c9ffcc5fa5c7c20cc67ddc2b14f47a7f Mon Sep 17 00:00:00 2001 From: sid597 Date: Wed, 24 Dec 2025 23:49:52 +0530 Subject: [PATCH 2/2] fix casing --- apps/roam/src/components/LeftSidebarView.tsx | 3 +-- apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts | 4 ++-- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/apps/roam/src/components/LeftSidebarView.tsx b/apps/roam/src/components/LeftSidebarView.tsx index 39a7a7f52..b449a15ff 100644 --- a/apps/roam/src/components/LeftSidebarView.tsx +++ b/apps/roam/src/components/LeftSidebarView.tsx @@ -533,8 +533,7 @@ export const mountLeftSidebar = async ( export const unmountLeftSidebar = (wrapper: HTMLElement): void => { if (!wrapper) return; - const id = "dg-left-sidebar-root"; - const root = wrapper.querySelector(`#${id}`) as HTMLDivElement; + const root = wrapper.querySelector(`#${"dg-left-sidebar-root"}`) as HTMLDivElement; if (root) { ReactDOM.unmountComponentAtNode(root); root.remove(); diff --git a/apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts b/apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts index 2366440c6..a18806a60 100644 --- a/apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts +++ b/apps/roam/src/utils/pullWatchBlockPropsBasedSettings.ts @@ -21,10 +21,10 @@ export const setupPullWatchBlockPropsBasedSettings = ( (after?.[":block/props"] || {}) as json, ) as Record; - const beforeEnabled = beforeProps["Enable Left sidebar"] as + const beforeEnabled = beforeProps["Enable Left Sidebar"] as | boolean | undefined; - const afterEnabled = afterProps["Enable Left sidebar"] as + const afterEnabled = afterProps["Enable Left Sidebar"] as | boolean | undefined;