From f885ac73d3329fc4fcc8efe8e2de037883118e81 Mon Sep 17 00:00:00 2001
From: Moheeb Zara <hackbuildvideo@gmail.com>
Date: Fri, 15 May 2026 20:39:04 -0700
Subject: [PATCH] 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)
---
 app/(app)/comms/comms-client.tsx              |  24 +++-
 app/(app)/contacts/contacts-client.tsx        |  23 ++--
 .../customize/panels/area-leads-panel.tsx     |  10 +-
 app/(app)/customize/panels/areas-panel.tsx    |  12 +-
 app/(app)/customize/panels/invites-panel.tsx  |  12 +-
 .../customize/panels/onboarding-panel.tsx     |  11 ++
 app/(app)/customize/panels/roles-panel.tsx    |  10 +-
 app/(app)/customize/panels/tiers-panel.tsx    |  12 +-
 app/(app)/dashboard/page.tsx                  |  25 +++-
 app/(app)/financials/page.tsx                 |  10 +-
 app/(app)/incidents/page.tsx                  |  15 ++-
 app/(app)/members/members-client.tsx          |  13 +-
 app/(app)/ops/ops-client.tsx                  | 115 +++++++++++-------
 app/(app)/payments/payments-client.tsx        |  13 +-
 app/(app)/projects/projects-client.tsx        |  19 +++
 app/(app)/proposals/page.tsx                  |  15 ++-
 app/(app)/recruitment/page.tsx                |  17 ++-
 app/(app)/tasks/tasks-client.tsx              |  26 ++--
 components/comments/comment-thread.tsx        |   8 +-
 19 files changed, 297 insertions(+), 93 deletions(-)

diff --git a/app/(app)/comms/comms-client.tsx b/app/(app)/comms/comms-client.tsx
index 1d8c1da..304bddc 100644
--- a/app/(app)/comms/comms-client.tsx
+++ b/app/(app)/comms/comms-client.tsx
@@ -8,6 +8,7 @@ import { Hash, Users2, Send, ChevronLeft, Plus } from 'lucide-react'
 import { createChannel } from '@/lib/actions'
 import type { Tables } from '@/types/database'
 import { PageTitle } from '@/components/ui/page-title'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 
 type Channel = Tables<'comms_channels'>
 type Message = Tables<'comms_messages'>
@@ -269,6 +270,9 @@ export default function CommsClient({ member, space, channels }: Props) {
 
             {/* New channel inline form */}
             <div className="mt-4 border-t border-border pt-3">
+              {channels.length === 0 && (
+                <p className="font-sans text-xs text-muted-foreground px-2 mb-2">No channels yet. Create the first one.</p>
+              )}
               {!showNewChannel ? (
                 <button
                   onClick={() => setShowNewChannel(true)}
@@ -351,7 +355,13 @@ export default function CommsClient({ member, space, channels }: Props) {
             <div className="flex-1 overflow-y-auto p-4 space-y-3">
               {messages.length === 0 && (
                 <div className="flex items-center justify-center h-full">
-                  <p className="font-sans text-sm text-muted-foreground">No messages yet. Say hello!</p>
+                  <Empty className="border-0">
+                    <EmptyHeader>
+                      <EmptyMedia variant="icon"><Hash /></EmptyMedia>
+                      <EmptyTitle>No messages yet</EmptyTitle>
+                      <EmptyDescription>Be the first to post in #{selectedChannel.name}.</EmptyDescription>
+                    </EmptyHeader>
+                  </Empty>
                 </div>
               )}
               {messages.map(msg => {
@@ -418,7 +428,17 @@ export default function CommsClient({ member, space, channels }: Props) {
           </div>
         ) : (
           <div className="flex-1 flex items-center justify-center">
-            <p className="font-sans text-sm text-muted-foreground">Select a channel to start messaging</p>
+            <Empty className="border-0">
+              <EmptyHeader>
+                <EmptyMedia variant="icon"><Hash /></EmptyMedia>
+                <EmptyTitle>{channels.length === 0 ? 'No channels yet' : 'No channel selected'}</EmptyTitle>
+                <EmptyDescription>
+                  {channels.length === 0
+                    ? 'Create a channel from the sidebar to start messaging.'
+                    : 'Pick a channel from the sidebar to start messaging.'}
+                </EmptyDescription>
+              </EmptyHeader>
+            </Empty>
           </div>
         )}
       </div>
diff --git a/app/(app)/contacts/contacts-client.tsx b/app/(app)/contacts/contacts-client.tsx
index 3c67890..64b89dd 100644
--- a/app/(app)/contacts/contacts-client.tsx
+++ b/app/(app)/contacts/contacts-client.tsx
@@ -1,10 +1,11 @@
 'use client'
 
 import { useState } from 'react'
-import { Plus, X, Pencil } from 'lucide-react'
+import { Plus, X, Pencil, Contact as ContactIcon } from 'lucide-react'
 import { createContact, updateContact, deleteContact } from '@/lib/actions'
 import type { Tables } from '@/types/database'
 import { PageTitle } from '@/components/ui/page-title'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyContent } from '@/components/ui/empty'
 
 type Contact = Tables<'contacts'>
 
@@ -238,12 +239,20 @@ export function ContactsClient({ contacts: initialContacts }: { contacts: Contac
             ))}
           </div>
         ) : (
-          <div className="bg-card rounded border border-dashed border-border p-16 text-center">
-            <p className="font-sans text-sm text-muted-foreground">No contacts yet</p>
-            <button onClick={() => setShowCreate(true)} className="font-mono text-xs text-primary mt-2 block mx-auto hover:underline">
-              + Add first contact
-            </button>
-          </div>
+          <Empty className="bg-card border border-dashed border-border">
+            <EmptyHeader>
+              <EmptyMedia variant="icon"><ContactIcon /></EmptyMedia>
+              <EmptyTitle>No contacts yet</EmptyTitle>
+            </EmptyHeader>
+            <EmptyContent>
+              <button
+                onClick={() => setShowCreate(true)}
+                className="font-mono text-xs text-primary hover:underline"
+              >
+                + Add first contact
+              </button>
+            </EmptyContent>
+          </Empty>
         )}
       </div>
 
diff --git a/app/(app)/customize/panels/area-leads-panel.tsx b/app/(app)/customize/panels/area-leads-panel.tsx
index 36df6b8..08115e1 100644
--- a/app/(app)/customize/panels/area-leads-panel.tsx
+++ b/app/(app)/customize/panels/area-leads-panel.tsx
@@ -3,8 +3,10 @@
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
 import { toast } from 'sonner'
+import { UserCog } from 'lucide-react'
 import { createAreaLeadRole, assignAreaLead, unassignAreaLead, deleteAreaLeadRole } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 
 interface AreaLead {
   id: string
@@ -64,7 +66,13 @@ export function AreaLeadsPanel({ isAdmin, areaLeads: initial, members }: Props)
       )}
 
       {rows.length === 0 ? (
-        <p className="font-sans text-sm text-muted-foreground py-2">No area-lead roles yet.</p>
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><UserCog /></EmptyMedia>
+            <EmptyTitle>No area-lead roles yet</EmptyTitle>
+            <EmptyDescription>Create a role per shop area, then assign a member to it. Roles without a member show as Vacant.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
       ) : (
         <ul className="divide-y divide-border">
           {rows.map(r => (
diff --git a/app/(app)/customize/panels/areas-panel.tsx b/app/(app)/customize/panels/areas-panel.tsx
index d58e202..ea7de58 100644
--- a/app/(app)/customize/panels/areas-panel.tsx
+++ b/app/(app)/customize/panels/areas-panel.tsx
@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
+import { LayoutGrid } from 'lucide-react'
 import { createArea, updateArea, deleteArea } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { Area } from './types'
 
 export function AreasPanel({ isAdmin, areas: initial }: { isAdmin: boolean; areas: Area[] }) {
@@ -36,8 +38,16 @@ export function AreasPanel({ isAdmin, areas: initial }: { isAdmin: boolean; area
           <button type="submit" className="md:col-span-3 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition">Create area</button>
         </form>
       )}
+      {areas.length === 0 && (
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><LayoutGrid /></EmptyMedia>
+            <EmptyTitle>No areas yet</EmptyTitle>
+            <EmptyDescription>Areas tag tasks, projects, and knowledge base entries by shop space.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
       <ul className="divide-y divide-border">
-        {areas.length === 0 && <li className="py-6 text-center font-sans text-sm text-muted-foreground">No areas yet.</li>}
         {[...areas].sort((a, b) => a.sort_order - b.sort_order).map(a => (
           <li key={a.id} className={`py-3 flex items-center gap-3 flex-wrap ${a.is_archived ? 'opacity-50' : ''}`}>
             <input type="number" defaultValue={a.sort_order} disabled={!isAdmin} onBlur={async e => { const n = parseInt(e.target.value, 10); if (isNaN(n) || n === a.sort_order) return; const res = await updateArea({ areaId: a.id, sort_order: n }); if (res.error) { toast.error(res.error); return } setAreas(prev => prev.map(x => x.id === a.id ? { ...x, sort_order: n } : x)) }} className="w-14 bg-background border border-border text-foreground font-mono text-xs rounded px-2 py-1 focus:outline-none focus:border-primary" />
diff --git a/app/(app)/customize/panels/invites-panel.tsx b/app/(app)/customize/panels/invites-panel.tsx
index 1cec8aa..c00398b 100644
--- a/app/(app)/customize/panels/invites-panel.tsx
+++ b/app/(app)/customize/panels/invites-panel.tsx
@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
+import { Ticket } from 'lucide-react'
 import { createInvite, updateInvite, deleteInvite } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { Invite } from './types'
 
 function inviteLink(code: string) {
@@ -42,8 +44,16 @@ export function InvitesPanel({ isAdmin, invites: initial }: { isAdmin: boolean;
           <button type="submit" className="md:col-span-2 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition">Create invite</button>
         </form>
       )}
+      {invites.length === 0 && (
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><Ticket /></EmptyMedia>
+            <EmptyTitle>No invite codes yet</EmptyTitle>
+            <EmptyDescription>Create a code to let new members join, with an optional expiry or use cap.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
       <ul className="divide-y divide-border">
-        {invites.length === 0 && <li className="py-6 text-center font-sans text-sm text-muted-foreground">No invites yet.</li>}
         {invites.map(inv => {
           const expired = inv.expires_at ? new Date(inv.expires_at) < new Date() : false
           const usedUp = inv.max_uses !== null && inv.uses_count >= inv.max_uses
diff --git a/app/(app)/customize/panels/onboarding-panel.tsx b/app/(app)/customize/panels/onboarding-panel.tsx
index ee4df00..5c9c568 100644
--- a/app/(app)/customize/panels/onboarding-panel.tsx
+++ b/app/(app)/customize/panels/onboarding-panel.tsx
@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
+import { ListChecks } from 'lucide-react'
 import { createOnboardingStep, updateOnboardingStep, deleteOnboardingStep } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { Step } from './types'
 
 export function OnboardingPanel({ isAdmin, steps: initial }: { isAdmin: boolean; steps: Step[] }) {
@@ -28,6 +30,15 @@ export function OnboardingPanel({ isAdmin, steps: initial }: { isAdmin: boolean;
         </button>
       ) : undefined}
     >
+      {steps.length === 0 && (
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><ListChecks /></EmptyMedia>
+            <EmptyTitle>No steps yet</EmptyTitle>
+            <EmptyDescription>Add steps that run, in order, the first time a new member opens the app.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
       <ul className="space-y-3">
         {[...steps].sort((a, b) => a.sort_order - b.sort_order).map(s => (
           <li key={s.id} className="border border-border rounded p-4">
diff --git a/app/(app)/customize/panels/roles-panel.tsx b/app/(app)/customize/panels/roles-panel.tsx
index 3749884..35bf3ce 100644
--- a/app/(app)/customize/panels/roles-panel.tsx
+++ b/app/(app)/customize/panels/roles-panel.tsx
@@ -5,7 +5,9 @@ import { useRouter } from 'next/navigation'
 import { toast } from 'sonner'
 import { upsertRoleLabel, createCustomRole, updateCustomRole, deleteCustomRole } from '@/lib/actions'
 import { BUILTIN_ROLES, DEFAULT_ROLE_LABELS } from '@/lib/role-labels'
+import { Tags } from 'lucide-react'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { RoleLabelRow, CustomRole } from './types'
 
 export function RolesPanel({ isAdmin, roleLabels, customRoles: initial }: { isAdmin: boolean; roleLabels: RoleLabelRow[]; customRoles: CustomRole[] }) {
@@ -110,7 +112,13 @@ export function RolesPanel({ isAdmin, roleLabels, customRoles: initial }: { isAd
           </form>
         )}
         {customRoles.length === 0 ? (
-          <p className="font-sans text-sm text-muted-foreground py-2">No custom roles yet.</p>
+          <Empty className="border-0 p-0 md:p-6">
+            <EmptyHeader>
+              <EmptyMedia variant="icon"><Tags /></EmptyMedia>
+              <EmptyTitle>No custom roles yet</EmptyTitle>
+              <EmptyDescription>Add labels for committees, mentors, or area leads. They are display-only and do not change permissions.</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
         ) : (
           <ul className="divide-y divide-border">
             {customRoles.map(r => (
diff --git a/app/(app)/customize/panels/tiers-panel.tsx b/app/(app)/customize/panels/tiers-panel.tsx
index f0cc710..1bdf09a 100644
--- a/app/(app)/customize/panels/tiers-panel.tsx
+++ b/app/(app)/customize/panels/tiers-panel.tsx
@@ -2,8 +2,10 @@
 
 import { useState } from 'react'
 import { toast } from 'sonner'
+import { CreditCard } from 'lucide-react'
 import { createTier, updateTier, deleteTier } from '@/lib/actions'
 import { Card } from './card'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import type { Tier } from './types'
 
 export function TiersPanel({ isAdmin, tiers: initial }: { isAdmin: boolean; tiers: Tier[] }) {
@@ -40,8 +42,16 @@ export function TiersPanel({ isAdmin, tiers: initial }: { isAdmin: boolean; tier
           <button type="submit" className="md:col-span-2 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition">Create tier</button>
         </form>
       )}
+      {tiers.length === 0 && (
+        <Empty className="border-0 p-0 md:p-6">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><CreditCard /></EmptyMedia>
+            <EmptyTitle>No tiers yet</EmptyTitle>
+            <EmptyDescription>Membership tiers set the plans members can be placed on, with prices and billing cadence.</EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      )}
       <ul className="divide-y divide-border">
-        {tiers.length === 0 && <li className="py-6 text-center font-sans text-sm text-muted-foreground">No tiers yet.</li>}
         {tiers.map(t => (
           <li key={t.id} className="py-3 flex items-center gap-3 flex-wrap">
             <div className="flex-1 min-w-0">
diff --git a/app/(app)/dashboard/page.tsx b/app/(app)/dashboard/page.tsx
index 9b3a253..25b1373 100644
--- a/app/(app)/dashboard/page.tsx
+++ b/app/(app)/dashboard/page.tsx
@@ -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>
diff --git a/app/(app)/financials/page.tsx b/app/(app)/financials/page.tsx
index dae3563..774b10f 100644
--- a/app/(app)/financials/page.tsx
+++ b/app/(app)/financials/page.tsx
@@ -2,7 +2,9 @@ import { redirect } from 'next/navigation'
 import Link from 'next/link'
 import { createClient } from '@/lib/supabase/server'
 import type { FinancialVisibility, Payment, Space } from '@/lib/types'
+import { Receipt } from 'lucide-react'
 import { PageTitle } from '@/components/ui/page-title'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 
 export const dynamic = 'force-dynamic'
 
@@ -127,7 +129,13 @@ export default async function FinancialsPage() {
           By platform
         </p>
         {platformRows.length === 0 ? (
-          <p className="font-sans text-sm text-muted-foreground">No payments recorded yet.</p>
+          <Empty className="border-0 p-0 md:p-0">
+            <EmptyHeader>
+              <EmptyMedia variant="icon"><Receipt /></EmptyMedia>
+              <EmptyTitle>No payments yet</EmptyTitle>
+              <EmptyDescription>Platform totals appear here once payments are recorded.</EmptyDescription>
+            </EmptyHeader>
+          </Empty>
         ) : (
           <ul className="space-y-2">
             {platformRows.map(([platform, total]) => {
diff --git a/app/(app)/incidents/page.tsx b/app/(app)/incidents/page.tsx
index c5b4075..170d6c4 100644
--- a/app/(app)/incidents/page.tsx
+++ b/app/(app)/incidents/page.tsx
@@ -1,8 +1,10 @@
 import Link from 'next/link'
 import { redirect } from 'next/navigation'
+import { ShieldCheck } from 'lucide-react'
 import { createClient } from '@/lib/supabase/server'
 import type { Incident, IncidentStatus } from '@/lib/types'
 import { PageTitle } from '@/components/ui/page-title'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
 
 export const dynamic = 'force-dynamic'
 
@@ -61,9 +63,9 @@ export default async function IncidentsPage() {
           </p>
         )}
 
-        <Section title="Open" empty="No open incidents." rows={open} />
-        <Section title="Decided / under appeal" empty="None." rows={decided} />
-        <Section title="Closed" empty="None." rows={closed} />
+        <Section title="Open" empty="No open incidents" rows={open} />
+        <Section title="Decided / under appeal" empty="Nothing decided or under appeal" rows={decided} />
+        <Section title="Closed" empty="No closed incidents" rows={closed} />
       </div>
     </div>
   )
@@ -75,7 +77,12 @@ function Section({ title, empty, rows }: { title: string; empty: string; rows: I
       <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">{title}</p>
       <div className="bg-card rounded border border-border divide-y divide-border">
         {rows.length === 0 ? (
-          <div className="px-4 py-8 text-center text-muted-foreground font-sans text-sm">{empty}</div>
+          <Empty className="border-0 p-0 py-8">
+            <EmptyHeader>
+              <EmptyMedia variant="icon"><ShieldCheck /></EmptyMedia>
+              <EmptyTitle>{empty}</EmptyTitle>
+            </EmptyHeader>
+          </Empty>
         ) : (
           rows.map(i => (
             <Link key={i.id} href={`/incidents/${i.id}`} className="block px-4 py-3 hover:bg-muted transition">
diff --git a/app/(app)/members/members-client.tsx b/app/(app)/members/members-client.tsx
index 8afcfc8..a1030f8 100644
--- a/app/(app)/members/members-client.tsx
+++ b/app/(app)/members/members-client.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { Plus, X, ChevronDown } from 'lucide-react'
+import { Plus, X, ChevronDown, Users } from 'lucide-react'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import { addMember, updateMember, approveMember, removeMember, assignAreaLead } from '@/lib/actions'
 import { toast } from 'sonner'
 import { useRouter } from 'next/navigation'
@@ -362,8 +363,14 @@ export function MembersClient({ members: initialMembers, currentRole, areaLeadRo
                 )
               }) : (
                 <tr>
-                  <td colSpan={isAdmin(currentRole) ? 6 : 5} className="px-4 py-12 text-center font-sans text-sm text-muted-foreground">
-                    No members match this filter
+                  <td colSpan={isAdmin(currentRole) ? 6 : 5} className="p-0">
+                    <Empty className="border-0">
+                      <EmptyHeader>
+                        <EmptyMedia variant="icon"><Users /></EmptyMedia>
+                        <EmptyTitle>No members match this filter</EmptyTitle>
+                        <EmptyDescription>Try a different tab, clear the search, or change the tier filter.</EmptyDescription>
+                      </EmptyHeader>
+                    </Empty>
                   </td>
                 </tr>
               )}
diff --git a/app/(app)/ops/ops-client.tsx b/app/(app)/ops/ops-client.tsx
index 1ec2c20..05bb4a1 100644
--- a/app/(app)/ops/ops-client.tsx
+++ b/app/(app)/ops/ops-client.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useMemo } from 'react'
 import { useRouter } from 'next/navigation'
-import { Plus, Search, Lock, Pin, Eye, EyeOff, Pencil, Trash2, X, ChevronDown, Users2 } from 'lucide-react'
+import { Plus, Search, Lock, Pin, Eye, EyeOff, Pencil, Trash2, X, ChevronDown, Users2, FileText } from 'lucide-react'
 import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { createKbEntry, updateKbEntry, deleteKbEntry } from '@/lib/actions'
@@ -12,6 +12,7 @@ import { createClient } from '@/lib/supabase/client'
 import { toast } from 'sonner'
 import type { Tables, TablesInsert } from '@/types/database'
 import { PageTitle } from '@/components/ui/page-title'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyContent } from '@/components/ui/empty'
 
 type KbEntry = Tables<'knowledge_base'>
 type AreaLead = Tables<'area_leads'>
@@ -715,19 +716,24 @@ export function OpsClient({ member, spaceId, kbEntries: initial, areaLeads: init
               </div>
             )}
             {filteredKb.length === 0 && (
-              <div className="bg-card rounded border border-dashed border-border p-12 text-center">
-                <p className="font-sans text-sm text-muted-foreground">
-                  {search ? `No results for "${search}"` : 'No knowledge base entries yet'}
-                </p>
+              <Empty className="bg-card border border-dashed border-border">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">{search ? <Search /> : <FileText />}</EmptyMedia>
+                  <EmptyTitle>
+                    {search ? `No results for "${search}"` : 'No knowledge base entries yet'}
+                  </EmptyTitle>
+                </EmptyHeader>
                 {!search && (
-                  <button
-                    onClick={() => { setEditingKb(null); setShowKbModal(true) }}
-                    className="font-mono text-xs text-primary mt-2 block mx-auto hover:underline"
-                  >
-                    + Add first entry
-                  </button>
+                  <EmptyContent>
+                    <button
+                      onClick={() => { setEditingKb(null); setShowKbModal(true) }}
+                      className="font-mono text-xs text-primary hover:underline"
+                    >
+                      + Add first entry
+                    </button>
+                  </EmptyContent>
                 )}
-              </div>
+              </Empty>
             )}
           </div>
         )}
@@ -750,19 +756,24 @@ export function OpsClient({ member, spaceId, kbEntries: initial, areaLeads: init
                 ))}
               </div>
             ) : (
-              <div className="bg-card rounded border border-dashed border-border p-12 text-center">
-                <p className="font-sans text-sm text-muted-foreground">
-                  {search ? `No results for "${search}"` : 'No process entries yet'}
-                </p>
+              <Empty className="bg-card border border-dashed border-border">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon">{search ? <Search /> : <FileText />}</EmptyMedia>
+                  <EmptyTitle>
+                    {search ? `No results for "${search}"` : 'No process entries yet'}
+                  </EmptyTitle>
+                </EmptyHeader>
                 {!search && (
-                  <button
-                    onClick={() => { setEditingKb(null); setShowKbModal(true) }}
-                    className="font-mono text-xs text-primary mt-2 block mx-auto hover:underline"
-                  >
-                    + Add first process
-                  </button>
+                  <EmptyContent>
+                    <button
+                      onClick={() => { setEditingKb(null); setShowKbModal(true) }}
+                      className="font-mono text-xs text-primary hover:underline"
+                    >
+                      + Add first process
+                    </button>
+                  </EmptyContent>
                 )}
-              </div>
+              </Empty>
             )}
           </div>
         )}
@@ -771,10 +782,12 @@ export function OpsClient({ member, spaceId, kbEntries: initial, areaLeads: init
         {activeTab === 'secrets' && (
           <div>
             {!canSeeSecrets ? (
-              <div className="bg-card rounded border border-dashed border-border p-12 text-center">
-                <Lock className="w-8 h-8 text-muted-foreground mx-auto mb-3" />
-                <p className="font-sans text-sm text-muted-foreground">Admin or board access required to view secrets</p>
-              </div>
+              <Empty className="bg-card border border-dashed border-border">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon"><Lock /></EmptyMedia>
+                  <EmptyTitle>Admin or board access required to view secrets</EmptyTitle>
+                </EmptyHeader>
+              </Empty>
             ) : filteredSecrets.length > 0 ? (
               <div className="bg-card rounded border border-border divide-y divide-border">
                 {filteredSecrets.map(s => (
@@ -789,17 +802,24 @@ export function OpsClient({ member, spaceId, kbEntries: initial, areaLeads: init
                 ))}
               </div>
             ) : (
-              <div className="bg-card rounded border border-dashed border-border p-12 text-center">
-                <Lock className="w-8 h-8 text-muted-foreground mx-auto mb-3" />
-                <p className="font-sans text-sm text-muted-foreground">
-                  {search ? `No results for "${search}"` : 'No secrets stored yet'}
-                </p>
+              <Empty className="bg-card border border-dashed border-border">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon"><Lock /></EmptyMedia>
+                  <EmptyTitle>
+                    {search ? `No results for "${search}"` : 'No secrets stored yet'}
+                  </EmptyTitle>
+                </EmptyHeader>
                 {!search && (
-                  <button onClick={() => setShowSecretModal(true)} className="font-mono text-xs text-primary mt-2 block mx-auto hover:underline">
-                    + Add first secret
-                  </button>
+                  <EmptyContent>
+                    <button
+                      onClick={() => setShowSecretModal(true)}
+                      className="font-mono text-xs text-primary hover:underline"
+                    >
+                      + Add first secret
+                    </button>
+                  </EmptyContent>
                 )}
-              </div>
+              </Empty>
             )}
           </div>
         )}
@@ -841,15 +861,20 @@ export function OpsClient({ member, spaceId, kbEntries: initial, areaLeads: init
                 ))}
               </div>
             ) : (
-              <div className="bg-card rounded border border-dashed border-border p-12 text-center">
-                <p className="font-sans text-sm text-muted-foreground">No area leads assigned yet</p>
-                <button
-                  onClick={() => { setEditingLead(null); setShowLeadModal(true) }}
-                  className="font-mono text-xs text-primary mt-2 block mx-auto hover:underline"
-                >
-                  + Assign first area lead
-                </button>
-              </div>
+              <Empty className="bg-card border border-dashed border-border">
+                <EmptyHeader>
+                  <EmptyMedia variant="icon"><Users2 /></EmptyMedia>
+                  <EmptyTitle>No area leads assigned yet</EmptyTitle>
+                </EmptyHeader>
+                <EmptyContent>
+                  <button
+                    onClick={() => { setEditingLead(null); setShowLeadModal(true) }}
+                    className="font-mono text-xs text-primary hover:underline"
+                  >
+                    + Assign first area lead
+                  </button>
+                </EmptyContent>
+              </Empty>
             )}
           </div>
         )}
diff --git a/app/(app)/payments/payments-client.tsx b/app/(app)/payments/payments-client.tsx
index 5fc623a..aed5d90 100644
--- a/app/(app)/payments/payments-client.tsx
+++ b/app/(app)/payments/payments-client.tsx
@@ -1,7 +1,8 @@
 'use client'
 
 import { useState } from 'react'
-import { X, RefreshCcw } from 'lucide-react'
+import { X, RefreshCcw, Receipt } from 'lucide-react'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 import { toast } from 'sonner'
 import { logCashPayment, linkPaymentToMember } from '@/lib/actions'
 import type { Tables } from '@/types/database'
@@ -243,8 +244,14 @@ export function PaymentsClient({ payments: initialPayments, members, integration
                   </tr>
                 )) : (
                   <tr>
-                    <td colSpan={5} className="px-4 py-12 text-center font-sans text-sm text-muted-foreground">
-                      No payments recorded yet
+                    <td colSpan={5} className="p-0">
+                      <Empty className="border-0">
+                        <EmptyHeader>
+                          <EmptyMedia variant="icon"><Receipt /></EmptyMedia>
+                          <EmptyTitle>No payments yet</EmptyTitle>
+                          <EmptyDescription>Synced and logged transactions show up here once they exist.</EmptyDescription>
+                        </EmptyHeader>
+                      </Empty>
                     </td>
                   </tr>
                 )}
diff --git a/app/(app)/projects/projects-client.tsx b/app/(app)/projects/projects-client.tsx
index 5a12b0a..5a1225b 100644
--- a/app/(app)/projects/projects-client.tsx
+++ b/app/(app)/projects/projects-client.tsx
@@ -5,6 +5,7 @@ import { Plus, X } from 'lucide-react'
 import { createProject, updateProjectStatus, deleteProject } from '@/lib/actions'
 import type { Tables } from '@/types/database'
 import { PageTitle } from '@/components/ui/page-title'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@/components/ui/empty'
 
 type Project = Tables<'projects'>
 
@@ -76,6 +77,23 @@ export function ProjectsClient({
       </div>
 
       <div className="p-4 md:p-6">
+        {projects.length === 0 ? (
+          <Empty>
+            <EmptyHeader>
+              <EmptyMedia variant="icon"><Plus /></EmptyMedia>
+              <EmptyTitle>No projects yet</EmptyTitle>
+              <EmptyDescription>Track shop builds and tasks across backlog, in progress, review, and done.</EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <button
+                onClick={() => setShowCreate(true)}
+                className="flex items-center gap-1.5 bg-primary text-white text-xs font-sans px-3 py-1.5 rounded hover:bg-primary/90 transition"
+              >
+                <Plus className="w-3.5 h-3.5" /> New Project
+              </button>
+            </EmptyContent>
+          </Empty>
+        ) : (
         <div className="md:overflow-x-auto md:-mx-0">
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
           {STATUS_COLS.map(col => {
@@ -140,6 +158,7 @@ export function ProjectsClient({
           })}
         </div>
         </div>
+        )}
       </div>
 
       {showCreate && (
diff --git a/app/(app)/proposals/page.tsx b/app/(app)/proposals/page.tsx
index 7ace525..adaa3f5 100644
--- a/app/(app)/proposals/page.tsx
+++ b/app/(app)/proposals/page.tsx
@@ -1,9 +1,11 @@
 import Link from 'next/link'
 import { redirect } from 'next/navigation'
+import { Vote } from 'lucide-react'
 import { createClient } from '@/lib/supabase/server'
 import type { Proposal } from '@/lib/types'
 import { ProposalStatusBadge } from './proposal-badges'
 import { PageTitle } from '@/components/ui/page-title'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
 
 export const dynamic = 'force-dynamic'
 
@@ -45,9 +47,9 @@ export default async function ProposalsPage() {
       </div>
 
       <div className="p-4 md:p-6 space-y-8 max-w-4xl">
-        <Section title="Open for voting" empty="No proposals are currently open." proposals={open} />
-        <Section title="Drafts" empty="No drafts." proposals={drafts} />
-        <Section title="Archive" empty="No decided or withdrawn proposals." proposals={decided} />
+        <Section title="Open for voting" empty="No proposals open for voting" proposals={open} />
+        <Section title="Drafts" empty="No drafts" proposals={drafts} />
+        <Section title="Archive" empty="No decided or withdrawn proposals" proposals={decided} />
       </div>
     </div>
   )
@@ -59,7 +61,12 @@ function Section({ title, empty, proposals }: { title: string; empty: string; pr
       <p className="font-mono text-[10px] tracking-widest text-muted-foreground uppercase mb-3">{title}</p>
       <div className="bg-card rounded border border-border divide-y divide-border">
         {proposals.length === 0 ? (
-          <div className="px-4 py-8 text-center text-muted-foreground font-sans text-sm">{empty}</div>
+          <Empty className="border-0 p-0 py-8">
+            <EmptyHeader>
+              <EmptyMedia variant="icon"><Vote /></EmptyMedia>
+              <EmptyTitle>{empty}</EmptyTitle>
+            </EmptyHeader>
+          </Empty>
         ) : (
           proposals.map(p => <ProposalRow key={p.id} p={p} />)
         )}
diff --git a/app/(app)/recruitment/page.tsx b/app/(app)/recruitment/page.tsx
index c988ef5..86fd8dd 100644
--- a/app/(app)/recruitment/page.tsx
+++ b/app/(app)/recruitment/page.tsx
@@ -1,7 +1,9 @@
 import Link from 'next/link'
 import { redirect } from 'next/navigation'
+import { Users } from 'lucide-react'
 import { createClient } from '@/lib/supabase/server'
 import { PageTitle } from '@/components/ui/page-title'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription } from '@/components/ui/empty'
 
 export const dynamic = 'force-dynamic'
 
@@ -68,12 +70,15 @@ export default async function RecruitmentPage() {
         </p>
 
         {members.length === 0 ? (
-          <div className="bg-card rounded border border-border p-8 text-center">
-            <p className="font-sans text-sm text-foreground mb-1">No members have declared willingness or skills yet.</p>
-            <p className="font-mono text-[10px] text-muted-foreground">
-              Members opt in from their <Link href="/profile" className="text-primary hover:underline">profile</Link> page.
-            </p>
-          </div>
+          <Empty className="bg-card border border-border">
+            <EmptyHeader>
+              <EmptyMedia variant="icon"><Users /></EmptyMedia>
+              <EmptyTitle>No members have declared willingness or skills yet</EmptyTitle>
+              <EmptyDescription>
+                Members opt in from their <Link href="/profile">profile</Link> page.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
         ) : (
           <>
             {roleGroups.length > 0 && (
diff --git a/app/(app)/tasks/tasks-client.tsx b/app/(app)/tasks/tasks-client.tsx
index 3b3e173..03b8c41 100644
--- a/app/(app)/tasks/tasks-client.tsx
+++ b/app/(app)/tasks/tasks-client.tsx
@@ -5,6 +5,7 @@ import { Plus, X, CheckCircle2 } from 'lucide-react'
 import { createTask, claimTask, completeTask, deleteTask } from '@/lib/actions'
 import type { Tables } from '@/types/database'
 import { PageTitle } from '@/components/ui/page-title'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyContent } from '@/components/ui/empty'
 
 type Task = Tables<'tasks'>
 
@@ -224,15 +225,22 @@ export function TasksClient({ tasks: initialTasks, members, currentUserId, space
               </button>
             </div>
           )) : (
-            <div className="px-4 py-10 text-center">
-              <p className="font-sans text-sm text-muted-foreground">No {activeTab === 'done' ? 'completed' : activeTab === 'chores' ? 'open' : activeTab} tasks in this view</p>
-              <button
-                onClick={() => setShowCreate(true)}
-                className="font-mono text-xs text-primary mt-2 hover:underline"
-              >
-                + Add first task
-              </button>
-            </div>
+            <Empty className="border-0 p-0 py-10">
+              <EmptyHeader>
+                <EmptyMedia variant="icon"><CheckCircle2 /></EmptyMedia>
+                <EmptyTitle>
+                  No {activeTab === 'done' ? 'completed' : activeTab === 'chores' ? 'open' : activeTab} tasks in this view
+                </EmptyTitle>
+              </EmptyHeader>
+              <EmptyContent>
+                <button
+                  onClick={() => setShowCreate(true)}
+                  className="font-mono text-xs text-primary hover:underline"
+                >
+                  + Add first task
+                </button>
+              </EmptyContent>
+            </Empty>
           )}
         </div>
       </div>
diff --git a/components/comments/comment-thread.tsx b/components/comments/comment-thread.tsx
index 97ebd61..8640fc1 100644
--- a/components/comments/comment-thread.tsx
+++ b/components/comments/comment-thread.tsx
@@ -7,6 +7,7 @@ import ReactMarkdown from 'react-markdown'
 import remarkGfm from 'remark-gfm'
 import { addComment, deleteComment } from '@/lib/actions'
 import { Trash2, MessageCircle } from 'lucide-react'
+import { Empty, EmptyHeader, EmptyMedia, EmptyTitle } from '@/components/ui/empty'
 
 export type CommentEntityType = 'forum_thread' | 'proposal' | 'incident' | 'policy'
 
@@ -62,7 +63,12 @@ export function CommentThread({ entityType, entityId, comments, currentMemberId,
       </div>
 
       {comments.length === 0 && (
-        <p className="font-sans text-sm text-muted-foreground mb-4">No comments yet.</p>
+        <Empty className="border-0 p-0 py-6 mb-4">
+          <EmptyHeader>
+            <EmptyMedia variant="icon"><MessageCircle /></EmptyMedia>
+            <EmptyTitle>No comments yet</EmptyTitle>
+          </EmptyHeader>
+        </Empty>
       )}
 
       {comments.length > 0 && (