fix: resolve React key warning in PhaseProgressIndicator

- Add explicit key to overflow count span that shows "+N" when more
  than 10 subtasks exist (sibling to mapped elements needed a key)
- Add fallback key using index for subtask indicators in case
  subtask.id is undefined

Fixes console warning: "Each child in a list should have a unique
'key' prop"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
AndyMik90
2025-12-18 19:31:34 +01:00
parent 895ed9f605
commit 9106038a17
@@ -155,7 +155,7 @@ export function PhaseProgressIndicator({
<div className="flex flex-wrap gap-1.5 mt-2"> <div className="flex flex-wrap gap-1.5 mt-2">
{subtasks.slice(0, 10).map((subtask, index) => ( {subtasks.slice(0, 10).map((subtask, index) => (
<motion.div <motion.div
key={subtask.id} key={subtask.id || `subtask-${index}`}
className={cn( className={cn(
'h-2 w-2 rounded-full', 'h-2 w-2 rounded-full',
subtask.status === 'completed' && 'bg-success', subtask.status === 'completed' && 'bg-success',
@@ -185,7 +185,7 @@ export function PhaseProgressIndicator({
/> />
))} ))}
{totalSubtasks > 10 && ( {totalSubtasks > 10 && (
<span className="text-[10px] text-muted-foreground font-medium ml-0.5"> <span key="overflow-count" className="text-[10px] text-muted-foreground font-medium ml-0.5">
+{totalSubtasks - 10} +{totalSubtasks - 10}
</span> </span>
)} )}