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

feat(ui): enhance branch delete confirmation flow

Browse Source 
This update introduces a comprehensive and visually refined dialog component for confirming the deletion of branches. The logic now correctly distinguishes between deleting local and remote branches, providing tailored warnings and context to the user. Corresponding global styles were updated to implement the new layout and visual fidelity for this specific dialog type.

- Implements structured display for branch name and location
- Improves distinction between local and remote delete contexts
- Updates backdrop filter CSS properties for better compatibility
This commit is contained in:
Christoph Brandau
2026-07-23 00:33:17 +02:00
parent 6aed0b933e
commit 27c8b40dc6
2 changed files with 121 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/BranchDeleteConfirmDialog.svelte
+28 -17
View File
@@ -20,15 +20,22 @@
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-label={title}>
<header class="dialog-header">
<div>
<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">
<Trash2 size={16} />
</span>
<div>
<span class="eyebrow">{branch.remote ? "Remote branch" : force ? "Force delete" : "Delete branch"}</span>
<p class="dialog-title">{title}</p>
<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" />
@@ -36,31 +43,35 @@
</header>
<div class="branch-delete-body">
<div class="discard-warning-icon" aria-hidden="true">
<div class:force class="discard-warning-icon branch-delete-warning-icon" aria-hidden="true">
<AlertTriangle size={22} />
</div>
<div class="discard-confirm-copy">
<p>
<p class="branch-delete-lead">
{#if branch.remote}
Delete this branch from the remote server?
This branch will be removed from the shared remote repository.
{:else if force}
This branch is not fully merged. Force deleting removes the branch pointer even if some commits are only reachable from this branch.
This branch is not fully merged. Some commits may only exist here.
{:else}
Delete this local branch from the repository?
This branch will be removed from your local repository.
{/if}
</p>
<code class="discard-target" title={branch.name}>
<GitBranch size={13} aria-hidden="true" />
{branch.name}
</code>
<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 commits and local branches are kept.
This affects everyone using <strong>{remoteParts[0] || "the remote"}</strong>. Your local branch is kept.
{:else if force}
Make sure you no longer need the unique commits on this branch.
Force deletion can make unmerged commits difficult to recover.
{:else}
Git will refuse if the branch is not fully merged.
Git will stop the deletion if the branch contains unmerged commits.
{/if}
</p>
</div>
@@ -68,7 +79,7 @@
<footer class="discard-confirm-actions">
<button class="btn-secondary" type="button" onclick={onClose} disabled={isBusy}>Cancel</button>
<button class="btn-danger" type="button" onclick={onConfirm} disabled={isBusy}>
<button class="btn-danger branch-delete-confirm" type="button" onclick={onConfirm} disabled={isBusy}>
{#if isBusy}
<LoaderCircle class="spin" size={15} aria-hidden="true" />
{:else}