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

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

@@ -3563,9 +3563,10 @@ body {
.changes-header { .changes-header {
display: flex; display: flex;
align-items: center; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
gap: var(--space-md); gap: var(--space-md);
flex-wrap: wrap;
} }
.changes-header h4 { .changes-header h4 {
@@ -3581,6 +3582,19 @@ body {
gap: var(--space-sm); 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 { .changes-nav {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;