Repository navigation
UI pass part B: /me on the design kit (#96) - #100
Conversation
#96 part B) Moves every /me screen except /me/pledges/[code] onto the #95 kit: page headers with back links, tabs between the /me lists, cards and callouts instead of ad hoc tints, kit badges for statuses, 44px touch targets, 16px body text and phone layouts. The campaign editor gets a sticky list of its sections on wide screens. Lists stream inside Suspense after the auth check, so a slow read shows skeleton rows while the redirect and notFound keep their status codes (a route loading.tsx would answer 200). Each /me section gets an error boundary with a retry. New kit files: Callout, PageHeader, Skeleton. No data call, server action, form field or name changes. Refs #96 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the
 |
![dos[bot]](https://avatars.githubusercontent.com/in/4711427?s=60&v=4){kind=small}
- Editor: the cover panel anchor is cover-image, so the Chọn ảnh label binds to the file input again (the section shared its id). - Story textarea keeps the 16px field size (no iOS zoom on focus). - Tier disclosures show a rotating chevron instead of the lost marker. - 44px targets: editor section links, batch links, fulfillment row checkboxes (wrapped in a label hit area). - Scrollable tables get their own region names; provider ids are 14px. - The /me error page has an h1; cover upload and tier save are secondary so each panel keeps one primary action. - Pending swap text breaks long account numbers; copy and a no-op class cleaned up. Refs #96 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Takes part A's Callout (icon, role status|alert) in place of part B's add of the same file and adapts the /me callers; contributions reuse part A's PledgeStatusBadge instead of a local tone map. Refs #96 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Part A's Callout and part C's Notice were the same tinted message box. The admin pages now use Callout (same tones and title; it adds the tone's icon) and Notice.tsx is removed, as the PO asked. The shared reconciliation pieces that /me and /admin both render move onto the kit: PaidBreakdownCard, ManualMatchList, InboundExplanationList and UnmatchedTransactionCard (kit labels and figures, EmptyState, a Callout for the bounced-transfer warning, a 44px disclosure with a chevron). Forms, names, confirms and actions are unchanged. Refs #96 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
⏸️ DOS Review: Automatic Review Limit ReachedDOS Code Review already reviewed 3 commits of this pull request automatically, the limit for one pull request, so this commit was not reviewed automatically and nothing was charged. Please step back before pushing another fix: a pull request that needs this many review rounds usually needs a rethink of its approach or a smaller scope, not one more patch. When you are ready, a maintainer can comment /review to review the current commit. |
|
PO acceptance (part B of #96, last part): merge at b28fdf0. Lint + Build green; 926 tests and build locally; Lighthouse a11y 100 on 34 runs (13 /me + 4 admin, mobile and desktop); independent design/a11y review, must-fix and small items fixed; Notice folded into Callout. DOS Code Review approved the first 3 commits, then hit its cap. Follow-up: SelectAll.tsx styling. |
Refs #96
Part B of #96: every
/mescreen on the design kit from #95, except/me/pledges/[code](part A).What changes
/melists (Chiến dịch của tôi, Ủng hộ của tôi, Thông báo, Tài khoản nhận tiền) share kit tabs (TabNav), so a phone can move between them without the header menu. Inner pages (editor, fulfillment, disbursements, unmatched, statements, batch) get aPageHeaderwith a back link instead.Badgetones per status, the pay button is primary only when a payment is due), notices (unread rows marked by a green rule and a "Mới" badge).Panelcard with an anchor; on wide screens a sticky "Trên trang này" list jumps between them. Content fields are grouped (Người thụ hưởng, Mục tiêu và thời gian, Hiển thị trên trang công khai). Status notices, account warnings and swap states useCallout. Receiving accounts show as bank rows. Reward tiers, the account section, the account swap request and the status block (submit, cancel, delete draft) are restyled in place.Callout(from part A).EmptyStateeverywhere a list can be empty. The three lists that the person opens most (campaigns, contributions, notices) stream inside<Suspense>afterrequireSession, with skeleton rows. Each/mesection has anerror.tsxwith a retry and a way back.Not changed
No data call, server action, form field, field name, confirm text or redirect changes.
components/forms.tsxandSelectAll.tsxare untouched; the other shared and kit changes are listed under "Merged with parts A and C".Route
loading.tsxfiles are deliberately not added: a streamed response starts with 200, so the sign-in redirect andnotFound()would become client-side fallbacks (Next 16 docs, loading.js "Status codes"). Suspense below the auth and ownership checks keeps 307 and 404.New kit files (
apps/web/src/components/ui)PageHeader.tsx: back link, eyebrow badges, h1, actions, lead.Skeleton.tsx:SkeletonandSkeletonList(with ansr-onlystatus label)./me-only helpers live in
apps/web/src/app/me/_components(MePage/MeDetailshells,Panel, badge tone maps,MeError).Evidence
Screenshots from a production build (
next build+next start) at b28fdf0 on a seeded local Supabase stack (DOS.Medevmigrations): 3 give and 3 back campaigns, a draft, a changes_requested back campaign with tiers, a succeeded back campaign with paid pledges (some shipped), matched, unmatched and outgoing money (one explained), notices, statement batches with ambiguous rows, an organizer with verified, pending and unbound accounts, and an admin user. Images live on theassets/pr-100-screenshotsbranch.scrollWidth - innerWidth)./me/campaignsstill answers 307 to sign-in;notFoundand the redirect stay above every Suspense boundary.pnpm format:check,lint,typecheck, 926 unit tests andnext buildpass locally; CI Lint and Build all apps pass.Merged with parts A and C
components/ui/Callout.tsx; part B takes A's version and drops its own. Contributions reuse A'sPledgeStatusBadge.components/ui/Notice.tsx, the same box asCallout. As agreed with the PO, part B folds it: the 8 admin pages useCallout(same tones and titles, plus the tone's icon) andNotice.tsxis deleted.components/Reconciliation.tsx,components/UnmatchedTransaction.tsx) move onto the kit here.Follow-ups
components/SelectAll.tsx(shared, fulfillment page) still has small text and a bare checkbox./me/campaignsnow shows cover thumbnails (one lazy, authenticated/media/privateimage per campaign, no new data read).🤖 Generated with Claude Code