fix: rm empty branch from branchCommitList component

Author: ndom91

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

@@ -9,6 +9,7 @@
 	import { combineResults } from '$lib/state/helpers';
 	import { inject } from '@gitbutler/shared/context';
 	import { goto } from '$app/navigation';
+	import EmptyBranch from './EmptyBranch.svelte';
 
 	interface Props {
 		projectId: string;
@@ -50,6 +51,9 @@
 				onclick={() => goto(branchPath(projectId, stackId, branch.name))}
 			/>
 			<BranchCommitList {projectId} {stackId} {branchName} {lastBranch} {selectedCommitId}>
+				{#snippet empty()}
+					<EmptyBranch {lastBranch} selected={branch.name === branchName} />
+				{/snippet}
 				{#snippet upstreamTemplate({ commit, commitKey, first, last: lastCommit, selected })}
 					<CommitRow
 						{projectId}

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import EmptyBranch from './EmptyBranch.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import { StackService } from '$lib/stacks/stackService.svelte';
 	import { combineResults } from '$lib/state/helpers';
@@ -29,19 +28,17 @@
 		localAndRemoteTemplate?: Snippet<
 			[{ commit: Commit; commitKey: CommitKey; first: boolean; last: boolean; selected: boolean }]
 		>;
-		emptyBranchCommitHere?: Snippet;
+		empty?: Snippet;
 	}
 
 	let {
 		projectId,
 		stackId,
 		branchName,
-		lastBranch,
-		selectedBranchName,
 		selectedCommitId,
 		localAndRemoteTemplate,
 		upstreamTemplate,
-		emptyBranchCommitHere
+		empty
 	}: Props = $props();
 
 	const [stackService] = inject(StackService);
@@ -57,13 +54,7 @@
 <ReduxResult result={combineResults(upstreamOnlyCommits, localAndRemoteCommits)}>
 	{#snippet children([upstreamOnlyCommits, localAndRemoteCommits])}
 		{#if !upstreamOnlyCommits.length && !localAndRemoteCommits.length}
-			{#if selectedBranchName === branchName && emptyBranchCommitHere}
-				<div class="empty-branch-commit-here">
-					{@render emptyBranchCommitHere()}
-				</div>
-			{:else}
-				<EmptyBranch {lastBranch} selected={selectedBranchName === branchName} />
-			{/if}
+			{@render empty?.()}
 		{:else}
 			<div class="commit-list">
 				{#if upstreamTemplate}
@@ -91,7 +82,6 @@
 </ReduxResult>
 
 <style lang="postcss">
-	.empty-branch-commit-here,
 	.commit-list {
 		position: relative;
 		display: flex;

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

@@ -2,6 +2,7 @@
 	import BranchCommitList from './BranchCommitList.svelte';
 	import BranchHeader from './BranchHeader.svelte';
 	import CommitRow from './CommitRow.svelte';
+	import EmptyBranch from './EmptyBranch.svelte';
 	import ScrollableContainer from '../ScrollableContainer.svelte';
 	import ReduxResult from '$components/ReduxResult.svelte';
 	import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
@@ -79,8 +80,13 @@
 							selectedBranchName={branchName}
 							selectedCommitId={parentId}
 						>
-							{#snippet emptyBranchCommitHere()}
-								{@render indicator({ first: true })}
+							{@render indicator({ first: true })}
+							{#snippet empty()}
+								{#if branch.name !== branchName}
+									<EmptyBranch />
+								{:else}
+									{@render indicator({ first: true, last: true })}
+								{/if}
 							{/snippet}
 							{#snippet localAndRemoteTemplate({ commit, commitKey, first, last, selected })}
 								{@const baseSha = $baseBranch?.baseSha}
@@ -125,6 +131,7 @@
 	.commit-goes-here {
 		display: flex;
 		flex-direction: column;
+		margin-bottom: 14px;
 	}
 
 	.branch {
@@ -189,6 +196,7 @@
 		width: 100%;
 		background-color: var(--clr-bg-2);
 
+		/* Last commit row which does not have an "Your commit here" indicator after it */
 		&.last:not(:has(~ .indicator)) {
 			border-radius: 0 0 var(--radius-l) var(--radius-l);
 		}

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

@@ -34,10 +34,8 @@
 	.commit-line {
 		position: absolute;
 		left: 20px;
+	}
+	:global(.commit-goes-here .empty-series .commit-line) {
 		opacity: 0.4;
-
-		&.selected {
-			opacity: 1;
-		}
 	}
 </style>