fix commit lines alignment (#8133)

* Update CommitLine.svelte

* fix indicator animation

* fix branch header icon inner alignment

* Update BranchHeader.svelte

* fix: last upstream commit detection

Author: PavelLaptev

apps/desktop/src/components/v3/BranchHeader.svelte

@@ -7,6 +7,7 @@
 	import { TestId } from '$lib/testing/testIds';
 	import { inject } from '@gitbutler/shared/context';
 	import Icon from '@gitbutler/ui/Icon.svelte';
+	import { slide } from 'svelte/transition';
 	import type iconsJson from '@gitbutler/ui/data/icons.json';
 	import type { Snippet } from 'svelte';
 
@@ -94,6 +95,10 @@
 		tabindex="0"
 		class:activated={args.isMenuOpenByMouse || args.isMenuOpenByBtn}
 	>
+		{#if args.selected}
+			<div class="branch-header__select-indicator" in:slide={{ axis: 'x', duration: 150 }}></div>
+		{/if}
+
 		<BranchHeaderIcon
 			{lineColor}
 			{iconName}
@@ -188,19 +193,6 @@
 		border-bottom: 1px solid var(--clr-border-2);
 		overflow: hidden;
 
-		&:before {
-			content: '';
-			position: absolute;
-			top: 14px;
-			left: 0;
-			width: 4px;
-			height: 20px;
-			transform: translateX(-100%);
-			border-radius: 0 var(--radius-ml) var(--radius-ml) 0;
-			background-color: var(--clr-selected-in-focus-element);
-			transition: transform var(--transition-fast);
-		}
-
 		&:hover,
 		&.activated {
 			background-color: var(--clr-bg-1-muted);
@@ -217,10 +209,6 @@
 			& .branch-menu-btn {
 				display: flex;
 			}
-
-			&:before {
-				transform: translateX(0%);
-			}
 		}
 
 		&:focus-within.selected {
@@ -236,6 +224,17 @@
 		}
 	}
 
+	.branch-header__select-indicator {
+		position: absolute;
+		top: 14px;
+		left: 0;
+		width: 4px;
+		height: 20px;
+		border-radius: 0 var(--radius-ml) var(--radius-ml) 0;
+		background-color: var(--clr-selected-in-focus-element);
+		transition: transform var(--transition-fast);
+	}
+
 	.name-line {
 		display: flex;
 		align-items: center;

apps/desktop/src/components/v3/BranchHeaderIcon.svelte

@@ -30,11 +30,13 @@
 
 <style>
 	.stack__status {
+		flex: 0 0 auto;
 		align-self: stretch;
 		display: flex;
 		flex-direction: column;
 		justify-content: center;
 		gap: 3px;
+		width: 42px;
 		--clr-transparent: transparent;
 
 		& .stack__status--icon {
@@ -46,13 +48,13 @@
 			border-radius: var(--radius-m);
 			background-color: var(--bg-color);
 			color: #fff;
-			margin-left: 10px;
+			margin: 0 auto;
 		}
 
 		& .stack__status--bar {
 			width: 2px;
 			height: 8px;
-			margin: 0 22px 0 20px;
+			margin: 0 auto;
 			background: var(--bg-color);
 
 			&.dashed {

apps/desktop/src/components/v3/BranchList.svelte

@@ -115,7 +115,7 @@
 											{branchName}
 											{projectId}
 											{first}
-											lastCommit={lastCommit && !commit}
+											lastCommit={lastCommit && localAndRemoteCommits.length === 0}
 											{commit}
 											{selected}
 											onclick={() => {

apps/desktop/src/components/v3/CommitLine.svelte

@@ -12,7 +12,7 @@
 		width?: number;
 	}
 
-	const { commit, lastCommit, lastBranch, width = 48 }: Props = $props();
+	const { commit, lastCommit, lastBranch, width = 42 }: Props = $props();
 
 	const color = $derived(
 		isLocalAndRemoteCommit(commit)
@@ -64,6 +64,7 @@
 
 <style lang="postcss">
 	.commit-lines {
+		flex: 0 0 auto;
 		display: flex;
 		flex-direction: column;
 		align-items: center;

apps/desktop/src/components/v3/CommitRow.svelte

@@ -16,6 +16,7 @@
 	import ContextMenu from '@gitbutler/ui/ContextMenu.svelte';
 	import Icon from '@gitbutler/ui/Icon.svelte';
 	import { getTimeAgo } from '@gitbutler/ui/utils/timeAgo';
+	import { slide } from 'svelte/transition';
 
 	type Props = {
 		projectId: string;
@@ -107,7 +108,7 @@
 	role="button"
 	tabindex="0"
 	aria-label="Commit row"
-	class="commit-row__main"
+	class="commit-row"
 	class:menu-shown={isOpenedByKebabButton || isOpenedByMouse}
 	class:first
 	class:selected
@@ -157,6 +158,10 @@
 			}
 		: NON_DRAGGABLE}
 >
+	{#if selected}
+		<div class="commit-row__select-indicator" in:slide={{ axis: 'x', duration: 150 }}></div>
+	{/if}
+
 	<CommitLine {commit} {lastCommit} {lastBranch} />
 
 	<div class="commit-content">
@@ -219,26 +224,13 @@
 />
 
 <style lang="postcss">
-	.commit-row__main {
+	.commit-row {
 		position: relative;
 		display: flex;
 		width: 100%;
 		overflow: hidden;
 		transition: background-color var(--transition-fast);
 
-		&::before {
-			content: '';
-			position: absolute;
-			top: 50%;
-			left: 0;
-			width: 4px;
-			height: 45%;
-			transform: translateX(-100%) translateY(-50%);
-			border-radius: 0 var(--radius-ml) var(--radius-ml) 0;
-			background-color: var(--clr-selected-in-focus-element);
-			transition: transform var(--transition-fast);
-		}
-
 		&:hover,
 		&.menu-shown {
 			background-color: var(--clr-bg-1-muted);
@@ -263,17 +255,25 @@
 			& .commit-menu-btn {
 				display: flex;
 			}
-
-			&:before {
-				transform: translateX(0%) translateY(-50%);
-			}
 		}
 
 		&:focus-within.selected {
 			background-color: var(--clr-selected-in-focus-bg);
 		}
 	}
 
+	.commit-row__select-indicator {
+		position: absolute;
+		top: 50%;
+		left: 0;
+		width: 4px;
+		height: 45%;
+		transform: translateY(-50%);
+		border-radius: 0 var(--radius-ml) var(--radius-ml) 0;
+		background-color: var(--clr-selected-in-focus-element);
+		transition: transform var(--transition-fast);
+	}
+
 	.commit-content {
 		display: flex;
 		align-items: center;