Christoph/GitLite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases 46 Wiki Activity

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

Browse Source 
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:
Christoph
2026-09-11 22:50:31 +02:00
parent 98719bea4a
commit d26d2ac982
36 changed files with 202 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.css
+78
View File
@@ -9095,3 +9095,81 @@ section > header.page-header.page-header {
line-height: 20px;
letter-spacing: normal;
}
/* Shared dialog chrome. Explicit opt-in keeps page and section headers intact. */
:root [class].unified-dialog-header {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-start;
gap: 12px;
min-height: 70px;
height: auto;
padding: 14px 18px;
margin: 0;
border: 0;
border-bottom: 1px solid var(--color-border-subtle);
border-radius: 0;
background: var(--app-dialog-chrome);
color: var(--color-ink);
box-shadow: none;
}
:root .unified-dialog-header .unified-dialog-heading {
display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0;
}
:root .unified-dialog-header .unified-dialog-icon {
display: grid; place-items: center; flex: 0 0 38px;
width: 38px; height: 38px; min-width: 38px; min-height: 38px;
padding: 0; margin: 0; order: -1;
border: 1px solid color-mix(in srgb, var(--color-accent) 28%, var(--color-border));
border-radius: 0; color: var(--color-accent);
background: color-mix(in srgb, var(--color-accent) 9%, transparent);
box-shadow: none;
}
:root .unified-dialog-header .unified-dialog-icon svg { width: 18px; height: 18px; color: inherit; }
:root .unified-dialog-header .unified-dialog-text {
display: flex; flex-direction: column; justify-content: center; gap: 3px;
flex: 1 1 auto; min-width: 0; margin: 0;
}
:root .unified-dialog-header .unified-dialog-text :is(h2,h3,.dialog-title,strong) {
order: 0; margin: 0; padding: 0; min-width: 0;
color: var(--color-ink); font-size: 18px; font-weight: 500; line-height: 1.25;
letter-spacing: normal; text-transform: none; white-space: normal; overflow-wrap: anywhere;
}
:root .unified-dialog-header .unified-dialog-text :is(p:not(.dialog-title),.eyebrow,.patch-scope,.file-history-dialog-path,.cred-hero-label) {
order: 1; margin: 0; padding: 0; min-width: 0;
color: var(--color-ink-muted); font-size: 11px; font-weight: 400; line-height: 1.4;
letter-spacing: normal; text-transform: none; overflow-wrap: anywhere;
}
:root .unified-dialog-header :is(.dialog-header-actions,.header-actions,.issue-detail-header-actions,.detail-header-actions) {
display: flex; align-items: center; flex: 0 0 auto; gap: 8px; margin-left: auto;
}
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]) {
display: inline-flex; align-items: center; justify-content: center;
flex: 0 0 32px; width: 32px; height: 32px; min-width: 32px; min-height: 32px;
padding: 0; margin: 0 0 0 auto; border: 1px solid var(--color-border-subtle);
border-radius: 0; background: var(--color-surface); color: var(--color-ink-muted);
box-shadow: none; transform: none;
}
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]) svg { width: 18px; height: 18px; }
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]):is(:hover,:focus-visible):not(:disabled):not([aria-disabled="true"]) {
color: var(--color-ink); background: var(--color-surface-hover); border-color: var(--color-border-input);
}
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]):focus-visible {
outline: 2px solid var(--color-accent); outline-offset: 2px;
}
@media(max-width:600px) {
:root [class].unified-dialog-header { padding: 12px; gap: 10px; min-height: 64px; flex-wrap: wrap; }
:root .unified-dialog-header .unified-dialog-heading { gap: 10px; }
:root .unified-dialog-header .unified-dialog-text :is(h2,h3,.dialog-title,strong) { font-size: 16px; }
:root .unified-dialog-header .help-search { order: 2; flex: 1 0 100%; width: 100%; max-width: none; }
}
:root .cred-hero:has(> .unified-dialog-header) { padding: 0 0 14px; background: var(--app-dialog-bg); }
:root .cred-hero:has(> .unified-dialog-header) > :is(.cred-hero-copy,.cred-security-note) { margin: 12px 18px 0; }
:root { --dialog-close-hover-ink: #f0646d; }
:root[data-theme="light"] { --dialog-close-hover-ink: #b4232f; }
:root .unified-dialog-header :is(.dialog-close,.dialog-icon-button,.help-close,.cred-close,[data-dialog-close]):hover:not(:disabled):not([aria-disabled="true"]) {
color: var(--dialog-close-hover-ink);
border-color: var(--dialog-close-hover-ink);
background: color-mix(in srgb, var(--dialog-close-hover-ink) 12%, var(--app-dialog-chrome));
}
src/lib/components/AiCommitSplitDialog.svelte
+3 -2
View File
@@ -46,8 +46,9 @@
<div class="dialog-backdrop" role="presentation">
<div class="dialog split-dialog" role="dialog" aria-modal="true" aria-label="AI commit split">
<header class="dialog-header">
<div><span class="eyebrow">Staged changes</span><h2>Split into logical commits</h2></div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><GitCommitHorizontal size={18} /></span>
<div class="unified-dialog-text"><span class="eyebrow">Staged changes</span><h2>Split into logical commits</h2></div>
<button class="dialog-close" type="button" onclick={onClose} disabled={isApplying} aria-label="Close"><X size={18} /></button>
</header>
<div class="split-intro"><Sparkles size={18} /><p>{draft.summary}</p></div>
src/lib/components/AiReviewDialog.svelte
+4 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { AlertTriangle, CircleAlert, FileCode, Info, LoaderCircle, RotateCw, ShieldCheck, X } from "@lucide/svelte";
import {Bot, AlertTriangle, CircleAlert, FileCode, Info, LoaderCircle, RotateCw, ShieldCheck, X } from "@lucide/svelte";
import type { AiReviewFinding, AiReviewResult, CommitAiProvider } from "../types";
interface Props {
@@ -28,8 +28,9 @@
<div class="dialog-backdrop" role="presentation">
<div class="dialog ai-review-dialog" role="dialog" aria-modal="true" aria-label="AI pre-commit review" tabindex="-1">
<header class="dialog-header ai-review-header">
<div>
<header class="dialog-header ai-review-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><Bot size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Staged changes</span>
<h2>AI pre-commit review</h2>
</div>
src/lib/components/AnalyticsNoticeDialog.svelte
+3 -3
View File
@@ -16,12 +16,12 @@
<div class="dialog-backdrop app-chrome-backdrop" role="presentation">
<div class="dialog analytics-notice-dialog" role="dialog" aria-modal="true" aria-label="Analytics notice" tabindex="-1">
<header class="dialog-header">
<div>
<header class="dialog-header unified-dialog-header">
<div class="unified-dialog-text">
<span class="eyebrow">Privacy</span>
<h2 class="dialog-title">Anonymous usage analytics</h2>
</div>
<ShieldCheck size={20} aria-hidden="true" />
<span class="unified-dialog-icon" aria-hidden="true"><ShieldCheck size={20} aria-hidden="true" /></span>
</header>
<div class="analytics-notice-body">
src/lib/components/AppSettingsDialog.svelte
+4 -4
View File
@@ -316,10 +316,10 @@
<div class="dialog-backdrop" role="presentation">
<div class="dialog app-settings-dialog" role="dialog" aria-modal="true" aria-label={isGerman ? "Einstellungen" : "Settings"} tabindex="-1">
<header class="app-settings-head">
<div class="app-settings-title">
<span class="app-settings-mark"><Settings2 size={18} aria-hidden="true" /></span>
<div>
<header class="app-settings-head unified-dialog-header">
<div class="app-settings-title unified-dialog-heading">
<span class="app-settings-mark unified-dialog-icon"><Settings2 size={18} aria-hidden="true" /></span>
<div class="unified-dialog-text">
<h2>{isGerman ? "Einstellungen" : "Settings"}</h2>
<p>{isGerman ? "Gitty an deinen Workflow anpassen" : "Make Gitty fit your workflow"}</p>
</div>
src/lib/components/BisectDialog.svelte
+4 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { AlertTriangle, Bug, Check, GitCommitHorizontal, LoaderCircle, Play, RotateCcw, SkipForward, X } from "@lucide/svelte";
import {GitBranch, AlertTriangle, Bug, Check, GitCommitHorizontal, LoaderCircle, Play, RotateCcw, SkipForward, X } from "@lucide/svelte";
import type { BisectState } from "../types";
interface Props {
@@ -24,8 +24,9 @@
<div class="dialog-backdrop app-chrome-backdrop" role="presentation">
<div class="dialog bisect-dialog" role="dialog" aria-modal="true" aria-label={de ? "Geführtes Git Bisect" : "Guided Git bisect"} tabindex="-1">
<header class="dialog-header">
<div><span class="eyebrow">{de ? "Fehlerursache eingrenzen" : "Find the regression"}</span><h2 class="dialog-title">Git Bisect</h2></div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><GitBranch size={18} /></span>
<div class="unified-dialog-text"><span class="eyebrow">{de ? "Fehlerursache eingrenzen" : "Find the regression"}</span><h2 class="dialog-title">Git Bisect</h2></div>
<button class="dialog-close" type="button" onclick={onClose} disabled={isBusy} title={de ? "Schließen" : "Close"}><X size={18} aria-hidden="true" /></button>
</header>
src/lib/components/BlameDialog.svelte
+4 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { FileCode, LoaderCircle, Search, X } from "@lucide/svelte";
import {FileText, FileCode, LoaderCircle, Search, X } from "@lucide/svelte";
import type { GitBlameLine } from "../types";
const commitDateFormatter = new Intl.DateTimeFormat(undefined, {
@@ -133,8 +133,9 @@
<div class="dialog-backdrop" role="presentation">
<div class="dialog blame-dialog" role="dialog" aria-modal="true" aria-label="File blame">
<header class="dialog-header">
<div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><FileText size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Blame</span>
<p class="dialog-title" title={filePath}>{filePath}</p>
</div>
src/lib/components/BranchDeleteConfirmDialog.svelte
+4 -4
View File
@@ -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>
src/lib/components/CloneRepositoryDialog.svelte
+3 -2
View File
@@ -294,8 +294,9 @@
<div class="dialog-backdrop" role="presentation">
<div class="dialog clone-repository-dialog" role="dialog" aria-modal="true" aria-label={isGerman ? "Repository klonen" : "Clone repository"} tabindex="-1">
<header class="dialog-header clone-dialog-header">
<div><h2>{isGerman ? "Repository klonen" : "Clone a Repository"}</h2></div>
<header class="dialog-header clone-dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><Download size={18} /></span>
<div class="unified-dialog-text"><h2>{isGerman ? "Repository klonen" : "Clone a Repository"}</h2></div>
<button class="dialog-close" type="button" onclick={onClose} disabled={isBusy} title={isGerman ? "Schließen" : "Close"} aria-label={isGerman ? "Klonen schließen" : "Close clone dialog"}><X size={18} /></button>
</header>
src/lib/components/CommandPalette.svelte
+7 -2
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { onMount } from "svelte";
import {
ArrowDownToLine, ArrowUpFromLine, Boxes, Bug, CircleHelp, FileCode, GitBranch,
X, ArrowDownToLine, ArrowUpFromLine, Boxes, Bug, CircleHelp, FileCode, GitBranch,
GitCompare, History, RefreshCw, Search, Settings, SlidersHorizontal, Sparkles,
} from "@lucide/svelte";
import type { AppLanguage, GitBranch as GitBranchInfo, GitCommit, GitRepositoryFile } from "../types";
@@ -99,6 +99,11 @@
<div class="command-palette-backdrop" role="presentation" onclick={(event) => { if (event.target === event.currentTarget) onClose(); }}>
<div class="command-palette" role="dialog" aria-modal="true" aria-label={isGerman ? "Befehlspalette" : "Command palette"}>
<header class="unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><Search size={18}/></span>
<div class="unified-dialog-text"><h2>{isGerman ? "Befehlspalette" : "Command palette"}</h2></div>
<button data-dialog-close type="button" onclick={onClose} aria-label={isGerman ? "Schließen" : "Close"}><X size={18}/></button>
</header>
<div class="command-palette-search">
<Search size={19} aria-hidden="true" />
<input bind:this={inputElement} bind:value={query} onkeydown={handleKeydown} placeholder={isGerman ? "Aktion, Branch, Datei oder Commit suchen…" : "Search actions, branches, files, or commits…"} aria-label={isGerman ? "Befehl suchen" : "Search commands"} autocomplete="off" spellcheck="false" />
@@ -139,7 +144,7 @@
<style>
.command-palette-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: start center; padding: min(14vh, 120px) 20px 20px; background: color-mix(in srgb, var(--app-dialog-backdrop) 76%, transparent); backdrop-filter: blur(7px) saturate(.82); }
.command-palette { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(720px, 100%); max-height: min(650px, 76vh); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: 14px; background: var(--app-dialog-bg); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.command-palette { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; width: min(720px, 100%); max-height: min(650px, 76vh); overflow: hidden; border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border)); border-radius: 14px; background: var(--app-dialog-bg); box-shadow: 0 28px 90px rgba(0,0,0,.42); }
.command-palette-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 15px 17px; border-bottom: 1px solid var(--color-border); color: var(--color-primary); }
.command-palette-search input { min-width: 0; border: 0; outline: 0; color: var(--color-ink); background: transparent; font: inherit; font-size: 15px; }
.command-palette-search input::placeholder { color: var(--color-ink-dim); }
src/lib/components/CommitNoteDialog.svelte
+4 -4
View File
@@ -132,10 +132,10 @@
<div class="dialog-backdrop app-chrome-backdrop commit-note-backdrop" role="presentation">
<div class="commit-note-dialog" role="dialog" aria-modal="true" aria-labelledby="commit-note-title" tabindex="-1">
<header class="commit-note-head">
<div class="commit-note-heading">
<span class="commit-note-icon"><StickyNote size={20} aria-hidden="true" /></span>
<div>
<header class="commit-note-head unified-dialog-header">
<div class="commit-note-heading unified-dialog-heading">
<span class="commit-note-icon unified-dialog-icon"><StickyNote size={20} aria-hidden="true" /></span>
<div class="unified-dialog-text">
<span class="eyebrow">{text.eyebrow}</span>
<h2 id="commit-note-title">{text.title}</h2>
</div>
src/lib/components/CompareDialog.svelte
+4 -4
View File
@@ -229,10 +229,10 @@
>
<div class="dialog compare-dialog" role="dialog" aria-modal="true" aria-label="Branch or commit comparison" tabindex="-1">
<header class="compare-dialog-head">
<div class="compare-dialog-title">
<span class="compare-dialog-mark"><GitCompare size={18} aria-hidden="true" /></span>
<div>
<header class="compare-dialog-head unified-dialog-header">
<div class="compare-dialog-title unified-dialog-heading">
<span class="compare-dialog-mark unified-dialog-icon"><GitCompare size={18} aria-hidden="true" /></span>
<div class="unified-dialog-text">
<h2>{isGerman ? "Änderungen vergleichen" : "Compare changes"}</h2>
<p class="dialog-range">
<span class="hash" title={comparison.from_hash}>{fromLabel || comparison.from_short}</span>
src/lib/components/CompareSelectDialog.svelte
+4 -4
View File
@@ -75,10 +75,10 @@
role="presentation"
>
<div class="dialog compare-select-dialog" role="dialog" aria-modal="true" aria-label={isGerman ? "Branches oder Commits vergleichen" : "Compare branches or commits"} tabindex="-1">
<header class="compare-dialog-head">
<div class="compare-dialog-title">
<span class="compare-dialog-mark"><GitCompare size={18} aria-hidden="true" /></span>
<div>
<header class="compare-dialog-head unified-dialog-header">
<div class="compare-dialog-title unified-dialog-heading">
<span class="compare-dialog-mark unified-dialog-icon"><GitCompare size={18} aria-hidden="true" /></span>
<div class="unified-dialog-text">
<h2>{isGerman ? "Branches oder Commits vergleichen" : "Compare branches or commits"}</h2>
<p>{isGerman ? "Zwei Repository-Stände direkt gegenüberstellen" : "Review two repository states side by side"}</p>
</div>
src/lib/components/CreateIssueDialog.svelte
+1 -1
View File
@@ -85,7 +85,7 @@
<dialog bind:this={dialog} aria-labelledby="create-issue-title" oncancel={event => { event.preventDefault(); if (!busy) onClose(); }}>
<form onsubmit={submit}>
<header><CirclePlus size={20}/><div><h2 id="create-issue-title">{de ? "Neues Issue" : "New issue"}</h2><p>{source.label}</p></div><button class="dialog-close" type="button" aria-label={de ? "Schließen" : "Close"} disabled={busy} onclick={onClose}><X size={18}/></button></header>
<header class="unified-dialog-header"><span class="unified-dialog-icon" aria-hidden="true"><CirclePlus size={20}/></span><div class="unified-dialog-text"><h2 id="create-issue-title">{de ? "Neues Issue" : "New issue"}</h2><p>{source.label}</p></div><button class="dialog-close" type="button" aria-label={de ? "Schließen" : "Close"} disabled={busy} onclick={onClose}><X size={18}/></button></header>
<div class="body">
<div class="field"><span>{azure ? (de ? "Projekt" : "Project") : "Repository"}</span>
<SelectMenu value={repository} options={targets} showSelectedGroup searchable disabled={loading || busy} ariaLabel={azure ? (de ? "Projekt" : "Project") : "Repository"} placeholder={loading ? (de ? "Wird geladen …" : "Loading …") : (de ? "Bitte auswählen" : "Select an option")} searchPlaceholder={de ? "Suchen …" : "Search …"} onChange={value => void selectTarget(value)}/>
src/lib/components/CreateReviewDialog.svelte
+1 -1
View File
@@ -125,7 +125,7 @@
<dialog bind:this={dialog} aria-labelledby="create-review-title" oncancel={(event) => { event.preventDefault(); if (!busy && !generating) onClose(); }} onclick={(event) => { if (event.target === dialog && !busy && !generating) { const rect = dialog.getBoundingClientRect(); if (event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom) onClose(); } }}>
<form onsubmit={submit}>
<header><div class="heading-icon"><GitPullRequest size={19} /></div><div><h2 id="create-review-title">{heading}</h2><p>{source.label}</p></div><button data-dialog-close class="close" type="button" aria-label={de ? "Schließen" : "Close"} disabled={generating || busy} onclick={onClose}><X size={18}/></button></header>
<header class="unified-dialog-header"><div class="heading-icon unified-dialog-icon"><GitPullRequest size={19} /></div><div class="unified-dialog-text"><h2 id="create-review-title">{heading}</h2><p>{source.label}</p></div><button data-dialog-close class="close" type="button" aria-label={de ? "Schließen" : "Close"} disabled={generating || busy} onclick={onClose}><X size={18}/></button></header>
<div class="body">
{#if error}<div class="error" role="alert">{error}{#if !repositories.length && !loading}<button type="button" onclick={loadRepositories}>{de ? "Erneut laden" : "Retry"}</button>{/if}</div>{/if}
<div class="repository-field"><div class="field-heading"><span>Repository</span><small>{loading ? "…" : `${repositories.length} ${de ? "verfügbar" : "available"}`}</small></div>
src/lib/components/CredentialDialog.svelte
+4 -4
View File
@@ -80,17 +80,17 @@
>
<div class="cred-card" role="dialog" aria-modal="true" aria-label="Git credentials" tabindex="-1">
<div class="cred-hero">
<div class="cred-hero-top">
<div class="cred-hero-icon">
<div class="cred-hero-top unified-dialog-header">
<div class="cred-hero-icon unified-dialog-icon">
{#if action === "push" || action === "rename" || action === "delete"}
<Upload size={27} aria-hidden="true" />
{:else}
<Download size={27} aria-hidden="true" />
{/if}
</div>
<div class="cred-hero-text">
<div class="cred-hero-text unified-dialog-text">
<p class="cred-hero-label">{actionLabel} Remote</p>
<h2 class="cred-hero-title">{actionTitle}</h2>
<h2 class="cred-hero-title dialog-title">{actionTitle}</h2>
</div>
<button class="cred-close" type="button" onclick={onCancel} title="Cancel" aria-label="Cancel">
<X size={16} aria-hidden="true" />
src/lib/components/DiscardConfirmDialog.svelte
+4 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { AlertTriangle, LoaderCircle, RotateCcw, X } from "@lucide/svelte";
import {Trash2, AlertTriangle, LoaderCircle, RotateCcw, X } from "@lucide/svelte";
import type { GitFileStatus } from "../types";
interface Props {
@@ -35,8 +35,9 @@
<div class="dialog-backdrop" role="presentation">
<div class="dialog discard-confirm-dialog" role="dialog" aria-modal="true" aria-label={title}>
<header class="dialog-header">
<div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><Trash2 size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Confirm discard</span>
<p class="dialog-title">{title}</p>
</div>
src/lib/components/FileHistoryDialog.svelte
+3 -3
View File
@@ -46,9 +46,9 @@
<div class="dialog-backdrop app-chrome-backdrop file-history-dialog-backdrop" role="presentation" onclick={closeFromBackdrop}>
<div class="file-history-dialog" role="dialog" aria-modal="true" aria-labelledby="file-history-dialog-title" tabindex="-1">
<header class="file-history-dialog-header">
<div class="file-history-dialog-icon" aria-hidden="true"><History size={19} /></div>
<div class="file-history-dialog-heading">
<header class="file-history-dialog-header unified-dialog-header">
<div class="file-history-dialog-icon unified-dialog-icon" aria-hidden="true"><History size={19} /></div>
<div class="file-history-dialog-heading unified-dialog-text">
<span class="eyebrow">File history</span>
<h2 id="file-history-dialog-title">{fileName(filePath)}</h2>
<span class="file-history-dialog-path" title={filePath}>{filePath}</span>
src/lib/components/GitLfsDialog.svelte
+4 -4
View File
@@ -91,10 +91,10 @@
<div class="dialog-backdrop" role="presentation">
<div class="dialog lfs-dialog" role="dialog" aria-modal="true" aria-labelledby="lfs-dialog-title">
<header class="dialog-header lfs-dialog-header">
<div class="lfs-heading">
<span class="lfs-mark" aria-hidden="true"><Box size={19} /></span>
<div>
<header class="dialog-header lfs-dialog-header unified-dialog-header">
<div class="lfs-heading unified-dialog-heading">
<span class="lfs-mark unified-dialog-icon" aria-hidden="true"><Box size={19} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Large file storage</span>
<p class="dialog-title" id="lfs-dialog-title">Git LFS</p>
</div>
src/lib/components/GlobalSearchDialog.svelte
+3 -2
View File
@@ -137,8 +137,9 @@
role="presentation"
>
<div class="dialog global-search-dialog" role="dialog" aria-modal="true" aria-label="Global search" tabindex="-1">
<header class="dialog-header">
<div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><Search size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Global search</span>
<h2 class="dialog-title">{activeTab === "code" ? "Find where code was introduced" : "Find file history"}</h2>
</div>
src/lib/components/HelpOverlay.svelte
+4 -4
View File
@@ -1932,10 +1932,10 @@
<div class="help-backdrop" role="presentation" onclick={handleBackdropClick}>
<div class="help-overlay" role="dialog" aria-modal="true" aria-labelledby="help-title">
<header class="help-header">
<div class="help-title-wrap">
<span class="help-mark"><CircleHelp size={19} aria-hidden="true" /></span>
<div>
<header class="help-header unified-dialog-header">
<div class="help-title-wrap unified-dialog-heading">
<span class="help-mark unified-dialog-icon"><CircleHelp size={19} aria-hidden="true" /></span>
<div class="unified-dialog-text">
<h2 id="help-title">{isGerman ? "Gitty Hilfe" : "Gitty Help"}</h2>
<p>{isGerman ? "App-Anleitung und Git-Wissen an einem Ort" : "App guidance and Git knowledge in one place"}</p>
</div>
src/lib/components/HistoryPanel.svelte
+3 -2
View File
@@ -1167,8 +1167,9 @@
aria-modal="true"
aria-label="Select visible branches"
>
<header class="branch-filter-dialog-head">
<div>
<header class="branch-filter-dialog-head unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><GitBranch size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Git graph</span>
<h3>Visible branches</h3>
</div>
src/lib/components/InitRepositoryDialog.svelte
+4 -4
View File
@@ -68,10 +68,10 @@
aria-labelledby="init-repository-title"
tabindex="-1"
>
<header class="dialog-header init-repository-header">
<div class="init-repository-heading">
<span class="init-repository-icon" aria-hidden="true"><Plus size={18} /></span>
<div>
<header class="dialog-header init-repository-header unified-dialog-header">
<div class="init-repository-heading unified-dialog-heading">
<span class="init-repository-icon unified-dialog-icon" aria-hidden="true"><Plus size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">{isGerman ? "Neues Repository" : "New repository"}</span>
<h2 id="init-repository-title">{isGerman ? "Repository initialisieren" : "Initialize repository"}</h2>
</div>
src/lib/components/IntegrationBoardView.svelte
+2 -2
View File
@@ -252,8 +252,8 @@
{#if selected}
{@const selectedColumn = board.columns.find(column => column.id === selectedColumnId)}
<aside class="issue-detail-drawer" aria-label={de ? "Kartendetails" : "Card details"}>
<header class="issue-detail-header">
<div><Columns3 size={17} /><strong>{source.label} · {de ? "Karte" : "Card"}</strong></div>
<header class="issue-detail-header unified-dialog-header">
<div class="unified-dialog-heading"><span class="unified-dialog-icon" aria-hidden="true"><Columns3 size={17} /></span><div class="unified-dialog-text"><strong>{source.label} · {de ? "Karte" : "Card"}</strong></div></div>
<div class="issue-detail-header-actions">
{#if selected.webUrl}<button class="workspace-button close-button" onclick={() => openOriginal(selected!.webUrl)} aria-label={de ? "Im Anbieter öffnen" : "Open in provider"}><ExternalLink size={16} /></button>{/if}
<button data-dialog-close class="workspace-button close-button" onclick={() => { selected = null; }} aria-label={de ? "Kartendetails schließen" : "Close card details"}><X size={17} /></button>
src/lib/components/InteractiveRebaseDialog.svelte
+4 -3
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { AlertTriangle, ArrowDown, ArrowUp, GitBranch, LoaderCircle, Play, X } from "@lucide/svelte";
import {GitMerge, AlertTriangle, ArrowDown, ArrowUp, GitBranch, LoaderCircle, Play, X } from "@lucide/svelte";
import type { GitBranch as GitBranchInfo, RebaseAction, RebaseCommit, RebasePlanItem } from "../types";
import SelectMenu from "./SelectMenu.svelte";
@@ -72,8 +72,9 @@
<div class="dialog-backdrop app-chrome-backdrop" role="presentation">
<div class="dialog interactive-rebase-dialog" role="dialog" aria-modal="true" aria-label="Interactive rebase" tabindex="-1">
<header class="dialog-header">
<div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><GitMerge size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Rewrite local history</span>
<h2 class="dialog-title">Interactive rebase</h2>
</div>
src/lib/components/IssueCenter.svelte
+2 -2
View File
@@ -302,8 +302,8 @@
</div>
{#if selected}
<aside bind:this={detailPanel} class="issue-detail-drawer" aria-label={de ? "Issue-Details" : "Issue details"} transition:fly={{ x: 140, duration: reduceMotion ? 0 : 210, easing: cubicOut }}>
<header class="issue-detail-header">
<div><CircleDot size={17} /><strong>{source?.label} · Issue</strong></div>
<header class="issue-detail-header unified-dialog-header">
<div class="unified-dialog-heading"><span class="unified-dialog-icon" aria-hidden="true"><CircleDot size={17} /></span><div class="unified-dialog-text"><strong>{source?.label} · Issue</strong></div></div>
<div class="issue-detail-header-actions">
{#if selected.webUrl}<button class="workspace-button close-button" onclick={() => openIssue(selected!.webUrl)} aria-label={de ? "Im Anbieter öffnen" : "Open in provider"}><ExternalLink size={16} /></button>{/if}
<button data-dialog-close class="workspace-button close-button" onclick={closeDetails} aria-label={de ? "Details schließen" : "Close details"}><X size={17} /></button>
src/lib/components/LinePatchDialog.svelte
+2 -2
View File
@@ -297,8 +297,8 @@
<div class="dialog-backdrop app-chrome-backdrop" role="presentation">
<div class="dialog line-patch-dialog" role="dialog" aria-modal="true" aria-label={t("Geänderte Zeilen", "Changed lines")}>
<header class="dialog-header">
<div class="patch-identity"><FileDiff size={23} aria-hidden="true" /><div><p class="dialog-title" title={displayPath}>{displayPath}</p><span class="patch-scope">{scopeLabel}</span></div></div>
<header class="dialog-header unified-dialog-header">
<div class="patch-identity unified-dialog-heading"><span class="unified-dialog-icon" aria-hidden="true"><FileDiff size={23} aria-hidden="true" /></span><div class="unified-dialog-text"><p class="dialog-title" title={displayPath}>{displayPath}</p><span class="patch-scope">{scopeLabel}</span></div></div>
<div class="dialog-header-actions">
<button class="external-diff" type="button" onclick={onExternalDiff} disabled={isBusy || isLoading} title={t(`In ${diffName} öffnen`, `Open in ${diffName}`)}><span>{t("Extern öffnen", "Open externally")}</span><ExternalLink size={14} /><span>·</span><span>{diffName}</span></button>
<button class="icon-action" type="button" onclick={onRefresh} disabled={isBusy || isLoading} aria-label={t("Aktualisieren", "Refresh")} title={t("Aktualisieren", "Refresh")}><RefreshCw size={16} /></button>
src/lib/components/MergeBranchDialog.svelte
+4 -4
View File
@@ -63,10 +63,10 @@
<div class="dialog-backdrop app-chrome-backdrop" role="presentation">
<div class="dialog merge-branch-dialog" role="dialog" aria-modal="true" aria-labelledby="merge-branch-title" tabindex="-1">
<header class="dialog-header merge-branch-header">
<div class="merge-branch-heading">
<span class="merge-branch-icon" aria-hidden="true"><GitMerge size={18} /></span>
<div>
<header class="dialog-header merge-branch-header unified-dialog-header">
<div class="merge-branch-heading unified-dialog-heading">
<span class="merge-branch-icon unified-dialog-icon" aria-hidden="true"><GitMerge size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">{isGerman ? "Branches zusammenführen" : "Combine branches"}</span>
<h2 id="merge-branch-title">{isGerman ? "Merge konfigurieren" : "Configure merge"}</h2>
</div>
src/lib/components/NewBranchDialog.svelte
+3 -2
View File
@@ -31,8 +31,9 @@
role="presentation"
>
<div class="dialog new-branch-dialog" role="dialog" aria-modal="true" aria-label="Create branch from commit" tabindex="-1">
<header class="dialog-header">
<div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><GitBranch size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">New branch</span>
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">From commit</h2>
</div>
src/lib/components/ReflogDialog.svelte
+3 -2
View File
@@ -33,8 +33,9 @@
<div class="dialog-backdrop app-chrome-backdrop" role="presentation">
<div class="dialog reflog-dialog" role="dialog" aria-modal="true" aria-label="Reflog" tabindex="-1">
<header class="dialog-header">
<div><span class="eyebrow">Recovery history</span><h2 class="dialog-title">Reflog</h2></div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><History size={18} /></span>
<div class="unified-dialog-text"><span class="eyebrow">Recovery history</span><h2 class="dialog-title">Reflog</h2></div>
<button class="dialog-close" type="button" onclick={onClose} disabled={isBusy} title="Close"><X size={18} aria-hidden="true" /></button>
</header>
<div class="reflog-body">
src/lib/components/RenameBranchDialog.svelte
+3 -2
View File
@@ -50,8 +50,9 @@
role="presentation"
>
<div class="dialog rename-branch-dialog" role="dialog" aria-modal="true" aria-label={branch.remote ? "Rename remote branch" : "Rename branch"} tabindex="-1">
<header class="dialog-header">
<div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><GitBranch size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">{branch.remote ? "Rename remote branch" : "Rename branch"}</span>
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">{branch.name}</h2>
</div>
src/lib/components/RepositoryDashboard.svelte
+2 -1
View File
@@ -228,7 +228,8 @@
<dialog class="workspace-dialog" bind:this={workspaceDialog} aria-labelledby="workspace-title">
<form onsubmit={createWorkspace}>
<header><h2 id="workspace-title">{editingWorkspaceId ? (de ? "Workspace bearbeiten" : "Edit workspace") : (de ? "Workspace anlegen" : "Create workspace")}</h2><button data-dialog-close type="button" onclick={() => workspaceDialog.close()} aria-label={de ? "Dialog schließen" : "Close dialog"}><X size={14} /></button></header>
<header class="unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><FolderGit2 size={18} /></span><div class="unified-dialog-text"><h2 id="workspace-title">{editingWorkspaceId ? (de ? "Workspace bearbeiten" : "Edit workspace") : (de ? "Workspace anlegen" : "Create workspace")}</h2></div><button data-dialog-close type="button" onclick={() => workspaceDialog.close()} aria-label={de ? "Dialog schließen" : "Close dialog"}><X size={14} /></button></header>
<label for="workspace-name">Name</label>
<input id="workspace-name" bind:this={workspaceInput} bind:value={workspaceName} maxlength="64" autocomplete="off" aria-invalid={Boolean(workspaceError)} />
{#if workspaceError}<p class="dialog-error" role="alert">{workspaceError}</p>{/if}
src/lib/components/ResolveDialog.svelte
+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>
src/lib/components/ReviewCenter.svelte
+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">
src/lib/components/SyncSettingsDialog.svelte
+4 -4
View File
@@ -59,10 +59,10 @@
<div class="dialog-backdrop" role="presentation">
<div class="sync-settings-dialog" role="dialog" aria-modal="true" aria-labelledby="sync-settings-title">
<header class="sync-settings-head">
<div class="sync-settings-title">
<span class="sync-settings-icon"><Cloud size={18} aria-hidden="true" /></span>
<div><span class="eyebrow">Git sync</span><h2 id="sync-settings-title">{de ? "Synchronisierung & Remotes" : "Sync & remotes"}</h2></div>
<header class="sync-settings-head unified-dialog-header">
<div class="sync-settings-title unified-dialog-heading">
<span class="sync-settings-icon unified-dialog-icon"><Cloud size={18} aria-hidden="true" /></span>
<div class="unified-dialog-text"><span class="eyebrow">Git sync</span><h2 id="sync-settings-title">{de ? "Synchronisierung & Remotes" : "Sync & remotes"}</h2></div>
</div>
<button class="dialog-icon-button" type="button" onclick={onClose} disabled={isBusy} aria-label={de ? "Schließen" : "Close"}><X size={17} /></button>
</header>
src/lib/components/WorktreeDialog.svelte
+12 -8
View File
@@ -199,10 +199,10 @@
<div class="dialog-backdrop" role="presentation">
<div class="dialog worktree-dialog" role="dialog" aria-modal="true" aria-labelledby="worktree-dialog-title">
<header class="dialog-header worktree-dialog-header">
<div class="worktree-dialog-heading">
<span class="worktree-dialog-mark" aria-hidden="true"><HardDrive size={18} /></span>
<div>
<header class="dialog-header worktree-dialog-header unified-dialog-header">
<div class="worktree-dialog-heading unified-dialog-heading">
<span class="worktree-dialog-mark unified-dialog-icon" aria-hidden="true"><HardDrive size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Parallel workspaces</span>
<p class="dialog-title" id="worktree-dialog-title">Worktrees</p>
</div>
@@ -408,11 +408,13 @@
{#if pendingRemoval}
<div class="dialog-backdrop worktree-nested-backdrop" role="presentation">
<div class="dialog worktree-confirm-dialog" role="alertdialog" aria-modal="true" aria-labelledby="worktree-remove-title">
<header class="dialog-header">
<div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><HardDrive size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Remove worktree</span>
<p class="dialog-title" id="worktree-remove-title">Remove {displayName(pendingRemoval)}?</p>
</div>
<button class="dialog-close" type="button" onclick={() => { pendingRemoval = null; }} disabled={isBusy} aria-label="Cancel removal"><X size={18} /></button>
</header>
<div class="worktree-confirm-body">
<span class="discard-warning-icon" aria-hidden="true"><AlertTriangle size={21} /></span>
@@ -440,11 +442,13 @@
{#if pendingLock}
<div class="dialog-backdrop worktree-nested-backdrop" role="presentation">
<div class="dialog worktree-confirm-dialog" role="dialog" aria-modal="true" aria-labelledby="worktree-lock-title">
<header class="dialog-header">
<div>
<header class="dialog-header unified-dialog-header">
<span class="unified-dialog-icon" aria-hidden="true"><HardDrive size={18} /></span>
<div class="unified-dialog-text">
<span class="eyebrow">Protect worktree</span>
<p class="dialog-title" id="worktree-lock-title">Lock {displayName(pendingLock)}</p>
</div>
<button class="dialog-close" type="button" onclick={() => { pendingLock = null; }} disabled={isBusy} aria-label="Cancel locking"><X size={18} /></button>
</header>
<div class="worktree-lock-body">
<label>