feat(history): add commit action context menu in HistoryPanel

The commit history UI now provides a compact actions menu per commit,
with positioning constrained to the history panel. The menu supports
keyboard dismissal via Escape and closes on outside clicks to keep the
interaction predictable.

- Replace per-commit action buttons with an ellipsis menu
- Add context menu state and panel-relative positioning logic
- Style the new history context menu and menu button
This commit is contained in:
Christoph Brandau
2026-07-06 11:16:52 +02:00
parent 38b4f98233
commit aaa4228b82
2 changed files with 116 additions and 13 deletions
+25 -2
View File
@@ -1639,6 +1639,7 @@
.branch-actions .btn-sm { min-height: 24px; padding: 0 6px; font-size: 11px; }
.branch-context-menu,
.history-context-menu,
.explorer-context-menu {
z-index: 120;
display: grid;
@@ -1651,10 +1652,12 @@
box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.branch-context-menu { position: absolute; }
.branch-context-menu,
.history-context-menu { position: absolute; }
.explorer-context-menu { position: fixed; }
.branch-context-menu button,
.history-context-menu button,
.explorer-context-menu button {
display: flex;
align-items: center;
@@ -1673,13 +1676,15 @@
}
.branch-context-menu button:hover:not(:disabled),
.history-context-menu button:hover:not(:disabled),
.explorer-context-menu button:hover:not(:disabled) {
border-color: var(--color-border-subtle);
background: rgba(255,255,255,0.06);
color: var(--color-ink);
}
.branch-context-menu .menu-separator {
.branch-context-menu .menu-separator,
.history-context-menu .menu-separator {
height: 1px;
margin: 4px 3px;
background: var(--color-border-subtle);
@@ -1696,6 +1701,7 @@
}
.branch-context-menu button:disabled,
.history-context-menu button:disabled,
.explorer-context-menu button:disabled {
cursor: not-allowed;
opacity: 0.48;
@@ -1817,6 +1823,7 @@
/* --- Commit history --- */
.history-panel { position: relative; }
.history-list { min-width: 0; padding: 6px; overflow: auto; }
.commit-row { display: grid; min-width: 0; gap: 8px; padding: 10px; border: 1px solid var(--color-border-subtle); border-radius: 8px; background: var(--color-surface-raised); transition: border-color 120ms; }
@@ -2017,6 +2024,22 @@
}
.commit-action-buttons { display: flex; flex: 0 0 auto; align-items: center; gap: 5px; }
.commit-action-buttons button { flex: 0 0 auto; white-space: nowrap; }
.commit-menu-button {
width: 28px;
min-width: 28px;
min-height: 26px;
padding: 0;
border-color: rgba(94,110,156,0.16);
border-radius: 7px;
background: rgba(255,255,255,0.035);
color: var(--color-ink-dim);
}
.commit-menu-button:hover:not(:disabled),
.commit-menu-button[aria-expanded="true"] {
border-color: rgba(65,209,255,0.28);
background: rgba(65,209,255,0.08);
color: var(--color-ink);
}
.file-history-head { align-items: flex-start; }
.file-history-heading { min-width: 0; flex: 1 1 auto; overflow: hidden; }
.section-head .file-history-name {