From 453349be26d86d738b29f6353d77ef7a2edce02a Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 29 Nov 2025 17:19:37 +0200
Subject: [PATCH] feat(quick_edit): seamless transition between color changes

---
 apps/client/src/services/css_class_manager.ts    |  2 +-
 apps/client/src/stylesheets/theme-next-dark.css  |  2 +-
 apps/client/src/stylesheets/theme-next-light.css |  2 +-
 apps/client/src/widgets/dialogs/PopupEditor.tsx  | 12 ++----------
 4 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/apps/client/src/services/css_class_manager.ts b/apps/client/src/services/css_class_manager.ts
index b28b24b23..4c0c0f360 100644
--- a/apps/client/src/services/css_class_manager.ts
+++ b/apps/client/src/services/css_class_manager.ts
@@ -38,7 +38,7 @@ function createClassForColor(colorString: string | null) {
         registeredClasses.add(className);
     }
 
-    return className;
+    return `color ${className}`;
 }
 
 function parseColor(color: string) {
diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index 51db2bc27..117eeb8b7 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -300,7 +300,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
     border-color: var(--muted-text-color) !important;
 }
 
-.tinted-quick-edit-dialog {
+.quick-edit-dialog-wrapper.color {
     --modal-background-color: hsl(var(--custom-color-hue), 8.8%, 11.2%);
     --modal-border-color: hsl(var(--custom-color-hue), 9.4%, 25.1%);
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%);
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index 66e3538c6..a3fc26e93 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -276,7 +276,7 @@
     --custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1);
 }
 
-.tinted-quick-edit-dialog {
+.quick-edit-dialog-wrapper.color {
     --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%);
     --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
diff --git a/apps/client/src/widgets/dialogs/PopupEditor.tsx b/apps/client/src/widgets/dialogs/PopupEditor.tsx
index 143ac20b0..1a065c05f 100644
--- a/apps/client/src/widgets/dialogs/PopupEditor.tsx
+++ b/apps/client/src/widgets/dialogs/PopupEditor.tsx
@@ -89,18 +89,10 @@ export default function PopupEditor() {
 export function DialogWrapper({ children }: { children: ComponentChildren }) {
     const { note } = useNoteContext();
     const wrapperRef = useRef<HTMLDivElement>(null);
-    const [ hasTint, setHasTint ] = useState(false);
-    const [ color ] = useNoteLabel(note, "color");
-
-    // Apply the tinted-dialog class only if the custom color CSS class specifies a hue
-    useEffect(() => {
-        if (!wrapperRef.current) return;
-        const customHue = getComputedStyle(wrapperRef.current).getPropertyValue("--custom-color-hue");
-        setHasTint(!!customHue);
-    }, [ note, color ]);
+    useNoteLabel(note, "color"); // to update color class
 
     return (
-        <div ref={wrapperRef} class={`quick-edit-dialog-wrapper ${note?.getColorClass() ?? ""} ${hasTint ? "tinted-quick-edit-dialog" : ""}`}>
+        <div ref={wrapperRef} class={`quick-edit-dialog-wrapper ${note?.getColorClass() ?? ""}`}>
             {children}
         </div>
     )