ENG-948: Add blocks to left sidebar via block context menu (#902)

* ENG-948: Add blocks to left sidebar via block context menu

Register block context menu commands so users can right-click any block
and add it to a left sidebar section. On click, the block is added
(dual-write to tree + block props), and the settings panel opens to the
relevant tab with the target section auto-expanded.

- Uses `window.roamAlphaAPI.ui.blockContextMenu.addCommand()` (first
  usage in codebase — `extensionAPI.ui` types don't include it)
- One command per personal section (with childrenUid) + one for global
- Gated behind leftSidebarEnabled flag
- Extended Settings render to accept selectedTabId and expandedSectionUid
- Exported sectionsToBlockProps (now has 2 consumers)

Limitations:
- Commands registered once on load; new sections need extension reload
- Simple sections (no childrenUid) are skipped

* self review

* Rename context menu label from "Left sidebar" to "Favorites"

Author: sid597

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

@@ -41,7 +41,9 @@ import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageU
 import posthog from "posthog-js";
 
 /* eslint-disable @typescript-eslint/naming-convention */
-const sectionsToBlockProps = (sections: LeftSidebarPersonalSectionConfig[]) =>
+export const sectionsToBlockProps = (
+  sections: LeftSidebarPersonalSectionConfig[],
+) =>
   sections.map((s) => ({
     name: s.text,
     Children: (s.children || []).map((c) => ({
@@ -72,6 +74,7 @@ const SectionItem = memo(
     isFirst,
     isLast,
     onMoveSection,
+    initiallyExpanded,
   }: {
     section: LeftSidebarPersonalSectionConfig;
     setSections: Dispatch<SetStateAction<LeftSidebarPersonalSectionConfig[]>>;
@@ -82,6 +85,7 @@ const SectionItem = memo(
     isFirst: boolean;
     isLast: boolean;
     onMoveSection: (index: number, direction: "up" | "down") => void;
+    initiallyExpanded?: boolean;
   }) => {
     const ref = extractRef(section.text);
     const blockText = getTextByBlockUid(ref);
@@ -90,7 +94,7 @@ const SectionItem = memo(
     const [childInputKey, setChildInputKey] = useState(0);
 
     const [expandedChildLists, setExpandedChildLists] = useState<Set<string>>(
-      new Set(),
+      new Set(initiallyExpanded ? [section.uid] : []),
     );
     const isExpanded = expandedChildLists.has(section.uid);
     const [childSettingsUid, setChildSettingsUid] = useState<string | null>(
@@ -561,8 +565,10 @@ SectionItem.displayName = "SectionItem";
 
 const LeftSidebarPersonalSectionsContent = ({
   leftSidebar,
+  expandedSectionUid,
 }: {
   leftSidebar: RoamBasicNode;
+  expandedSectionUid?: string;
 }) => {
   const [sections, setSections] = useState<LeftSidebarPersonalSectionConfig[]>(
     [],
@@ -736,6 +742,7 @@ const LeftSidebarPersonalSectionsContent = ({
               isFirst={index === 0}
               isLast={index === sections.length - 1}
               onMoveSection={moveSection}
+              initiallyExpanded={section.uid === expandedSectionUid}
             />
           </div>
         ))}
@@ -822,7 +829,11 @@ const LeftSidebarPersonalSectionsContent = ({
   );
 };
 
-export const LeftSidebarPersonalSections = () => {
+export const LeftSidebarPersonalSections = ({
+  expandedSectionUid,
+}: {
+  expandedSectionUid?: string;
+}) => {
   const [leftSidebar, setLeftSidebar] = useState<RoamBasicNode | null>(null);
 
   useEffect(() => {
@@ -850,5 +861,10 @@ export const LeftSidebarPersonalSections = () => {
     return null;
   }
 
-  return <LeftSidebarPersonalSectionsContent leftSidebar={leftSidebar} />;
+  return (
+    <LeftSidebarPersonalSectionsContent
+      leftSidebar={leftSidebar}
+      expandedSectionUid={expandedSectionUid}
+    />
+  );
 };

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

@@ -66,11 +66,13 @@ export const SettingsDialog = ({
   isOpen,
   onClose,
   selectedTabId,
+  expandedSectionUid,
 }: {
   onloadArgs: OnloadArgs;
   isOpen?: boolean;
   onClose?: () => void;
   selectedTabId?: TabId;
+  expandedSectionUid?: string;
 }) => {
   const extensionAPI = onloadArgs.extensionAPI;
   const settings = getFormattedConfigTree();
@@ -172,7 +174,11 @@ export const SettingsDialog = ({
             id="left-sidebar-personal-settings"
             title="Left sidebar"
             className="overflow-y-auto"
-            panel={<LeftSidebarPersonalSections />}
+            panel={
+              <LeftSidebarPersonalSections
+                expandedSectionUid={expandedSectionUid}
+              />
+            }
           />
           <SectionHeader className="text-lg font-semibold text-neutral-dark">
             Global Settings
@@ -275,11 +281,15 @@ export const SettingsDialog = ({
 
 type Props = {
   onloadArgs: OnloadArgs;
+  selectedTabId?: TabId;
+  expandedSectionUid?: string;
 };
 export const render = (props: Props) =>
   renderOverlay({
     Overlay: SettingsDialog,
     props: {
       onloadArgs: props.onloadArgs,
+      selectedTabId: props.selectedTabId,
+      expandedSectionUid: props.expandedSectionUid,
     },
   });

apps/roam/src/utils/registerCommandPaletteCommands.ts

@@ -21,6 +21,14 @@ import {
 } from "./pageRefObserverHandlers";
 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 { getUidAndBooleanSetting } from "~/utils/getExportSettings";
+import refreshConfigTree from "~/utils/refreshConfigTree";
+import { refreshAndNotify } from "~/components/LeftSidebarView";
+import { setPersonalSetting } from "~/components/settings/utils/accessors";
+import { sectionsToBlockProps } from "~/components/settings/LeftSidebarPersonalSettings";
 
 export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
   const { extensionAPI } = onloadArgs;
@@ -301,4 +309,98 @@ export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
   );
   void addCommand("DG: Query block - Create", createQueryBlock);
   void addCommand("DG: Query block - Refresh", refreshCurrentQueryBuilder);
+
+  const leftSidebarEnabled = getUidAndBooleanSetting({
+    tree: discourseConfigRef.tree,
+    text: "(BETA) Left Sidebar",
+  });
+  if (leftSidebarEnabled.value) {
+    const leftSidebarNode = discourseConfigRef.tree.find(
+      (node) => node.text === "Left Sidebar",
+    );
+    const personalSections = getLeftSidebarPersonalSectionConfig(
+      leftSidebarNode?.children || [],
+    ).sections;
+
+    for (const section of personalSections) {
+      if (!section.childrenUid) continue;
+
+      const sectionName = section.text.startsWith("((")
+        ? getTextByBlockUid(extractRef(section.text)) || section.text
+        : section.text;
+
+      window.roamAlphaAPI.ui.blockContextMenu.addCommand({
+        label: `DG: Favorites - Add to "${sectionName}" section`,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        callback: (props: { "block-uid": string }) => {
+          void addBlockToPersonalSection({
+            blockUid: props["block-uid"],
+            sectionUid: section.uid,
+            onloadArgs,
+          });
+        },
+      });
+    }
+  }
+};
+
+const addBlockToPersonalSection = async ({
+  blockUid,
+  sectionUid,
+  onloadArgs,
+}: {
+  blockUid: string;
+  sectionUid: string;
+  onloadArgs: OnloadArgs;
+}) => {
+  refreshConfigTree();
+  const leftSidebarNode = discourseConfigRef.tree.find(
+    (node) => node.text === "Left Sidebar",
+  );
+  const sections = getLeftSidebarPersonalSectionConfig(
+    leftSidebarNode?.children || [],
+  ).sections;
+  const section = sections.find((s) => s.uid === sectionUid);
+  if (!section?.childrenUid) return;
+
+  const blockRef = `((${blockUid}))`;
+
+  try {
+    const newChildBlockUid = await createBlock({
+      parentUid: section.childrenUid,
+      order: "last",
+      node: { text: blockRef },
+    });
+
+    const updatedSections = sections.map((s) =>
+      s.uid === sectionUid
+        ? {
+            ...s,
+            children: [
+              ...(s.children || []),
+              {
+                text: blockRef,
+                uid: newChildBlockUid,
+                children: [],
+                alias: { value: "" },
+              },
+            ],
+          }
+        : s,
+    );
+
+    setPersonalSetting(["Left sidebar"], sectionsToBlockProps(updatedSections));
+    refreshAndNotify();
+    renderSettings({
+      onloadArgs,
+      selectedTabId: "left-sidebar-personal-settings",
+      expandedSectionUid: sectionUid,
+    });
+  } catch {
+    renderToast({
+      content: "Failed to add block to section",
+      intent: "danger",
+      id: "add-block-to-section-error",
+    });
+  }
 };