simpleshop_theme/docs/plans/dry-refactor.md

# DRY refactor plan

Status: Planned

Codebase analysis identifying repeated patterns and consolidation opportunities. Ordered by impact.

## High priority

### 1. Extract `<.shop_layout>` wrapper component

**Problem:** Every page template repeats ~28 lines of shell boilerplate: `#shop-container` div, `skip_link`, `announcement_bar`, `shop_header`, `shop_footer`, `cart_drawer`, `search_modal`, `mobile_bottom_nav`. That's ~224 lines of copy-paste across 8 templates.

**Fix:** Create a `shop_layout/1` component in `shop_components.ex` that accepts an inner block and common attrs. Templates become just their unique `<main>` content.

**Before:**
```heex
<div id="shop-container" phx-hook="CartPersist" class="shop-container min-h-screen pb-20 md:pb-0"
     style="background-color: var(--t-surface-base); ...">
  <.skip_link />
  <%= if @theme_settings.announcement_bar do %>
    <.announcement_bar theme_settings={@theme_settings} />
  <% end %>
  <.shop_header theme_settings={@theme_settings} logo_image={@logo_image} ... />

  <main id="main-content">
    <!-- unique content -->
  </main>

  <.shop_footer theme_settings={@theme_settings} mode={@mode} />
  <.cart_drawer cart_items={@cart_items} subtotal={@cart_subtotal} ... />
  <.search_modal hint_text={~s(...)} />
  <.mobile_bottom_nav active_page="home" mode={@mode} />
</div>
```

**After:**
```heex
<.shop_layout {assigns}>
  <main id="main-content">
    <!-- unique content -->
  </main>
</.shop_layout>
```

**Files:** `shop_components.ex` (new component), all 8 page templates, `collection.ex` inline render.

**Complexity:** Medium. The error template has slight variations (no `phx-hook`, different class). Handle with an optional attr or keep error as a special case.

### 2. Extract theme loading into on_mount hook

**Problem:** 7 shop LiveViews independently load theme settings, check CSS cache, fetch logo/header, assign 5 common values. ~12-15 identical lines per file, ~75 lines total.

**Fix:** Create a `ThemeHook` (like `CartHook`) using `on_mount` that assigns `theme_settings`, `generated_css`, `logo_image`, `header_image`, `mode`. Add it to the `:public_shop` live_session alongside `CartHook`.

**Before (every LiveView):**
```elixir
def mount(_params, _session, socket) do
  theme_settings = Settings.get_theme_settings()
  generated_css = case CSSCache.get() do
    {:ok, css} -> css
    :miss -> css = CSSGenerator.generate(theme_settings); CSSCache.put(css); css
  end
  socket =
    socket
    |> assign(:theme_settings, theme_settings)
    |> assign(:generated_css, generated_css)
    |> assign(:logo_image, Media.get_logo())
    |> assign(:header_image, Media.get_header())
    |> assign(:mode, :shop)
  # ... page-specific assigns
end
```

**After:**
```elixir
# Router
live_session :public_shop,
  on_mount: [{CartHook, :mount_cart}, {ThemeHook, :mount_theme}] do
  # ...
end

# LiveView - only page-specific logic remains
def mount(_params, _session, socket) do
  socket = assign(socket, :page_title, "Home")
  {:ok, socket}
end
```

**Files:** New `theme_hook.ex`, `router.ex` (add to on_mount), all 7 shop LiveViews (remove boilerplate).

**Complexity:** Low. Follows established `CartHook` pattern exactly.

### 3. Extract common preview assigns helper

**Problem:** 10 `preview_page` clauses in `theme_live/index.ex` each pass the same 8 common attrs (theme_settings, logo_image, header_image, mode, cart_items, cart_count, cart_subtotal, cart_drawer_open). ~80 lines of duplication.

**Fix:** Extract a private `common_preview_assigns/1` function. Each clause merges page-specific attrs on top.

**Files:** `lib/simpleshop_theme_web/live/theme_live/index.ex`

**Complexity:** Low. Pure refactor within one file.

## Medium priority

### 4. Split `shop_components.ex` into focused modules

**Problem:** 4,400 lines, 55 public functions. Covers navigation, products, cart, contact, content rendering, forms. Hard to navigate, slow to compile.

**Fix:** Split into ~5 modules:
- `ShopLayoutComponents` — header, footer, mobile_bottom_nav, skip_link, announcement_bar, shop_layout
- `ShopProductComponents` — product_card, product_grid, product_gallery, variant_selector, related_products
- `ShopCartComponents` — cart_drawer, cart_item, cart_layout, order_summary
- `ShopContentComponents` — rich_text, hero_section, image_text_section, responsive_image
- `ShopFormComponents` — contact_form, newsletter_card, search_modal

Keep `ShopComponents` as a facade that imports all sub-modules for backward compatibility.

**Files:** `shop_components.ex` split into 5 new files.

**Complexity:** Medium. Mechanical but touches many imports. Need to update `page_templates.ex` and any direct references.

### 5. Unify cart hydration between CartHook and CheckoutController

**Problem:** `CheckoutController` manually calls `Cart.hydrate()` and `Enum.reduce` for subtotal instead of using `Cart.calculate_subtotal/1`. Duplicates logic from `CartHook.update_cart_assigns/2`.

**Fix:** Extract a `Cart.build_state/1` function that returns `%{items: hydrated, count: n, subtotal: formatted}`. Both CartHook and CheckoutController use it.

**Files:** `cart.ex`, `cart_hook.ex`, `checkout_controller.ex`

**Complexity:** Low.

### 6. Consolidate encryption logic

**Problem:** Both `Settings.put_secret/2` and `ProviderConnection` changeset independently call `Vault.encrypt()` with different error handling patterns.

**Fix:** Add `Vault.encrypt!/1` that raises on failure (for changeset use) and keep `Vault.encrypt/1` for tuple returns. Or create an `Ecto.Type` for encrypted fields.

**Files:** `vault.ex`, `settings.ex`, `provider_connection.ex`

**Complexity:** Low-medium.

## Low priority

### 7. Consolidate Settings repo lookups

**Problem:** `get_setting`, `get_secret`, `has_secret?`, `secret_hint` each independently call `Repo.get_by(Setting, key: key)`.

**Fix:** Extract `defp fetch_setting(key)` that returns `{:ok, setting} | :not_found`.

**Files:** `settings.ex`

**Complexity:** Trivial.

### 8. Scalable secrets loading

**Problem:** `Secrets.load_stripe_config/0` hardcodes Stripe key loading. Adding more providers means duplicating the pattern.

**Fix:** Registry of `{settings_key, app, env_key}` tuples. `load_all/0` iterates.

**Files:** `secrets.ex`

**Complexity:** Trivial but low value until more providers are added.

## What's already good

- **CartHook** — textbook shared behaviour via `attach_hook`. Model for ThemeHook.
- **Router** — clean pipeline composition, no duplication.
- **CoreComponents vs ShopComponents** — proper separation, no overlap.
- **Provider abstraction** — clean dispatch with Mox support.
- **Context boundaries** — Products, Orders, Settings, Media are well-separated.
- **Page LiveView renders** — now all use `{assigns}` spread (just refactored).

## Suggested order

1. ThemeHook (item 2) — lowest risk, biggest clarity win
2. shop_layout component (item 1) — biggest line reduction
3. Preview assigns helper (item 3) — quick win, one file
4. Cart state builder (item 5) — small but prevents bugs
5. Split shop_components (item 4) — larger effort, do when convenient
6. Everything else — opportunistic