From dc043da5070775b3aba26bb453906f7c6acd421c Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Fri, 15 Nov 2024 16:06:54 +0100
Subject: [PATCH] refactor `CommitAction` component

---
 .../src/lib/commit/CommitAction.svelte        | 54 ++++++----------
 apps/desktop/src/lib/commit/CommitList.svelte | 62 ++++++++++++-------
 .../commit/UpstreamCommitsAccordion.svelte    | 17 ++---
 .../src/lib/components/BaseBranch.svelte      | 10 +--
 apps/desktop/src/lib/stack/SeriesList.svelte  |  4 --
 packages/ui/src/lib/commitLines/Cell.svelte   |  2 +-
 6 files changed, 68 insertions(+), 81 deletions(-)

diff --git a/apps/desktop/src/lib/commit/CommitAction.svelte b/apps/desktop/src/lib/commit/CommitAction.svelte
index fdc900b17..f9b93157c 100644
--- a/apps/desktop/src/lib/commit/CommitAction.svelte
+++ b/apps/desktop/src/lib/commit/CommitAction.svelte
@@ -1,43 +1,22 @@
 <script lang="ts">
-	import { intersectionObserver } from '$lib/utils/intersectionObserver';
+	import { getColorFromBranchType } from '@gitbutler/ui/utils/getColorFromBranchType';
 	import { type Snippet } from 'svelte';
+	import type { CellType } from '@gitbutler/ui/commitLines/types';
 
 	interface Props {
-		bottomBorder?: boolean;
-		backgroundColor?: boolean;
-		lines: Snippet;
+		type: CellType;
+		isLast?: boolean;
 		action: Snippet;
 	}
 
-	const { bottomBorder = true, backgroundColor = true, lines, action }: Props = $props();
-
-	let isNotInViewport = $state(false);
+	const { type, isLast, action }: Props = $props();
 </script>
 
-<div
-	class="action-row sticky"
-	class:not-in-viewport={!isNotInViewport}
-	class:sticky-z-index={!isNotInViewport}
-	class:bottom-border={bottomBorder}
-	class:background-color={backgroundColor}
-	use:intersectionObserver={{
-		callback: (entry) => {
-			if (entry?.isIntersecting) {
-				isNotInViewport = false;
-			} else {
-				isNotInViewport = true;
-			}
-		},
-		options: {
-			root: null,
-			rootMargin: `-100% 0px 0px 0px`,
-			threshold: 0
-		}
-	}}
->
-	<div>
-		{@render lines()}
+<div class="action-row" style:--commit-color={getColorFromBranchType(type)}>
+	<div class="commit-line-wrapper">
+		<div class="commit-line" class:dashed={isLast}></div>
 	</div>
+
 	<div class="action">
 		{@render action()}
 	</div>
@@ -47,10 +26,9 @@
 	.action-row {
 		position: relative;
 		display: flex;
-
+		background-color: var(--clr-bg-1);
+		border-top: 1px solid var(--clr-border-3);
 		overflow: hidden;
-
-		transition: border-top var(--transition-fast);
 	}
 
 	.background-color {
@@ -61,9 +39,15 @@
 		display: flex;
 		flex-direction: column;
 		width: 100%;
-		padding-top: 10px;
+		padding-top: 14px;
 		padding-right: 14px;
-		padding-bottom: 10px;
+		padding-bottom: 14px;
+	}
+
+	.commit-line-wrapper {
+		position: relative;
+		margin-left: 20px;
+		margin-right: 20px;
 	}
 
 	/* MODIFIERS */
diff --git a/apps/desktop/src/lib/commit/CommitList.svelte b/apps/desktop/src/lib/commit/CommitList.svelte
index 7d1ddaae0..0d40a9210 100644
--- a/apps/desktop/src/lib/commit/CommitList.svelte
+++ b/apps/desktop/src/lib/commit/CommitList.svelte
@@ -15,14 +15,13 @@
 		BranchController,
 		type SeriesIntegrationStrategy
 	} from '$lib/vbranches/branchController';
-	import { DetailedCommit, VirtualBranch, type CommitStatus } from '$lib/vbranches/types';
+	import { DetailedCommit, VirtualBranch } from '$lib/vbranches/types';
 	import { getContext } from '@gitbutler/shared/context';
 	import { getContextStore } from '@gitbutler/shared/context';
 	import Button from '@gitbutler/ui/Button.svelte';
 	import Modal from '@gitbutler/ui/Modal.svelte';
 	import Line from '@gitbutler/ui/commitLines/Line.svelte';
-	import { LineManagerFactory, LineSpacer } from '@gitbutler/ui/commitLines/lineManager';
-	import type { Snippet } from 'svelte';
+	import { LineManagerFactory } from '@gitbutler/ui/commitLines/lineManager';
 
 	const integrationStrategies = {
 		default: {
@@ -32,7 +31,7 @@
 			action: integrate
 		},
 		reset: {
-			label: 'Reset to remote',
+			label: 'Reset to remote…',
 			stretegy: 'hardreset',
 			style: 'error',
 			action: confirmReset
@@ -46,8 +45,6 @@
 		patches: DetailedCommit[];
 		seriesName: string;
 		isUnapplied: boolean;
-		pushButton?: Snippet<[{ disabled: boolean }]>;
-		hasConflicts: boolean;
 		stackingReorderDropzoneManager: StackingReorderDropzoneManager;
 		isBottom?: boolean;
 	}
@@ -56,8 +53,6 @@
 		patches,
 		seriesName,
 		isUnapplied,
-		pushButton,
-		hasConflicts,
 		stackingReorderDropzoneManager,
 		isBottom = false
 	}: Props = $props();
@@ -86,9 +81,9 @@
 	const hasRemoteCommits = $derived(remoteOnlyPatches.length > 0);
 	let isIntegratingCommits = $state(false);
 
-	const topPatch = $derived(patches[0]);
-	const branchType = $derived<CommitStatus>(topPatch?.status ?? 'local');
-	const isBranchIntegrated = $derived(branchType === 'integrated');
+	// const topPatch = $derived(patches[0]);
+	// const branchType = $derived<CommitStatus>(topPatch?.status ?? 'local');
+	// const isBranchIntegrated = $derived(branchType === 'integrated');
 
 	let confirmResetModal = $state<ReturnType<typeof Modal>>();
 
@@ -139,18 +134,22 @@
 						isHeadCommit={commit.id === headCommit?.id}
 					>
 						{#snippet lines()}
-							<Line line={lineManager.get(commit.id)} />
+							<Line
+								line={lineManager.get(commit.id)}
+								isBottom={!hasCommits && idx === remoteOnlyPatches.length - 1}
+							/>
 						{/snippet}
 					</CommitCard>
 				{/each}
-				{#snippet action()}
-					{@render integrateUpstreamButton('default')}
-				{/snippet}
+
+				<CommitAction type="remote" isLast={!hasCommits}>
+					{#snippet action()}
+						{@render integrateUpstreamButton('default')}
+					{/snippet}
+				</CommitAction>
 			</UpstreamCommitsAccordion>
 		{/if}
 
-		<!-- DIVERGED -->
-
 		<!-- REMAINING LOCAL, LOCALANDREMOTE, AND INTEGRATED COMMITS -->
 		{#if patches.length > 0}
 			<div class="commits-group">
@@ -183,17 +182,23 @@
 
 					<!-- RESET TO REMOTE BUTTON -->
 					{#if lastDivergentCommit?.id === commit.id}
-						<div class="action-row" class:last={idx === patches.length - 1}>
+						<CommitAction type="local" isLast={idx === patches.length - 1}>
+							{#snippet action()}
+								{@render integrateUpstreamButton('reset')}
+							{/snippet}
+						</CommitAction>
+						<!-- <div class="action-row" class:last={idx === patches.length - 1}>
 							<div class="action-row__line" class:last={idx === patches.length - 1}></div>
 							<div class="action-row__button-wrapper">
 								{@render integrateUpstreamButton('reset')}
 							</div>
-						</div>
+						</div> -->
 					{/if}
 				{/each}
 			</div>
 		{/if}
-		{#if remoteOnlyPatches.length > 0 && patches.length === 0 && !isBranchIntegrated && pushButton}
+
+		<!-- {#if remoteOnlyPatches.length > 0 && patches.length === 0 && !isBranchIntegrated && pushButton}
 			<CommitAction>
 				{#snippet lines()}
 					<Line line={lineManager.get(LineSpacer.LocalAndRemote)} />
@@ -202,7 +207,7 @@
 					{@render pushButton({ disabled: hasConflicts })}
 				{/snippet}
 			</CommitAction>
-		{/if}
+		{/if} -->
 	</div>
 
 	<Modal
@@ -245,6 +250,21 @@
 		}
 	}
 
+	.accordion-row__actions {
+		display: flex;
+		width: 100%;
+		align-items: stretch;
+		padding-right: 14px;
+		background-color: var(--clr-bg-1);
+	}
+
+	.accordion-row__actions__content {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		padding: 14px 0 14px;
+	}
+
 	.action-row {
 		display: flex;
 		width: 100%;
diff --git a/apps/desktop/src/lib/commit/UpstreamCommitsAccordion.svelte b/apps/desktop/src/lib/commit/UpstreamCommitsAccordion.svelte
index b1d07c3c8..8c687183f 100644
--- a/apps/desktop/src/lib/commit/UpstreamCommitsAccordion.svelte
+++ b/apps/desktop/src/lib/commit/UpstreamCommitsAccordion.svelte
@@ -6,12 +6,12 @@
 		count: number;
 		isLast?: boolean;
 		children: Snippet;
-		action: Snippet;
 	}
 
-	const { count, isLast, children, action }: Props = $props();
+	const { count, isLast, children }: Props = $props();
 
 	let isOpen = $state(count === 1);
+	// let isOpen = true;
 
 	function toggle() {
 		isOpen = !isOpen;
@@ -55,13 +55,6 @@
 		<div class="accordion-children">
 			{@render children()}
 		</div>
-
-		<div class="accordion-row__actions">
-			<div class="accordion-row__line"></div>
-			<div class="accordion-row__actions__content">
-				{@render action()}
-			</div>
-		</div>
 	{/if}
 </div>
 
@@ -89,7 +82,7 @@
 		}
 	}
 
-	.accordion-row__actions {
+	/* .accordion-row__actions {
 		display: flex;
 		width: 100%;
 		align-items: stretch;
@@ -102,7 +95,7 @@
 		flex-direction: column;
 		flex: 1;
 		padding: 14px 0 14px;
-	}
+	} */
 
 	.accordion-row__header {
 		display: flex;
@@ -164,6 +157,6 @@
 		min-height: 44px;
 		align-items: stretch;
 		text-align: left;
-		border-bottom: 1px solid var(--clr-border-3);
+		/* border-bottom: 1px solid var(--clr-border-3); */
 	}
 </style>
diff --git a/apps/desktop/src/lib/components/BaseBranch.svelte b/apps/desktop/src/lib/components/BaseBranch.svelte
index 02f9f4c93..15a72ddf2 100644
--- a/apps/desktop/src/lib/components/BaseBranch.svelte
+++ b/apps/desktop/src/lib/components/BaseBranch.svelte
@@ -220,10 +220,7 @@
 		{/each}
 
 		{#if base.diverged}
-			<CommitAction backgroundColor={false}>
-				{#snippet lines()}
-					<Line line={lineManager.get(LineSpacer.Remote)} />
-				{/snippet}
+			<CommitAction type={'remote'}>
 				{#snippet action()}
 					<Button
 						wide
@@ -260,10 +257,7 @@
 			</CommitCard>
 		{/each}
 
-		<CommitAction backgroundColor={false}>
-			{#snippet lines()}
-				<Line line={lineManager.get(LineSpacer.Local)} />
-			{/snippet}
+		<CommitAction type={'local'}>
 			{#snippet action()}
 				<div class="local-actions-wrapper">
 					<Button
diff --git a/apps/desktop/src/lib/stack/SeriesList.svelte b/apps/desktop/src/lib/stack/SeriesList.svelte
index d8f080bb5..8b377c81e 100644
--- a/apps/desktop/src/lib/stack/SeriesList.svelte
+++ b/apps/desktop/src/lib/stack/SeriesList.svelte
@@ -24,9 +24,6 @@
 	const { branch, lastPush }: Props = $props();
 
 	const branchController = getContext(BranchController);
-	const hasConflicts = $derived(
-		branch.series.flatMap((s) => s.patches).some((patch) => patch.conflicted)
-	);
 
 	const nonArchivedSeries = $derived(branch.series.filter((s) => !s.archived));
 
@@ -82,7 +79,6 @@
 				isUnapplied={false}
 				isBottom={idx === branch.series.length - 1}
 				{stackingReorderDropzoneManager}
-				{hasConflicts}
 			/>
 		{/if}
 	</CurrentSeries>
diff --git a/packages/ui/src/lib/commitLines/Cell.svelte b/packages/ui/src/lib/commitLines/Cell.svelte
index 716b64a8e..eb7db3727 100644
--- a/packages/ui/src/lib/commitLines/Cell.svelte
+++ b/packages/ui/src/lib/commitLines/Cell.svelte
@@ -6,7 +6,7 @@
 	const { isBottom = false }: Props = $props();
 </script>
 
-<div class="commit-line stacked" class:dashed={isBottom}></div>
+<div class="commit-line" class:dashed={isBottom}></div>
 
 <style lang="postcss">
 	.commit-line {