From f83fa5f669e951c987759c88df785802ebe571c0 Mon Sep 17 00:00:00 2001
From: Pavel Laptev <pawellaptew@gmail.com>
Date: Tue, 7 May 2024 00:51:34 +0200
Subject: [PATCH] Refactor: Remove vertical orientation as a prop (#3717)

---
 .../lib/components/ActiveBranchStatus.svelte  | 12 +--
 app/src/lib/components/BranchCard.svelte      |  6 +-
 app/src/lib/components/BranchHeader.svelte    | 77 +++++++++++--------
 app/src/lib/components/PullRequestCard.svelte |  5 --
 app/src/lib/components/Tag.svelte             | 22 +-----
 5 files changed, 51 insertions(+), 71 deletions(-)

diff --git a/app/src/lib/components/ActiveBranchStatus.svelte b/app/src/lib/components/ActiveBranchStatus.svelte
index ae04f5ab7..9e6c54b7e 100644
--- a/app/src/lib/components/ActiveBranchStatus.svelte
+++ b/app/src/lib/components/ActiveBranchStatus.svelte
@@ -20,8 +20,7 @@
 			icon="virtual-branch-small"
 			style="neutral"
 			help="These changes are stashed away from your working directory."
-			reversedDirection
-			verticalOrientation={isLaneCollapsed}>unapplied</Tag
+			reversedDirection>unapplied</Tag
 		>
 	{:else if hasIntegratedCommits}
 		<Tag
@@ -29,16 +28,14 @@
 			style="success"
 			kind="solid"
 			help="These changes have been integrated upstream, update your workspace to make this lane disappear."
-			reversedDirection
-			verticalOrientation={isLaneCollapsed}>Integrated</Tag
+			reversedDirection>Integrated</Tag
 		>
 	{:else}
 		<Tag
 			icon="virtual-branch-small"
 			style="neutral"
 			help="These changes are in your working directory."
-			reversedDirection
-			verticalOrientation={isLaneCollapsed}>Virtual</Tag
+			reversedDirection>Virtual</Tag
 		>
 	{/if}
 	{#if !isUnapplied && !isLaneCollapsed}
@@ -47,7 +44,6 @@
 			shrinkable
 			disabled
 			help="Branch name that will be used when pushing. You can change it from the lane menu."
-			verticalOrientation={isLaneCollapsed}
 		>
 			{$baseBranch.actualPushRemoteName()}/{branchName}</Tag
 		>
@@ -58,7 +54,6 @@
 		kind="solid"
 		icon="remote-branch-small"
 		help="At least some of your changes have been pushed"
-		verticalOrientation={isLaneCollapsed}
 		reversedDirection>Remote</Tag
 	>
 	<Tag
@@ -67,7 +62,6 @@
 		kind="solid"
 		clickable
 		shrinkable
-		verticalOrientation={isLaneCollapsed}
 		on:click={(e) => {
 			const url = $baseBranch?.branchUrl($branch.upstream?.name);
 			if (url) openExternalUrl(url);
diff --git a/app/src/lib/components/BranchCard.svelte b/app/src/lib/components/BranchCard.svelte
index 548067cd2..d041f9b79 100644
--- a/app/src/lib/components/BranchCard.svelte
+++ b/app/src/lib/components/BranchCard.svelte
@@ -144,7 +144,7 @@
 </script>
 
 {#if $isLaneCollapsed}
-	<div class="collapsed-lane-wrapper">
+	<div class="collapsed-lane-container">
 		<BranchHeader
 			{isUnapplied}
 			uncommittedChanges={branch.files.length}
@@ -184,7 +184,7 @@
 							}
 						}}
 					/>
-					<PullRequestCard isLaneCollapsed={$isLaneCollapsed} />
+					<PullRequestCard />
 					<!-- DROPZONES -->
 					<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
 					<DropzoneOverlay class="cherrypick-dz-marker" label="Apply here" />
@@ -419,7 +419,7 @@
 	}
 
 	/* COLLAPSED LANE */
-	.collapsed-lane-wrapper {
+	.collapsed-lane-container {
 		display: flex;
 		flex-direction: column;
 		padding: var(--size-12);
diff --git a/app/src/lib/components/BranchHeader.svelte b/app/src/lib/components/BranchHeader.svelte
index 80ff10856..c01a74dcb 100644
--- a/app/src/lib/components/BranchHeader.svelte
+++ b/app/src/lib/components/BranchHeader.svelte
@@ -47,6 +47,8 @@
 	}
 
 	$: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
+
+	let headerInfoHeight = 0;
 </script>
 
 {#if $isLaneCollapsed}
@@ -69,31 +71,32 @@
 			/>
 		</div>
 
-		<div class="collapsed-lane__info">
-			<div class="collapsed-lane__label-wrap">
-				{#if uncommittedChanges > 0}
-					<Tag style="warning" kind="soft" verticalOrientation help="Uncommitted changes">
-						{uncommittedChanges}
-						{uncommittedChanges == 1 ? 'change' : 'changes'}
-					</Tag>
-				{/if}
+		<div class="collapsed-lane__info-wrap" bind:clientHeight={headerInfoHeight}>
+			<div class="collapsed-lane__info" style="width: {headerInfoHeight}px">
+				<div class="collapsed-lane__label-wrap">
+					<h3 class="collapsed-lane__label text-base-13 text-bold">
+						{branch.name}
+					</h3>
+					{#if uncommittedChanges > 0}
+						<Tag style="warning" kind="soft" help="Uncommitted changes">
+							{uncommittedChanges}
+							{uncommittedChanges == 1 ? 'change' : 'changes'}
+						</Tag>
+					{/if}
+				</div>
 
-				<h3 class="collapsed-lane__label text-base-13 text-bold">
-					{branch.name}
-				</h3>
-			</div>
-
-			<div class="collapsed-lane__info__details">
-				<ActiveBranchStatus
-					branchName={branch.upstreamName ?? branchName}
-					{isUnapplied}
-					{hasIntegratedCommits}
-					remoteExists={!!branch.upstream}
-					isLaneCollapsed={$isLaneCollapsed}
-				/>
-				{#if branch.selectedForChanges}
-					<Tag style="pop" kind="solid" icon="target" verticalOrientation>Default branch</Tag>
-				{/if}
+				<div class="collapsed-lane__info__details">
+					<ActiveBranchStatus
+						branchName={branch.upstreamName ?? branchName}
+						{isUnapplied}
+						{hasIntegratedCommits}
+						remoteExists={!!branch.upstream}
+						isLaneCollapsed={$isLaneCollapsed}
+					/>
+					{#if branch.selectedForChanges}
+						<Tag style="pop" kind="solid" icon="target">Default branch</Tag>
+					{/if}
+				</div>
 			</div>
 		</div>
 	</div>
@@ -332,6 +335,8 @@
 		user-select: none;
 		align-items: center;
 		height: 100%;
+		width: var(--size-48);
+		overflow: hidden;
 		gap: var(--size-8);
 		padding: var(--size-8) var(--size-8) var(--size-20);
 
@@ -360,18 +365,23 @@
 		}
 	}
 
-	.collapsed-lane__info {
-		flex: 1;
-		display: flex;
-		flex-direction: row-reverse;
-		align-items: center;
-		justify-content: space-between;
-		height: 100%;
+	/*  */
 
-		writing-mode: vertical-rl;
-		gap: var(--size-8);
+	.collapsed-lane__info-wrap {
+		display: flex;
+		height: 100%;
 	}
 
+	.collapsed-lane__info {
+		display: flex;
+		justify-content: space-between;
+		gap: var(--size-8);
+		transform: rotate(-90deg);
+		direction: ltr;
+	}
+
+	/*  */
+
 	.collapsed-lane__info__details {
 		display: flex;
 		flex-direction: row-reverse;
@@ -388,7 +398,6 @@
 
 	.collapsed-lane__label {
 		color: var(--clr-scale-ntrl-0);
-		transform: rotate(180deg);
 		white-space: nowrap;
 		overflow: hidden;
 		text-overflow: ellipsis;
diff --git a/app/src/lib/components/PullRequestCard.svelte b/app/src/lib/components/PullRequestCard.svelte
index 36ac5e83d..3576d4692 100644
--- a/app/src/lib/components/PullRequestCard.svelte
+++ b/app/src/lib/components/PullRequestCard.svelte
@@ -20,8 +20,6 @@
 	import type iconsJson from '../icons/icons.json';
 	import type { Readable } from 'svelte/store';
 
-	export let isLaneCollapsed: boolean;
-
 	type StatusInfo = {
 		text: string;
 		icon: keyof typeof iconsJson | undefined;
@@ -266,7 +264,6 @@
 				icon={prStatusInfo.icon}
 				style={prStatusInfo.style}
 				kind={prStatusInfo.text !== 'Open' && prStatusInfo.text !== 'Status' ? 'solid' : 'soft'}
-				verticalOrientation={isLaneCollapsed}
 			>
 				{prStatusInfo.text}
 			</Tag>
@@ -275,7 +272,6 @@
 					icon={checksTagInfo.icon}
 					style={checksTagInfo.style}
 					kind={checksTagInfo.icon == 'success-small' ? 'solid' : 'soft'}
-					verticalOrientation={isLaneCollapsed}
 				>
 					{checksTagInfo.text}
 				</Tag>
@@ -286,7 +282,6 @@
 				kind="solid"
 				clickable
 				shrinkable
-				verticalOrientation={isLaneCollapsed}
 				on:click={(e) => {
 					const url = pr?.htmlUrl;
 					if (url) openExternalUrl(url);
diff --git a/app/src/lib/components/Tag.svelte b/app/src/lib/components/Tag.svelte
index 62fe77dce..05a905c1e 100644
--- a/app/src/lib/components/Tag.svelte
+++ b/app/src/lib/components/Tag.svelte
@@ -11,7 +11,6 @@
 	export let loading = false;
 	// Layout props
 	export let shrinkable = false;
-	export let verticalOrientation = false;
 	export let icon: keyof typeof iconsJson | undefined = undefined;
 	export let reversedDirection = false;
 	// Style props
@@ -24,7 +23,6 @@
 	class:disabled
 	class:shrinkable
 	class:reversedDirection
-	class:verticalOrientation
 	class:not-button={!clickable}
 	role={clickable ? 'button' : undefined}
 	use:tooltip={help}
@@ -32,13 +30,13 @@
 	on:mousedown
 	on:contextmenu
 >
-	<span class="label" class:verticalLabel={verticalOrientation}>
+	<span class="label">
 		<slot />
 	</span>
 	{#if loading}
 		<Icon name="spinner" />
 	{:else if icon}
-		<div class="icon" class:verticalIcon={verticalOrientation}>
+		<div class="icon">
 			<Icon name={icon} spinnerRadius={3.5} />
 		</div>
 	{/if}
@@ -237,20 +235,4 @@
 			text-overflow: ellipsis;
 		}
 	}
-
-	.verticalOrientation {
-		writing-mode: vertical-rl;
-		height: max-content;
-		width: var(--size-tag);
-		padding: var(--size-4) var(--size-2);
-		transform: rotate(180deg);
-	}
-
-	.verticalIcon {
-		transform: rotate(90deg);
-	}
-
-	.verticalLabel {
-		padding: var(--size-2) 0;
-	}
 </style>