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.
This commit is contained in:
Shirone
2026-01-11 22:35:25 +01:00
parent a48c67d271
commit 6842e4c7f7
2 changed files with 3 additions and 84 deletions

View File

@@ -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" />

View File

@@ -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',
},
},
};