Move the accessibility skip link from ThemeLive.PreviewPages to the
shared ShopComponents module for reuse on public storefront pages.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
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>
- Add Google Fonts link to root layout for typography presets
- Add data-mood, data-typography, data-shape, data-density attributes to preview-frame
- Create theme-layer2-attributes.css with attribute-based CSS from demo
- Move theme CSS files from priv/static/css to assets/css for proper compilation
- Update CSS import order (primitives → layer2 → semantic)
- Add 'css' to static_paths to serve theme CSS files
This fixes the issue where theme controls updated the database but didn't
visually affect the preview. The demo's attribute-based CSS system is now
properly integrated with the Phoenix LiveView implementation.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Implement basic theme editor interface with live preview:
- ThemeLive.Index LiveView with mount and event handlers
- Two-column layout: controls sidebar + preview area
- Display all 9 presets as clickable buttons
- Apply preset and regenerate CSS on click
- Show current theme settings (mood, typography, shape, density, color)
- Preview page switcher (7 pages: home, collection, product, cart, about, contact, 404)
- Inline <style> tag with generated CSS for instant preview
- Basic preview frame showing theme variables in action
- Authentication required via :require_authenticated_user pipeline
- Theme navigation link added to user menu
- 9 comprehensive LiveView tests
All tests passing (197 total).
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
