Add sequence count to branches. Design variant #2

apps/desktop/src/lib/branch/StackingSeriesHeader.svelte

@@ -32,9 +32,11 @@
 	interface Props {
 		currentSeries: PatchSeries;
 		isTopSeries: boolean;
+		sequenceId: number;
+		seqenceAmount: number;
 	}
 
-	const { currentSeries, isTopSeries }: Props = $props();
+	const { currentSeries, isTopSeries, sequenceId, seqenceAmount }: Props = $props();
 
 	let descriptionVisible = $state(false);
 
@@ -193,10 +195,13 @@
 
 	<div class="branch-info">
 		<StackingStatusIcon
+			{branchType}
 			lineTop={isTopSeries ? false : true}
 			icon={branchType === 'integrated' ? 'tick-small' : 'remote-branch-small'}
 			iconColor="var(--clr-core-ntrl-100)"
 			color={lineColor}
+			{sequenceId}
+			{seqenceAmount}
 			lineBottom={currentSeries.patches.length > 0 || branch.series.length > 1}
 		/>
 		<div class="text-14 text-bold branch-info__name">
@@ -258,11 +263,6 @@
 		</div>
 	{/if}
 
-	<div class="branch-action">
-		<div class="branch-action__line" style:--bg-color={lineColor}></div>
-		<div class="branch-action__body"></div>
-	</div>
-
 	{#if $pr}
 		<PrDetailsModal bind:this={prDetailsModal} type="display" pr={$pr} />
 	{:else}
@@ -343,7 +343,7 @@
 
 	.branch-action__line {
 		min-width: 2px;
-		margin: 0 20px;
+		margin: var(--lines-inner-margin);
 		background-color: var(--bg-color, var(--clr-border-3));
 	}
 </style>

apps/desktop/src/lib/branch/StackingStatusIcon.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+	import { type CommitStatus } from '$lib/vbranches/types';
 	import Icon from '@gitbutler/ui/Icon.svelte';
+	import Tooltip from '@gitbutler/ui/Tooltip.svelte';
 
 	const FALLBACK_COLOR = 'var(--clr-scale-ntrl-80)';
 
@@ -9,25 +11,55 @@
 		color?: string;
 		lineTop?: boolean;
 		lineBottom?: boolean;
+		sequenceId: number;
+		seqenceAmount: number;
+		branchType: CommitStatus;
 	}
 
 	const {
 		icon,
 		iconColor,
 		color = FALLBACK_COLOR,
 		lineTop = true,
-		lineBottom = true
+		lineBottom = true,
+		sequenceId,
+		seqenceAmount,
+		branchType
 	}: Props = $props();
+
+	function branchNameType() {
+		console.log(branchType);
+		if (branchType === 'integrated') {
+			return 'Integrated branch';
+		} else if (branchType === 'localAndRemote') {
+			return 'Remote branch';
+		} else {
+			return 'Local branch';
+		}
+	}
 </script>
 
-<div class="stack__status gap">
+<div class="stack__status gap" class:small-sequence-label={seqenceAmount >= 10}>
 	<div
 		class="stack__status--bar"
 		style:--bg-color={lineTop ? color : 'var(--clr-transparent)'}
 	></div>
-	<div class="stack__status--icon" style:--bg-color={color} style:--icon-color={iconColor}>
-		<Icon name={icon} />
-	</div>
+
+	<Tooltip
+		text={seqenceAmount > 1
+			? `${branchNameType()} ${sequenceId} of ${seqenceAmount}`
+			: branchNameType()}
+	>
+		<div class="stack__status--icon" style:--bg-color={color} style:--icon-color={iconColor}>
+			{#if seqenceAmount > 1}
+				<span class="text-9 text-semibold stack__status--sequence-label"
+					>{sequenceId}/{seqenceAmount}</span
+				>
+			{:else}
+				<Icon name={icon} />
+			{/if}
+		</div>
+	</Tooltip>
 	<div
 		class="stack__status--bar"
 		style:--bg-color={lineBottom ? color : 'var(--clr-transparent)'}
@@ -47,18 +79,42 @@
 			display: flex;
 			align-items: center;
 			justify-content: center;
-			width: 20px;
-			height: 24px;
+			margin-left: -2px;
+			min-width: 20px;
+			max-width: 24px;
+			padding: 3px 2px;
 			border-radius: var(--radius-m);
 			background-color: var(--bg-color);
 			color: var(--icon-color, var(--clr-text-1));
 		}
 
 		& .stack__status--bar {
 			width: 2px;
-			height: 10px;
-			margin: 0 20px;
+			height: 9px;
+			margin: var(--lines-inner-margin);
 			background: var(--bg-color);
 		}
+
+		& .stack__status--sequence-label {
+			padding: 2px 3px 3px;
+			text-align: center;
+			line-height: 1;
+		}
+
+		/* MODIFIER */
+
+		&.small-sequence-label {
+			margin-right: 4px;
+
+			& .stack__status--icon {
+				margin-left: 4px;
+				max-width: none;
+				width: 30px;
+			}
+
+			& .stack__status--sequence-label {
+				padding: 3px;
+			}
+		}
 	}
 </style>

apps/desktop/src/lib/commit/StackingUpstreamCommitsAccordion.svelte

@@ -95,7 +95,7 @@
 		& .accordion-row__line {
 			position: relative;
 			width: 2px;
-			margin: 0 20px;
+			margin: var(--lines-inner-margin);
 			background-color: var(--clr-commit-upstream);
 			--dots-y-shift: -8px;
 

apps/desktop/src/lib/stack/StackCurrentSeries.svelte

@@ -47,6 +47,7 @@
 
 <style>
 	.branch-group {
+		--lines-inner-margin: 0 22px 0 20px;
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-m);
 		background: var(--clr-bg-1);

apps/desktop/src/lib/stack/StackSeries.svelte

@@ -30,7 +30,12 @@
 		<StackSeriesDividerLine {currentSeries} />
 	{/if}
 	<StackCurrentSeries {currentSeries}>
-		<StackingSeriesHeader {currentSeries} {isTopSeries} />
+		<StackingSeriesHeader
+			{currentSeries}
+			{isTopSeries}
+			sequenceId={branch.series.length - idx}
+			seqenceAmount={branch.series.length}
+		/>
 
 		{#if currentSeries.upstreamPatches.length === 0 && currentSeries.patches.length === 0}
 			<div class="branch-emptystate">

packages/ui/src/lib/commitLinesStacking/Cell.svelte

@@ -22,6 +22,6 @@
 <style lang="postcss">
 	.commit-line {
 		width: 2px;
-		margin: 0 20px;
+		margin: var(--lines-inner-margin);
 	}
 </style>