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
+2 -2
View File
@@ -281,8 +281,8 @@
<div class="dialog-backdrop app-chrome-backdrop conflict-backdrop">
<div class="conflict-workbench" bind:this={dialogElement} onkeydown={trapFocus} role="dialog" aria-modal="true" aria-label={t("Konflikte lösen", "Resolve conflicts")} tabindex="-1">
<header class="workbench-header">
<h2><GitMerge size={24} />{t("Konflikte lösen", "Resolve conflicts")}</h2>
<header class="workbench-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><GitMerge size={18} /></span><div class="unified-dialog-text"><h2>{t("Konflikte lösen", "Resolve conflicts")}</h2></div>
<div class="header-actions">
{#if conflictTarget}<button type="button" onclick={() => onExternalMerge(conflictTarget)} disabled={isBusy} title={mergeName}><ExternalLink size={18} />{t("Externes Merge-Tool", "External merge tool")}</button>{/if}
<button data-dialog-close class="close-button" type="button" onclick={onClose} disabled={isBusy} aria-label={t("Schließen", "Close")}><X size={22} /></button>