Add visual progress bar to task indicator

This commit is contained in:
Viktor Barzin 2026-02-01 19:23:27 +00:00
parent 0ca955796e
commit 218781e038

View file

@ -147,14 +147,29 @@ export function TaskIndicator({ taskID, onTaskCancelled }: TaskIndicatorProps) {
return (
<TooltipProvider>
<div className="flex items-center gap-1">
<div className="flex items-center gap-2">
<Tooltip>
<TooltipTrigger asChild>
<div className="flex items-center gap-1.5 cursor-default">
<div className="flex items-center gap-2 cursor-default">
{getStatusIcon()}
<span className="text-xs text-muted-foreground hidden sm:inline">
{isInProgress ? getProgressText() : taskStatus}
</span>
{isInProgress && (
<div className="flex items-center gap-2">
<div className="w-24 h-1.5 bg-primary/20 rounded-full overflow-hidden hidden sm:block">
<div
className="h-full bg-primary transition-all duration-300 ease-out rounded-full"
style={{ width: `${Math.min(progressPercentage, 100)}%` }}
/>
</div>
<span className="text-xs text-muted-foreground hidden sm:inline min-w-[60px]">
{getProgressText()}
</span>
</div>
)}
{!isInProgress && (
<span className="text-xs text-muted-foreground hidden sm:inline">
{taskStatus}
</span>
)}
</div>
</TooltipTrigger>
<TooltipContent side="bottom">