From fe2c7be05501062c4e673a8bd3f05428b84fb4c7 Mon Sep 17 00:00:00 2001
From: Caleb Owens <caleb@gitbutler.com>
Date: Tue, 19 Nov 2024 21:37:35 +0100
Subject: [PATCH] Update upstream integration UI component

---
 .../ui/src/lib/IntegrationSeriesRow.svelte    | 119 ++++++++++++------
 1 file changed, 81 insertions(+), 38 deletions(-)

diff --git a/packages/ui/src/lib/IntegrationSeriesRow.svelte b/packages/ui/src/lib/IntegrationSeriesRow.svelte
index 6a61f216ca..3ce96b7606 100644
--- a/packages/ui/src/lib/IntegrationSeriesRow.svelte
+++ b/packages/ui/src/lib/IntegrationSeriesRow.svelte
@@ -18,6 +18,8 @@
 	import Icon from './Icon.svelte';
 	import SeriesIcon from './SeriesIcon.svelte';
 	let { series, select }: Props = $props();
+
+	const allIntegrated = $derived(series.every((branch) => branch.status === 'integrated'));
 </script>
 
 {#snippet stackBranch({ name, status }: Branch, isLast: boolean)}
@@ -47,32 +49,58 @@
 {/snippet}
 
 <div class="integration-series-item no-select">
-	<div class="series-header">
-		<div class="name-label-wrap">
-			<SeriesIcon single={series.length === 1} outlined />
+	{#if series.length > 1}
+		<div class="series-header">
+			<div class="name-label-wrap">
+				<SeriesIcon single={false} outlined />
 
-			{#if series.length > 1}
 				<span class="series-label text-12 text-semibold truncate"> Stack branches </span>
-			{:else}
-				<span class="text-12 text-semibold truncate">
-					{series[0].name}
-				</span>
+			</div>
+
+			{#if select && !allIntegrated}
+				<div class="select">
+					{@render select()}
+				</div>
 			{/if}
 		</div>
 
-		{#if select}
-			<div class="select">
-				{@render select()}
-			</div>
-		{/if}
-	</div>
-
-	{#if series.length > 1}
 		<div class="series-branches">
 			{#each series as seriesItem, idx}
 				{@render stackBranch(seriesItem, idx === series.length - 1)}
 			{/each}
 		</div>
+	{:else if series.length === 1}
+		{@const branch = series[0]}
+		<div class="series-header {branch.status}">
+			<div class="name-label-wrap">
+				<SeriesIcon single={true} outlined />
+
+				<span class="text-12 text-semibold truncate">
+					{branch.name}
+				</span>
+				{#if branch.status}
+					<span class="status-badge text-10 text-semibold">
+						{#if branch.status === 'conflicted'}
+							Conflicted
+						{:else if branch.status === 'integrated'}
+							Integrated
+						{/if}
+					</span>
+				{/if}
+			</div>
+
+			{#if select && branch.status !== 'integrated'}
+				<div class="select">
+					{@render select()}
+				</div>
+			{/if}
+			{#if branch.status === 'integrated'}
+				<div class="integrated-label-wrap">
+					<Icon name="tick-small" />
+					<span class="integrated-label text-12"> Part of the new base </span>
+				</div>
+			{/if}
+		</div>
 	{/if}
 </div>
 
@@ -92,6 +120,22 @@
 			gap: 12px;
 			padding: 12px 12px 12px 14px;
 			min-height: 56px;
+
+			&.conflicted {
+				.status-badge {
+					background-color: var(--clr-theme-warn-on-element);
+					background-color: var(--clr-theme-warn-element);
+				}
+			}
+
+			&.integrated {
+				background-color: var(--clr-bg-1-muted);
+
+				.status-badge {
+					color: var(--clr-theme-purp-on-element);
+					background-color: var(--clr-theme-purp-element);
+				}
+			}
 		}
 
 		.series-label {
@@ -123,6 +167,27 @@
 		margin-top: -10px;
 	}
 
+	.status-badge {
+		padding: 4px 6px 3px;
+		height: 100%;
+		border-radius: var(--radius-m);
+		color: var(--clr-core-ntrl-100);
+	}
+
+	/* INTEGRATED LABEL */
+	.integrated-label-wrap {
+		display: flex;
+		align-items: center;
+		gap: 4px;
+		padding-left: 6px;
+		margin-right: 2px;
+		color: var(--clr-text-2);
+	}
+
+	.integrated-label {
+		white-space: nowrap;
+	}
+
 	.series-branch {
 		display: flex;
 		align-items: center;
@@ -136,14 +201,6 @@
 			overflow: hidden;
 			flex: 1;
 		}
-
-		.status-badge {
-			padding: 4px 6px 3px;
-			height: 100%;
-			border-radius: var(--radius-m);
-			color: var(--clr-core-ntrl-100);
-		}
-
 		&.conflicted {
 			.status-badge {
 				background-color: var(--clr-theme-warn-on-element);
@@ -160,20 +217,6 @@
 			}
 		}
 
-		/* INTEGRATED LABEL */
-		.integrated-label-wrap {
-			display: flex;
-			align-items: center;
-			gap: 4px;
-			padding-left: 6px;
-			margin-right: 2px;
-			color: var(--clr-text-2);
-		}
-
-		.integrated-label {
-			white-space: nowrap;
-		}
-
 		/* NESTING LINES */
 		.structure-lines {
 			position: relative;