Enhance DiscourseContextOverlay and DiscourseNodeUtil components (#495)

* Introduced opacity and color props to DiscourseContextOverlay for better customization.
* Added an "Open in Sidebar" button in DiscourseNodeUtil to improve user interaction.
* Updated styles to reflect new props and ensure consistent UI behavior.

Author: mdroidian

apps/roam/src/components/DiscourseContextOverlay.tsx

@@ -58,14 +58,49 @@ const getOverlayInfo = async (tag: string): Promise<DiscourseData> => {
   }
 };
 
-type DiscourseContextOverlayProps =
-  | { id: string; tag: string; uid?: never }
-  | { id: string; uid: string; tag?: never }
-  | { id: string; tag: string; uid: string };
+const OPACITY_VALUES = [
+  "5",
+  "10",
+  "15",
+  "20",
+  "25",
+  "30",
+  "35",
+  "40",
+  "45",
+  "50",
+  "55",
+  "60",
+  "65",
+  "70",
+  "75",
+  "80",
+  "85",
+  "90",
+  "95",
+  "100",
+] as const;
+
+type OpacityValue = (typeof OPACITY_VALUES)[number];
+
+type DiscourseContextOverlayBaseProps = {
+  id: string;
+  iconColor?: string;
+  textColor?: string;
+  opacity?: OpacityValue;
+};
+
+// need tag or uid
+type DiscourseContextOverlayProps = DiscourseContextOverlayBaseProps &
+  ({ tag: string; uid?: never } | { tag?: never; uid: string });
+
 const DiscourseContextOverlay = ({
   tag,
   id,
   uid,
+  iconColor,
+  textColor,
+  opacity = "100",
 }: DiscourseContextOverlayProps) => {
   const tagUid = useMemo(() => uid ?? getPageUidByPageTitle(tag), [uid, tag]);
   const [loading, setLoading] = useState(true);
@@ -131,10 +166,28 @@ const DiscourseContextOverlay = ({
           disabled={loading}
         >
           <div className="flex items-center gap-1.5">
-            <Icon icon={"diagram-tree"} />
-            <span className="mr-1 leading-none">{loading ? "-" : score}</span>
-            <Icon icon={"link"} />
-            <span className="leading-none">{loading ? "-" : refs}</span>
+            <Icon
+              icon={"diagram-tree"}
+              color={iconColor}
+              style={{ opacity: `${Number(opacity) / 100}` }}
+            />
+            <span
+              className={`mr-1 leading-none opacity-${opacity}`}
+              style={{ color: textColor }}
+            >
+              {loading ? "-" : score}
+            </span>
+            <Icon
+              icon={"link"}
+              color={iconColor}
+              style={{ opacity: `${Number(opacity) / 100}` }}
+            />
+            <span
+              className={`leading-none opacity-${opacity}`}
+              style={{ color: textColor }}
+            >
+              {loading ? "-" : refs}
+            </span>
           </div>
         </Button>
       }

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

@@ -27,6 +27,8 @@ import { useExtensionAPI } from "roamjs-components/components/ExtensionApiContex
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import isLiveBlock from "roamjs-components/queries/isLiveBlock";
 import updateBlock from "roamjs-components/writes/updateBlock";
+import openBlockInSidebar from "roamjs-components/writes/openBlockInSidebar";
+import { Button, Icon } from "@blueprintjs/core";
 import createDiscourseNode from "~/utils/createDiscourseNode";
 import { DiscourseNode } from "~/utils/getDiscourseNodes";
 import { isPageUid } from "./Tldraw";
@@ -517,6 +519,26 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
         onPointerEnter={() => setOverlayMounted(true)}
       >
         <div style={{ pointerEvents: "all" }}>
+          {/* Open in Sidebar Button */}
+          <Button
+            className="absolute left-1 top-1 z-10"
+            minimal
+            small
+            icon={
+              <Icon
+                icon="panel-stats"
+                color={textColor}
+                className="opacity-50"
+              />
+            }
+            onClick={(e) => {
+              e.stopPropagation();
+              void openBlockInSidebar(shape.props.uid);
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
+            title="Open in sidebar (Shift+Click)"
+          />
+
           {shape.props.imageUrl && isKeyImage ? (
             <img
               src={shape.props.imageUrl}
@@ -537,12 +559,15 @@ export class BaseDiscourseNodeUtil extends ShapeUtil<DiscourseNodeShape> {
           >
             {overlayMounted && isOverlayEnabled && (
               <div
-                className="roamjs-discourse-context-overlay-container absolute right-0 top-0"
+                className="roamjs-discourse-context-overlay-container absolute right-1 top-1"
                 onPointerDown={(e) => e.stopPropagation()}
               >
                 <DiscourseContextOverlay
                   uid={shape.props.uid}
                   id={`${shape.id}-overlay`}
+                  opacity="50"
+                  textColor={textColor}
+                  iconColor={textColor}
                 />
               </div>
             )}