diff --git a/PROGRESS.md b/PROGRESS.md index 40df874..cd9bd5b 100644 --- a/PROGRESS.md +++ b/PROGRESS.md @@ -30,7 +30,7 @@ Ordered by dependency level — admin shell chain first (unblocks most downstream work). -Plans: [admin-redesign.md](docs/plans/admin-redesign.md) | [admin-font-loading.md](docs/plans/admin-font-loading.md) | [setup-wizard.md](docs/plans/setup-wizard.md) | [setup-and-launch.md](docs/plans/setup-and-launch.md) | [setup-auto-confirm.md](docs/plans/setup-auto-confirm.md) | [email-settings.md](docs/plans/email-settings.md) | [search.md](docs/plans/search.md) | [products-refactor.md](/home/jamey/.claude/plans/snug-roaming-zebra.md) | [shipping-sync.md](docs/plans/shipping-sync.md) | [printful-integration.md](docs/plans/printful-integration.md) | [provider-strategy.md](docs/plans/provider-strategy.md) | [css-migration.md](docs/plans/css-migration.md) | [analytics-v2.md](docs/plans/analytics-v2.md) | [page-builder.md](docs/plans/page-builder.md) | [media-library.md](docs/plans/media-library.md) | [custom-pages.md](docs/plans/custom-pages.md) +Plans: [admin-redesign.md](docs/plans/admin-redesign.md) | [admin-font-loading.md](docs/plans/admin-font-loading.md) | [setup-wizard.md](docs/plans/setup-wizard.md) | [setup-and-launch.md](docs/plans/setup-and-launch.md) | [setup-auto-confirm.md](docs/plans/setup-auto-confirm.md) | [email-settings.md](docs/plans/email-settings.md) | [search.md](docs/plans/search.md) | [products-refactor.md](/home/jamey/.claude/plans/snug-roaming-zebra.md) | [shipping-sync.md](docs/plans/shipping-sync.md) | [printful-integration.md](docs/plans/printful-integration.md) | [provider-strategy.md](docs/plans/provider-strategy.md) | [css-migration.md](docs/plans/css-migration.md) | [analytics-v2.md](docs/plans/analytics-v2.md) | [page-builder.md](docs/plans/page-builder.md) | [media-library.md](docs/plans/media-library.md) | [custom-pages.md](docs/plans/custom-pages.md) | [admin-ux-polish.md](docs/plans/admin-ux-polish.md) | # | Task | Depends on | Est | Status | |---|------|------------|-----|--------| @@ -98,8 +98,8 @@ Plans: [admin-redesign.md](docs/plans/admin-redesign.md) | [admin-font-loading.m | ~~87~~ | ~~`FaviconController` serving all favicon routes + dynamic `site.webmanifest`; `` tags + `theme-color` meta in `shop_root.html.heex`~~ | 86 | 1.5h | done | | ~~88~~ | ~~SVG dark mode injection for SVG-source favicons; icon background colour + short name customisation~~ | 86 | 1h | done | | | **No-JS support** | | | | -| 56 | Audit all key flows for no-JS (browse, cart, checkout, analytics) | — | 2h | planned | -| 57 | Fix any broken flows for no-JS clients | 56 | TBD | planned | +| ~~56~~ | ~~Audit all key flows for no-JS (browse, cart, checkout, analytics)~~ | — | 2h | done | +| ~~57~~ | ~~Fix any broken flows for no-JS clients~~ | 56 | TBD | done | | | **SEO** | | | | | ~~58~~ | ~~Page titles with separators across all pages~~ | — | 1h | done | | ~~59~~ | ~~Open Graph + Twitter Card meta tags (products, collections, home)~~ | 58 | 2h | done | @@ -127,6 +127,17 @@ Plans: [admin-redesign.md](docs/plans/admin-redesign.md) | [admin-font-loading.m | 90 | Instrument existing event points — stripe webhook, OrderNotifier, OrderSubmissionWorker, fulfilment status, ProductSyncWorker | 89 | 1.5h | planned | | 91 | Order timeline component on `/admin/orders/:id` — chronological feed replacing scattered field cards | 89 | 1.5h | planned | | 92 | Global `/admin/activity` LiveView — all activity + "needs attention" tab, resolve action, count badge on admin nav | 89 | 2h | planned | +| | **Admin & page editor UX polish** ([plan](docs/plans/admin-ux-polish.md)) | | | | +| 103 | Unsaved changes warning — `beforeunload` + LiveView nav guard on page editor | — | 30m | planned | +| 104 | Block descriptions in picker — add subtitle text to each block type | — | 45m | planned | +| 105 | Sidebar nav grouping — section headers or nest Email/Redirects under Settings | — | 45m | planned | +| 106 | Nav editor input labels — visible labels above each input pair | — | 30m | planned | +| 107 | Custom page settings inline — collapsible panel in editor instead of separate page | — | 1h | planned | +| 108 | Preview with real data — load actual products/categories instead of PreviewData | — | 45m | planned | +| 109 | Block content preview in list — one-line summary below block name | — | 45m | planned | +| 110 | "Providers" label clarity — rename to "Print providers" in sidebar | — | 5m | planned | +| 111 | Newsletter block backend — wire up email collection or mark as decorative | — | 1-3h | planned | +| 112 | Block preview thumbnails in picker — small illustrations per block type | — | 2h | planned | | | **Other features** | | | | | ~~72~~ | ~~Order status lookup — wire up existing stub on contact page (UI already exists, backend unbuilt)~~ | — | 1.5h | done | | | **Abandoned cart recovery** ([plan](docs/plans/abandoned-cart.md)) | | | | diff --git a/docs/plans/admin-ux-polish.md b/docs/plans/admin-ux-polish.md new file mode 100644 index 0000000..3a2960f --- /dev/null +++ b/docs/plans/admin-ux-polish.md @@ -0,0 +1,110 @@ +# Admin & page editor UX polish + +Status: Planned + +## Context + +Full UX audit of the admin panel and page editing experience, evaluating intuitiveness, completeness, and newbie-friendliness. The admin is solid and well-built — good accessibility, clear status indicators, logical flow. The gaps are around preventing data loss, helping newbies understand block types, and tidying up navigation. + +## What works well + +- Dashboard launch checklist with direct links to each setup step +- Split-screen page editor with live preview, undo/redo, keyboard shortcuts +- ARIA labels on all block controls, live region announcements +- Clear dirty state tracking (badge + disabled save button) +- Legal page auto-population with "auto-generated" vs "customised" badges +- Live editing on shop pages via sidebar with same block card UI +- Custom page creation with templates (blank/content/landing) +- Shop header shows "Edit page" and "Admin" icons for logged-in admins +- Settings page with status pills and helpful setup guidance + +## Tasks + +### High priority + +#### 1. Unsaved changes warning +**Problem:** No `beforeunload` handler or LiveView navigation guard. Clicking "Pages" breadcrumb or any sidebar link silently discards all unsaved changes. +**Fix:** Add a `beforeunload` event listener in the `EditorKeyboard` JS hook that checks `data-dirty`. Also handle LiveView `phx-remove` / navigation events to warn before leaving. +**Files:** `assets/js/hooks/editor_keyboard.js`, possibly `lib/berrypod_web/live/admin/pages/editor.ex` +**Est:** 30m + +#### 2. Block descriptions in picker +**Problem:** Block picker shows icon + name only. "Info card" vs "Trust badges" vs "Image + text" — a newbie doesn't know what these do or look like. +**Fix:** Add a `description` field to each block type in `BlockTypes`. Show it as a subtitle in the picker modal. +**Files:** `lib/berrypod/pages/block_types.ex`, `lib/berrypod_web/components/block_editor_components.ex` +**Est:** 45m + +### Medium priority + +#### 3. Sidebar nav grouping +**Problem:** 12 top-level items in the admin sidebar is too flat. Dashboard, Analytics, Orders, Products, Providers, Pages, Navigation, Media, Theme, Settings, Email, Redirects — a wall of links with no visual hierarchy. +**Fix:** Add subtle section headers to group related items: +- **Shop** — Dashboard, Analytics, Orders, Products, Providers +- **Content** — Pages, Navigation, Media +- **Appearance** — Theme +- **Settings** — Settings, Email, Redirects + +Alternatively, nest Email under Settings (it's email *settings*) and move Redirects into a Settings sub-page. That drops to 10 items with clearer grouping. +**Files:** `lib/berrypod_web/components/layouts/admin.html.heex`, `assets/css/admin/components.css` +**Est:** 45m + +#### 4. Nav editor input labels +**Problem:** Navigation editor shows pairs of text inputs with placeholder text ("Label", "/path") but no visible labels. Accessibility issue and confusing for new users. +**Fix:** Add visible `