diff --git a/PROGRESS.md b/PROGRESS.md index bacdd0c..94d8767 100644 --- a/PROGRESS.md +++ b/PROGRESS.md @@ -51,20 +51,59 @@ All 4 phases done. Tailwind utility clone deleted, all templates migrated to sem | 70 | Margin guard on sales (prevent discounts that breach minimum profit threshold) | 69 | 1h | planned | | 71 | Announcement bar (dismissable shop banner for active sales) | 69 | 1.5h | planned | -### Onboarding UX improvements ([plan](docs/plans/onboarding-ux.md)) +### Onboarding UX v2 ([plan](docs/plans/onboarding-ux.md)) -| # | Task | Priority | Est | Status | -|---|------|----------|-----|--------| -| 1 | Redirect to dashboard after wizard completion with welcome flash | High | 30m | planned | -| 2 | Add shipping setup to checklist, gate "Go live" on shipping existing | High | 1h | planned | -| 3 | Add shop settings to checklist (name, currency) | High | 45m | planned | -| 4 | Make checklist collapsible instead of dismissable | Medium | 15m | planned | -| 5 | Add test order guidance (test card number, what to expect) | Medium | 45m | planned | -| 6 | Skip completed wizard steps on revisit | Medium | 1h | planned | -| 7 | Better provider connection error messages with help links | Medium | 30m | planned | -| 8 | Add theme customisation tips to checklist | Low | 15m | planned | -| 9 | Smarter "Sync products" checklist link | Low | 15m | planned | -| 10 | Add email setup as optional checklist item | Low | 30m | planned | +Based on usability testing (March 2026). Reworks the entire setup flow into a single guided journey with progress bar, forgiving validation, and contextual prompts. + +| # | Task | Est | Status | +|---|------|-----|--------| +| A | Simplify initial setup to account creation only (email, password, shop name) | 1.5h | planned | +| B | Guided setup flow with progress bar (multi-step, skippable, explains "why") | 4h | planned | +| C | Forgiving API key validation (strip whitespace, format checks, helpful errors) | 1.5h | planned | +| D | Email provider setup UX rework (recommended pick, grouping, guided flow, test email) | 2h | planned | +| E | Contextual prompts for skipped steps (products, checkout, order detail) | 2h | planned | +| F | Dashboard checklist and messaging rework | 2h | planned | +| G | Coming soon page fixes (logo layout, admin login link) | 30m | planned | +| H | External links UX (new tabs, icons, aria labels) | 1h | planned | +| I | Input styling — WCAG AA/AAA compliance | 1h | planned | + +### Notification system overhaul ([plan](docs/plans/notification-overhaul.md)) + +Replace floating toast/flash messages with inline feedback and persistent top banners. 110+ flash messages across 28 files to migrate. + +| # | Task | Est | Status | +|---|------|-----|--------| +| 1 | Build inline feedback component | 1.5h | planned | +| 2 | Build persistent top banner component (replaces flash) | 1.5h | planned | +| 3 | Migrate admin forms to inline feedback (theme, pages, settings, email, providers) | 3h | planned | +| 4 | Migrate remaining admin pages (media, products, activity, newsletter, redirects, nav) | 2h | planned | +| 5 | Migrate shop pages (cart, contact, checkout, auth) | 2h | planned | +| 6 | Migrate setup wizard notifications | 1h | planned | +| 7 | Remove old flash/toast CSS and JS | 30m | planned | + +### Live site editor ([plan](docs/plans/live-site-editor.md)) + +On-site editing overlay for admins: browse the real shop with a sidebar for theme and page editing. Inline contenteditable for text, live CSS variable injection for theme changes. Responsive layout (split view on desktop, overlay on mobile). + +| Phase | Description | Est | Status | +|---|---|---|---| +| 1 | Design: sketch approaches, pick one | 2h | planned | +| 2 | Extract shared components from theme editor and page editor | 4h | planned | +| 3 | Build editor wrapper LiveView with sidebar shell | 3h | planned | +| 4 | Theme editing in sidebar (re-use theme controls, live CSS vars) | 3h | planned | +| 5 | Block list and block settings in sidebar | 3h | planned | +| 6 | Block selection: click-to-select with highlight on page | 2h | planned | +| 7 | Inline text editing with contenteditable + phx-hook | 4h | planned | +| 8 | Responsive layout (split view / overlay) | 2h | planned | +| 9 | Save/discard/undo flow | 2h | planned | +| 10 | Edit mode toggle (floating button for admins on shop pages) | 1h | planned | +| 11 | Polish and testing | 4h | planned | + +### Quick fixes (from usability testing) + +| # | Task | Est | Status | +|---|---|---|---| +| 1 | Fix double radio button dots in theme editor | 30m | planned | ### Platform site @@ -108,5 +147,7 @@ All plans in [docs/plans/](docs/plans/). Completed plans are kept as architectur | [favicon.md](docs/plans/favicon.md) | Complete | | [legal-page-generator.md](docs/plans/legal-page-generator.md) | Complete | | [url-redirects.md](docs/plans/url-redirects.md) | Complete | -| [onboarding-ux.md](docs/plans/onboarding-ux.md) | Planned | +| [onboarding-ux.md](docs/plans/onboarding-ux.md) | Planned (v2) | +| [notification-overhaul.md](docs/plans/notification-overhaul.md) | Planned | +| [live-site-editor.md](docs/plans/live-site-editor.md) | Design exploration | | [profit-aware-pricing.md](docs/plans/profit-aware-pricing.md) | Planned | diff --git a/ROADMAP.md b/ROADMAP.md index a778d2b..99a25f7 100644 --- a/ROADMAP.md +++ b/ROADMAP.md @@ -35,6 +35,26 @@ Complete cost visibility for shop owners. [Plan](docs/plans/profit-aware-pricing Email list collection (signup forms on shop pages). Campaign sending for product launches and sales. Simple to start: collect emails, send via Swoosh. Ties into sales & promotions for sale announcement blasts. +## SEO settings + +Comprehensive SEO tooling to rival best-in-class WordPress plugins (Yoast, RankMath) and other 2026 best-of-breed SEO tools. Needs a full planning session to scope. + +Potential areas: +- Per-page SEO scoring/analysis with actionable suggestions +- Structured data / JSON-LD beyond the basics (FAQ, HowTo, product reviews, breadcrumbs) +- XML sitemap with priority/frequency hints, image sitemaps +- Canonical URL management, hreflang for multi-language +- Open Graph and Twitter card previews in the editor +- Internal link suggestions +- Readability analysis +- Search console integration +- Redirect chains and broken link detection (partially done via URL redirects feature) +- Core Web Vitals monitoring + +## Multiple print providers + +Support connecting multiple print providers simultaneously during setup and in general use. Route products to different providers based on product type, cost, or seller preference. Allow experimentation with providers before committing. + ## Product page improvements - Pre-checkout variant validation (verify provider availability) diff --git a/docs/plans/live-site-editor.md b/docs/plans/live-site-editor.md new file mode 100644 index 0000000..29bc8c8 --- /dev/null +++ b/docs/plans/live-site-editor.md @@ -0,0 +1,152 @@ +# Live site editor + +Status: Design exploration + +A live, on-site editing experience where admins browse their real shop with an editing overlay. Change theme settings, edit page content, and adjust block settings — all while seeing the result immediately on the actual site. + +## Inspiration + +Squarespace, Webflow, Shopify's theme customiser. The common pattern: you're looking at your real site, with an editing panel alongside it. Changes apply live. No separate "admin preview" — what you see is what your customers get. + +## Core concept + +### Edit mode + +Logged-in admins see a small floating "Edit" button (or pencil icon) on their shop. Clicking it enters edit mode. This is invisible to regular visitors. + +### Layout by screen size + +**Mobile / small screens (< 768px):** +- Full-width site view +- Tap a block or element to select it +- Bottom sheet or full-screen overlay slides up with settings for the selected item +- Swipe down or tap outside to dismiss +- A small floating toolbar stays visible (edit toggle, undo, save) + +**Tablet / medium screens (768px–1024px):** +- Site view takes most of the width +- Sidebar slides in from the left or right, narrower (250–300px) +- Site content reflows to fit + +**Desktop / large screens (> 1024px):** +- Split view: sidebar (350–400px) on the left, live site preview on the right +- Sidebar has full settings panels +- Site renders at remaining width, giving a realistic preview + +### What's editable + +**Theme settings (global):** +- Preset picker (the 8 existing presets) +- Colour tokens (primary, surface, text, accent) +- Typography (font family, sizes, weights) +- Layout settings (max-width, spacing) +- Logo, header image, favicon + +These already work via CSS custom properties — changes can apply instantly client-side before saving, exactly like the current theme editor. + +**Page content (per-page):** +- Block list: reorder, add, remove blocks +- Block settings: layout, styling, images — shown in sidebar when a block is selected +- **Inline text editing**: `contenteditable` for text content within blocks (headings, paragraphs, button labels). Edit directly on the page, changes sync back to block data via LiveView events. + +**Page settings:** +- Title, slug, SEO metadata, publish status +- Accessible from the sidebar when no block is selected + +### Interaction model + +1. **Click a block on the page** → block highlights (outline/overlay), sidebar shows that block's settings +2. **Click text within a block** → enters inline editing mode (`contenteditable`). Sidebar shows block settings alongside. +3. **Edit in sidebar** → changes apply live to the page (theme via CSS vars, blocks via LiveView re-render) +4. **Sidebar tabs/sections:** "Theme" (global settings) and "Page" (current page's blocks and settings) +5. **Save** → persists all changes. Unsaved changes indicator in toolbar. +6. **Exit edit mode** → removes sidebar/overlay, back to normal browsing + +### How it relates to existing features + +The current admin already has: +- **Theme editor** (`/admin/theme`): full theme customisation with preset picker, colour/font/layout controls +- **Page editor** (`/admin/pages/:id/edit`): block list with drag-and-drop reorder, block settings panels, live preview + +The live site editor doesn't replace these — it re-surfaces the same components in a new context. The admin pages remain as the full-featured editing environment. The live editor is the quick, visual, "I just want to tweak this" experience. + +**Shared components:** +- Theme setting controls (colour pickers, font selectors, preset cards) +- Block settings panels (per block type) +- Block list with reorder controls + +These need to be extracted into standalone components that work in both contexts (admin page and live editor sidebar). + +## Technical approach + +### LiveView architecture + +The live site editor would be a LiveView that: +1. Renders the actual shop page content (blocks, theme) as the main view +2. Has a sidebar component (LiveComponent or function component) for editing controls +3. Manages edit state (selected block, unsaved changes, edit mode on/off) + +**Option A: Wrapper LiveView** +A dedicated LiveView at e.g. `/edit/:path` that wraps the shop page rendering with the editor UI. The shop page content is rendered server-side just like normal, but wrapped in edit-mode markup. + +**Option B: Editor overlay on existing shop LiveViews** +Inject the editor UI into the existing shop LiveViews when the user is an admin in edit mode. Cleaner URL story (you're editing at the same URL) but more coupling. + +Option A is probably cleaner for a first pass — less risk of breaking the shop experience. + +### Inline text editing + +`contenteditable` integration with LiveView: + +1. Block text content renders inside a `contenteditable` element with `phx-hook="InlineEdit"` +2. The JS hook captures changes (on blur or on a debounce) and sends them back as LiveView events +3. The LiveView updates the block data +4. Need `phx-update="ignore"` on the contenteditable element to prevent LiveView from overwriting mid-edit + +This is achievable but needs careful handling of the LiveView ↔ JS boundary. + +### CSS custom property injection + +Theme changes already work by injecting CSS custom properties into `