From bbcd64fab4a081e2a172b62a40cf578f32306b6e Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Sun, 23 Feb 2025 02:53:30 -0800
Subject: [PATCH] Hack: Conditionally show color picker button based on mode

This needs further design review. Ideally I'd write a proper separate
component that handles the mode selection as well as color picker/hover
logic but we're moving fast.
---
 .../features/ToolbarMain/ToolbarMain.tsx      | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx b/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx
index 85376fa91c..e0089b1756 100644
--- a/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx
+++ b/frontend/realtime/src/components/features/ToolbarMain/ToolbarMain.tsx
@@ -22,6 +22,9 @@ import { ToolbarButton } from "../ToolbarButton";
 // style and constants
 import { paperWrapperStyles, toolTipStyles } from "~/components/styles";
 import { ToolbarMainButtonNames } from "./enum";
+import { dispatchUiEvents, uiEvents } from "~/signals/uiEvents";
+import { paintColor } from "~/signals/uiEvents/toolbarMain/paintMode";
+import { ColorPicker } from "~/components/ui/TextEditor/ColorPicker";
 
 export const ToolbarMain = ({
   disabled = false,
@@ -44,7 +47,7 @@ export const ToolbarMain = ({
           paperWrapperStyles,
           "glass",
           disabled &&
-            "pointer-events-none cursor-default bg-ui-border shadow-md",
+          "pointer-events-none cursor-default bg-ui-border shadow-md",
         )}
       >
         <div className="flex flex-col items-center gap-2">
@@ -151,11 +154,18 @@ export const ToolbarMain = ({
         <hr className="w-full border-t border-white/15" />
 
         <div className="flex flex-col items-center gap-2">
-          <ToolbarButton
-            icon={faPaintbrush}
-            buttonProps={buttonProps.PAINT}
-            tooltip="Paint Brush"
-          />
+          {buttonProps.PAINT.active ?
+            <ColorPicker color={paintColor.value} onChange={dispatchUiEvents.toolbarMain.setPaintColor} faIcon={faPaintbrush} borderStyle="" showBar={false} fillBg streamChanges />
+            :
+            <ToolbarButton
+              icon={faPaintbrush}
+              buttonProps={{
+                style: { backgroundColor: paintColor.value },
+                ...buttonProps.PAINT
+              }}
+              tooltip="Paint Brush"
+            />
+          }
           <ToolbarButton
             icon={faEraser}
             buttonProps={buttonProps.ERASER}