From 531cbde1ff6c5e90ec81cd3a88dedc581fe75294 Mon Sep 17 00:00:00 2001
From: Nico Domino <yo@ndo.dev>
Date: Wed, 9 Oct 2024 16:59:37 +0200
Subject: [PATCH] fix: stackingCommitList reorder-dropzone and "add empty
 commit" btn rendering (#5066)

---
 apps/desktop/src/lib/commit/CommitList.svelte |  9 +--
 .../src/lib/commit/StackingCommitList.svelte  | 61 ++++++-------------
 .../components/InsertEmptyCommitAction.svelte | 27 ++++----
 apps/desktop/src/lib/stack/StackSeries.svelte |  5 +-
 4 files changed, 39 insertions(+), 63 deletions(-)

diff --git a/apps/desktop/src/lib/commit/CommitList.svelte b/apps/desktop/src/lib/commit/CommitList.svelte
index 6db6deafd..e631f2cf7 100644
--- a/apps/desktop/src/lib/commit/CommitList.svelte
+++ b/apps/desktop/src/lib/commit/CommitList.svelte
@@ -188,10 +188,7 @@
 		<!-- LOCAL COMMITS -->
 		{#if localCommits.length > 0}
 			<div class="commits-group">
-				<InsertEmptyCommitAction
-					isFirst
-					on:click={() => insertBlankCommit($branch.head, 'above')}
-				/>
+				<InsertEmptyCommitAction isFirst onclick={() => insertBlankCommit($branch.head, 'above')} />
 				{@render reorderDropzone(
 					reorderDropzoneManager.topDropzone,
 					getReorderDropzoneOffset({ isFirst: true })
@@ -221,7 +218,7 @@
 
 					<InsertEmptyCommitAction
 						isLast={idx + 1 === localCommits.length}
-						on:click={() => insertBlankCommit(commit.id, 'below')}
+						onclick={() => insertBlankCommit(commit.id, 'below')}
 					/>
 				{/each}
 				{#if pushButton}
@@ -263,7 +260,7 @@
 					)}
 					<InsertEmptyCommitAction
 						isLast={idx + 1 === localAndRemoteCommits.length}
-						on:click={() => insertBlankCommit(commit.id, 'below')}
+						onclick={() => insertBlankCommit(commit.id, 'below')}
 					/>
 				{/each}
 
diff --git a/apps/desktop/src/lib/commit/StackingCommitList.svelte b/apps/desktop/src/lib/commit/StackingCommitList.svelte
index 9183ba72e..12b992d9b 100644
--- a/apps/desktop/src/lib/commit/StackingCommitList.svelte
+++ b/apps/desktop/src/lib/commit/StackingCommitList.svelte
@@ -98,27 +98,12 @@
 		}
 		branchController.insertBlankCommit($branch.id, commitId, location === 'above' ? -1 : 1);
 	}
-
-	function getReorderDropzoneOffset({
-		isFirst = false,
-		isMiddle = false,
-		isLast = false
-	}: {
-		isFirst?: boolean;
-		isMiddle?: boolean;
-		isLast?: boolean;
-	}) {
-		if (isFirst) return 12;
-		if (isMiddle) return 6;
-		if (isLast) return 0;
-		return 0;
-	}
 </script>
 
-{#snippet reorderDropzone(dropzone: ReorderDropzone, yOffsetPx: number)}
+{#snippet reorderDropzone(dropzone: ReorderDropzone)}
 	<Dropzone accepts={dropzone.accepts.bind(dropzone)} ondrop={dropzone.onDrop.bind(dropzone)}>
 		{#snippet overlay({ hovered, activated })}
-			<LineOverlay {hovered} {activated} {yOffsetPx} />
+			<LineOverlay {hovered} {activated} />
 		{/snippet}
 	</Dropzone>
 {/snippet}
@@ -170,14 +155,10 @@
 		<!-- LOCAL COMMITS -->
 		{#if localCommits.length > 0}
 			<div class="commits-group">
-				<InsertEmptyCommitAction
-					isFirst
-					on:click={() => insertBlankCommit($branch.head, 'above')}
-				/>
-				{@render reorderDropzone(
-					reorderDropzoneManager.topDropzone,
-					getReorderDropzoneOffset({ isFirst: true })
-				)}
+				<InsertEmptyCommitAction isFirst onclick={() => insertBlankCommit($branch.head, 'above')} />
+
+				{@render reorderDropzone(reorderDropzoneManager.topDropzone)}
+
 				{#each localCommits as commit, idx (commit.id)}
 					<StackingCommitDragItem {commit}>
 						<StackingCommitCard
@@ -194,17 +175,11 @@
 						</StackingCommitCard>
 					</StackingCommitDragItem>
 
-					{@render reorderDropzone(
-						reorderDropzoneManager.dropzoneBelowCommit(commit.id),
-						getReorderDropzoneOffset({
-							isLast: idx + 1 === localCommits.length,
-							isMiddle: idx + 1 === localCommits.length
-						})
-					)}
+					{@render reorderDropzone(reorderDropzoneManager.dropzoneBelowCommit(commit.id))}
 
 					<InsertEmptyCommitAction
 						isLast={idx + 1 === localCommits.length}
-						on:click={() => insertBlankCommit(commit.id, 'below')}
+						onclick={() => insertBlankCommit(commit.id, 'below')}
 					/>
 				{/each}
 			</div>
@@ -213,6 +188,14 @@
 		<!-- LOCAL AND REMOTE COMMITS -->
 		{#if localAndRemoteCommits.length > 0}
 			<div class="commits-group">
+				{#if localCommits.length === 0}
+					<InsertEmptyCommitAction
+						isFirst
+						onclick={() => insertBlankCommit($branch.head, 'above')}
+					/>
+
+					{@render reorderDropzone(reorderDropzoneManager.topDropzone)}
+				{/if}
 				{#each localAndRemoteCommits as commit, idx (commit.id)}
 					<StackingCommitDragItem {commit}>
 						<StackingCommitCard
@@ -229,15 +212,12 @@
 							{/snippet}
 						</StackingCommitCard>
 					</StackingCommitDragItem>
-					{@render reorderDropzone(
-						reorderDropzoneManager.dropzoneBelowCommit(commit.id),
-						getReorderDropzoneOffset({
-							isMiddle: idx + 1 === localAndRemoteCommits.length
-						})
-					)}
+
+					{@render reorderDropzone(reorderDropzoneManager.dropzoneBelowCommit(commit.id))}
+
 					<InsertEmptyCommitAction
 						isLast={idx + 1 === localAndRemoteCommits.length}
-						on:click={() => insertBlankCommit(commit.id, 'below')}
+						onclick={() => insertBlankCommit(commit.id, 'below')}
 					/>
 				{/each}
 
@@ -284,7 +264,6 @@
 		flex-direction: column;
 		background-color: var(--clr-bg-2);
 		border-radius: 0 0 var(--radius-m) var(--radius-m);
-		overflow: hidden;
 	}
 
 	.commits-group {
diff --git a/apps/desktop/src/lib/components/InsertEmptyCommitAction.svelte b/apps/desktop/src/lib/components/InsertEmptyCommitAction.svelte
index 93668c3ee..467aab701 100644
--- a/apps/desktop/src/lib/components/InsertEmptyCommitAction.svelte
+++ b/apps/desktop/src/lib/components/InsertEmptyCommitAction.svelte
@@ -1,19 +1,21 @@
 <script lang="ts">
+	import { stackingFeature } from '$lib/config/uiFeatureFlags';
 	import Button from '@gitbutler/ui/Button.svelte';
-	import { createEventDispatcher } from 'svelte';
 
-	export let isLast = false;
-	export let isFirst = false;
-	export let isMiddle = false;
+	interface Props {
+		isLast?: boolean;
+		isFirst?: boolean;
+		onclick?: () => void;
+	}
 
-	const dispatch = createEventDispatcher<{ click: void }>();
+	const { isLast = false, isFirst = false, onclick }: Props = $props();
 </script>
 
 <div
 	class="line-container"
 	class:is-last={isLast}
 	class:is-first={isFirst}
-	class:is-middle={isMiddle}
+	class:not-stacking={!$stackingFeature}
 >
 	<div class="hover-target">
 		<Button
@@ -25,7 +27,7 @@
 			width={26}
 			tooltip="Insert empty commit"
 			helpShowDelay={500}
-			onclick={() => dispatch('click')}
+			onclick={onclick?.()}
 		/>
 	</div>
 </div>
@@ -93,16 +95,11 @@
 	}
 
 	/* MODIFIERS */
-
-	.line-container.is-last {
-		transform: translateY(-4px);
-	}
-
-	.line-container.is-first {
+	.line-container.not-stacking.is-first {
 		transform: translateY(16px);
 	}
 
-	.line-container.is-middle {
-		transform: translateY(6px);
+	.line-container.not-stacking.is-last {
+		transform: translateY(-4px);
 	}
 </style>
diff --git a/apps/desktop/src/lib/stack/StackSeries.svelte b/apps/desktop/src/lib/stack/StackSeries.svelte
index 50b9df290..e05c964c8 100644
--- a/apps/desktop/src/lib/stack/StackSeries.svelte
+++ b/apps/desktop/src/lib/stack/StackSeries.svelte
@@ -59,6 +59,9 @@
 		border: 1px solid var(--clr-border-2);
 		border-radius: var(--radius-m);
 		background: var(--clr-bg-1);
-		overflow: hidden;
+
+		&:last-child {
+			margin-bottom: 12px;
+		}
 	}
 </style>