feat(ui): enhance status panel actions and styling

This update significantly refactors the visual layout and functionality of the working tree status panel. It introduces dedicated action groups for discarding changes, staging, and unstaging files, improving user interaction and clarity.

- Added contextual action buttons (discard all/selected) to both staged and unstaged sections.
- Updated CSS structure to accommodate new status action containers.
- Improved handling of selected file counts within the panel headers.
This commit is contained in:
Christoph Brandau
2026-07-13 00:09:28 +02:00
parent 82c47c8d03
commit 0dd5441754
2 changed files with 80 additions and 58 deletions
+40
View File
@@ -6028,3 +6028,43 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px color-mix(in s
.ai-review-footer { align-items: stretch; flex-direction: column; }
.ai-review-footer > div { justify-content: flex-end; }
}
/* Contextual status actions: global discard in the panel header, selection
actions beside their matching Stage/Unstage command. */
.status-head-actions,
.status-lane-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
min-width: 0;
}
.status-head-actions { flex-wrap: wrap; }
.status-discard-all {
margin-left: 3px;
border-color: color-mix(in srgb, var(--code-delete-strong) 30%, var(--color-border));
color: var(--code-delete-strong);
background: color-mix(in srgb, var(--code-delete-strong) 8%, transparent);
}
.status-discard-all:hover:not(:disabled) {
border-color: color-mix(in srgb, var(--code-delete-strong) 52%, var(--color-border));
color: var(--code-delete-strong);
background: color-mix(in srgb, var(--code-delete-strong) 14%, transparent);
}
.status-lane-title { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.status-lane-actions { flex-wrap: wrap; }
.status-lane-actions .status-selection-count {
display: inline-flex;
width: auto;
min-width: 0;
height: 22px;
padding: 0 5px;
color: var(--color-ink-dim);
background: transparent;
font-size: 9.5px;
}
@media (max-width: 760px) {
.status-lane-head { align-items: flex-start; flex-direction: column; }
.status-lane-actions { width: 100%; justify-content: flex-start; }
}