feat(board): add column-specific empty state messages

Replace generic "No bugs here!" message with unique messages for each
column: Backlog bankruptcy, Clean slate, All clear, QE standing by,
and Ship it.

Author: msujaws

src/components/Board/BacklogSection.test.tsx

@@ -83,12 +83,12 @@ describe('BacklogSection', () => {
   describe('empty state', () => {
     it('should show empty state when no bugs', () => {
       render(<BacklogSection {...defaultProps} bugs={[]} />)
-      expect(screen.getByText(/No bugs here/)).toBeInTheDocument()
+      expect(screen.getByText(/Backlog bankruptcy/)).toBeInTheDocument()
     })
 
     it('should align empty state towards top', () => {
       render(<BacklogSection {...defaultProps} bugs={[]} />)
-      const emptyState = screen.getByText(/No bugs here/).parentElement
+      const emptyState = screen.getByText(/Backlog bankruptcy/).parentElement
       expect(emptyState).toHaveClass('justify-start')
     })
   })

src/components/Board/BacklogSection.tsx

@@ -226,11 +226,11 @@ export function BacklogSection({
           <span className="material-icons text-4xl">
             {hasActiveFilters ? 'filter_alt_off' : 'celebration'}
           </span>
-          <p className="text-sm">No bugs here! 🎉</p>
+          <p className="text-sm">Backlog bankruptcy!</p>
           {hasActiveFilters ? (
             <p className="text-xs">Try adjusting your filters to see more bugs.</p>
           ) : (
-            <p className="text-xs">Time to celebrate!</p>
+            <p className="text-xs">The best kind of bankruptcy.</p>
           )}
         </div>
       )}

src/components/Board/Board.test.tsx

@@ -380,9 +380,14 @@ describe('Board', () => {
     it('should show empty state when no bugs', () => {
       render(<Board {...defaultProps} bugs={[]} />)
 
-      // 4 board columns + 1 backlog section = 5 empty messages
-      const emptyMessages = screen.getAllByText(/no bugs here/i)
-      expect(emptyMessages.length).toBe(5)
+      // Each column has its own empty state message
+      // Backlog: "Backlog bankruptcy!", Todo: "Clean slate!", In Progress: "All clear!",
+      // In Testing: "QE standing by!", Done: "Ship it!"
+      expect(screen.getByText(/backlog bankruptcy/i)).toBeInTheDocument()
+      expect(screen.getByText(/clean slate/i)).toBeInTheDocument()
+      expect(screen.getByText(/all clear/i)).toBeInTheDocument()
+      expect(screen.getByText(/QE standing by/i)).toBeInTheDocument()
+      expect(screen.getByText(/ship it/i)).toBeInTheDocument()
     })
   })
 
@@ -748,8 +753,12 @@ describe('Board', () => {
         fireEvent.keyDown(document, { key: 'ArrowDown' })
         fireEvent.keyDown(document, { key: 'Shift' })
 
-        // 4 board columns + 1 backlog section = 5 empty messages
-        expect(screen.getAllByText(/no bugs here/i).length).toBe(5)
+        // Each column should show its empty state message
+        expect(screen.getByText(/backlog bankruptcy/i)).toBeInTheDocument()
+        expect(screen.getByText(/clean slate/i)).toBeInTheDocument()
+        expect(screen.getByText(/all clear/i)).toBeInTheDocument()
+        expect(screen.getByText(/QE standing by/i)).toBeInTheDocument()
+        expect(screen.getByText(/ship it/i)).toBeInTheDocument()
       })
     })
 

src/components/Board/Column.test.tsx

@@ -126,19 +126,19 @@ describe('Column', () => {
     it('should show empty state when no bugs', () => {
       render(<Column {...defaultProps} bugs={[]} />)
 
-      expect(screen.getByText(/no bugs here/i)).toBeInTheDocument()
+      expect(screen.getByText(/backlog bankruptcy/i)).toBeInTheDocument()
     })
 
-    it('should show playful empty state message', () => {
+    it('should show column-specific empty state subtitle', () => {
       render(<Column {...defaultProps} bugs={[]} />)
 
-      expect(screen.getByText(/time to celebrate/i)).toBeInTheDocument()
+      expect(screen.getByText(/the best kind of bankruptcy/i)).toBeInTheDocument()
     })
 
     it('should align empty state towards top of column', () => {
       render(<Column {...defaultProps} bugs={[]} />)
 
-      const emptyState = screen.getByText(/no bugs here/i).parentElement
+      const emptyState = screen.getByText(/backlog bankruptcy/i).parentElement
       expect(emptyState).toHaveClass('justify-start')
     })
 
@@ -152,14 +152,14 @@ describe('Column', () => {
       render(<Column {...defaultProps} bugs={[]} hasActiveFilters={false} />)
 
       expect(screen.queryByText(/try adjusting your filters/i)).not.toBeInTheDocument()
-      expect(screen.getByText(/no bugs here/i)).toBeInTheDocument()
+      expect(screen.getByText(/backlog bankruptcy/i)).toBeInTheDocument()
     })
 
-    it('should show celebration message without filter guidance when filters active but bugs exist', () => {
+    it('should show bugs without empty state when filters active but bugs exist', () => {
       render(<Column {...defaultProps} bugs={mockBugs} hasActiveFilters={true} />)
 
       // Should show bugs, not empty state
-      expect(screen.queryByText(/no bugs here/i)).not.toBeInTheDocument()
+      expect(screen.queryByText(/backlog bankruptcy/i)).not.toBeInTheDocument()
       expect(screen.queryByText(/try adjusting your filters/i)).not.toBeInTheDocument()
     })
   })

src/components/Board/Column.tsx

@@ -64,6 +64,14 @@ const columnDescriptions: Record<KanbanColumn, string> = {
   done: 'Bugs with status RESOLVED/VERIFIED/CLOSED and resolution FIXED (last 2 weeks)',
 }
 
+const columnEmptyMessages: Record<KanbanColumn, { title: string; subtitle: string }> = {
+  backlog: { title: 'Backlog bankruptcy!', subtitle: 'The best kind of bankruptcy.' },
+  todo: { title: 'Clean slate!', subtitle: 'Nothing planned… yet.' },
+  'in-progress': { title: 'All clear!', subtitle: 'Keyboards are resting.' },
+  'in-testing': { title: 'QE standing by!', subtitle: 'Send over some bugz to verify.' },
+  done: { title: 'Ship it!', subtitle: 'Check back after some bugz are resolved.' },
+}
+
 export function Column({
   column,
   bugs,
@@ -210,11 +218,11 @@ export function Column({
           <span className="material-icons text-4xl">
             {hasActiveFilters ? 'filter_alt_off' : 'celebration'}
           </span>
-          <p className="text-sm">No bugs here! 🎉</p>
+          <p className="text-sm">{columnEmptyMessages[column].title}</p>
           {hasActiveFilters ? (
             <p className="text-xs">Try adjusting your filters to see more bugs.</p>
           ) : (
-            <p className="text-xs">Time to celebrate!</p>
+            <p className="text-xs">{columnEmptyMessages[column].subtitle}</p>
           )}
         </div>
       )}