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 54e46387ec
commit 1f7d4797d0
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>

16
packages/dashboard/app/styles.css
View File

@@ -3563,9 +3563,10 @@ body {
.changes-header {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-md);
flex-wrap: wrap;
}
.changes-header h4 {
@@ -3581,6 +3582,19 @@ body {
gap: var(--space-sm);
}
.changes-header-actions-wrapper {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-xs);
}
.changes-header-actions-secondary {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
.changes-nav {
display: inline-flex;
align-items: center;