Consistent Empty States Across the App

Released in v1.0.93

Overview

The EmptyState component is the single, canonical way to display a no-results or no-items state anywhere in the platform. As of v1.0.93, all page-level empty states have been migrated to use this shared component, eliminating the visual inconsistencies that arose from bespoke inline implementations.

The Problem That Was Fixed

Before this release, the app had at least three different empty-state patterns:

Location	Pattern
Pipelines page, queue tab	<EmptyState> component (correct)
Products view (no items)	Custom inline <div> with h-12 w-12 icon
Products view (filtered, no results)	Separate custom inline <div>
Support tickets dashboard	Custom inline <div> with h-8 w-8 icon
Project queue tab	Custom inline <div> with inconsistent padding

This led to mismatched icon sizes, varying padding, and inconsistent spacing across the UI.

The EmptyState Component

The shared component now supports the full range of empty-state use cases through two new props.

size prop

Controls the scale of the icon and surrounding layout.

<EmptyState
  icon={InboxIcon}
  title="No tickets"
  description="All support tickets will appear here."
  size="sm" // 'sm' | 'md' | 'lg'
/>

Value	Use case
sm	Compact areas, sidebars, nested panels
md	Standard page sections (default)
lg	Full-page empty states

onAction callback prop

For cases where the empty state should trigger an in-page action — such as clearing a search filter — rather than navigating the user elsewhere.

<EmptyState
  icon={FunnelIcon}
  title="No results match your filters"
  description="Try adjusting or clearing your filters."
  actionLabel="Clear filters"
  onAction={() => resetFilters()}
/>

This is distinct from the existing navigation-based action pattern and does not require a href.

Migration Guide

If you have any remaining custom inline empty state blocks, replace them with <EmptyState>. The minimum required props are icon, title, and description.

// Before
<div className="flex flex-col items-center justify-center py-12">
  <SomeIcon className="h-12 w-12 text-muted-foreground" />
  <p className="mt-4 text-sm text-muted-foreground">No items found.</p>
</div>

// After
<EmptyState
  icon={SomeIcon}
  title="No items found"
  description="Items will appear here once added."
/>

Files Updated

• src/components/empty-state.tsx — size and onAction props added
• src/app/.../products-view.tsx — two custom blocks replaced
• src/app/.../support-tickets-dashboard.tsx — one custom block replaced
• src/app/.../project-queue-tab.tsx — one custom block replaced