Christoph
d26d2ac982
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.
93 lines
3.7 KiB
Svelte
93 lines
3.7 KiB
Svelte
<script lang="ts">
|
|
import { AlertTriangle, GitBranch, LoaderCircle, Trash2, X } from "@lucide/svelte";
|
|
import type { GitBranch as GitBranchInfo } from "../types";
|
|
|
|
interface Props {
|
|
branch: GitBranchInfo;
|
|
force: boolean;
|
|
isBusy: boolean;
|
|
onConfirm: () => void | Promise<void>;
|
|
onClose: () => void;
|
|
}
|
|
|
|
let {
|
|
branch,
|
|
force = false,
|
|
isBusy = false,
|
|
onConfirm = () => {},
|
|
onClose = () => {},
|
|
}: Props = $props();
|
|
|
|
let title = $derived(branch.remote ? "Delete remote branch?" : force ? "Force delete branch?" : "Delete branch?");
|
|
let remoteParts = $derived(branch.remote ? branch.name.split(/\/(.+)/) : []);
|
|
let branchName = $derived(branch.remote ? remoteParts[1] || branch.name : branch.name);
|
|
let branchLocation = $derived(branch.remote ? remoteParts[0] || "Remote" : "Local repository");
|
|
|
|
</script>
|
|
|
|
<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 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 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>
|
|
</div>
|
|
<button class="btn-sm dialog-close" type="button" onclick={onClose} disabled={isBusy} aria-label="Close">
|
|
<X size={16} aria-hidden="true" />
|
|
</button>
|
|
</header>
|
|
|
|
<div class="branch-delete-body">
|
|
<div class:force class="discard-warning-icon branch-delete-warning-icon" aria-hidden="true">
|
|
<AlertTriangle size={22} />
|
|
</div>
|
|
|
|
<div class="discard-confirm-copy">
|
|
<p class="branch-delete-lead">
|
|
{#if branch.remote}
|
|
This branch will be removed from the shared remote repository.
|
|
{:else if force}
|
|
This branch is not fully merged. Some commits may only exist here.
|
|
{:else}
|
|
This branch will be removed from your local repository.
|
|
{/if}
|
|
</p>
|
|
<div class="branch-delete-target" title={branch.name}>
|
|
<span class="branch-delete-target-icon" aria-hidden="true"><GitBranch size={16} /></span>
|
|
<span class="branch-delete-target-copy">
|
|
<code>{branchName}</code>
|
|
<span>{branchLocation}</span>
|
|
</span>
|
|
<span class:remote={branch.remote} class="branch-delete-scope">{branch.remote ? "Remote" : "Local"}</span>
|
|
</div>
|
|
<p class="discard-warning-text">
|
|
{#if branch.remote}
|
|
This affects everyone using <strong>{remoteParts[0] || "the remote"}</strong>. Your local branch is kept.
|
|
{:else if force}
|
|
Force deletion can make unmerged commits difficult to recover.
|
|
{:else}
|
|
Git will stop the deletion if the branch contains unmerged commits.
|
|
{/if}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="discard-confirm-actions">
|
|
<button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>Cancel</button>
|
|
<button class="btn-danger branch-delete-confirm" type="button" onclick={onConfirm} disabled={isBusy}>
|
|
{#if isBusy}
|
|
<LoaderCircle class="spin" size={15} aria-hidden="true" />
|
|
{:else}
|
|
<Trash2 size={15} aria-hidden="true" />
|
|
{/if}
|
|
{branch.remote ? "Delete from remote" : force ? "Force delete" : "Delete"}
|
|
</button>
|
|
</footer>
|
|
</div>
|
|
</div>
|