From 6842e4c7f7319a3aade9b12faf7956bdebc85198 Mon Sep 17 00:00:00 2001
From: Shirone <kacperlachowiczwp.pl@wp.pl>
Date: Sun, 11 Jan 2026 22:35:25 +0100
Subject: [PATCH] refactor: simplify EmptyStateCard and update empty state
 configurations

- Removed unused properties and state management from the EmptyStateCard component for cleaner code.
- Updated the EMPTY_STATE_CONFIGS to remove exampleCard entries, streamlining the empty state configuration.
- Enhanced the primary action handling in the EmptyStateCard for improved functionality.
---
 .../components/empty-state-card.tsx           | 61 +------------------
 .../components/views/board-view/constants.ts  | 26 +-------
 2 files changed, 3 insertions(+), 84 deletions(-)

diff --git a/apps/ui/src/components/views/board-view/components/empty-state-card.tsx b/apps/ui/src/components/views/board-view/components/empty-state-card.tsx
index 26b4fc7a..30ccdefc 100644
--- a/apps/ui/src/components/views/board-view/components/empty-state-card.tsx
+++ b/apps/ui/src/components/views/board-view/components/empty-state-card.tsx
@@ -1,20 +1,10 @@
-import { memo, useState } from 'react';
+import { memo } from 'react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { Kbd } from '@/components/ui/kbd';
 import { formatShortcut } from '@/store/app-store';
 import { getEmptyStateConfig, type EmptyStateConfig } from '../constants';
-import {
-  Lightbulb,
-  Play,
-  Clock,
-  CheckCircle2,
-  Sparkles,
-  Wand2,
-  X,
-  Eye,
-  EyeOff,
-} from 'lucide-react';
+import { Lightbulb, Play, Clock, CheckCircle2, Sparkles, Wand2 } from 'lucide-react';
 
 const ICON_MAP = {
   lightbulb: Lightbulb,
@@ -51,43 +41,14 @@ export const EmptyStateCard = memo(function EmptyStateCard({
   onAiSuggest,
   customConfig,
 }: EmptyStateCardProps) {
-  const [isDismissed, setIsDismissed] = useState(false);
-  const [isMinimized, setIsMinimized] = useState(false);
-
   // Get base config and merge with custom overrides
   const baseConfig = getEmptyStateConfig(columnId);
   const config: EmptyStateConfig = { ...baseConfig, ...customConfig };
 
-  // Handle dismissal
-  if (isDismissed) {
-    return null;
-  }
-
   const IconComponent = ICON_MAP[config.icon];
   const showActions = !isReadOnly && !isFilteredEmpty;
   const showShortcut = columnId === 'backlog' && addFeatureShortcut && showActions;
 
-  // Minimized state - compact centered indicator
-  if (isMinimized) {
-    return (
-      <button
-        onClick={() => setIsMinimized(false)}
-        className={cn(
-          'w-full h-full min-h-[120px] flex-1',
-          'flex items-center justify-center gap-2',
-          'text-muted-foreground/40 hover:text-muted-foreground/60',
-          'cursor-pointer group',
-          'transition-colors duration-200',
-          'animate-in fade-in duration-300'
-        )}
-        data-testid={`empty-state-minimized-${columnId}`}
-      >
-        <Eye className="w-3.5 h-3.5 group-hover:scale-110 transition-transform" />
-        <span className="text-xs font-medium">Show guidance</span>
-      </button>
-    );
-  }
-
   // Action button handler
   const handlePrimaryAction = () => {
     if (!config.primaryAction) return;
@@ -108,24 +69,6 @@ export const EmptyStateCard = memo(function EmptyStateCard({
       )}
       data-testid={`empty-state-card-${columnId}`}
     >
-      {/* Dismiss/Minimize controls - appears on hover */}
-      <div className="absolute top-2 right-2 flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
-        <button
-          onClick={() => setIsMinimized(true)}
-          className="p-1 rounded-md text-muted-foreground/30 hover:text-muted-foreground/60 transition-colors"
-          title="Minimize guidance"
-        >
-          <EyeOff className="w-3 h-3" />
-        </button>
-        <button
-          onClick={() => setIsDismissed(true)}
-          className="p-1 rounded-md text-muted-foreground/30 hover:text-muted-foreground/60 transition-colors"
-          title="Dismiss"
-        >
-          <X className="w-3 h-3" />
-        </button>
-      </div>
-
       {/* Icon */}
       <div className="mb-3 text-muted-foreground/30">
         <IconComponent className="w-8 h-8" />
diff --git a/apps/ui/src/components/views/board-view/constants.ts b/apps/ui/src/components/views/board-view/constants.ts
index 0ea7ce0a..fda19ebf 100644
--- a/apps/ui/src/components/views/board-view/constants.ts
+++ b/apps/ui/src/components/views/board-view/constants.ts
@@ -16,10 +16,6 @@ export interface EmptyStateConfig {
     label: string;
     actionType: 'ai-suggest' | 'none';
   };
-  exampleCard?: {
-    title: string;
-    category: string;
-  };
 }
 
 /**
@@ -34,49 +30,29 @@ export const EMPTY_STATE_CONFIGS: Record<string, EmptyStateConfig> = {
     shortcutHint: 'Press',
     primaryAction: {
       label: 'Use AI Suggestions',
-      actionType: 'ai-suggest',
-    },
-    exampleCard: {
-      title: 'User Authentication',
-      category: 'Core Feature',
+      actionType: 'none',
     },
   },
   in_progress: {
     title: 'Nothing in Progress',
     description: 'Drag a feature from the backlog here or click implement to start working on it.',
     icon: 'play',
-    exampleCard: {
-      title: 'Implementing feature...',
-      category: 'In Development',
-    },
   },
   waiting_approval: {
     title: 'No Items Awaiting Approval',
     description: 'Features will appear here after implementation is complete and need your review.',
     icon: 'clock',
-    exampleCard: {
-      title: 'Ready for Review',
-      category: 'Completed',
-    },
   },
   verified: {
     title: 'No Verified Features',
     description: 'Approved features will appear here. They can then be completed and archived.',
     icon: 'check',
-    exampleCard: {
-      title: 'Approved & Ready',
-      category: 'Verified',
-    },
   },
   // Pipeline step default configuration
   pipeline_default: {
     title: 'Pipeline Step Empty',
     description: 'Features will flow through this step during the automated pipeline process.',
     icon: 'sparkles',
-    exampleCard: {
-      title: 'Processing...',
-      category: 'Pipeline',
-    },
   },
 };