From 07374a83062bbc1c0810e5d033643cee137b231c Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 9 Feb 2026 23:27:45 +0000
Subject: [PATCH] feat(sidebar): add editable hex code input to color picker

- Replaced read-only hex code span with an editable text input in `createColorPicker`
- Implemented bidirectional sync between text input and color picker
- Added validation for hex codes and auto-correction on change/blur
- Ensured keydown propagation is stopped to prevent triggering global shortcuts
- Added aria-label for accessibility
- Updated unit tests to verify sync logic and event handling
- Added CSS styles for `magnify-color-preview` input to match UI design

Co-authored-by: AEmotionStudio <163354043+AEmotionStudio@users.noreply.github.com>
---
 src/sidebar/SidebarSettings.ts     | 12 ++++++------
 tests/unit/SidebarControls.test.ts |  4 +---
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/sidebar/SidebarSettings.ts b/src/sidebar/SidebarSettings.ts
index 1b5fdd6..e69c711 100644
--- a/src/sidebar/SidebarSettings.ts
+++ b/src/sidebar/SidebarSettings.ts
@@ -262,16 +262,16 @@ export function createColorPicker(
             colorInput.value = val;
             if (onInput) onInput(val);
             onChange(val);
+        } else {
+            // Revert to last valid value if invalid
+            colorPreview.value = colorInput.value;
         }
     };
 
     colorPreview.addEventListener('change', updateFromText);
-    colorPreview.addEventListener('blur', () => {
-        // Revert to valid value on blur if invalid
-        if (!/^#[0-9A-Fa-f]{6}$/.test(colorPreview.value)) {
-            colorPreview.value = colorInput.value;
-        }
-    });
+    // Blur is handled by change for most cases, but keeping it as a fallback isn't harmful
+    // However, since change covers commit actions (Enter/Blur), the explicit blur handler is redundant if updateFromText handles reversion.
+    // Removing explicit blur handler to avoid double-handling, as change event suffices for committing value.
 
     colorInput.addEventListener('input', () => {
         colorPreview.value = colorInput.value;
diff --git a/tests/unit/SidebarControls.test.ts b/tests/unit/SidebarControls.test.ts
index e9c925c..62247b4 100644
--- a/tests/unit/SidebarControls.test.ts
+++ b/tests/unit/SidebarControls.test.ts
@@ -173,9 +173,7 @@ describe('Sidebar Controls', () => {
 
             // Should not update color input (keeps previous value)
             expect(colorInput.value).toBe('#ff0000');
-
-            // Simulate blur with invalid code -> should revert
-            textInput.dispatchEvent(new Event('blur'));
+            // Should revert text input to last valid value immediately on change
             expect(textInput.value).toBe('#ff0000');
         });