feat(ui): add worktree management toggle to branch panel

Introduces a dedicated section and interactive button for managing repository worktrees within the branch list view. This improves visibility into the overall state of local repositories by grouping related controls.

- Adds visual styling and structure for the new worktree group toggle in CSS.
- Replaces the old "Manage worktrees" button with a more descriptive, styled component in BranchPanel.svelte.
This commit is contained in:
Christoph Brandau
2026-07-26 22:16:35 +02:00
parent 24201c1302
commit eb99165931
2 changed files with 29 additions and 12 deletions
+14
View File
@@ -2064,6 +2064,20 @@
.tag-group-head { display: flex; align-items: center; gap: 6px; }
.tag-group-head .branch-group-toggle { flex: 1; min-width: 0; }
.tag-group-head .branch-create-toggle { flex-shrink: 0; }
.worktree-group-toggle {
border-color: rgba(77, 182, 214, 0.12);
background: linear-gradient(90deg, rgba(77, 182, 214, 0.055), transparent 72%);
}
.worktree-group-toggle:hover:not(:disabled) {
border-color: rgba(77, 182, 214, 0.25);
background: linear-gradient(90deg, rgba(77, 182, 214, 0.1), rgba(77, 182, 214, 0.025));
color: var(--color-ink);
}
.worktree-group-toggle svg { color: #76cde7; }
.worktree-group-toggle .branch-group-count {
color: #9edced;
background: rgba(77, 182, 214, 0.11);
}
.tag-create-form { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto; }
+15 -12
View File
@@ -379,16 +379,6 @@
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Refs</h2>
</div>
<div class="branch-head-actions">
<button
class="branch-create-toggle"
type="button"
onclick={onManageWorktrees}
disabled={!hasRepository || isBusy}
title="Manage worktrees"
aria-label="Manage worktrees"
>
<HardDrive size={14} aria-hidden="true" />
</button>
<button
class="branch-create-toggle"
type="button"
@@ -421,8 +411,6 @@
<!-- collapsed -->
{:else if !hasRepository}
<p class="blank-state">Open a repository to list branches.</p>
{:else if branches.length === 0 && tags.length === 0}
<p class="blank-state">No branches returned.</p>
{:else}
<div class="branch-list overflow-auto p-2 flex flex-col gap-0">
{#if createOpen}
@@ -659,6 +647,21 @@
{/if}
{/if}
</div>
<div class="branch-group">
<button
class="branch-group-toggle worktree-group-toggle"
type="button"
onclick={onManageWorktrees}
disabled={isBusy}
aria-haspopup="dialog"
title="Manage repository worktrees"
>
<HardDrive size={14} aria-hidden="true" />
<span>Worktrees</span>
<span class="branch-group-count">Manage</span>
</button>
</div>
</div>
{/if}