christiankrag
c5557ce9d6
- Replace separate tab navigation with unified project view - Add compact phase indicator showing design thinking progress - Add slide-out phases panel for detailed view - Reduce visual clutter from 3 toolbars to 2 - Improve chat/phases integration per design-thinking methodology 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { cn } from '@/lib/utils'
|
|
import { DESIGN_PHASES, designPhases, type DesignPhase, type PhaseStatus } from '@/types/design-thinking'
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from '@/components/ui/tooltip'
|
|
|
|
interface PhaseIndicatorCompactProps {
|
|
currentPhase: DesignPhase
|
|
phaseStatuses?: Record<DesignPhase, PhaseStatus>
|
|
onPhaseClick?: (phase: DesignPhase) => void
|
|
className?: string
|
|
}
|
|
|
|
export function PhaseIndicatorCompact({
|
|
currentPhase,
|
|
phaseStatuses,
|
|
onPhaseClick,
|
|
className
|
|
}: PhaseIndicatorCompactProps) {
|
|
const currentIndex = DESIGN_PHASES.indexOf(currentPhase)
|
|
const currentPhaseData = designPhases.find(p => p.id === currentPhase)
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<div className={cn('flex items-center gap-1', className)}>
|
|
{/* Mini progress dots */}
|
|
<div className="flex items-center gap-0.5 mr-2">
|
|
{DESIGN_PHASES.map((phase, index) => {
|
|
const status = phaseStatuses?.[phase]
|
|
const isCurrent = index === currentIndex
|
|
const isCompleted = status === 'completed' || index < currentIndex
|
|
|
|
return (
|
|
<Tooltip key={phase}>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
onClick={() => onPhaseClick?.(phase)}
|
|
className={cn(
|
|
'w-2 h-2 rounded-full transition-all',
|
|
isCurrent && 'w-3 h-3 bg-brand animate-pulse',
|
|
isCompleted && !isCurrent && 'bg-emerald-500',
|
|
!isCompleted && !isCurrent && 'bg-muted-foreground/30'
|
|
)}
|
|
/>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className="text-xs">
|
|
{designPhases.find(p => p.id === phase)?.label}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
)
|
|
})}
|
|
</div>
|
|
|
|
{/* Current phase badge */}
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
onClick={() => onPhaseClick?.(currentPhase)}
|
|
className="flex items-center gap-1.5 px-2 py-1 rounded-md bg-brand/10 text-brand text-sm font-medium hover:bg-brand/20 transition-colors"
|
|
>
|
|
<span>{currentPhaseData?.icon}</span>
|
|
<span className="hidden sm:inline">{currentPhaseData?.label}</span>
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="bottom" className="max-w-xs">
|
|
<p className="font-medium">{currentPhaseData?.label}</p>
|
|
<p className="text-xs text-muted-foreground">{currentPhaseData?.shortDescription}</p>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</TooltipProvider>
|
|
)
|
|
}
|