panel manager

apps/roam/src/components/PanelManager.tsx

@@ -43,6 +43,37 @@ type PanelState = {
   onloadArgs: OnloadArgs;
 };
 
+const panelSubscribers = new Map<string, Set<(isOpen: boolean) => void>>();
+
+const notifySubscribers = (tag: string, isOpen: boolean) => {
+  const subscribers = panelSubscribers.get(tag);
+  if (subscribers) {
+    subscribers.forEach((callback) => callback(isOpen));
+  }
+};
+
+export const subscribeToPanelState = (
+  tag: string,
+  callback: (isOpen: boolean) => void,
+) => {
+  if (!panelSubscribers.has(tag)) {
+    panelSubscribers.set(tag, new Set());
+  }
+  panelSubscribers.get(tag)!.add(callback);
+
+  callback(openPanels.has(tag));
+
+  return () => {
+    const subscribers = panelSubscribers.get(tag);
+    if (subscribers) {
+      subscribers.delete(callback);
+      if (subscribers.size === 0) {
+        panelSubscribers.delete(tag);
+      }
+    }
+  };
+};
+
 const getSpacingClass = (element: HTMLElement): string | null => {
   for (const className of Array.from(element.classList)) {
     if (className.startsWith(SPACING_PREFIX)) return className;
@@ -401,6 +432,21 @@ export const panelManager = {
           return;
         }
       }
+      const grabFromReferencedPages = onloadArgs.extensionAPI.settings.get(
+        "context-grab-from-referenced-pages",
+      );
+      const shouldGrabFromReferencedPages =
+        grabFromReferencedPages === null
+          ? true
+          : Boolean(grabFromReferencedPages);
+
+      const grabParentChildContext = onloadArgs.extensionAPI.settings.get(
+        "context-grab-parent-child-context",
+      );
+      const shouldGrabParentChildContext =
+        grabParentChildContext === null
+          ? true
+          : Boolean(grabParentChildContext);
 
       const panelElement = document.createElement("div");
       panelElement.id = `discourse-panel-${tag.replace(/[^a-zA-Z0-9]/g, "-")}`;
@@ -417,13 +463,16 @@ export const panelManager = {
 
       openPanels.set(tag, { blockUid, element: panelElement, onloadArgs });
       updateOverlayToggleButtons(tag, true);
+      notifySubscribers(tag, true);
 
       ReactDOM.render(
         <ExtensionApiContextProvider {...onloadArgs}>
           <DiscourseSuggestionsPanel
             tag={tag}
             blockUid={blockUid}
             onClose={() => panelManager.removePanel(tag)}
+            shouldGrabFromReferencedPages={shouldGrabFromReferencedPages}
+            shouldGrabParentChildContext={shouldGrabParentChildContext}
           />
         </ExtensionApiContextProvider>,
         panelElement,
@@ -444,6 +493,7 @@ export const panelManager = {
       openPanels.delete(tag);
       updateOverlayToggleButtons(tag, false);
       clearBlockHighlight(blockUid);
+      notifySubscribers(tag, false);
 
       if (openPanels.size === 0) {
         cleanupPanelInfrastructure();
@@ -462,6 +512,7 @@ export const panelManager = {
       entries.forEach(([t, state]) => {
         updateOverlayToggleButtons(t, false);
         clearBlockHighlight(state.blockUid);
+        notifySubscribers(t, false);
       });
     } catch (error) {
       console.error("Failed to close all panels:", error);

apps/roam/src/components/SuggestiveModeOverlay.tsx

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { Button, Tooltip } from "@blueprintjs/core";
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import ReactDOM from "react-dom";
 import useInViewport from "react-in-viewport/dist/es/lib/useInViewport";
 import { OnloadArgs } from "roamjs-components/types/native";
 import { getBlockUidFromTarget } from "roamjs-components/dom";
-import { panelManager } from "./PanelManager";
+import { panelManager, subscribeToPanelState } from "./PanelManager";
 import ExtensionApiContextProvider from "roamjs-components/components/ExtensionApiContext";
 
 const SuggestiveModeOverlay = ({
@@ -21,6 +21,10 @@ const SuggestiveModeOverlay = ({
   const [isPanelOpen, setIsPanelOpen] = useState(() =>
     panelManager.isOpen(tag),
   );
+  useEffect(() => {
+    const unsubscribe = subscribeToPanelState(tag, setIsPanelOpen);
+    return unsubscribe;
+  }, [tag]);
 
   const toggleHighlight = useCallback(
     (on: boolean) => {
@@ -46,13 +50,12 @@ const SuggestiveModeOverlay = ({
       e.preventDefault();
       toggleHighlight(false);
       panelManager.toggle({ tag, blockUid, onloadArgs });
-      setIsPanelOpen(panelManager.isOpen(tag));
     },
     [tag, blockUid, onloadArgs, toggleHighlight],
   );
 
   return (
-    <div className="suggestive-mode-overlay flex max-w-3xl items-center gap-1.5">
+    <div className="suggestive-mode-overlay flex max-w-3xl">
       <Tooltip
         content={
           isPanelOpen ? "Close suggestions panel" : "Open suggestions panel"
@@ -62,15 +65,14 @@ const SuggestiveModeOverlay = ({
         <Button
           data-dg-role="panel-toggle"
           data-dg-tag={tag}
-          data-dg-panel-open={isPanelOpen ? "true" : "false"}
+          data-dg-block-uid={blockUid}
           icon={isPanelOpen ? "panel-table" : "panel-stats"}
           minimal
           small
           intent={isPanelOpen ? "primary" : "none"}
           onClick={handleTogglePanel}
           onMouseEnter={() => toggleHighlight(true)}
           onMouseLeave={() => toggleHighlight(false)}
-          {...{ "data-dg-block-uid": blockUid }}
         />
       </Tooltip>
     </div>