0k0zutujo: Add the design system section to the README and the redesign handoff

2026-10-20 09:47:56 -06:00
parent 260c419faa
commit b0685c212b
2 changed files with 80 additions and 0 deletions
@@ -0,0 +1,50 @@
+# 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.