From 35b3991ab8405bcb9c0b8fca9c70a99001f1eb6c Mon Sep 17 00:00:00 2001
From: Mattias Granlund <mtsgrd@gmail.com>
Date: Wed, 11 Sep 2024 16:11:19 +0200
Subject: [PATCH] Use modified branch header whens stacking is enabled

---
 .../src/lib/branch/BranchHeader.svelte        | 173 ++++++++++--------
 .../src/lib/branch/DefaultTargetButton.svelte |  34 ++++
 2 files changed, 135 insertions(+), 72 deletions(-)
 create mode 100644 apps/desktop/src/lib/branch/DefaultTargetButton.svelte

diff --git a/apps/desktop/src/lib/branch/BranchHeader.svelte b/apps/desktop/src/lib/branch/BranchHeader.svelte
index 331e8f18b..0c7dd0182 100644
--- a/apps/desktop/src/lib/branch/BranchHeader.svelte
+++ b/apps/desktop/src/lib/branch/BranchHeader.svelte
@@ -2,10 +2,12 @@
 	import ActiveBranchStatus from './ActiveBranchStatus.svelte';
 	import BranchLabel from './BranchLabel.svelte';
 	import BranchLaneContextMenu from './BranchLaneContextMenu.svelte';
+	import DefaultTargetButton from './DefaultTargetButton.svelte';
 	import PullRequestButton from '../pr/PullRequestButton.svelte';
 	import { BaseBranch } from '$lib/baseBranch/baseBranch';
 	import { BaseBranchService } from '$lib/baseBranch/baseBranchService';
 	import ContextMenu from '$lib/components/contextmenu/ContextMenu.svelte';
+	import { featureBranchStacking } from '$lib/config/uiFeatureFlags';
 	import { mapErrorToToast } from '$lib/gitHost/github/errorMap';
 	import { getGitHost } from '$lib/gitHost/interface/gitHost';
 	import { getGitHostListingService } from '$lib/gitHost/interface/gitHostListingService';
@@ -44,6 +46,8 @@
 	const branch = $derived($branchStore);
 	const pr = $derived($prMonitor?.pr);
 
+	const branchStacking = featureBranchStacking();
+
 	let contextMenu = $state<ContextMenu>();
 	let meatballButtonEl = $state<HTMLDivElement>();
 	let isLoading = $state(false);
@@ -208,90 +212,101 @@
 					<Icon name="draggable" />
 				</div>
 
-				<div class="header__info">
+				<div class:header__info={!branchStacking} class:stacking-header__info={branchStacking}>
 					<BranchLabel name={branch.name} onChange={(name) => handleBranchNameChange(name)} />
-					<div class="header__remote-branch">
-						<ActiveBranchStatus
-							{hasIntegratedCommits}
-							remoteExists={!!branch.upstream}
-							isLaneCollapsed={$isLaneCollapsed}
-						/>
+					{#if branchStacking}
+						<span class="button-group">
+							<DefaultTargetButton
+								selectedForChanges={branch.selectedForChanges}
+								onclick={async () => {
+									isTargetBranchAnimated = true;
+									await branchController.setSelectedForChanges(branch.id);
+								}}
+							/>
+							<Button
+								bind:el={meatballButtonEl}
+								style="ghost"
+								icon="kebab"
+								onclick={() => {
+									contextMenu?.toggle();
+								}}
+							/>
+							<BranchLaneContextMenu
+								bind:contextMenuEl={contextMenu}
+								target={meatballButtonEl}
+								onCollapse={collapseLane}
+								{onGenerateBranchName}
+							/>
+						</span>
+					{:else}
+						<div class="header__remote-branch">
+							<ActiveBranchStatus
+								{hasIntegratedCommits}
+								remoteExists={!!branch.upstream}
+								isLaneCollapsed={$isLaneCollapsed}
+							/>
 
-						{#await branch.isMergeable then isMergeable}
-							{#if !isMergeable}
-								<Button
-									size="tag"
-									clickable={false}
-									icon="locked-small"
-									style="warning"
-									tooltip="Applying this branch will add merge conflict markers that you will have to resolve"
-								>
-									Conflict
-								</Button>
-							{/if}
-						{/await}
-					</div>
+							{#await branch.isMergeable then isMergeable}
+								{#if !isMergeable}
+									<Button
+										size="tag"
+										clickable={false}
+										icon="locked-small"
+										style="warning"
+										tooltip="Applying this branch will add merge conflict markers that you will have to resolve"
+									>
+										Conflict
+									</Button>
+								{/if}
+							{/await}
+						</div>
+					{/if}
 				</div>
 			</div>
 
-			<div class="header__actions">
-				<div class="header__buttons">
-					{#if branch.selectedForChanges}
-						<Button
-							style="pop"
-							kind="soft"
-							tooltip="New changes will land here"
-							icon="target"
-							clickable={false}
-						>
-							Default branch
-						</Button>
-					{:else}
-						<Button
-							style="ghost"
-							outline
-							tooltip="When selected, new changes land here"
-							icon="target"
+			{#if !branchStacking}
+				<div class="header__actions">
+					<div class="header__buttons">
+						<DefaultTargetButton
+							selectedForChanges={branch.selectedForChanges}
 							onclick={async () => {
 								isTargetBranchAnimated = true;
 								await branchController.setSelectedForChanges(branch.id);
 							}}
-						>
-							Set as default
-						</Button>
-					{/if}
-				</div>
-
-				<div class="relative">
-					<div class="header__buttons">
-						{#if !$pr}
-							<PullRequestButton
-								click={async ({ draft }) => await createPr({ draft })}
-								disabled={branch.commits.length === 0 || !$gitHost || !$prService}
-								tooltip={!$gitHost || !$prService
-									? 'You can enable git host integration in the settings'
-									: ''}
-								loading={isLoading}
-							/>
-						{/if}
-						<Button
-							bind:el={meatballButtonEl}
-							style="ghost"
-							outline
-							icon="kebab"
-							onclick={() => {
-								contextMenu?.toggle();
-							}}
-						/>
-						<BranchLaneContextMenu
-							bind:contextMenuEl={contextMenu}
-							target={meatballButtonEl}
-							onCollapse={collapseLane}
-							{onGenerateBranchName}
 						/>
 					</div>
+
+					<div class="relative">
+						<div class="header__buttons">
+							{#if !$pr}
+								<PullRequestButton
+									click={async ({ draft }) => await createPr({ draft })}
+									disabled={branch.commits.length === 0 || !$gitHost || !$prService}
+									tooltip={!$gitHost || !$prService
+										? 'You can enable git host integration in the settings'
+										: ''}
+									loading={isLoading}
+								/>
+							{/if}
+							<Button
+								bind:el={meatballButtonEl}
+								style="ghost"
+								outline
+								icon="kebab"
+								onclick={() => {
+									contextMenu?.toggle();
+								}}
+							/>
+							<BranchLaneContextMenu
+								bind:contextMenuEl={contextMenu}
+								target={meatballButtonEl}
+								onCollapse={collapseLane}
+								{onGenerateBranchName}
+							/>
+						</div>
+					</div>
 				</div>
-			</div>
+			{/if}
 		</div>
 		<div class="header__top-overlay" data-remove-from-draggable data-tauri-drag-region></div>
 	</div>
@@ -362,6 +377,20 @@
 		overflow: hidden;
 		gap: 10px;
 	}
+	/* TODO: Remove me after stacking feature toggle has been removed. */
+	.stacking-header__info {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+		justify-content: space-between;
+		align-items: center;
+		gap: 10px;
+	}
+	.button-group {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+	}
 	.header__actions {
 		display: flex;
 		gap: 4px;
diff --git a/apps/desktop/src/lib/branch/DefaultTargetButton.svelte b/apps/desktop/src/lib/branch/DefaultTargetButton.svelte
new file mode 100644
index 000000000..765af587f
--- /dev/null
+++ b/apps/desktop/src/lib/branch/DefaultTargetButton.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import Button from '@gitbutler/ui/Button.svelte';
+
+	interface Props {
+		selectedForChanges: boolean;
+		onclick: () => void;
+	}
+
+	const { selectedForChanges }: Props = $props();
+</script>
+
+{#if selectedForChanges}
+	<Button
+		style="pop"
+		kind="soft"
+		tooltip="New changes will land here"
+		icon="target"
+		size="tag"
+		clickable={false}
+	>
+		Default branch
+	</Button>
+{:else}
+	<Button
+		style="ghost"
+		outline
+		tooltip="When selected, new changes land here"
+		icon="target"
+		size="tag"
+		{onclick}
+	>
+		Set as default
+	</Button>
+{/if}