root/fusion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(KB-192): move progress bars to top of definition tab

Browse Source 
- Reposition progress indicator bars to the top of the definition tab in TaskDetailModal
- Add changeset for the UI improvement
This commit is contained in:
gsxdsm
2026-03-30 12:42:44 -07:00
parent a833b7e455
commit b0f1de4eb1
2 changed files with 23 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.changeset/move-progress-bar-top.md
View File

@@ -2,4 +2,4 @@
"@dustinbyrne/kb": patch
---
Move progress bar to top of task card for improved visual hierarchy. The progress indicator now appears immediately after the card header and before the task title, making task completion status more prominent at first glance.
Move progress bars to top of task definition tab for better visibility

44
packages/dashboard/app/components/TaskDetailModal.tsx
View File

@@ -706,6 +706,28 @@ export function TaskDetailModal({
</div>
) : (
<>
<div className="detail-section detail-step-progress">
<h4>Progress</h4>
{task.steps && task.steps.length > 0 ? (
<div className="step-progress-wrapper">
<div className="step-progress-bar">
{task.steps.map((step, index) => (
<div
key={index}
className={`step-progress-segment step-progress-segment--${step.status}`}
data-tooltip={`${step.name} (${step.status})`}
style={{ backgroundColor: getStepStatusColor(step.status) }}
/>
))}
</div>
<span className="step-progress-label">
{task.steps.filter(s => s.status === "done").length}/{task.steps.length} steps
</span>
</div>
) : (
<div className="step-progress-empty">(no steps defined)</div>
)}
</div>
<div className="detail-section">
{task.prompt ? (
<div className="markdown-body">
@@ -884,28 +906,6 @@ export function TaskDetailModal({
})()}
</div>
</div>
<div className="detail-section detail-step-progress">
<h4>Progress</h4>
{task.steps && task.steps.length > 0 ? (
<div className="step-progress-wrapper">
<div className="step-progress-bar">
{task.steps.map((step, index) => (
<div
key={index}
className={`step-progress-segment step-progress-segment--${step.status}`}
data-tooltip={`${step.name} (${step.status})`}
style={{ backgroundColor: getStepStatusColor(step.status) }}
/>
))}
</div>
<span className="step-progress-label">
{task.steps.filter(s => s.status === "done").length}/{task.steps.length} steps
</span>
</div>
) : (
<div className="step-progress-empty">(no steps defined)</div>
)}
</div>
{/* PR Section - only for in-review tasks */}
{task.column === "in-review" && (
<PrSection