From caded6c9f888222a1acd342f1960573baadfbb75 Mon Sep 17 00:00:00 2001
From: jamey <jamey@server.jamey.stream>
Date: Mon, 9 Mar 2026 20:51:59 +0000
Subject: [PATCH] fix theme data attributes not updating live during editing

The shop_root.html.heex had duplicate .themed element with data-mood etc
attributes that were static (rendered once at page load). This prevented
live theme changes from visually updating since CSS matched the outer
stale element.

Fix: Remove data attributes from shop_root.html.heex, keeping only the
live-updated .shop-container.themed element inside the LiveView.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/layouts/shop_root.html.heex        | 15 ++-------------
 .../live/theme_css_consistency_test.exs           |  4 ++--
 2 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/lib/berrypod_web/components/layouts/shop_root.html.heex b/lib/berrypod_web/components/layouts/shop_root.html.heex
index 137eecb..7bb741e 100644
--- a/lib/berrypod_web/components/layouts/shop_root.html.heex
+++ b/lib/berrypod_web/components/layouts/shop_root.html.heex
@@ -80,19 +80,8 @@
         This shop works without JavaScript, but some features work better with it enabled.
       </div>
     </noscript>
-    <div
-      class="themed shop-root"
-      data-mood={@theme_settings.mood}
-      data-typography={@theme_settings.typography}
-      data-shape={@theme_settings.shape}
-      data-density={@theme_settings.density}
-      data-grid={@theme_settings.grid_columns}
-      data-header={@theme_settings.header_layout}
-      data-sticky={to_string(@theme_settings.sticky_header)}
-      data-layout={@theme_settings.layout_width}
-      data-shadow={@theme_settings.card_shadow}
-      data-button-style={@theme_settings.button_style}
-    >
+    <%!-- Data attributes live on .shop-container inside LiveView for live updates --%>
+    <div class="shop-root">
       {@inner_content}
     </div>
   </body>
diff --git a/test/berrypod_web/live/theme_css_consistency_test.exs b/test/berrypod_web/live/theme_css_consistency_test.exs
index a2605a8..b080c08 100644
--- a/test/berrypod_web/live/theme_css_consistency_test.exs
+++ b/test/berrypod_web/live/theme_css_consistency_test.exs
@@ -26,7 +26,7 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
       {:ok, _view, html} = live(log_in_user(conn, user), ~p"/")
 
       # Verify themed element exists with theme data attributes
-      assert html =~ ~r/<div[^>]*class="themed/
+      assert html =~ ~r/class="[^"]*themed/
       assert html =~ ~r/data-mood="/
       assert html =~ ~r/data-typography="/
       assert html =~ ~r/data-shape="/
@@ -39,7 +39,7 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
       {:ok, _view, html} = live(conn, ~p"/?edit=theme")
 
       # Verify themed element exists with theme data attributes
-      assert html =~ ~r/<div[^>]*class="themed/
+      assert html =~ ~r/class="[^"]*themed/
       assert html =~ ~r/data-mood="/
       assert html =~ ~r/data-typography="/
       assert html =~ ~r/data-shape="/