From 0dada968aa731d85c0e51953522712f40fff1b07 Mon Sep 17 00:00:00 2001
From: Jamey Greenwood <jamey@greenwood.im>
Date: Wed, 31 Dec 2025 01:00:22 +0000
Subject: [PATCH] feat: add ColorSync hook to sync color picker and text input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The color picker and text input for accent color weren't syncing properly when the user changed the color picker value. This was because LiveView doesn't update input values that might have user focus, to avoid interfering with user input.

Added a JavaScript LiveView hook (ColorSync) that:
- Listens to 'input' events on both the color picker and text input
- Syncs their values in real-time as the user interacts with either one
- Provides immediate visual feedback when changing colors via the picker

The hook is attached to the accent color form with phx-hook="ColorSync" and syncs the two inputs bidirectionally, ensuring they always display the same value.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 assets/js/app.js                              | 20 ++++++++++++++++++-
 .../live/theme_live/index.html.heex           |  6 +++---
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 335837e..152b6f5 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -25,11 +25,29 @@ import {LiveSocket} from "phoenix_live_view"
 import {hooks as colocatedHooks} from "phoenix-colocated/simpleshop_theme"
 import topbar from "../vendor/topbar"
 
+// Hook to sync color picker and text input
+const ColorSync = {
+  mounted() {
+    const picker = this.el.querySelector('input[type="color"]')
+    const text = this.el.querySelector('input[type="text"]')
+
+    if (picker && text) {
+      picker.addEventListener('input', (e) => {
+        text.value = e.target.value
+      })
+
+      text.addEventListener('input', (e) => {
+        picker.value = e.target.value
+      })
+    }
+  }
+}
+
 const csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
 const liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: {_csrf_token: csrfToken},
-  hooks: {...colocatedHooks},
+  hooks: {...colocatedHooks, ColorSync},
 })
 
 // Show progress bar on live navigation and form submits
diff --git a/lib/simpleshop_theme_web/live/theme_live/index.html.heex b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
index 00f57f2..a592860 100644
--- a/lib/simpleshop_theme_web/live/theme_live/index.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
@@ -130,22 +130,22 @@
         <!-- Colors -->
         <div>
           <h3 class="font-semibold mb-3">Accent Color</h3>
-          <form phx-change="update_color" phx-value-field="accent_color">
+          <form id="accent-color-form" phx-change="update_color" phx-value-field="accent_color" phx-hook="ColorSync">
             <div class="flex gap-2 items-center">
               <input
                 type="color"
+                id="accent-color-picker"
                 name="value"
                 value={@theme_settings.accent_color}
                 class="w-12 h-10 rounded cursor-pointer"
-                phx-debounce="300"
               />
               <input
                 type="text"
+                id="accent-color-text"
                 name="value"
                 value={@theme_settings.accent_color}
                 class="input input-bordered input-sm flex-1 font-mono text-xs"
                 placeholder="#000000"
-                phx-debounce="blur"
               />
             </div>
           </form>