From dbd56522f6da1a1f1eec86d8174fdf1aea0b96d4 Mon Sep 17 00:00:00 2001
From: Shobhit-Nagpal <shobhitsnagpal@gmail.com>
Date: Thu, 2 Jan 2025 17:41:59 +0530
Subject: [PATCH] refactor: swatch picker and inline colour picker

---
 apps/client/package.json                                 | 2 +-
 .../components/input/colour-input/SwatchPicker.tsx       | 9 ++++++---
 .../components/view-params-editor/InlineColourPicker.tsx | 3 ++-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/apps/client/package.json b/apps/client/package.json
index f982ecb37..83a1b15c7 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -92,4 +92,4 @@
     "vite-tsconfig-paths": "^4.3.1",
     "vitest": "catalog:"
   }
-}
\ No newline at end of file
+}
diff --git a/apps/client/src/common/components/input/colour-input/SwatchPicker.tsx b/apps/client/src/common/components/input/colour-input/SwatchPicker.tsx
index feaa26ddc..da364e452 100644
--- a/apps/client/src/common/components/input/colour-input/SwatchPicker.tsx
+++ b/apps/client/src/common/components/input/colour-input/SwatchPicker.tsx
@@ -12,6 +12,7 @@ interface SwatchPickerProps {
   color: string;
   isSelected?: boolean;
   onChange: (name: string) => void;
+  alwaysDisplayColor?: boolean;
 }
 
 const getIconColor = (color: string, isSelected: boolean) => {
@@ -28,11 +29,11 @@ const getIconColor = (color: string, isSelected: boolean) => {
 };
 
 export default function SwatchPicker(props: SwatchPickerProps) {
-  const { color, onChange, isSelected } = props;
+  const { color, onChange, isSelected, alwaysDisplayColor } = props;
 
   const classes = cx([style.swatch, isSelected ? style.selected : null, style.selectable]);
 
-  const iconColor = getIconColor(color, isSelected ?? false);
+  const iconColor = getIconColor(color, (alwaysDisplayColor || isSelected) ?? false);
 
   const debouncedOnChange = useCallback(
     debounce((newValue: string) => {
@@ -41,10 +42,12 @@ export default function SwatchPicker(props: SwatchPickerProps) {
     [onChange],
   );
 
+  const displayColor = alwaysDisplayColor || isSelected ? color : '';
+
   return (
     <div className={classes}>
       <PopoverPicker
-        color={isSelected ? color : ''}
+        color={displayColor}
         onChange={debouncedOnChange}
         icon={<IoEyedrop color={iconColor} />}
         hasInput
diff --git a/apps/client/src/common/components/view-params-editor/InlineColourPicker.tsx b/apps/client/src/common/components/view-params-editor/InlineColourPicker.tsx
index 43f4e8e9d..705d59129 100644
--- a/apps/client/src/common/components/view-params-editor/InlineColourPicker.tsx
+++ b/apps/client/src/common/components/view-params-editor/InlineColourPicker.tsx
@@ -22,7 +22,8 @@ export default function InlineColourPicker(props: InlineColourPickerProps) {
 
   return (
     <div className={style.inline}>
-      <SwatchPicker color={colour} onChange={setColour} />
+      <SwatchPicker color={colour} onChange={setColour} alwaysDisplayColor />
+      <span>{colour}</span>
       <input type='hidden' name={name} value={colour} />
     </div>
   );