|
| 1 | +# Cart UX Redesign — Design |
| 2 | + |
| 3 | +**Date:** 2026-05-25 |
| 4 | +**Status:** Approved direction (pending spec review) |
| 5 | + |
| 6 | +## Problem |
| 7 | + |
| 8 | +Three cart surfaces have weak, mobile-hostile UX: |
| 9 | + |
| 10 | +1. **Creator editor** (`/dashboard/carts/[id]`) — a two-column `lg:grid-cols-[1.4fr_1fr]` (controls | live preview). On mobile it stacks, so the **preview is buried below every control**, the page is one long scroll, and the *products* (the core task) sit midway down behind cover/accent controls. |
| 11 | +2. **Dashboard cart list** — `CartCard` shows a "Copy link" button as `opacity-0 group-hover:opacity-100`, i.e. **hover-only → invisible and unusable on touch devices**. No per-cart views/clicks shown. |
| 12 | +3. **Public cart page** (`/c/[slug]`) — hero is fine (contrast already fixed). Missing a creator identity header; `ProductCard` can be tightened for small screens. |
| 13 | + |
| 14 | +No backend changes are needed: `Cart` already carries `viewsLast7d`, `clicksLast7d`, `ownerHandle`, `ownerAvatarUrl`, `ownerDisplayName`, and `products`. |
| 15 | + |
| 16 | +## Surface 1 — Creator editor (the main work) |
| 17 | + |
| 18 | +**Goal:** a clean, single-column, mobile-first editor organized around the task, with the preview one tap away instead of buried. |
| 19 | + |
| 20 | +- **Reorder, Products-first.** Top of the editor is **Products** (the list + a prominent "Add a product"), because adding/arranging products is the core job. Below it, secondary settings. |
| 21 | +- **Collapse the noise.** Group the rest into two collapsible sections: |
| 22 | + - **"Cover & look"** — cover image + `CoverPicker` (tiles tucked behind it) + accent color, collapsed by default once a cover exists. |
| 23 | + - **"Settings"** — rename/bio + the delete-cart action, collapsed by default. |
| 24 | + - A small reusable `EditorSection` (summary row with a chevron; expand/collapse; remembers nothing — stateless per mount) renders these. |
| 25 | +- **Preview, one tap away.** |
| 26 | + - **Mobile:** a **"Preview" button pinned in the editor header** opens a **full-screen sheet** rendering the *real* cart look (hero + product grid, identical to the public page) from current editor state. A clear close (✕) returns to editing. No inline buried preview. |
| 27 | + - **Desktop (lg+):** keep a **sticky** side preview (current right column), so the side-by-side stays for big screens. |
| 28 | + - New `CartPreviewSheet` component renders the faithful preview (reuses `CartCover` hero treatment + `ProductCard` grid) and is shown as a full-screen overlay on mobile; on desktop the same preview content is the sticky panel. The old cramped `PreviewCartPage` mini-tile is replaced by this faithful preview. |
| 29 | +- **Keep** existing behavior: debounced autosave, drag-reorder, inline product edit, the `ImageUploadButton` on add/edit, cover upload. |
| 30 | + |
| 31 | +**Files:** `web/app/dashboard/carts/[id]/editor.tsx` (restructure), new `web/components/editor-section.tsx`, new `web/components/cart-preview-sheet.tsx`. |
| 32 | + |
| 33 | +## Surface 2 — Dashboard cart list |
| 34 | + |
| 35 | +**Goal:** real, tappable actions on mobile + at-a-glance performance. |
| 36 | + |
| 37 | +- `CartCard` gains an **always-visible footer row** (below the cover): **`👁 <views> · 🖱 <clicks>` (7d)** on the left, a tap-friendly **Share** button on the right (copies the link; toast confirms). Remove the hover-only overlay button. |
| 38 | +- The whole card continues to link to the editor; the Share button `stopPropagation`s so it doesn't navigate. |
| 39 | +- Cover keeps the title/handle overlay; footer is plain `bg-cream` with `border-t border-rule`. |
| 40 | + |
| 41 | +**Files:** `web/components/cart-card.tsx`. |
| 42 | + |
| 43 | +## Surface 3 — Public cart page |
| 44 | + |
| 45 | +**Goal:** a touch of identity + tighter product cards on phones. |
| 46 | + |
| 47 | +- **Creator header strip** directly under the hero: avatar + `@handle` (links to nothing for now) + a muted **"N products"** count. Small, editorial, consistent with tokens. |
| 48 | +- **ProductCard polish:** tighten mobile padding/typography, ensure the price/"Shop" row aligns, keep the whole-card tap target and retailer chip. Keep the 2-col mobile / 3-col desktop grid. |
| 49 | +- Keep the existing sticky share bar and footer. |
| 50 | + |
| 51 | +**Files:** `web/app/(public)/c/[slug]/page.tsx` (add header strip), `web/components/product-card.tsx` (polish). |
| 52 | + |
| 53 | +## Non-goals (YAGNI) |
| 54 | + |
| 55 | +- No backend/API/schema changes. |
| 56 | +- No follow/social features (the @handle is display-only). |
| 57 | +- No change to the redirect/click-tracking flow. |
| 58 | +- No new data fetching — render from data already on `Cart`. |
| 59 | + |
| 60 | +## Testing |
| 61 | + |
| 62 | +- **Manual (mobile-first):** on a phone width — editor shows Products first, Preview button opens a full-screen real-cart sheet and closes cleanly; collapsible sections expand/collapse; dashboard card Share button works on tap and shows views/clicks; public cart shows the creator header and tighter cards. Desktop: editor keeps the sticky side preview. |
| 63 | +- **Gates:** `npx tsc --noEmit`, `npx next lint`, `pnpm run build` all clean. Existing vitest unchanged. |
0 commit comments