From af8862c8c9538695e33a4f126bbc7a25ff356d54 Mon Sep 17 00:00:00 2001
From: Erwan Leboucher <erwanleboucher@gmail.com>
Date: Fri, 28 Aug 2026 10:12:33 +0200
Subject: [PATCH 1/2] fix: prevent color picker jitter

---
 .../features/settings/account/NameColorEditor.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/app/features/settings/account/NameColorEditor.tsx b/src/app/features/settings/account/NameColorEditor.tsx
index bfd6557f28..66bc645bb9 100644
--- a/src/app/features/settings/account/NameColorEditor.tsx
+++ b/src/app/features/settings/account/NameColorEditor.tsx
@@ -36,6 +36,7 @@ export function NameColorEditor({
   const [tempColor, setTempColor] = useState(
     stripQuotes(newNameColor) || stripQuotes(current) || undefined
   );
+  const [pickerColor, setPickerColor] = useState(tempColor ?? '#FFFFFF');
   const [hasChanged, setHasChanged] = useState(false);
 
   useEffect(() => {
@@ -50,6 +51,10 @@ export function NameColorEditor({
     setHasChanged(newNameColor !== current);
   }, [newNameColor, current]);
 
+  useEffect(() => {
+    if (tempColor && isValidHex(tempColor)) setPickerColor(tempColor);
+  }, [tempColor]);
+
   // Valid in the sense that it should look like an error during input.
   // It's disruptive to the user to immediately present their input as an error.
   // We should only present an error if they fail the regex test :)
@@ -117,7 +122,15 @@ export function NameColorEditor({
                 </Button>
               )}
               <HexColorPickerPopOut
-                picker={<HexColorPicker color={tempColor ?? '#FFFFFF'} onChange={handleUpdate} />}
+                picker={
+                  <HexColorPicker
+                    color={pickerColor}
+                    onChange={(newColor) => {
+                      setPickerColor(newColor);
+                      handleUpdate(newColor);
+                    }}
+                  />
+                }
               >
                 {(onOpen, opened) => (
                   <Button

From a88c26cba9290289f571d3fa26d60263ac9db4d4 Mon Sep 17 00:00:00 2001
From: Erwan Leboucher <erwanleboucher@gmail.com>
Date: Fri, 28 Aug 2026 10:14:42 +0200
Subject: [PATCH 2/2] fix: stabilize shared color picker

---
 src/app/components/HexColorPickerPopOut.tsx   | 28 ++++++++++++++++---
 .../permissions/PowersEditor.tsx              |  4 +--
 .../settings/account/NameColorEditor.tsx      | 18 +-----------
 3 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/src/app/components/HexColorPickerPopOut.tsx b/src/app/components/HexColorPickerPopOut.tsx
index ee35665f2e..77d183a3f8 100644
--- a/src/app/components/HexColorPickerPopOut.tsx
+++ b/src/app/components/HexColorPickerPopOut.tsx
@@ -1,18 +1,32 @@
 import FocusTrap from 'focus-trap-react';
 import type { RectCords } from 'folds';
 import { Box, Button, config, Menu, Text } from 'folds';
+import { HexColorPicker } from 'react-colorful';
 import { PopOut } from '$components/overlay-stack';
 import type { MouseEventHandler, ReactNode } from 'react';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { stopPropagation } from '$utils/keyboard';
 
 type HexColorPickerPopOutProps = {
   children: (onOpen: MouseEventHandler<HTMLElement>, opened: boolean) => ReactNode;
-  picker: ReactNode;
+  color: string;
+  onChange: (color: string) => void;
   onRemove?: () => void;
 };
-export function HexColorPickerPopOut({ picker, onRemove, children }: HexColorPickerPopOutProps) {
+const isValidHexColor = (color: string) => /^#[0-9A-F]{6}$/i.test(color);
+
+export function HexColorPickerPopOut({
+  color,
+  onChange,
+  onRemove,
+  children,
+}: HexColorPickerPopOutProps) {
   const [cords, setCords] = useState<RectCords>();
+  const [pickerColor, setPickerColor] = useState(isValidHexColor(color) ? color : '#FFFFFF');
+
+  useEffect(() => {
+    if (isValidHexColor(color)) setPickerColor(color);
+  }, [color]);
 
   const handleOpen: MouseEventHandler<HTMLElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
@@ -39,7 +53,13 @@ export function HexColorPickerPopOut({ picker, onRemove, children }: HexColorPic
             }}
           >
             <Box direction="Column" gap="200">
-              {picker}
+              <HexColorPicker
+                color={pickerColor}
+                onChange={(newColor) => {
+                  setPickerColor(newColor);
+                  onChange(newColor);
+                }}
+              />
               {onRemove && (
                 <Button
                   size="300"
diff --git a/src/app/features/common-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx
index 116626bb44..908b4e948d 100644
--- a/src/app/features/common-settings/permissions/PowersEditor.tsx
+++ b/src/app/features/common-settings/permissions/PowersEditor.tsx
@@ -26,7 +26,6 @@ import {
   Trash,
   X,
 } from '$components/icons/phosphor';
-import { HexColorPicker } from 'react-colorful';
 import { useAtomValue } from 'jotai';
 import { Page, PageContent, PageHeader } from '$components/page';
 import type { IPowerLevels } from '$hooks/usePowerLevels';
@@ -134,7 +133,8 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: Readonly<EditPower
             <Text size="L400">Color</Text>
             <Box gap="200" alignItems="Center">
               <HexColorPickerPopOut
-                picker={<HexColorPicker color={tagColor} onChange={handleUpdateColor} />}
+                color={tagColor}
+                onChange={handleUpdateColor}
                 onRemove={() => setTagColor('#FFFFFF')}
               >
                 {(openPicker, opened) => (
diff --git a/src/app/features/settings/account/NameColorEditor.tsx b/src/app/features/settings/account/NameColorEditor.tsx
index 66bc645bb9..47ed6b4169 100644
--- a/src/app/features/settings/account/NameColorEditor.tsx
+++ b/src/app/features/settings/account/NameColorEditor.tsx
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { Box, Button, config, color, Text, Input, IconButton } from 'folds';
 import { menuIcon, X } from '$components/icons/phosphor';
-import { HexColorPicker } from 'react-colorful';
 import { SettingTile } from '$components/setting-tile';
 import { HexColorPickerPopOut } from '$components/HexColorPickerPopOut';
 import { isValidHex } from '$hooks/useUserProfile';
@@ -36,7 +35,6 @@ export function NameColorEditor({
   const [tempColor, setTempColor] = useState(
     stripQuotes(newNameColor) || stripQuotes(current) || undefined
   );
-  const [pickerColor, setPickerColor] = useState(tempColor ?? '#FFFFFF');
   const [hasChanged, setHasChanged] = useState(false);
 
   useEffect(() => {
@@ -51,10 +49,6 @@ export function NameColorEditor({
     setHasChanged(newNameColor !== current);
   }, [newNameColor, current]);
 
-  useEffect(() => {
-    if (tempColor && isValidHex(tempColor)) setPickerColor(tempColor);
-  }, [tempColor]);
-
   // Valid in the sense that it should look like an error during input.
   // It's disruptive to the user to immediately present their input as an error.
   // We should only present an error if they fail the regex test :)
@@ -121,17 +115,7 @@ export function NameColorEditor({
                   <Text size="B300">Save</Text>
                 </Button>
               )}
-              <HexColorPickerPopOut
-                picker={
-                  <HexColorPicker
-                    color={pickerColor}
-                    onChange={(newColor) => {
-                      setPickerColor(newColor);
-                      handleUpdate(newColor);
-                    }}
-                  />
-                }
-              >
+              <HexColorPickerPopOut color={tempColor ?? '#FFFFFF'} onChange={handleUpdate}>
                 {(onOpen, opened) => (
                   <Button
                     onClick={onOpen}