refactor(ui): simplify branch status display and adjust layout
The changes simplify how branch status is shown in HistoryPanel. The remoteName helper and the check icon were removed. Status is composed inline with the label for local and remote branches. CSS tweaks wrap content and adjust widths for better responsiveness. - Remove remoteName helper and Check icon from HistoryPanel - Inline status text for local/remote branches and avoid icons - Improve graph layout: wrap refs and constrain widths on hover
This commit is contained in:
+26
-2
@@ -2559,8 +2559,10 @@
|
|||||||
}
|
}
|
||||||
.branch-ref-cluster {
|
.branch-ref-cluster {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
flex: 0 1 auto;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
max-width: 100%;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
}
|
}
|
||||||
.compact-ref-chip {
|
.compact-ref-chip {
|
||||||
@@ -2664,7 +2666,8 @@
|
|||||||
.graph-row:hover .compact-ref-chip.branch,
|
.graph-row:hover .compact-ref-chip.branch,
|
||||||
.graph-row.selected .compact-ref-chip.branch,
|
.graph-row.selected .compact-ref-chip.branch,
|
||||||
.graph-row:focus-within .compact-ref-chip.branch {
|
.graph-row:focus-within .compact-ref-chip.branch {
|
||||||
max-width: min(62%, 260px);
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 64%, transparent);
|
border-color: color-mix(in srgb, var(--ref-lane-color, #69a7ff) 64%, transparent);
|
||||||
background:
|
background:
|
||||||
@@ -2673,6 +2676,18 @@
|
|||||||
inset 2px 0 0 var(--ref-lane-color, #69a7ff),
|
inset 2px 0 0 var(--ref-lane-color, #69a7ff),
|
||||||
0 3px 12px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 12%, rgba(0,0,0,.24));
|
0 3px 12px color-mix(in srgb, var(--ref-lane-color, #69a7ff) 12%, rgba(0,0,0,.24));
|
||||||
}
|
}
|
||||||
|
.graph-row:hover .commit-ref-strip,
|
||||||
|
.graph-row.selected .commit-ref-strip,
|
||||||
|
.graph-row:focus-within .commit-ref-strip {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
row-gap: 4px;
|
||||||
|
}
|
||||||
|
.graph-row:hover .branch-ref-cluster,
|
||||||
|
.graph-row.selected .branch-ref-cluster,
|
||||||
|
.graph-row:focus-within .branch-ref-cluster {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
max-width: min(100%, 320px);
|
||||||
|
}
|
||||||
.graph-row:hover .compact-ref-branch-icon,
|
.graph-row:hover .compact-ref-branch-icon,
|
||||||
.graph-row.selected .compact-ref-branch-icon,
|
.graph-row.selected .compact-ref-branch-icon,
|
||||||
.graph-row:focus-within .compact-ref-branch-icon {
|
.graph-row:focus-within .compact-ref-branch-icon {
|
||||||
@@ -3069,8 +3084,17 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media (hover: none) {
|
@media (hover: none) {
|
||||||
|
.commit-ref-strip {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
row-gap: 4px;
|
||||||
|
}
|
||||||
|
.branch-ref-cluster {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
max-width: min(100%, 320px);
|
||||||
|
}
|
||||||
.compact-ref-chip.branch {
|
.compact-ref-chip.branch {
|
||||||
max-width: min(62%, 260px);
|
flex: 1 1 auto;
|
||||||
|
max-width: 100%;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
}
|
}
|
||||||
.compact-ref-chip.branch > span,
|
.compact-ref-chip.branch > span,
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { Check, Cherry, ChevronDown, ChevronRight, CloudOff, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, Tag, X } from "@lucide/svelte";
|
import { Cherry, ChevronDown, ChevronRight, CloudOff, EllipsisVertical, GitBranch, GitMerge, LoaderCircle, RotateCcw, StickyNote, Tag, X } from "@lucide/svelte";
|
||||||
import type { FileStatusKind, GitCommit, GitCommitFile } from "../types";
|
import type { FileStatusKind, GitCommit, GitCommitFile } from "../types";
|
||||||
|
|
||||||
interface GraphSegment {
|
interface GraphSegment {
|
||||||
@@ -544,10 +544,6 @@
|
|||||||
return !localBranchNameSet.has(label) && /(?:^|\/)HEAD(?:\s*->|$)/.test(ref);
|
return !localBranchNameSet.has(label) && /(?:^|\/)HEAD(?:\s*->|$)/.test(ref);
|
||||||
}
|
}
|
||||||
|
|
||||||
function remoteName(branch: string): string {
|
|
||||||
return branch.split("/", 1)[0] ?? branch;
|
|
||||||
}
|
|
||||||
|
|
||||||
function configuredUpstreamForBranch(local: string): string {
|
function configuredUpstreamForBranch(local: string): string {
|
||||||
return localBranchUpstreams[local] ?? (local === activeBranch ? activeUpstream : "");
|
return localBranchUpstreams[local] ?? (local === activeBranch ? activeUpstream : "");
|
||||||
}
|
}
|
||||||
@@ -649,7 +645,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function branchStatusLabel(branch: CommitBranchDecoration): string {
|
function branchStatusLabel(branch: CommitBranchDecoration): string {
|
||||||
if (branch.trackedRemote) return `✓ ${remoteName(branch.trackedRemote)}`;
|
|
||||||
if (branch.label === activeBranch) {
|
if (branch.label === activeBranch) {
|
||||||
const parts = [];
|
const parts = [];
|
||||||
if (activeAhead > 0) parts.push(`↑${activeAhead}`);
|
if (activeAhead > 0) parts.push(`↑${activeAhead}`);
|
||||||
@@ -661,9 +656,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function branchDecorationTitle(branch: CommitBranchDecoration): string {
|
function branchDecorationTitle(branch: CommitBranchDecoration): string {
|
||||||
if (branch.localOnly) return `${branch.label} · Local only — not published yet`;
|
if (branch.localOnly) {
|
||||||
if (branch.trackedRemote) return `${branch.label} · up to date with ${branch.trackedRemote}`;
|
|
||||||
const status = branchStatusLabel(branch);
|
const status = branchStatusLabel(branch);
|
||||||
|
return `${branch.label} · Local only — not published yet${status ? ` · ${status}` : ""}`;
|
||||||
|
}
|
||||||
|
const status = branchStatusLabel(branch);
|
||||||
|
if (branch.trackedRemote) {
|
||||||
|
return `${branch.label} · Tracks ${branch.trackedRemote}${status ? ` · ${status}` : ""}`;
|
||||||
|
}
|
||||||
if (status) return `${branch.label} · ${status}`;
|
if (status) return `${branch.label} · ${status}`;
|
||||||
return branch.kind === "remote" ? `Remote branch ${branch.label}` : `Local branch ${branch.label}`;
|
return branch.kind === "remote" ? `Remote branch ${branch.label}` : `Local branch ${branch.label}`;
|
||||||
}
|
}
|
||||||
@@ -865,16 +865,13 @@
|
|||||||
>
|
>
|
||||||
<GitBranch class="compact-ref-branch-icon" size={10} aria-hidden="true" />
|
<GitBranch class="compact-ref-branch-icon" size={10} aria-hidden="true" />
|
||||||
<span>{refSummary.primaryBranch.label}</span>
|
<span>{refSummary.primaryBranch.label}</span>
|
||||||
{#if branchStatusLabel(refSummary.primaryBranch)}
|
{#if !refSummary.primaryBranch.localOnly && branchStatusLabel(refSummary.primaryBranch)}
|
||||||
<small class:up-to-date={Boolean(refSummary.primaryBranch.trackedRemote)}>
|
<small>{branchStatusLabel(refSummary.primaryBranch)}</small>
|
||||||
{#if refSummary.primaryBranch.trackedRemote}<Check size={9} aria-hidden="true" />{/if}
|
|
||||||
{branchStatusLabel(refSummary.primaryBranch).replace(/^✓\s*/, "")}
|
|
||||||
</small>
|
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
{#if refSummary.primaryBranch.localOnly}
|
{#if refSummary.primaryBranch.localOnly}
|
||||||
<span class="compact-ref-local-marker" title="This branch exists only locally and has not been published yet">
|
<span class="compact-ref-local-marker" title="This branch exists only locally and has not been published yet">
|
||||||
<CloudOff size={9} aria-hidden="true" />LOCAL
|
LOCAL
|
||||||
</span>
|
</span>
|
||||||
{/if}
|
{/if}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user