refactor: extract cart_drawer to shared ShopComponents module

Move the cart drawer component from ThemeLive.PreviewPages to the
shared ShopComponents module. The component now supports:
- mode attribute (:live for real stores, :preview for theme editor)
- subtotal attribute (default nil shows "£0.00")
- cart_items attribute (default empty list)

In preview mode, "View basket" navigates via LiveView JS commands.
In live mode, it links directly to /cart.

Preview pages now explicitly pass demo values:
  <.cart_drawer cart_items={...} subtotal="£72.00" mode={:preview} />

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

lib/simpleshop_theme_web/components/shop_components.ex

@@ -382,4 +382,138 @@ defmodule SimpleshopThemeWeb.ShopComponents do
       "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).
+
+  The drawer slides in from the right when opened. It displays cart items
+  and checkout options.
+
+  ## Attributes
+
+  * `cart_items` - List of cart items to display. Each item should have
+    `image`, `name`, `variant`, and `price` keys. Default: []
+  * `subtotal` - The subtotal to display. Default: nil (shows "£0.00")
+  * `mode` - Either `:live` (default) for real stores or `:preview` for theme editor.
+    In preview mode, "View basket" navigates via LiveView JS commands.
+
+  ## Examples
+
+      <.cart_drawer cart_items={@cart.items} subtotal={@cart.subtotal} />
+      <.cart_drawer cart_items={demo_items} subtotal="£72.00" mode={:preview} />
+  """
+  attr :cart_items, :list, default: []
+  attr :subtotal, :string, default: nil
+  attr :mode, :atom, default: :live
+
+  def cart_drawer(assigns) do
+    assigns = assign_new(assigns, :display_subtotal, fn ->
+      assigns.subtotal || "£0.00"
+    end)
+
+    ~H"""
+    <!-- Cart Drawer -->
+    <div
+      id="cart-drawer"
+      class="cart-drawer"
+      style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
+    >
+      <div class="cart-drawer-header" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);">
+        <h2 style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;">Your basket</h2>
+        <button
+          type="button"
+          class="cart-drawer-close"
+          style="background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary);"
+          phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
+          aria-label="Close cart"
+        >
+          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      <div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
+        <%= for item <- @cart_items do %>
+          <div class="cart-drawer-item" style="display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--t-border-default);">
+            <div class="cart-drawer-item-image" style={"width: 60px; height: 60px; border-radius: var(--t-radius-card); background-size: cover; background-position: center; background-image: url('#{item.image}'); flex-shrink: 0;"}></div>
+            <div class="cart-drawer-item-details" style="flex: 1;">
+              <h3 style="font-family: var(--t-font-body); font-size: var(--t-text-small); font-weight: 500; color: var(--t-text-primary); margin: 0 0 2px;">
+                <%= item.name %>
+              </h3>
+              <p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
+                <%= item.variant %>
+              </p>
+              <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
+                <p class="cart-drawer-item-price" style="color: var(--t-text-primary); font-weight: 500; font-size: var(--t-text-small); margin: 0;">
+                  <%= item.price %>
+                </p>
+                <button type="button" style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;">
+                  Remove
+                </button>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+      <div class="cart-drawer-footer" style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);">
+        <div style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); margin-bottom: 0.5rem;">
+          <span>Delivery</span>
+          <span>Calculated at checkout</span>
+        </div>
+        <div class="cart-drawer-total" style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;">
+          <span>Subtotal</span>
+          <span><%= @display_subtotal %></span>
+        </div>
+        <button
+          type="submit"
+          class="cart-drawer-checkout w-full mb-2"
+          style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition-all; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
+        >
+          Checkout
+        </button>
+        <%= if @mode == :preview do %>
+          <a
+            href="#"
+            phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay") |> Phoenix.LiveView.JS.push("change_preview_page", value: %{page: "cart"})}
+            class="cart-drawer-link"
+            style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
+          >
+            View basket
+          </a>
+        <% else %>
+          <a
+            href="/cart"
+            phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
+            class="cart-drawer-link"
+            style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
+          >
+            View basket
+          </a>
+        <% end %>
+      </div>
+    </div>
+
+    <!-- Cart Drawer Overlay -->
+    <div
+      id="cart-drawer-overlay"
+      class="cart-drawer-overlay"
+      style="position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;"
+      phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
+    >
+    </div>
+
+    <style>
+      .cart-drawer.open {
+        right: 0 !important;
+      }
+      .cart-drawer-overlay.open {
+        opacity: 1 !important;
+        visibility: visible !important;
+      }
+    </style>
+    """
+  end
 end

lib/simpleshop_theme_web/live/theme_live/preview_pages.ex

@@ -3,107 +3,4 @@ defmodule SimpleshopThemeWeb.ThemeLive.PreviewPages do
   import SimpleshopThemeWeb.ShopComponents
 
   embed_templates "preview_pages/*"
-
-
-
-  @doc """
-  Renders the cart drawer (floating sidebar).
-  """
-  attr :cart_items, :list, default: []
-
-  def cart_drawer(assigns) do
-    ~H"""
-    <!-- Cart Drawer -->
-    <div
-      id="cart-drawer"
-      class="cart-drawer"
-      style="position: fixed; top: 0; right: -400px; width: 400px; max-width: 90vw; height: 100vh; background: var(--t-surface-raised); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.15);"
-    >
-      <div class="cart-drawer-header" style="display: flex; justify-content: space-between; align-items: center; padding: 1rem 1.5rem; border-bottom: 1px solid var(--t-border-default);">
-        <h2 style="font-family: var(--t-font-heading); font-weight: var(--t-heading-weight); font-size: var(--t-text-large); color: var(--t-text-primary); margin: 0;">Your basket</h2>
-        <button
-          type="button"
-          class="cart-drawer-close"
-          style="background: none; border: none; padding: 0.5rem; cursor: pointer; color: var(--t-text-secondary);"
-          phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
-          aria-label="Close cart"
-        >
-          <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-            <line x1="18" y1="6" x2="6" y2="18"></line>
-            <line x1="6" y1="6" x2="18" y2="18"></line>
-          </svg>
-        </button>
-      </div>
-
-      <div class="cart-drawer-items" style="flex: 1; overflow-y: auto; padding: 1rem;">
-        <%= for item <- @cart_items do %>
-          <div class="cart-drawer-item" style="display: flex; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--t-border-default);">
-            <div class="cart-drawer-item-image" style={"width: 60px; height: 60px; border-radius: var(--t-radius-card); background-size: cover; background-position: center; background-image: url('#{item.image}'); flex-shrink: 0;"}></div>
-            <div class="cart-drawer-item-details" style="flex: 1;">
-              <h3 style="font-family: var(--t-font-body); font-size: var(--t-text-small); font-weight: 500; color: var(--t-text-primary); margin: 0 0 2px;">
-                <%= item.name %>
-              </h3>
-              <p style="font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); margin: 0;">
-                <%= item.variant %>
-              </p>
-              <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 4px;">
-                <p class="cart-drawer-item-price" style="color: var(--t-text-primary); font-weight: 500; font-size: var(--t-text-small); margin: 0;">
-                  <%= item.price %>
-                </p>
-                <button type="button" style="background: none; border: none; padding: 0; cursor: pointer; font-family: var(--t-font-body); font-size: var(--t-text-caption); color: var(--t-text-tertiary); text-decoration: underline;">
-                  Remove
-                </button>
-              </div>
-            </div>
-          </div>
-        <% end %>
-      </div>
-
-      <div class="cart-drawer-footer" style="padding: 1rem 1.5rem; border-top: 1px solid var(--t-border-default); background: var(--t-surface-sunken);">
-        <div style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); margin-bottom: 0.5rem;">
-          <span>Delivery</span>
-          <span>Calculated at checkout</span>
-        </div>
-        <div class="cart-drawer-total" style="display: flex; justify-content: space-between; font-family: var(--t-font-body); font-size: var(--t-text-base); font-weight: 600; color: var(--t-text-primary); margin-bottom: 1rem;">
-          <span>Subtotal</span>
-          <span>£72.00</span>
-        </div>
-        <button
-          type="submit"
-          class="cart-drawer-checkout w-full mb-2"
-          style="width: 100%; padding: 0.75rem 1.5rem; font-weight: 600; transition-all; background: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); color: var(--t-text-inverse); border-radius: var(--t-radius-button); border: none; cursor: pointer; font-family: var(--t-font-body);"
-        >
-          Checkout
-        </button>
-        <a
-          href="#"
-          phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay") |> Phoenix.LiveView.JS.push("change_preview_page", value: %{page: "cart"})}
-          class="cart-drawer-link"
-          style="display: block; text-align: center; font-family: var(--t-font-body); font-size: var(--t-text-small); color: var(--t-text-secondary); text-decoration: underline; cursor: pointer;"
-        >
-          View basket
-        </a>
-      </div>
-    </div>
-
-    <!-- Cart Drawer Overlay -->
-    <div
-      id="cart-drawer-overlay"
-      class="cart-drawer-overlay"
-      style="position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease;"
-      phx-click={Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer") |> Phoenix.LiveView.JS.remove_class("open", to: "#cart-drawer-overlay")}
-    >
-    </div>
-
-    <style>
-      .cart-drawer.open {
-        right: 0 !important;
-      }
-      .cart-drawer-overlay.open {
-        opacity: 1 !important;
-        visibility: visible !important;
-      }
-    </style>
-    """
-  end
 end

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

@@ -70,7 +70,7 @@
 
   <!-- Search Modal -->
   <!-- Cart Drawer -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

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

@@ -123,7 +123,7 @@
 
   <!-- Search Modal -->
   <!-- Cart Drawer -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

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

@@ -134,7 +134,7 @@
 
   <!-- Search Modal -->
   <!-- Cart Drawer -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

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

@@ -190,7 +190,7 @@
 
   <!-- Search Modal -->
   <!-- Cart Drawer -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

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

@@ -81,7 +81,7 @@
 
   <!-- Search Modal -->
   <!-- Cart Drawer -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>

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

@@ -154,7 +154,7 @@
   <.shop_footer theme_settings={@theme_settings} mode={:preview} />
 
   <!-- Cart Drawer -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
 
   <!-- Search Modal -->
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />

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

@@ -451,7 +451,7 @@
 
   <!-- Search Modal -->
   <!-- Cart Drawer -->
-  <SimpleshopThemeWeb.ThemeLive.PreviewPages.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} />
+  <.cart_drawer cart_items={SimpleshopTheme.Theme.PreviewData.cart_drawer_items()} subtotal="£72.00" mode={:preview} />
 
   <.search_modal hint_text={~s(Try searching for "mountain", "forest", or "ocean")} />
 </div>