refactor: extract announcement_bar to shared ShopComponents module

Move announcement_bar from ThemeLive.PreviewPages to a new shared
SimpleshopThemeWeb.ShopComponents module. This establishes the pattern
for Phase 9 storefront integration where components need to work in
both the admin theme preview and public storefront pages.

Changes:
- Create lib/simpleshop_theme_web/components/shop_components.ex
- Add optional message attribute (defaults to "Free delivery over £40")
- Import ShopComponents in html_helpers for global availability
- Import ShopComponents in PreviewPages for embedded template access
- Update all 7 preview templates to use short-form <.announcement_bar>
- Remove original announcement_bar/1 from PreviewPages (now unused)

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

lib/simpleshop_theme_web.ex

@@ -86,6 +86,8 @@ defmodule SimpleshopThemeWeb do
       import Phoenix.HTML
       # Core UI components
       import SimpleshopThemeWeb.CoreComponents
+      # Shop UI components
+      import SimpleshopThemeWeb.ShopComponents
 
       # Common modules used in templates
       alias Phoenix.LiveView.JS

lib/simpleshop_theme_web/components/shop_components.ex

@@ -0,0 +1,41 @@
+defmodule SimpleshopThemeWeb.ShopComponents do
+  @moduledoc """
+  Provides shop/storefront UI components.
+
+  These components are shared between the theme preview system and
+  the public storefront pages. They render using CSS custom properties
+  defined by the theme settings.
+  """
+  use Phoenix.Component
+
+  @doc """
+  Renders the announcement bar.
+
+  The bar displays promotional messaging at the top of the page.
+  It uses CSS custom properties for theming.
+
+  ## Attributes
+
+  * `theme_settings` - Required. The theme settings map.
+  * `message` - Optional. The announcement message to display.
+    Defaults to "Free delivery on orders over £40".
+
+  ## Examples
+
+      <.announcement_bar theme_settings={@theme_settings} />
+      <.announcement_bar theme_settings={@theme_settings} message="20% off this weekend!" />
+  """
+  attr :theme_settings, :map, required: true
+  attr :message, :string, default: "Free delivery on orders over £40"
+
+  def announcement_bar(assigns) do
+    ~H"""
+    <div
+      class="announcement-bar"
+      style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
+    >
+      <p style="margin: 0;">{@message}</p>
+    </div>
+    """
+  end
+end

lib/simpleshop_theme_web/live/theme_live/preview_pages.ex

@@ -1,5 +1,6 @@
 defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
   use Phoenix.Component
+  import SimpleshopThemeWeb.ShopComponents
 
   embed_templates "preview_pages/*"
 
@@ -14,22 +15,6 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
     """
   end
 
-  @doc """
-  Renders the announcement bar.
-  """
-  attr :theme_settings, :map, required: true
-
-  def announcement_bar(assigns) do
-    ~H"""
-    <div
-      class="announcement-bar"
-      style="background-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); text-align: center; padding: 0.5rem 1rem; font-size: var(--t-text-small);"
-    >
-      <p style="margin: 0;">Free delivery on orders over £40</p>
-    </div>
-    """
-  end
-
   @doc """
   Renders the shop header with logo based on logo_mode setting.
   """

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

@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->

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

@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->

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

@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->

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

@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->

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

@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->

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

@@ -4,7 +4,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->

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

@@ -7,7 +7,7 @@
 
   <!-- Announcement Bar -->
   <%= if @theme_settings.announcement_bar do %>
-    <SimpleshopThemeWeb.ThemeLive.PreviewPages.announcement_bar theme_settings={@theme_settings} />
+    <.announcement_bar theme_settings={@theme_settings} />
   <% end %>
 
   <!-- Header -->