feat(dashboard): rebuild /settings/organizations in new design system (no Kumo)

[duyet]

Summary

Rebuilds the /dashboard/settings/organizations subtree (list, create, members — 3 routes, 18 files) onto the new design system and drops all @cloudflare/kumo imports. Behavior is preserved 1:1 (Clerk useOrganization, organization.inviteMember, invitations, roles, domain advisory).

Changes

• Page wrappers → <Providers><AppShell> (replaces Kumo DashboardShell). Members content wrapped in <Suspense> because it now uses useSearchParams.
• List (organizations-list-content.tsx) — Card rows + ui/Badge (active org) + ui/Button; replaced Kumo LayerCard/Badge/Button/EmptyState/skeletons.
• Create — Card + token-styled inputs + ui/Button; DomainWarning is now a token banner (border-warn/40 bg-warn/10), replacing Kumo Banner.
• Members — new local MemberListCard renders a plain <table> (border-edge, mono), replacing the Kumo DataTable dependency. Roles use ui/Badge. Invite form uses a native <select> + token inputs.
• ?org= support — members-content.tsx reads ?org= via useSearchParams and switches the active org (useOrganizationList.setActive) so the selected org's members/invitations load, matching the list's members?org=<id> links.
• organization.inviteMember, invitations revalidate, and the revoke-invitation toast are preserved exactly.

Verify

• bunx biome check src/components/dashboard/organizations/ — clean
• bunx astro check — 0 errors
• Dev server: 200 on /dashboard/settings/organizations/, .../create/, .../members/

Co-Authored-By: Duyet Le me@duyet.net
Co-Authored-By: duyetbot bot@duyet.net

Summary by CodeRabbit

• Style
  • Redesigned organization creation, list, and member management pages with refreshed visual styling and component layouts.
  • Updated form inputs, buttons, and navigation controls across organization pages.
  • Enhanced loading and empty states with improved visual consistency.
  • Refreshed member role badges and invitation interface styling.

[gemini-code-assist]

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

[sourcery-ai]

Sorry @duyet, you have reached your weekly rate limit of 500000 diff characters.

Please try again later or upgrade to continue using Sourcery

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Across the organizations create, list, and members sections of the dashboard, Cloudflare Kumo UI components (LayerCard, Text, Input, Select, Banner, Surface, Button, DataTable) are replaced with internal Card, native form elements, and local Button/Badge primitives. All three page-level wrappers migrate from DashboardShell to Providers + AppShell. The Column<T> generic interface is moved into _member-list-card. MembersContent gains URL-driven active-org switching via Clerk's setActive.

Changes

Organizations UI: Kumo → internal primitives migration

Layer / File(s)	Summary
Column<T> type and MemberListCard rewrite organizations/members/_member-list-card.tsx, _members-list.tsx, _pending-invitations-list.tsx	Exports a new generic Column<T> interface; rewrites MemberListCard using Card with inline skeleton rows, empty-state block, and a plain HTML table driven by columns/rowKey/c.render(row); updates downstream files to import Column from the new local source.
Members section small-component style updates members/_avatar-icon.tsx, _member-cell.tsx, _role-badge.tsx, _members-skeleton.tsx, _page-header.tsx, _invite-member-form.tsx, _pending-invitations-list.tsx	Updates AvatarIcon to grid-span with new design tokens; switches MemberCell text to text-fg tokens; replaces Kumo Badge with internal Badge using tone=live/idle; rewrites _MembersSkeleton to Card pulse rows; refactors _PageHeader back-nav to styled Link with aria-disabled; replaces Kumo form primitives in InviteMemberForm with Card, native input/select, and inputClass/labelClass constants; replaces Revoke Button with native <button>; standardizes empty-state icon sizing to size-4.
MembersContent org-switching and MembersPage shell members/members-content.tsx, members/members-page.tsx	MembersContent reads the org query param via useSearchParams and calls Clerk setActive when it differs from the active org; updates loading/empty-state UI to use Card. MembersPage switches from DashboardShell to Providers + AppShell and wraps MembersContent in a Suspense boundary.
Create org flow component updates create/_create-org-form.tsx, _create-org-header.tsx, _create-org-loading.tsx, _domain-warning.tsx, create-org-page.tsx	Replaces Kumo LayerCard/Input/Text in the form with Card, native label/input, and inputClass/labelClass; adds a secondary Cancel button; refactors header back-nav to plain styled Link; rewrites loading skeleton using Card + animate-pulse; replaces Banner in DomainWarning with a styled div + WarningIcon; switches page shell to Providers + AppShell.
Organizations list content and page shell list/organizations-list-content.tsx, list/organizations-list-page.tsx	Replaces PageHeader/LayerCard/EmptyState with a local Header component and inline Card-based org rows (active badge with tone=live, router-driven CTA for empty state, custom OrgListSkeleton with pulse Card placeholders); switches page shell from DashboardShell to Providers + AppShell.

Sequence Diagram(s)

sequenceDiagram
  rect rgba(99, 102, 241, 0.5)
    Note over Browser,MembersContent: Page load with ?org= param
  end
  Browser->>MembersPage: Navigate to /members?org=xyz
  MembersPage->>Providers: Render with Providers+AppShell
  Providers->>AppShell: Render AppShell
  AppShell->>MembersContent: Render via Suspense boundary
  MembersContent->>useSearchParams: Read org param
  MembersContent->>useOrganizationList: Destructure isLoaded, setActive
  alt org param differs from active org
    MembersContent->>ClerkSetActive: setActive({ organization: matched })
    ClerkSetActive-->>MembersContent: Active org updated
  end
  MembersContent->>MembersContent: Render members/invitations tables

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐇 Hop hop, the Kumo days are done,
New Card and input shine like sun,
DashboardShell packed up its case,
AppShell and Providers took its place,
The Column<T> found a home at last —
This bunny loves a clean-up fast! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 5.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: rebuilding the /settings/organizations dashboard pages using a new design system while removing Kumo dependencies.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/rebuild-organizations-no-kumo

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}