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

@@ -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;

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');
         });