From 81a9e06b231a3e307b6fc75877386f73145b1ce1 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 29 Nov 2025 17:00:43 +0200
Subject: [PATCH] feat(quick_edit): basic reactivity to color changes

---
 apps/client/src/widgets/dialogs/PopupEditor.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/dialogs/PopupEditor.tsx b/apps/client/src/widgets/dialogs/PopupEditor.tsx
index a6c641d8d..143ac20b0 100644
--- a/apps/client/src/widgets/dialogs/PopupEditor.tsx
+++ b/apps/client/src/widgets/dialogs/PopupEditor.tsx
@@ -1,7 +1,7 @@
 import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import Modal from "../react/Modal";
 import "./PopupEditor.css";
-import { useNoteContext, useTriliumEvent } from "../react/hooks";
+import { useNoteContext, useNoteLabel, useTriliumEvent } from "../react/hooks";
 import NoteTitleWidget from "../note_title";
 import NoteIcon from "../note_icon";
 import NoteContext from "../../components/note_context";
@@ -90,13 +90,14 @@ 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 ]);
+    }, [ note, color ]);
 
     return (
         <div ref={wrapperRef} class={`quick-edit-dialog-wrapper ${note?.getColorClass() ?? ""} ${hasTint ? "tinted-quick-edit-dialog" : ""}`}>