WP-FIGMA-SOC-PIXEL-02 — Social explore grid vs Figma
Domain: D-SOCIAL · Surface: CON · Status: IMP · Date: 2026-08-18
Design
JPG 9a1118d49f291e77473812.jpg — màn 2: search · Video/Người dùng/Hashtag/Địa điểm · Tìm kiếm phổ biến · Video đề xuất 2 cột.
Change
| Mục | Trước | Sau |
|---|---|---|
| Header | «Khám phá» + pills tab | Ô search full + mic + Bạn bè / + |
| Placeholder | «Tìm video, người dùng…» | «Tìm video, địa điểm, hashtag...» |
| Tabs | Chip xanh đặc | Gạch dưới accent như Figma |
| Video | Card feed dọc (like/cmt) | Lưới 2 cột thumbnail · lượt xem · title · avatar |
| Tap video | Comments trên feed | Mở tab Reels đúng focusPostId |
Files
mobile/src/features/social/screens/SocialFeedScreen.tsxmobile/src/features/social/components/VideoExploreTile.tsxmobile/src/features/social/screens/ReelsFeedScreen.tsxmobile/src/navigation/types.ts
N/A
- Tab bar mockup «Bạn bè / Đăng tin» — CON giữ 5 tab Map · Reels · Social · Contact · Tài khoản
- Mic STT trên Expo Go — native build (cùng VoiceMicButton)
Verify
- Tab Social → search + tab Video có gạch xanh.
- Chips hashtag ngang · lưới 2 cột Video đề xuất.
- Chạm card → tab Reels nhảy đúng clip.