# Redesign handoff

The Feed browser redesign (luxury business look, dark default plus light, desktop
bento layout, mobile immersive feed). Spec: `docs/minnect-feed-redesign.spec.md`.
Styling decisions: `docs/adr/0001-redesign-styling-approach.md`. CRM project
Minnect, module 2.

## What shipped, per milestone

All four build milestones are merged into `develop` with merge commits.

| Milestone | PR | Merge commit | Shipped |
|---|---|---|---|
| Redesign mobilization | #1 | c0f4260 | Spec and original contract in the repo; styling ADR; formatting decision (no bold or italic, bullets insert a bullet character) |
| Redesign foundation | #2 | 9aeb9a3 | Dark and light tokens with persisted toggle; Manrope and Cormorant Garamond; HexAvatar; five button styles; sign-in screen |
| Desktop bento layout | #3 | 25fd360 | Viewport-fit grid where only the feed scrolls; post cards; composer; new-posts pill and motion; featured carousel; Trending and Find experts; tablet layout; refresh button |
| Mobile immersive feed | #4 | f3fd4b5 | Snap feed; sideways media swipe; double-tap like; featured slide; bottom dock; comments and composer sheets; Discover sheet; top bar and progress rail |
| Redesign finalization | #5 | pending | Acceptance pass, contrast and hover fixes, `legacy.css` removed, README and this handoff. The orchestrator merges it. |

Promotion of `develop` to `main` is Cesar's.

## Known gaps

- The upload progress bar is an animated sweep, not real progress. Real progress
  needs upload events from the proxy. New scope (change request), not built.
- NEEDS CESAR (from the acceptance pass, task 99puxwol5):
  1. Acceptance 2 with a real account, dark and light, at 1440, 1024, 820 and 390px:
     reading and paging, like and unlike, comments, posting text, image and video,
     deleting your own post, expert search and categories, featured experts,
     trending playback.
  2. With real photos, check the 3-photo stack in mobile More.
  3. On a real phone (iOS Safari and Android Chrome): vertical swipe snaps one
     post, sideways swipe moves the dots, a playing video pauses on swipe-away,
     double-tap likes with the burst, the featured carousel rotates again after
     a tap elsewhere.
  4. Lighthouse Accessibility on the feed, both themes, desktop and mobile; note
     any contrast item below 4.5:1.

## Run and verify

```bash
npm install
npm run dev          # http://localhost:3000, sign in with a Minnect account
npm run typecheck && npx eslint --no-eslintrc -c .eslintrc.json src tests
npm test && npm run build
```

Without an account: open `/dev/feed` (fixture feed) and `/dev/buttons` (button
styles). Use browser device mode at 1440, 1024, 820 and 390px and toggle the
theme. These routes 404 in production.