Switch to new style of upstream commit list

- this work was left uncompleted a month back

gitbutler-ui/src/lib/components/BranchCard.svelte

@@ -6,7 +6,6 @@
 	import DropzoneOverlay from './DropzoneOverlay.svelte';
 	import PullRequestCard from './PullRequestCard.svelte';
 	import ScrollableContainer from './ScrollableContainer.svelte';
-	import UpstreamCommits from './UpstreamCommits.svelte';
 	import { ButlerAIProvider } from '$lib/backend/aiProviders';
 	import { Summarizer } from '$lib/backend/summarizer';
 	import ImgThemed from '$lib/components/ImgThemed.svelte';
@@ -38,13 +37,7 @@
 	import type { GitHubService } from '$lib/github/service';
 	import type { Persisted } from '$lib/persisted/persisted';
 	import type { BranchController } from '$lib/vbranches/branchController';
-	import type {
-		BaseBranch,
-		Branch,
-		LocalFile,
-		RemoteBranchData,
-		RemoteCommit
-	} from '$lib/vbranches/types';
+	import type { BaseBranch, Branch, LocalFile, RemoteBranchData } from '$lib/vbranches/types';
 
 	export let branch: Branch;
 	export let isUnapplied = false;
@@ -74,18 +67,14 @@
 	const newVbranchNameRegex = /^virtual\sbranch\s*[\d]*$/;
 
 	let laneWidth: number;
-	let upstreamData: RemoteBranchData | undefined;
-	let unknownCommits: RemoteCommit[] | undefined;
+	let remoteBranchData: RemoteBranchData | undefined;
 
 	$: upstream = branch.upstream;
-	$: if (upstream) reloadUpstream();
+	$: if (upstream) reloadRemoteBranch();
 
-	async function reloadUpstream() {
+	async function reloadRemoteBranch() {
 		if (upstream?.name) {
-			upstreamData = await getRemoteBranchData(project.id, upstream.name);
-			unknownCommits = upstreamData.commits.filter(
-				(remoteCommit) => !branch.commits.find((commit) => remoteCommit.id == commit.id)
-			);
+			remoteBranchData = await getRemoteBranchData(project.id, upstream.name);
 		}
 	}
 
@@ -229,18 +218,6 @@
 						{isUnapplied}
 						isLaneCollapsed={$isLaneCollapsed}
 					/>
-					{#if unknownCommits && unknownCommits.length > 0 && !branch.conflicted}
-						<UpstreamCommits
-							upstream={upstreamData}
-							branchId={branch.id}
-							{project}
-							{branchController}
-							{branchCount}
-							projectId={project.id}
-							{selectedFiles}
-							{base}
-						/>
-					{/if}
 					<!-- DROPZONES -->
 					<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
 					<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
@@ -364,6 +341,7 @@
 						{branchCount}
 						{isUnapplied}
 						{selectedFiles}
+						{remoteBranchData}
 					/>
 				</div>
 			</ScrollableContainer>

gitbutler-ui/src/lib/components/BranchCommits.svelte

@@ -4,7 +4,7 @@
 	import type { BranchService } from '$lib/branches/service';
 	import type { GitHubService } from '$lib/github/service';
 	import type { BranchController } from '$lib/vbranches/branchController';
-	import type { BaseBranch, Branch, AnyFile } from '$lib/vbranches/types';
+	import type { BaseBranch, Branch, AnyFile, RemoteBranchData } from '$lib/vbranches/types';
 	import type { Writable } from 'svelte/store';
 
 	export let project: Project;
@@ -16,9 +16,15 @@
 	export let selectedFiles: Writable<AnyFile[]>;
 	export let isUnapplied: boolean;
 	export let branchCount: number;
+	export let remoteBranchData: RemoteBranchData | undefined;
+
+	$: unknownCommits = remoteBranchData?.commits.filter(
+		(remoteCommit) => !branch.commits.find((commit) => remoteCommit.id == commit.id)
+	);
 </script>
 
-<CommitList
+{#if unknownCommits && unknownCommits.length > 0}
+	<CommitList
 		{branch}
 		{base}
 		{project}
@@ -28,8 +34,10 @@
 		{githubService}
 		{isUnapplied}
 		{selectedFiles}
+		commits={unknownCommits}
 		type="upstream"
-/>
+	/>
+{/if}
 <CommitList
 	{branch}
 	{base}
@@ -39,6 +47,7 @@
 	{githubService}
 	{isUnapplied}
 	{selectedFiles}
+	commits={branch.commits.filter((c) => c.status == 'local')}
 	type="local"
 />
 <CommitList
@@ -51,6 +60,7 @@
 	{isUnapplied}
 	{selectedFiles}
 	type="remote"
+	commits={branch.commits.filter((c) => c.status == 'remote')}
 />
 <CommitList
 	{branch}
@@ -62,4 +72,5 @@
 	{isUnapplied}
 	{selectedFiles}
 	type="integrated"
+	commits={branch.commits.filter((c) => c.status == 'integrated')}
 />

gitbutler-ui/src/lib/components/CommitList.svelte

@@ -6,7 +6,14 @@
 	import type { BranchService } from '$lib/branches/service';
 	import type { GitHubService } from '$lib/github/service';
 	import type { BranchController } from '$lib/vbranches/branchController';
-	import type { AnyFile, BaseBranch, Branch, CommitStatus } from '$lib/vbranches/types';
+	import type {
+		AnyFile,
+		BaseBranch,
+		Branch,
+		Commit,
+		CommitStatus,
+		RemoteCommit
+	} from '$lib/vbranches/types';
 	import type { Writable } from 'svelte/store';
 
 	export let branch: Branch;
@@ -19,12 +26,12 @@
 	export let selectedFiles: Writable<AnyFile[]>;
 	export let isUnapplied: boolean;
 	export let branchCount: number = 0;
+	export let commits: Commit[] | RemoteCommit[];
 
 	let headerHeight: number;
 
 	$: headCommit = branch.commits[0];
 
-	$: commits = type == 'upstream' ? [] : branch.commits.filter((c) => c.status == type);
 	$: hasCommits = commits && commits.length > 0;
 	$: remoteRequiresForcePush = type === 'remote' && branch.requiresForce;
 
@@ -33,7 +40,13 @@
 
 {#if hasCommits || remoteRequiresForcePush}
 	<div class="commit-list card" class:upstream={type == 'upstream'}>
-		<CommitListHeader {type} bind:expanded bind:height={headerHeight} isExpandable={hasCommits} />
+		<CommitListHeader
+			{type}
+			bind:expanded
+			bind:height={headerHeight}
+			isExpandable={hasCommits}
+			commitCount={commits.length}
+		/>
 		{#if expanded}
 			<div class="commit-list__content">
 				{#if hasCommits}

gitbutler-ui/src/lib/components/CommitListHeader.svelte

@@ -7,7 +7,7 @@
 	export let expanded: boolean;
 	export let type: CommitStatus;
 	export let height: number | undefined;
-	export let upstreamCommitCount = 0;
+	export let commitCount = 0;
 
 	let element: HTMLButtonElement | undefined = undefined;
 
@@ -23,7 +23,7 @@
 		{:else if type == 'integrated'}
 			Integrated
 		{:else if type == 'upstream'}
-			{upstreamCommitCount} upstream {upstreamCommitCount == 1 ? 'commit' : 'commits'}
+			{commitCount} upstream {commitCount == 1 ? 'commit' : 'commits'}
 			<Icon name="warning" color="warn" />
 		{/if}
 	</div>