electron-rare/Aperant
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improving Task Card Title Readability (#461)

Browse Source 
* 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 <noreply@anthropic.com>

* 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 <noreply@anthropic.com>

* 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 <noreply@anthropic.com>
This commit is contained in:
Vinícius Santos
2026-01-02 17:20:58 +02:00
committed by GitHub
parent d278963bf9
commit 3086233f87
4 changed files with 46 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/frontend/src/renderer/components/TaskCard.tsx
+24 -28
View File
@@ -268,15 +268,24 @@ export const TaskCard = memo(function TaskCard({ task, onClick }: TaskCardProps)
onClick={onClick}
>
<CardContent className="p-4">
{/* Header - improved visual hierarchy */}
<div className="flex items-start justify-between gap-3">
<h3
className="font-semibold text-sm text-foreground line-clamp-2 leading-snug flex-1 min-w-0"
title={task.title}
>
{task.title}
</h3>
<div className="flex items-center gap-1.5 shrink-0 flex-wrap justify-end max-w-[180px]">
{/* Title - full width, no wrapper */}
<h3
className="font-semibold text-sm text-foreground line-clamp-2 leading-snug"
title={task.title}
>
{task.title}
</h3>
{/* Description - sanitized to handle markdown content (memoized) */}
{sanitizedDescription && (
<p className="mt-2 text-xs text-muted-foreground line-clamp-2">
{sanitizedDescription}
</p>
)}
{/* Metadata badges */}
{(task.metadata || isStuck || isIncomplete || hasActiveExecution || reviewReasonInfo) && (
<div className="mt-2.5 flex flex-wrap gap-1.5">
{/* Stuck indicator - highest priority */}
{isStuck && (
<Badge
@@ -338,21 +347,8 @@ export const TaskCard = memo(function TaskCard({ task, onClick }: TaskCardProps)
{reviewReasonInfo.label}
</Badge>
)}
</div>
</div>
{/* Description - sanitized to handle markdown content (memoized) */}
{sanitizedDescription && (
<p className="mt-2 text-xs text-muted-foreground line-clamp-2">
{sanitizedDescription}
</p>
)}
{/* Metadata badges */}
{task.metadata && (
<div className="mt-2.5 flex flex-wrap gap-1.5">
{/* Category badge with icon */}
{task.metadata.category && (
{task.metadata?.category && (
<Badge
variant="outline"
className={cn('text-[10px] px-1.5 py-0', TASK_CATEGORY_COLORS[task.metadata.category])}
@@ -367,7 +363,7 @@ export const TaskCard = memo(function TaskCard({ task, onClick }: TaskCardProps)
</Badge>
)}
{/* 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') && (
<Badge
variant="outline"
className={cn('text-[10px] px-1.5 py-0', TASK_IMPACT_COLORS[task.metadata.impact])}
@@ -376,7 +372,7 @@ export const TaskCard = memo(function TaskCard({ task, onClick }: TaskCardProps)
</Badge>
)}
{/* Complexity badge */}
{task.metadata.complexity && (
{task.metadata?.complexity && (
<Badge
variant="outline"
className={cn('text-[10px] px-1.5 py-0', TASK_COMPLEXITY_COLORS[task.metadata.complexity])}
@@ -385,7 +381,7 @@ export const TaskCard = memo(function TaskCard({ task, onClick }: TaskCardProps)
</Badge>
)}
{/* 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') && (
<Badge
variant="outline"
className={cn('text-[10px] px-1.5 py-0', TASK_PRIORITY_COLORS[task.metadata.priority])}
@@ -394,12 +390,12 @@ export const TaskCard = memo(function TaskCard({ task, onClick }: TaskCardProps)
</Badge>
)}
{/* Security severity - always show */}
{task.metadata.securitySeverity && (
{task.metadata?.securitySeverity && (
<Badge
variant="outline"
className={cn('text-[10px] px-1.5 py-0', TASK_IMPACT_COLORS[task.metadata.securitySeverity])}
>
{task.metadata.securitySeverity} severity
{task.metadata.securitySeverity} {t('metadata.severity')}
</Badge>
)}
</div>
apps/frontend/src/shared/i18n/locales/en/tasks.json
+3
View File
@@ -95,5 +95,8 @@
"retry": "Retry",
"selectFile": "Select a file to view its contents",
"openInIDE": "Open in IDE"
},
"metadata": {
"severity": "severity"
}
}
apps/frontend/src/shared/i18n/locales/fr/tasks.json
+3
View File
@@ -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é"
}
}
implementation_plan.json
+16 -10
View File
@@ -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