ENG-977 Create icon button for canvas drawer (#500)

* feat: Add canvas drawer button to ToastListener

Co-authored-by: mclicks <mclicks@gmail.com>

* Refactor: Move CanvasDrawerButton to its own component

Co-authored-by: mclicks <mclicks@gmail.com>

* Refactor: Move CanvasDrawerButton outside TldrawCanvas

Co-authored-by: mclicks <mclicks@gmail.com>

* feat: Add toggle behavior to canvas drawer

Co-authored-by: mclicks <mclicks@gmail.com>

* feat: Implement CanvasDrawerProvider for improved drawer management

- Added CanvasDrawerProvider to manage the canvas drawer's lifecycle and allow it to be called from non-React contexts.
- Updated openCanvasDrawer function to utilize the new provider for better state handling.
- Refactored CanvasDrawer component to accept unmountRef as a prop.
- Enhanced CanvasDrawerButton styling for improved UI consistency.

* .

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>

Author: mdroidian

apps/roam/src/components/canvas/CanvasDrawer.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import ResizableDrawer from "~/components/ResizableDrawer";
 import renderOverlay from "roamjs-components/util/renderOverlay";
 import { Button, Collapse, Checkbox } from "@blueprintjs/core";
@@ -9,9 +9,37 @@ import getCurrentPageUid from "roamjs-components/dom/getCurrentPageUid";
 import getBlockProps from "~/utils/getBlockProps";
 import { TLBaseShape } from "tldraw";
 import { DiscourseNodeShape } from "./DiscourseNodeUtil";
+import { render as renderToast } from "roamjs-components/components/Toast";
 
 export type GroupedShapes = Record<string, DiscourseNodeShape[]>;
 
+// Module-level ref holder set by the provider
+// This allows openCanvasDrawer to be called from non-React contexts
+// (command palette, context menus, etc.)
+let drawerUnmountRef: React.MutableRefObject<(() => void) | null> | null = null;
+
+export const CanvasDrawerProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const unmountRef = useRef<(() => void) | null>(null);
+
+  useEffect(() => {
+    drawerUnmountRef = unmountRef;
+
+    return () => {
+      if (unmountRef.current) {
+        unmountRef.current();
+        unmountRef.current = null;
+      }
+      drawerUnmountRef = null;
+    };
+  }, []);
+
+  return <>{children}</>;
+};
+
 type Props = { groupedShapes: GroupedShapes; pageUid: string };
 
 const CanvasDrawerContent = ({ groupedShapes, pageUid }: Props) => {
@@ -20,7 +48,7 @@ const CanvasDrawerContent = ({ groupedShapes, pageUid }: Props) => {
   const [filterType, setFilterType] = useState("All");
   const [filteredShapes, setFilteredShapes] = useState<GroupedShapes>({});
 
-  const pageTitle = useMemo(() => getPageTitleByPageUid(pageUid), []);
+  const pageTitle = useMemo(() => getPageTitleByPageUid(pageUid), [pageUid]);
   const noResults = Object.keys(groupedShapes).length === 0;
   const typeToTitleMap = useMemo(() => {
     const nodes = getDiscourseNodes();
@@ -143,14 +171,44 @@ const CanvasDrawerContent = ({ groupedShapes, pageUid }: Props) => {
 
 const CanvasDrawer = ({
   onClose,
+  unmountRef,
   ...props
-}: { onClose: () => void } & Props) => (
-  <ResizableDrawer onClose={onClose} title={"Canvas Drawer"}>
-    <CanvasDrawerContent {...props} />
-  </ResizableDrawer>
-);
+}: {
+  onClose: () => void;
+  unmountRef: React.MutableRefObject<(() => void) | null>;
+} & Props) => {
+  const handleClose = () => {
+    unmountRef.current = null;
+    onClose();
+  };
+
+  return (
+    <ResizableDrawer onClose={handleClose} title={"Canvas Drawer"}>
+      <CanvasDrawerContent {...props} />
+    </ResizableDrawer>
+  );
+};
+
+export const openCanvasDrawer = (): void => {
+  if (!drawerUnmountRef) {
+    renderToast({
+      id: "canvas-drawer-not-found",
+      content:
+        "Unable to open Canvas Drawer.  Please load canvas in main window first.",
+      intent: "warning",
+    });
+    console.error(
+      "CanvasDrawer: Cannot open drawer - CanvasDrawerProvider not found",
+    );
+    return;
+  }
+
+  if (drawerUnmountRef.current) {
+    drawerUnmountRef.current();
+    drawerUnmountRef.current = null;
+    return;
+  }
 
-export const openCanvasDrawer = () => {
   const pageUid = getCurrentPageUid();
   const props = getBlockProps(pageUid) as Record<string, unknown>;
   const rjsqb = props["roamjs-query-builder"] as Record<string, unknown>;
@@ -174,7 +232,11 @@ export const openCanvasDrawer = () => {
   };
 
   const groupedShapes = groupShapesByUid(shapes);
-  renderOverlay({ Overlay: CanvasDrawer, props: { groupedShapes, pageUid } });
+  drawerUnmountRef.current =
+    renderOverlay({
+      Overlay: CanvasDrawer,
+      props: { groupedShapes, pageUid, unmountRef: drawerUnmountRef },
+    }) || null;
 };
 
 export default CanvasDrawer;

apps/roam/src/components/canvas/CanvasDrawerButton.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { Button, Icon } from "@blueprintjs/core";
+import { openCanvasDrawer } from "./CanvasDrawer";
+
+const CanvasDrawerButton = () => {
+  return (
+    <div
+      className="pointer-events-auto absolute top-11 m-2 rounded-lg"
+      style={{
+        zIndex: 250,
+        // copying tldraw var(--shadow-2)
+        boxShadow:
+          "0px 0px 2px hsl(0, 0%, 0%, 16%), 0px 2px 3px hsl(0, 0%, 0%, 24%), 0px 2px 6px hsl(0, 0%, 0%, 0.1), inset 0px 0px 0px 1px hsl(0, 0%, 100%)",
+      }}
+    >
+      <Button
+        icon={<Icon icon="add-column-left" />}
+        onClick={openCanvasDrawer}
+        minimal
+        title="Toggle Canvas Drawer"
+      />
+    </div>
+  );
+};
+
+export default CanvasDrawerButton;

apps/roam/src/components/canvas/Tldraw.tsx

@@ -84,6 +84,8 @@ import {
 import ConvertToDialog from "./ConvertToDialog";
 import { createMigrations } from "./DiscourseRelationShape/discourseRelationMigrations";
 import ToastListener, { dispatchToastEvent } from "./ToastListener";
+import CanvasDrawerButton from "./CanvasDrawerButton";
+import { CanvasDrawerProvider } from "./CanvasDrawer";
 import sendErrorEmail from "~/utils/sendErrorEmail";
 import { AUTO_CANVAS_RELATIONS_KEY } from "~/data/userSettings";
 import { getSetting } from "~/utils/extensionSettings";
@@ -707,6 +709,7 @@ const TldrawCanvas = ({ title }: { title: string }) => {
               />
             </TldrawUi>
           </TldrawEditor>
+          <CanvasDrawerButton />
         </>
       )}
     </div>
@@ -990,7 +993,9 @@ const renderTldrawCanvasHelper = ({
 
   const unmount = renderWithUnmount(
     <ExtensionApiContextProvider {...onloadArgs}>
-      <TldrawCanvas title={title} />
+      <CanvasDrawerProvider>
+        <TldrawCanvas title={title} />
+      </CanvasDrawerProvider>
     </ExtensionApiContextProvider>,
     canvasWrapperEl,
   );