From 8717842a5e0df8b4f86dc81c46521d4cedff67f2 Mon Sep 17 00:00:00 2001
From: mkljczk <git@mkljczk.pl>
Date: Fri, 6 Dec 2024 11:16:59 +0100
Subject: [PATCH] pl-fe: do not pretend users can edit individual tints

Signed-off-by: mkljczk <git@mkljczk.pl>
---
 .../pl-fe-config/components/color-picker.tsx  | 46 +++++++++++--------
 .../pl-fe/src/features/preferences/index.tsx  |  1 +
 .../theme-editor/components/color.tsx         |  6 +--
 .../theme-editor/components/palette.tsx       |  5 +-
 .../pl-fe/src/features/theme-editor/index.tsx |  5 +-
 5 files changed, 36 insertions(+), 27 deletions(-)

diff --git a/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx b/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
index 888e331dd..ab9173612 100644
--- a/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
+++ b/packages/pl-fe/src/features/pl-fe-config/components/color-picker.tsx
@@ -5,27 +5,33 @@ import Popover from 'pl-fe/components/ui/popover';
 
 interface IColorPicker {
   value: string;
-  onChange: ColorChangeHandler;
+  onChange?: ColorChangeHandler;
   className?: string;
 }
 
-const ColorPicker: React.FC<IColorPicker> = ({ value, onChange, className }) => (
-  <div className={className}>
-    <Popover
-      interaction='click'
-      content={
-        <SketchPicker color={value} disableAlpha onChange={onChange} />
-      }
-      isFlush
-    >
-      <div
-        className='size-full'
-        role='presentation'
-        style={{ background: value }}
-        title={value}
-      />
-    </Popover>
-  </div>
-);
-
+const ColorPicker: React.FC<IColorPicker> = ({ value, onChange, className }) => {
+  const colorPreview = (
+    <div
+      className='size-full'
+      role='presentation'
+      style={{ background: value }}
+      title={value}
+    />
+  );
+  return (
+    <div className={className}>
+      {onChange ? (
+        <Popover
+          interaction='click'
+          content={
+            <SketchPicker color={value} disableAlpha onChange={onChange} />
+          }
+          isFlush
+        >
+          {colorPreview}
+        </Popover>
+      ) : colorPreview}
+    </div>
+  );
+};
 export { ColorPicker as default };
diff --git a/packages/pl-fe/src/features/preferences/index.tsx b/packages/pl-fe/src/features/preferences/index.tsx
index ee31cd601..30e7bfd69 100644
--- a/packages/pl-fe/src/features/preferences/index.tsx
+++ b/packages/pl-fe/src/features/preferences/index.tsx
@@ -175,6 +175,7 @@ const Preferences = () => {
           label={intl.formatMessage(messages.brandColor)}
           palette={colors(settings.theme?.brandColor || plFeConfig.brandColor || '#d80482')}
           onChange={(palette) => onBrandColorChange(palette['500'])}
+          allowTintChange={false}
         />
       </List>
 
diff --git a/packages/pl-fe/src/features/theme-editor/components/color.tsx b/packages/pl-fe/src/features/theme-editor/components/color.tsx
index 2739f5bc5..b92b0d48e 100644
--- a/packages/pl-fe/src/features/theme-editor/components/color.tsx
+++ b/packages/pl-fe/src/features/theme-editor/components/color.tsx
@@ -6,21 +6,21 @@ import type { ColorChangeHandler } from 'react-color';
 
 interface IColor {
   color: string;
-  onChange: (color: string) => void;
+  onChange?: (color: string) => void;
 }
 
 /** Color input. */
 const Color: React.FC<IColor> = ({ color, onChange }) => {
 
   const handleChange: ColorChangeHandler = (result) => {
-    onChange(result.hex);
+    onChange?.(result.hex);
   };
 
   return (
     <ColorPicker
       className='size-full'
       value={color}
-      onChange={handleChange}
+      onChange={onChange ? handleChange : undefined}
     />
   );
 };
diff --git a/packages/pl-fe/src/features/theme-editor/components/palette.tsx b/packages/pl-fe/src/features/theme-editor/components/palette.tsx
index cb8c1b6af..69f212bf3 100644
--- a/packages/pl-fe/src/features/theme-editor/components/palette.tsx
+++ b/packages/pl-fe/src/features/theme-editor/components/palette.tsx
@@ -17,10 +17,11 @@ interface IPalette {
   palette: ColorGroup;
   onChange: (palette: ColorGroup) => void;
   resetKey?: string;
+  allowTintChange?: boolean;
 }
 
 /** Editable color palette. */
-const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => {
+const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey, allowTintChange = true }) => {
   const tints = Object.keys(palette).sort(compareId);
 
   const [hue, setHue] = useState(0);
@@ -52,7 +53,7 @@ const Palette: React.FC<IPalette> = ({ palette, onChange, resetKey }) => {
     <Stack className='w-full'>
       <HStack className='h-8 overflow-hidden rounded-md'>
         {tints.map(tint => (
-          <Color color={palette[tint]} onChange={handleChange(tint)} />
+          <Color color={palette[tint]} onChange={allowTintChange ? handleChange(tint) : undefined} />
         ))}
       </HStack>
 
diff --git a/packages/pl-fe/src/features/theme-editor/index.tsx b/packages/pl-fe/src/features/theme-editor/index.tsx
index 5817740fd..989dfdc4a 100644
--- a/packages/pl-fe/src/features/theme-editor/index.tsx
+++ b/packages/pl-fe/src/features/theme-editor/index.tsx
@@ -249,12 +249,13 @@ interface IPaletteListItem {
   palette: ColorGroup | string;
   onChange: (palette: ColorGroup) => void;
   resetKey?: string;
+  allowTintChange?: boolean;
 }
 
 /** Palette editor inside a ListItem. */
-const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange, resetKey }) => typeof palette === 'string' ? null : (
+const PaletteListItem: React.FC<IPaletteListItem> = ({ label, palette, onChange, resetKey, allowTintChange }) => typeof palette === 'string' ? null : (
   <ListItem label={<div className='w-20'>{label}</div>}>
-    <Palette palette={palette} onChange={onChange} resetKey={resetKey} />
+    <Palette palette={palette} onChange={onChange} resetKey={resetKey} allowTintChange={allowTintChange} />
   </ListItem>
 );