frontend-helper/docs/handoff-redesign.md

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

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.