fix: harmonize commitStatus types and ensure correct color commitCard…

… and branchHeader are rendered

fix: eslint

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

@@ -40,7 +40,17 @@
 	let meatballButtonEl = $state<HTMLDivElement>();
 
 	const currentSeries = $derived(branch.series?.find((series) => series.name === upstreamName));
-	const branchColorType = $derived<CommitStatus>(currentSeries?.patches[0]?.status ?? 'local');
+	const topPatch = $derived(currentSeries?.patches[0]);
+	const hasShadow = $derived.by(() => {
+		if (!topPatch || !topPatch.remoteCommitId) return false;
+
+		if (topPatch.remoteCommitId !== topPatch.id) return true;
+
+		return false;
+	});
+	const branchColorType = $derived<CommitStatus | 'localAndShadow'>(
+		hasShadow ? 'localAndShadow' : (topPatch?.status ?? 'local')
+	);
 	const lineColor = $derived(getColorFromBranchType(branchColorType));
 
 	// Pretty cumbersome way of getting the PR number, would be great if we can

apps/desktop/src/lib/branch/stackingUtils.ts

@@ -1,12 +1,11 @@
-import type { CommitStatus } from '$lib/vbranches/types';
-
 const colorMap = {
 	local: 'var(--clr-commit-local)',
 	localAndRemote: 'var(--clr-commit-remote)',
+	localAndShadow: 'var(--clr-commit-local)',
 	remote: 'var(--clr-commit-remote)',
 	integrated: 'var(--clr-commit-integrated)'
 };
 
-export function getColorFromBranchType(type: CommitStatus) {
+export function getColorFromBranchType(type: keyof typeof colorMap): string {
 	return colorMap[type];
 }

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

@@ -57,7 +57,7 @@
 	const lineManager = $derived(
 		lineManagerFactory.build({
 			remoteCommits: remoteOnlyPatches,
-			localCommits: patches.filter((patch) => !patch.isRemote),
+			localCommits: patches.filter((patch) => !patch.remoteCommitId),
 			localAndRemoteCommits: patches.filter((patch) => patch.remoteCommitId),
 			integratedCommits: patches.filter((patch) => patch.isIntegrated)
 		})

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

@@ -114,6 +114,7 @@
 	async function push() {
 		isPushingCommits = true;
 		try {
+			// TODO: Ensure requiresForce is bubbled up from each series to the stack here
 			await branchController.pushBranch(branch.id, branch.requiresForce, true);
 			$listingService?.refresh();
 			$prMonitor?.refresh();

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

@@ -11,11 +11,11 @@
 
 <div
 	class="commit-line stacked"
-	class:local={cell.type === 'Local'}
-	class:remote={cell.type === 'LocalRemote'}
-	class:local-shadow={cell.type === 'LocalShadow'}
-	class:upstream={cell.type === 'Upstream'}
-	class:integrated={cell.type === 'Integrated'}
+	class:local={cell.type === 'local'}
+	class:remote={cell.type === 'localAndRemote'}
+	class:local-shadow={cell.type === 'localAndShadow'}
+	class:upstream={cell.type === 'remote'}
+	class:integrated={cell.type === 'integrated'}
 	class:dashed={cell.style === 'dashed' || isBottom}
 ></div>
 

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

@@ -21,7 +21,7 @@
 	);
 
 	const hoverTextShadow = $derived.by(() => {
-		return commitNode.type === 'LocalShadow'
+		return commitNode.type === 'localAndShadow'
 			? [
 					commitNode.commit?.relatedRemoteCommit?.author?.name,
 					commitNode.commit?.relatedRemoteCommit?.title,
@@ -34,7 +34,7 @@
 </script>
 
 <div class="container">
-	{#if type === 'Local'}
+	{#if type === 'local'}
 		<Tooltip text={hoverText}>
 			<svg
 				class="local-commit-dot"
@@ -47,7 +47,7 @@
 				<rect width="10" height="10" rx="5" />
 			</svg>
 		</Tooltip>
-	{:else if type === 'LocalShadow'}
+	{:else if type === 'localAndShadow'}
 		<div class="local-shadow-commit-dot">
 			<Tooltip text={hoverTextShadow}>
 				<svg
@@ -82,9 +82,9 @@
 		<Tooltip text={hoverText}>
 			<svg
 				class="generic-commit-dot"
-				class:remote={type === 'LocalRemote'}
-				class:upstream={type === 'Upstream'}
-				class:integrated={type === 'Integrated'}
+				class:remote={type === 'localAndRemote'}
+				class:upstream={type === 'remote'}
+				class:integrated={type === 'integrated'}
 				width="11"
 				height="12"
 				viewBox="0 0 11 12"

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

@@ -16,7 +16,7 @@
 		<Cell cell={line.top} />
 	</div>
 	{#if line.commitNode}
-		<CommitNode commitNode={line.commitNode} type={line.commitNode.type ?? 'Local'} />
+		<CommitNode commitNode={line.commitNode} type={line.commitNode.type ?? 'local'} />
 	{/if}
 	<div class="line-bottom">
 		<Cell cell={line.bottom} {isBottom} />

packages/ui/src/lib/commitLinesStacking/lineManager.ts

@@ -22,27 +22,33 @@ function generateLineData({
 	const integratedBranchGroups = mapToCommitLineGroupPair(integratedCommits);
 
 	remoteBranchGroups.forEach(({ commit, line }) => {
-		line.top.type = 'Upstream';
-		line.bottom.type = 'Upstream';
-		line.commitNode = { type: 'Upstream', commit };
+		line.top.type = 'remote';
+		line.bottom.type = 'remote';
+		line.commitNode = { type: 'remote', commit };
 	});
 
 	localBranchGroups.forEach(({ commit, line }) => {
-		line.top.type = 'Local';
-		line.bottom.type = 'Local';
-		line.commitNode = { type: 'Local', commit };
+		line.top.type = 'local';
+		line.bottom.type = 'local';
+		line.commitNode = { type: 'local', commit };
 	});
 
 	localAndRemoteBranchGroups.forEach(({ commit, line }) => {
-		line.top.type = 'LocalRemote';
-		line.bottom.type = 'LocalRemote';
-		line.commitNode = { type: 'LocalRemote', commit };
+		if (line.commitNode.commit.remoteCommitId !== line.commitNode.commit.id) {
+			line.commitNode = { type: 'localAndShadow', commit };
+			line.top.type = 'localAndShadow';
+			line.bottom.type = 'localAndShadow';
+		} else {
+			line.commitNode = { type: 'localAndRemote', commit };
+			line.top.type = 'localAndRemote';
+			line.bottom.type = 'localAndRemote';
+		}
 	});
 
 	integratedBranchGroups.forEach(({ commit, line }) => {
-		line.top.type = 'Integrated';
-		line.bottom.type = 'Integrated';
-		line.commitNode = { type: 'Integrated', commit };
+		line.top.type = 'integrated';
+		line.bottom.type = 'integrated';
+		line.commitNode = { type: 'integrated', commit };
 	});
 
 	const data = new Map<string, LineData>([
@@ -71,9 +77,9 @@ function mapToCommitLineGroupPair(commits: CommitData[]) {
 	const groupings = commits.map((commit) => ({
 		commit,
 		line: {
-			top: { type: 'Local' as CellType, style: 'solid' as Style },
-			bottom: { type: 'Local' as CellType, style: 'solid' as Style },
-			commitNode: { type: 'Local' as CellType, commit }
+			top: { type: 'local' as CellType, style: 'solid' as Style },
+			bottom: { type: 'local' as CellType, style: 'solid' as Style },
+			commitNode: { type: 'local' as CellType, commit }
 		}
 	}));
 
@@ -83,8 +89,8 @@ function mapToCommitLineGroupPair(commits: CommitData[]) {
 /**
  * The Line Manager assumes that the groups of commits will be in the following order:
  * 1. Remote Commits (Commits you don't have in your branch)
- * 2. Local Commits (Commits that you have changed locally)
- * 3. LocalAndRemote Commits (Commits that exist locally and on the remote and have the same hash)
+ * 2. local Commits (Commits that you have changed locally)
+ * 3. localAndRemote Commits (Commits that exist locally and on the remote and have the same hash)
  * 4. Integrated Commits (Commits that exist locally and perhaps on the remote that are in the trunk)
  */
 export class LineManager {

packages/ui/src/lib/commitLinesStacking/types.ts

@@ -30,6 +30,7 @@ export interface CommitData {
 	// If an author is not provided, a commit node will not be drawn
 	author?: Author;
 	relatedRemoteCommit?: CommitData;
+	remoteCommitId?: string;
 }
 
-export type CellType = 'Local' | 'LocalRemote' | 'Integrated' | 'Upstream' | 'LocalShadow';
+export type CellType = 'local' | 'localAndRemote' | 'integrated' | 'remote' | 'localAndShadow';