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

feat(FN-998): split changes-header-actions into two-row layout

Browse Source 
- Refactor TaskChangesTab actions header to use a two-row layout for better readability
- Add CSS for .changes-header-row-top and .changes-header-row-bottom styling
- Reorganize action buttons and filters across two rows with proper spacing
- Improve responsive behavior of the changes tab header actions
This commit is contained in:
gsxdsm
2026-04-05 18:31:38 -07:00
parent 51d8e88a7a
commit bf38bf7dc3
2 changed files with 68 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
packages/dashboard/app/components/TaskChangesTab.tsx
View File

@@ -204,55 +204,59 @@ export function TaskChangesTab({ taskId, worktree, projectId, column, mergeDetai
<span className="diff-del">-{stats.deletions}</span>
</span>
</h4>
<div className="changes-header-actions">
{files.length > 0 && (
<div className="changes-nav">
<button
className="btn btn-sm btn-icon"
onClick={() => canGoPrev && navigateToFile(currentFileIndex! - 1)}
disabled={!canGoPrev}
title="Previous file"
aria-label="Previous file"
>
<ChevronLeft size={14} />
</button>
<span className="changes-nav-indicator" aria-live="polite">
{currentFileIndex !== null ? `${currentFileIndex + 1}/${files.length}` : `—/${files.length}`}
</span>
<button
className="btn btn-sm btn-icon"
onClick={() => canGoNext && navigateToFile(currentFileIndex! + 1)}
disabled={!canGoNext}
title="Next file"
aria-label="Next file"
>
<ChevronRight size={14} />
</button>
</div>
)}
<button
className={`btn btn-sm ${wordWrap ? "btn-primary" : ""}`}
onClick={() => setWordWrap((prev) => !prev)}
title={wordWrap ? "Disable word wrap" : "Enable word wrap"}
aria-label="Toggle word wrap"
>
<WrapText size={14} />
</button>
<button
className="btn btn-sm"
onClick={loadDiff}
disabled={loading}
>
Refresh
</button>
<button
className="btn btn-sm btn-icon"
onClick={() => setExpandedViewOpen(true)}
title="Expand to full-screen diff view"
aria-label="Expand diff view"
>
<Maximize2 size={14} />
</button>
<div className="changes-header-actions-wrapper">
<div className="changes-header-actions">
{files.length > 0 && (
<div className="changes-nav">
<button
className="btn btn-sm btn-icon"
onClick={() => canGoPrev && navigateToFile(currentFileIndex! - 1)}
disabled={!canGoPrev}
title="Previous file"
aria-label="Previous file"
>
<ChevronLeft size={14} />
</button>
<span className="changes-nav-indicator" aria-live="polite">
{currentFileIndex !== null ? `${currentFileIndex + 1}/${files.length}` : `—/${files.length}`}
</span>
<button
className="btn btn-sm btn-icon"
onClick={() => canGoNext && navigateToFile(currentFileIndex! + 1)}
disabled={!canGoNext}
title="Next file"
aria-label="Next file"
>
<ChevronRight size={14} />
</button>
</div>
)}
<button
className={`btn btn-sm ${wordWrap ? "btn-primary" : ""}`}
onClick={() => setWordWrap((prev) => !prev)}
title={wordWrap ? "Disable word wrap" : "Enable word wrap"}
aria-label="Toggle word wrap"
>
<WrapText size={14} />
</button>
</div>
<div className="changes-header-actions-secondary">
<button
className="btn btn-sm"
onClick={loadDiff}
disabled={loading}
>
Refresh
</button>
<button
className="btn btn-sm btn-icon"
onClick={() => setExpandedViewOpen(true)}
title="Expand to full-screen diff view"
aria-label="Expand diff view"
>
<Maximize2 size={14} />
</button>
</div>
</div>
</div>