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:
+14
@@ -2064,6 +2064,20 @@
|
|||||||
.tag-group-head { display: flex; align-items: center; gap: 6px; }
|
.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-group-toggle { flex: 1; min-width: 0; }
|
||||||
.tag-group-head .branch-create-toggle { flex-shrink: 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; }
|
.tag-create-form { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr) auto auto; }
|
||||||
|
|
||||||
|
|||||||
@@ -379,16 +379,6 @@
|
|||||||
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Refs</h2>
|
<h2 class="mt-0.5 text-ink text-base font-bold leading-tight">Refs</h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="branch-head-actions">
|
<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
|
<button
|
||||||
class="branch-create-toggle"
|
class="branch-create-toggle"
|
||||||
type="button"
|
type="button"
|
||||||
@@ -421,8 +411,6 @@
|
|||||||
<!-- collapsed -->
|
<!-- collapsed -->
|
||||||
{:else if !hasRepository}
|
{:else if !hasRepository}
|
||||||
<p class="blank-state">Open a repository to list branches.</p>
|
<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}
|
{:else}
|
||||||
<div class="branch-list overflow-auto p-2 flex flex-col gap-0">
|
<div class="branch-list overflow-auto p-2 flex flex-col gap-0">
|
||||||
{#if createOpen}
|
{#if createOpen}
|
||||||
@@ -659,6 +647,21 @@
|
|||||||
{/if}
|
{/if}
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</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>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user