From 3e73ec0cd730568a435ba9c7edd8f8be55c1942d Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Tue, 25 Feb 2025 02:43:14 -0800
Subject: [PATCH] Use useSignals hook to rerender contextual menu color

---
 .../src/KonvaRootComponent/ContextualToolbarNode.tsx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/realtime/src/KonvaRootComponent/ContextualToolbarNode.tsx b/frontend/realtime/src/KonvaRootComponent/ContextualToolbarNode.tsx
index e02482ba7c..fc722be0ae 100644
--- a/frontend/realtime/src/KonvaRootComponent/ContextualToolbarNode.tsx
+++ b/frontend/realtime/src/KonvaRootComponent/ContextualToolbarNode.tsx
@@ -8,6 +8,7 @@ import { dispatchUiEvents } from "~/signals/uiEvents";
 import { ToolbarNode } from "~/components/features/ToolbarNode";
 import { ToolbarNodeButtonNames } from "~/components/features/ToolbarNode/enums";
 import { transitionTimingStyles } from "~/components/styles";
+import { useSignals } from "@preact/signals-react/runtime";
 
 export const ContextualToolbarNode = () => {
   const [winSize, setWinSize] = useState<{ width: number; height: number }>({
@@ -64,6 +65,9 @@ export const ContextualToolbarNode = () => {
     dispatchUiEvents.toolbarNode.setSelectedColor({ kNodeId: nodeID, color });
   }
 
+  useSignals();
+  const color = uiAccess.toolbarNode.signal.value.color;
+
   const boundedTopPosition = Math.min(position.y, winSize.height - 164);
   return (
     <Transition
@@ -85,7 +89,7 @@ export const ContextualToolbarNode = () => {
         onLockClicked={(e) => {
           dispatchUiEvents.toolbarNode.lock(e);
         }}
-        color={uiAccess.toolbarNode.signal.value.color}
+        color={color}
         onColorChange={handleColorChange}
       />
     </Transition>