From 3086233f87b1ab3be1896210c2f140a7e174c222 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Vin=C3=ADcius=20Santos?= Date: Fri, 2 Jan 2026 17:20:58 +0200 Subject: [PATCH] Improving Task Card Title Readability (#461) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * auto-claude: subtask-1-1 - Relocate status badges from header to metadata section - Move status badges (stuck, incomplete, archived, execution phase, status, review reason) from the title row to the metadata badges section below the description - Simplify header to show only title with full width - Prepend status badges before category/impact/complexity badges in metadata section - Add safe optional chaining for metadata property access to prevent runtime errors - Update outer condition to allow rendering metadata section even without task.metadata * auto-claude: subtask-1-1 - Restructure TaskCard header: Remove flex wrapper around title, make title standalone with full width * fix: Add localization for security severity badge label - Add translation key 'metadata.severity' to en/tasks.json and fr/tasks.json - Update TaskCard.tsx to use t('metadata.severity') instead of hardcoded 'severity' string - Ensures proper i18n support for security severity badges Fixes QA feedback: 'Make sure localization work on code changed in this task' 🤖 Generated with Claude Code Co-Authored-By: Claude Haiku 4.5 * docs: Update implementation plan with QA fix session 1 - Document localization fix for security severity badge - Mark all subtasks as completed - Set ready_for_qa_revalidation to true 🤖 Generated with Claude Code Co-Authored-By: Claude Haiku 4.5 * restoring package-lock.json * Merge develop: bring in latest changes Includes performance optimizations, new features, and various improvements from develop branch. * resolve: package-lock.json conflict (kept develop version) Merge conflict resolution: accepted develop branch version of package-lock.json to maintain consistency with updated dependencies. * resolve: TaskCard.tsx conflict (merged layout + performance) Merge conflict resolution: combined both changes: - Our feature: title full width, badges below description in combined section - Develop: performance optimizations (memo, useMemo, useCallback, useRef) * fix: TerminalGrid.tsx react-resizable-panels imports Fixed incorrect imports from react-resizable-panels: - Group → PanelGroup - Separator → PanelResizeHandle - orientation → direction * fix: revert TerminalGrid to use correct react-resizable-panels v4 API v4.2.0 uses Group/Separator/orientation, not PanelGroup/PanelResizeHandle/direction --------- Co-authored-by: Claude Haiku 4.5 --- .../src/renderer/components/TaskCard.tsx | 52 +++++++++---------- .../src/shared/i18n/locales/en/tasks.json | 3 ++ .../src/shared/i18n/locales/fr/tasks.json | 3 ++ implementation_plan.json | 26 ++++++---- 4 files changed, 46 insertions(+), 38 deletions(-) diff --git a/apps/frontend/src/renderer/components/TaskCard.tsx b/apps/frontend/src/renderer/components/TaskCard.tsx index 87ee9751..994342cd 100644 --- a/apps/frontend/src/renderer/components/TaskCard.tsx +++ b/apps/frontend/src/renderer/components/TaskCard.tsx @@ -268,15 +268,24 @@ export const TaskCard = memo(function TaskCard({ task, onClick }: TaskCardProps) onClick={onClick} > - {/* Header - improved visual hierarchy */} -
-

- {task.title} -

-
+ {/* Title - full width, no wrapper */} +

+ {task.title} +

+ + {/* Description - sanitized to handle markdown content (memoized) */} + {sanitizedDescription && ( +

+ {sanitizedDescription} +

+ )} + + {/* Metadata badges */} + {(task.metadata || isStuck || isIncomplete || hasActiveExecution || reviewReasonInfo) && ( +
{/* Stuck indicator - highest priority */} {isStuck && ( )} -
-
- - {/* Description - sanitized to handle markdown content (memoized) */} - {sanitizedDescription && ( -

- {sanitizedDescription} -

- )} - - {/* Metadata badges */} - {task.metadata && ( -
{/* Category badge with icon */} - {task.metadata.category && ( + {task.metadata?.category && ( )} {/* Impact badge - high visibility for important tasks */} - {task.metadata.impact && (task.metadata.impact === 'high' || task.metadata.impact === 'critical') && ( + {task.metadata?.impact && (task.metadata.impact === 'high' || task.metadata.impact === 'critical') && ( )} {/* Complexity badge */} - {task.metadata.complexity && ( + {task.metadata?.complexity && ( )} {/* Priority badge - only show urgent/high */} - {task.metadata.priority && (task.metadata.priority === 'urgent' || task.metadata.priority === 'high') && ( + {task.metadata?.priority && (task.metadata.priority === 'urgent' || task.metadata.priority === 'high') && ( )} {/* Security severity - always show */} - {task.metadata.securitySeverity && ( + {task.metadata?.securitySeverity && ( - {task.metadata.securitySeverity} severity + {task.metadata.securitySeverity} {t('metadata.severity')} )}
diff --git a/apps/frontend/src/shared/i18n/locales/en/tasks.json b/apps/frontend/src/shared/i18n/locales/en/tasks.json index 8602b8a2..403a1d61 100644 --- a/apps/frontend/src/shared/i18n/locales/en/tasks.json +++ b/apps/frontend/src/shared/i18n/locales/en/tasks.json @@ -95,5 +95,8 @@ "retry": "Retry", "selectFile": "Select a file to view its contents", "openInIDE": "Open in IDE" + }, + "metadata": { + "severity": "severity" } } diff --git a/apps/frontend/src/shared/i18n/locales/fr/tasks.json b/apps/frontend/src/shared/i18n/locales/fr/tasks.json index ea3e5b38..404a5a8a 100644 --- a/apps/frontend/src/shared/i18n/locales/fr/tasks.json +++ b/apps/frontend/src/shared/i18n/locales/fr/tasks.json @@ -95,5 +95,8 @@ "retry": "Réessayer", "selectFile": "Sélectionnez un fichier pour voir son contenu", "openInIDE": "Ouvrir dans l'IDE" + }, + "metadata": { + "severity": "sévérité" } } diff --git a/implementation_plan.json b/implementation_plan.json index d44f4f68..ae64097a 100644 --- a/implementation_plan.json +++ b/implementation_plan.json @@ -1,24 +1,30 @@ { - "spec_id": "011-fix-scale-adjustment-and-view-reload-issues", + "spec_id": "025-improving-task-card-title-readability", "subtasks": [ { "id": "1", - "title": "Fix slider to defer view reload until drag ends and add zoom button functionality", + "title": "Restructure TaskCard header: Remove flex wrapper around title, make title standalone with full width", + "status": "completed" + }, + { + "id": "2", + "title": "Relocate status badges from header to metadata section", + "status": "completed" + }, + { + "id": "3", + "title": "Add localization for security severity badge label", "status": "completed" } ], "qa_signoff": { "status": "fixes_applied", - "timestamp": "2025-12-27T02:20:00Z", - "fix_session": 0, + "timestamp": "2026-01-01T11:58:40Z", + "fix_session": 1, "issues_fixed": [ { - "title": "Remove preview hint textbox", - "fix_commit": "2653019" - }, - { - "title": "Remove unused preview translation keys", - "fix_commit": "e17536c" + "title": "Missing localization for hardcoded 'severity' string in TaskCard", + "fix_commit": "de0c8e4" } ], "ready_for_qa_revalidation": true