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
@@ -494,8 +494,8 @@
{#if detailOpen && selected}
<aside bind:this={detailPanel} class="detail-panel" transition:fly={{ x: 140, duration: 210, easing: cubicOut }}>
<header class="detail-header">
<div class="detail-provider"><GitPullRequest size={17} /><strong>{providerLabel(selected.provider)} {requestTypeLabel(selected.provider)}</strong></div>
<header class="detail-header unified-dialog-header">
<div class="detail-provider unified-dialog-heading"><span class="unified-dialog-icon" aria-hidden="true"><GitPullRequest size={17} /></span><div class="unified-dialog-text"><strong>{providerLabel(selected.provider)} {requestTypeLabel(selected.provider)}</strong></div></div>
<div class="detail-header-actions"><button class="icon-button" type="button" aria-label={de ? "Im Anbieter öffnen" : "Open in provider"} onclick={() => void openRequest()}><ExternalLink size={16} /></button><button data-dialog-close class="icon-button" type="button" aria-label={de ? "Detailansicht schließen" : "Close details"} onclick={() => { detailOpen = false; }}><X size={17} /></button></div>
</header>
<div class="detail-content">