From 27c8b40dc62f4981bbfc6403e09a9c0bbae2fc90 Mon Sep 17 00:00:00 2001 From: Christoph Brandau Date: Thu, 23 Jul 2026 00:33:17 +0200 Subject: [PATCH] feat(ui): enhance branch delete confirmation flow 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 --- src/app.css | 96 ++++++++++++++++++- .../BranchDeleteConfirmDialog.svelte | 45 +++++---- 2 files changed, 121 insertions(+), 20 deletions(-) diff --git a/src/app.css b/src/app.css index bd9a1ff..4fa3ae5 100644 --- a/src/app.css +++ b/src/app.css @@ -37,7 +37,7 @@ --app-select-option-bg: #171d2b; --app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.038), transparent 70%); --app-panel-shadow: 0 18px 48px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.045); - --app-dialog-backdrop: #070a10; + --app-dialog-backdrop: rgba(4, 7, 12, 0.58); --app-dialog-bg: #101622; --app-dialog-chrome: #141b29; --app-dialog-shadow: 0 24px 68px rgba(0, 0, 0, 0.54), 0 2px 12px rgba(0,0,0,0.32); @@ -103,7 +103,7 @@ --app-select-option-bg: #ffffff; --app-panel-highlight: linear-gradient(180deg, rgba(255,255,255,0.72), transparent 70%); --app-panel-shadow: 0 18px 48px rgba(28, 44, 74, 0.12), inset 0 1px 0 rgba(255,255,255,0.86); - --app-dialog-backdrop: rgba(232, 238, 248, 0.96); + --app-dialog-backdrop: rgba(222, 229, 241, 0.56); --app-dialog-bg: #ffffff; --app-dialog-chrome: #f4f7fc; --app-dialog-shadow: 0 24px 72px rgba(28, 44, 74, 0.2), 0 2px 12px rgba(28,44,74,0.1); @@ -3057,6 +3057,8 @@ padding: 24px; background-color: var(--app-dialog-backdrop); background-image: none; + -webkit-backdrop-filter: blur(10px) saturate(0.78); + backdrop-filter: blur(10px) saturate(0.78); } .app-chrome-backdrop { @@ -3249,6 +3251,16 @@ max-height: calc(100vh - 32px); overflow: auto; } + .branch-delete-dialog { + display: grid; + grid-template-rows: auto auto auto; + width: min(500px, calc(100vw - 32px)); + height: auto; + max-height: calc(100vh - 32px); + border-color: rgba(255, 90, 103, 0.22); + box-shadow: var(--app-dialog-shadow), 0 0 0 1px rgba(255, 90, 103, 0.04); + overflow: auto; + } .ai-settings-dialog { display: block; width: min(560px, calc(100vw - 32px)); @@ -3753,7 +3765,30 @@ display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; - padding: 18px 16px 16px; + padding: 20px 18px 18px; + } + .branch-delete-header { + padding: 15px 16px; + background: + linear-gradient(90deg, rgba(255, 90, 103, 0.08), transparent 42%), + var(--app-dialog-chrome); + } + .branch-delete-heading { display: flex; align-items: center; gap: 11px; } + .branch-delete-heading-icon { + display: grid; + place-items: center; + width: 32px; + height: 32px; + flex: 0 0 auto; + border: 1px solid rgba(255, 90, 103, 0.28); + border-radius: 8px; + color: #ff9aa4; + background: rgba(255, 90, 103, 0.09); + } + .branch-delete-heading-icon.force { + border-color: rgba(255, 174, 92, 0.34); + color: #ffc07a; + background: rgba(255, 151, 61, 0.1); } .discard-warning-icon { display: grid; @@ -3794,6 +3829,61 @@ align-items: center; gap: 6px; } + .branch-delete-lead { color: var(--color-ink); font-weight: 600; } + .branch-delete-target { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; + padding: 10px 11px; + border: 1px solid var(--color-border-subtle); + border-radius: 8px; + background: rgba(0, 0, 0, 0.16); + box-shadow: inset 3px 0 0 rgba(255, 90, 103, 0.48); + } + .branch-delete-target-icon { + display: grid; + place-items: center; + width: 28px; + height: 28px; + flex: 0 0 auto; + border-radius: 7px; + color: var(--color-accent); + background: rgba(77, 182, 214, 0.1); + } + .branch-delete-target-copy { display: grid; gap: 2px; min-width: 0; flex: 1; } + .branch-delete-target-copy code { + overflow: hidden; + color: var(--color-ink); + font-family: var(--font-mono); + font-size: 12px; + font-weight: 700; + text-overflow: ellipsis; + white-space: nowrap; + } + .branch-delete-target-copy > span { color: var(--color-ink-faint); font-size: 10.5px; } + .branch-delete-scope { + flex: 0 0 auto; + padding: 3px 7px; + border: 1px solid rgba(77, 182, 214, 0.22); + border-radius: 999px; + color: #8ed8ee; + background: rgba(77, 182, 214, 0.08); + font-size: 9.5px; + font-weight: 800; + letter-spacing: 0.05em; + text-transform: uppercase; + } + .branch-delete-scope.remote { border-color: rgba(167, 126, 255, 0.25); color: #c2a9ff; background: rgba(132, 88, 232, 0.1); } + .branch-delete-body .discard-warning-text { + padding: 9px 10px; + border-left: 2px solid rgba(255, 90, 103, 0.55); + color: #f2aeb5; + background: rgba(255, 90, 103, 0.055); + font-size: 11.5px; + font-weight: 600; + } + .branch-delete-confirm { min-width: 116px; } .discard-target-list { display: grid; gap: 4px; diff --git a/src/lib/components/BranchDeleteConfirmDialog.svelte b/src/lib/components/BranchDeleteConfirmDialog.svelte index 3aea620..46ea768 100644 --- a/src/lib/components/BranchDeleteConfirmDialog.svelte +++ b/src/lib/components/BranchDeleteConfirmDialog.svelte @@ -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");