refactor: extract shop_header to shared ShopComponents module

Move the shop header component from ThemeLive.PreviewPages to the
shared ShopComponents module. The component now supports:
- mode attribute (:live for real stores, :preview for theme editor)
- cart_count attribute (default 0, preview pages pass 2)
- Navigation links render conditionally based on mode

Preview pages now call <.shop_header ... mode={:preview} cart_count={2} />

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/simpleshop_theme_web/components/shop_components.ex

@@ -245,4 +245,141 @@ defmodule SimpleshopThemeWeb.ShopComponents do
     </footer>
     """
   end
+
+  @doc """
+  Renders the shop header with logo, navigation, and actions.
+
+  ## Attributes
+
+  * `theme_settings` - Required. The theme settings map.
+  * `logo_image` - Optional. The logo image struct (with id, is_svg fields).
+  * `header_image` - Optional. The header background image struct.
+  * `active_page` - Optional. Current page for nav highlighting.
+  * `mode` - Optional. Either `:live` (default) or `:preview`.
+  * `cart_count` - Optional. Number of items in cart. Defaults to 0.
+
+  ## Examples
+
+      <.shop_header theme_settings={@theme_settings} />
+      <.shop_header theme_settings={@theme_settings} mode={:preview} cart_count={2} />
+  """
+  attr :theme_settings, :map, required: true
+  attr :logo_image, :map, default: nil
+  attr :header_image, :map, default: nil
+  attr :active_page, :string, default: nil
+  attr :mode, :atom, default: :live
+  attr :cart_count, :integer, default: 0
+
+  def shop_header(assigns) do
+    ~H"""
+    <header
+      class="shop-header"
+      style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center;"
+    >
+      <%= if @theme_settings.header_background_enabled && @header_image do %>
+        <div style={header_background_style(@theme_settings, @header_image)} />
+      <% end %>
+
+      <div class="shop-logo" style="display: flex; align-items: center; position: relative; z-index: 1;">
+        <%= case @theme_settings.logo_mode do %>
+          <% "text-only" -> %>
+            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+              <%= @theme_settings.site_name %>
+            </span>
+
+          <% "logo-text" -> %>
+            <%= if @logo_image do %>
+              <img
+                src={logo_url(@logo_image, @theme_settings)}
+                alt={@theme_settings.site_name}
+                style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
+              />
+            <% end %>
+            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+              <%= @theme_settings.site_name %>
+            </span>
+
+          <% "logo-only" -> %>
+            <%= if @logo_image do %>
+              <img
+                src={logo_url(@logo_image, @theme_settings)}
+                alt={@theme_settings.site_name}
+                style={"height: #{@theme_settings.logo_size}px; width: auto;"}
+              />
+            <% else %>
+              <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+                <%= @theme_settings.site_name %>
+              </span>
+            <% end %>
+
+          <% _ -> %>
+            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
+              <%= @theme_settings.site_name %>
+            </span>
+        <% end %>
+      </div>
+
+      <nav class="shop-nav hidden md:flex" style="gap: 1.5rem; position: relative; z-index: 1;">
+        <%= if @mode == :preview do %>
+          <a href="#" phx-click="change_preview_page" phx-value-page="home" aria-current={if @active_page == "home", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Home</a>
+          <a href="#" phx-click="change_preview_page" phx-value-page="collection" aria-current={if @active_page in ["collection", "pdp"], do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Shop</a>
+          <a href="#" phx-click="change_preview_page" phx-value-page="about" aria-current={if @active_page == "about", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">About</a>
+          <a href="#" phx-click="change_preview_page" phx-value-page="contact" aria-current={if @active_page == "contact", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Contact</a>
+        <% else %>
+          <a href="/" aria-current={if @active_page == "home", do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">Home</a>
+          <a href="/products" aria-current={if @active_page in ["collection", "pdp"], do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">Shop</a>
+          <a href="/about" aria-current={if @active_page == "about", do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">About</a>
+          <a href="/contact" aria-current={if @active_page == "contact", do: "page"} style="color: var(--t-text-secondary); text-decoration: none;">Contact</a>
+        <% end %>
+      </nav>
+
+      <div class="shop-actions flex items-center gap-1" style="position: relative; z-index: 1;">
+        <button
+          type="button"
+          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
+          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
+          phx-click={Phoenix.LiveView.JS.show(to: "#search-modal", display: "flex") |> Phoenix.LiveView.JS.focus(to: "#search-input")}
+          aria-label="Search"
+        >
+          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"></circle>
+            <path d="M21 21l-4.35-4.35"></path>
+          </svg>
+        </button>
+        <button
+          type="button"
+          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
+          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
+          phx-click={Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")}
+          aria-label="Cart"
+        >
+          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"></path>
+            <line x1="3" y1="6" x2="21" y2="6"></line>
+            <path d="M16 10a4 4 0 01-8 0"></path>
+          </svg>
+          <%= if @cart_count > 0 do %>
+            <span class="cart-count" style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: var(--t-text-caption); font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;">{@cart_count}</span>
+          <% end %>
+          <span class="sr-only">Cart ({@cart_count})</span>
+        </button>
+      </div>
+    </header>
+    """
+  end
+
+  defp logo_url(logo_image, %{logo_recolor: true, logo_color: color}) when logo_image.is_svg do
+    clean_color = String.trim_leading(color, "#")
+    "/images/#{logo_image.id}/recolored/#{clean_color}"
+  end
+
+  defp logo_url(logo_image, _), do: "/images/#{logo_image.id}"
+
+  defp header_background_style(settings, header_image) do
+    "position: absolute; top: 0; left: 0; right: 0; bottom: 0; " <>
+      "background-image: url('/images/#{header_image.id}'); " <>
+      "background-size: #{settings.header_zoom}%; " <>
+      "background-position: #{settings.header_position_x}% #{settings.header_position_y}%; " <>
+      "background-repeat: no-repeat; z-index: 0;"
+  end
 end

lib/simpleshop_theme_web/live/theme_live/preview_pages.ex

@@ -5,117 +5,6 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
   embed_templates "preview_pages/*"
 
 
-  @doc """
-  Renders the shop header with logo based on logo_mode setting.
-  """
-  attr :theme_settings, :map, required: true
-  attr :logo_image, :map, default: nil
-  attr :header_image, :map, default: nil
-  attr :active_page, :string, default: nil
-
-  def shop_header(assigns) do
-    ~H"""
-    <header
-      class="shop-header"
-      style="background-color: var(--t-surface-raised); border-bottom: 1px solid var(--t-border-default); padding: 1rem 2rem; display: flex; align-items: center;"
-    >
-      <%= if @theme_settings.header_background_enabled && @header_image do %>
-        <div style={header_background_style(@theme_settings, @header_image)} />
-      <% end %>
-
-      <div class="shop-logo" style="display: flex; align-items: center; position: relative; z-index: 1;">
-        <%= case @theme_settings.logo_mode do %>
-          <% "text-only" -> %>
-            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-              <%= @theme_settings.site_name %>
-            </span>
-
-          <% "logo-text" -> %>
-            <%= if @logo_image do %>
-              <img
-                src={logo_url(@logo_image, @theme_settings)}
-                alt={@theme_settings.site_name}
-                style={"height: #{@theme_settings.logo_size}px; width: auto; margin-right: 0.5rem;"}
-              />
-            <% end %>
-            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-              <%= @theme_settings.site_name %>
-            </span>
-
-          <% "logo-only" -> %>
-            <%= if @logo_image do %>
-              <img
-                src={logo_url(@logo_image, @theme_settings)}
-                alt={@theme_settings.site_name}
-                style={"height: #{@theme_settings.logo_size}px; width: auto;"}
-              />
-            <% else %>
-              <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-                <%= @theme_settings.site_name %>
-              </span>
-            <% end %>
-
-          <% _ -> %>
-            <span class="shop-logo-text" style="font-family: var(--t-font-heading); font-size: var(--t-text-xl); font-weight: var(--t-heading-weight); color: var(--t-text-primary);">
-              <%= @theme_settings.site_name %>
-            </span>
-        <% end %>
-      </div>
-
-      <nav class="shop-nav hidden md:flex" style="gap: 1.5rem; position: relative; z-index: 1;">
-        <a href="#" phx-click="change_preview_page" phx-value-page="home" aria-current={if @active_page == "home", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Home</a>
-        <a href="#" phx-click="change_preview_page" phx-value-page="collection" aria-current={if @active_page in ["collection", "pdp"], do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Shop</a>
-        <a href="#" phx-click="change_preview_page" phx-value-page="about" aria-current={if @active_page == "about", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">About</a>
-        <a href="#" phx-click="change_preview_page" phx-value-page="contact" aria-current={if @active_page == "contact", do: "page"} style="color: var(--t-text-secondary); text-decoration: none; cursor: pointer;">Contact</a>
-      </nav>
-
-      <div class="shop-actions flex items-center gap-1" style="position: relative; z-index: 1;">
-        <button
-          type="button"
-          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all"
-          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
-          phx-click={Phoenix.LiveView.JS.show(to: "#search-modal", display: "flex") |> Phoenix.LiveView.JS.focus(to: "#search-input")}
-          aria-label="Search"
-        >
-          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <circle cx="11" cy="11" r="8"></circle>
-            <path d="M21 21l-4.35-4.35"></path>
-          </svg>
-        </button>
-        <button
-          type="button"
-          class="header-icon-btn w-9 h-9 flex items-center justify-center transition-all relative"
-          style="color: var(--t-text-secondary); background: none; border: none; cursor: pointer; border-radius: var(--t-radius-button);"
-          phx-click={Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.add_class("open", to: "#cart-drawer-overlay")}
-          aria-label="Cart"
-        >
-          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <path d="M6 2L3 6v14a2 2 0 002 2h14a2 2 0 002-2V6l-3-4z"></path>
-            <line x1="3" y1="6" x2="21" y2="6"></line>
-            <path d="M16 10a4 4 0 01-8 0"></path>
-          </svg>
-          <span class="cart-count" style="position: absolute; top: -4px; right: -4px; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); font-size: var(--t-text-caption); font-weight: 600; min-width: 18px; height: 18px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;">2</span>
-          <span class="sr-only">Cart (2)</span>
-        </button>
-      </div>
-    </header>
-    """
-  end
-
-  defp logo_url(logo_image, %{logo_recolor: true, logo_color: color}) when logo_image.is_svg do
-    clean_color = String.trim_leading(color, "#")
-    "/images/#{logo_image.id}/recolored/#{clean_color}"
-  end
-  defp logo_url(logo_image, _), do: "/images/#{logo_image.id}"
-
-  defp header_background_style(settings, header_image) do
-    "position: absolute; top: 0; left: 0; right: 0; bottom: 0; " <>
-    "background-image: url('/images/#{header_image.id}'); " <>
-    "background-size: #{settings.header_zoom}%; " <>
-    "background-position: #{settings.header_position_x}% #{settings.header_position_y}%; " <>
-    "background-repeat: no-repeat; z-index: 0;"
-  end
-
 
   @doc """
   Renders the cart drawer (floating sidebar).

lib/simpleshop_theme_web/live/theme_live/preview_pages/about.html.heex

@@ -8,7 +8,7 @@
   <% end %>
 
   <!-- Header -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="about" />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="about" mode={:preview} cart_count={2} />
 
   <!-- Content Page -->
   <main id="main-content" class="content-page" style="background-color: var(--t-surface-base);">

lib/simpleshop_theme_web/live/theme_live/preview_pages/cart.html.heex

@@ -8,7 +8,7 @@
   <% end %>
 
   <!-- Header -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="cart" />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="cart" mode={:preview} cart_count={2} />
 
   <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <h1 class="text-3xl md:text-4xl font-bold mb-8" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">

lib/simpleshop_theme_web/live/theme_live/preview_pages/collection.html.heex

@@ -8,7 +8,7 @@
   <% end %>
 
   <!-- Header -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="collection" />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="collection" mode={:preview} cart_count={2} />
 
   <!-- Page Header -->
   <main id="main-content">

lib/simpleshop_theme_web/live/theme_live/preview_pages/contact.html.heex

@@ -8,7 +8,7 @@
   <% end %>
 
   <!-- Header -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="contact" />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="contact" mode={:preview} cart_count={2} />
 
   <main id="main-content" class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
     <h1 class="text-4xl md:text-5xl font-bold mb-6 text-center" style="font-family: var(--t-font-heading); color: var(--t-text-primary); font-weight: var(--t-heading-weight); letter-spacing: var(--t-heading-tracking);">

lib/simpleshop_theme_web/live/theme_live/preview_pages/error.html.heex

@@ -8,7 +8,7 @@
   <% end %>
 
   <!-- Header -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="error" />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="error" mode={:preview} cart_count={2} />
 
   <main id="main-content" class="flex items-center justify-center" style="min-height: calc(100vh - 4rem);">
     <div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center">

lib/simpleshop_theme_web/live/theme_live/preview_pages/home.html.heex

@@ -8,7 +8,7 @@
   <% end %>
 
   <!-- Header -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="home" />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="home" mode={:preview} cart_count={2} />
 
   <!-- Hero Section -->
   <main id="main-content">

lib/simpleshop_theme_web/live/theme_live/preview_pages/pdp.html.heex

@@ -11,7 +11,7 @@
   <% end %>
 
   <!-- Header -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="pdp" />
+  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} header_image={@header_image} active_page="pdp" mode={:preview} cart_count={2} />
 
   <main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
     <!-- Breadcrumb -->