refactor(dialogs): add unified dialog header chrome and opt-in markup

Introduce a shared dialog header style (.unified-dialog-header) in app.css and opt dialog components into the new chrome by updating their header markup. Headers now use unified-dialog-icon and unified-dialog-text elements (and import the matching Lucide icons where needed), which standardizes icon placement, title/eyebrow layout, close button styling and responsive behavior. The Command Palette layout was adjusted to include the new header and its grid rows.

The CSS is explicitly opt-in (so page/section headers remain unchanged) and includes hover/focus styles and a theme-sensitive close color variable. This commit is a UI refactor only — no API or behavior logic changes.
This commit is contained in:
2026-09-11 22:50:31 +02:00
parent 98719bea4a
commit d26d2ac982
36 changed files with 202 additions and 102 deletions
@@ -27,12 +27,12 @@
<div class="dialog-backdrop" role="presentation">
<div class="dialog branch-delete-dialog" role="dialog" aria-modal="true" aria-labelledby="branch-delete-title">
<header class="dialog-header branch-delete-header">
<div class="branch-delete-heading">
<span class:force class="branch-delete-heading-icon" aria-hidden="true">
<header class="dialog-header branch-delete-header unified-dialog-header">
<div class="branch-delete-heading unified-dialog-heading">
<span class:force class="branch-delete-heading-icon unified-dialog-icon" aria-hidden="true">
<Trash2 size={16} />
</span>
<div>
<div class="unified-dialog-text">
<span class="eyebrow">{branch.remote ? "Remote branch" : force ? "Force delete" : "Delete branch"}</span>
<p class="dialog-title" id="branch-delete-title">{title}</p>
</div>