feat(ux): adopt shared Empty primitive across all empty states

- one Empty/EmptyHeader/EmptyMedia/EmptyTitle/EmptyDescription
  component replaces ~18 ad-hoc empty states
- projects gains a real empty state (was four bare columns) with a
  create CTA wired to the existing handler
- governance/ops/customize/comms/comments empty states unified;
  existing CTAs and conditions preserved (presentational only)
This commit is contained in:
Moheeb Zara
2026-05-15 22:12:52 -07:00
parent 92ba6fb390
commit f885ac73d3
19 changed files with 297 additions and 93 deletions
+22 -3
View File
@@ -3,6 +3,7 @@ import Link from 'next/link'
import { redirect } from 'next/navigation'
import type { Tables } from '@/types/database'
import { PageTitle } from '@/components/ui/page-title'
import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
function IcoUsers({ className }: { className?: string }) {
return <svg className={className} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
@@ -216,7 +217,13 @@ export default async function DashboardPage() {
</div>
)
}) : (
<div className="px-4 py-10 text-center text-muted-foreground font-sans text-sm">No open tasks — great work!</div>
<Empty className="border-0">
<EmptyHeader>
<EmptyMedia variant="icon"><IcoTask /></EmptyMedia>
<EmptyTitle>No open tasks</EmptyTitle>
<EmptyDescription>Nothing needs doing right now. New chores will show up here.</EmptyDescription>
</EmptyHeader>
</Empty>
)}
</div>
</div>
@@ -244,7 +251,13 @@ export default async function DashboardPage() {
</div>
</div>
)) : (
<div className="px-4 py-8 text-center text-muted-foreground font-sans text-sm">No active projects</div>
<Empty className="border-0">
<EmptyHeader>
<EmptyMedia variant="icon"><IcoDues /></EmptyMedia>
<EmptyTitle>No active projects</EmptyTitle>
<EmptyDescription>Projects in progress, blocked, or in review appear here.</EmptyDescription>
</EmptyHeader>
</Empty>
)}
</div>
</div>
@@ -278,7 +291,13 @@ export default async function DashboardPage() {
</div>
</div>
)) : (
<p className="font-sans text-xs text-muted-foreground">No recent activity yet.</p>
<Empty className="border-0 p-0 md:p-0 gap-3">
<EmptyHeader>
<EmptyMedia variant="icon"><IcoUsers /></EmptyMedia>
<EmptyTitle>No recent activity yet</EmptyTitle>
<EmptyDescription>Actions taken in your space will be listed here.</EmptyDescription>
</EmptyHeader>
</Empty>
)}
</div>
</div>