History and minor UI fixes (gitbutlerapp#3797)

* Convert Capital case to Uper case "History menu"

* UI updates: target branch styles

* Remove console.log

* CSS: space between "Trunk" and the timer

* UI: reversed chevron arrows fix

* remove commented console.log

* UX: toggle file preview in History

* UI: target branch set animation fix

app/src/lib/components/BaseBranchCard.svelte

@@ -103,7 +103,7 @@
 	}
 	.button-head {
 		display: flex;
-		gap: var(--size-4);
+		gap: var(--size-6);
 		align-items: center;
 		color: var(--clr-scale-ntrl-10);
 	}

app/src/lib/components/BranchHeader.svelte

@@ -41,6 +41,7 @@
 	let isDeleting = false;
 	let branchName = branch?.upstreamName || normalizeBranchName($branchStore.name);
 	let isLoading: boolean;
+	let isTargetBranchAnimated = false;
 
 	function handleBranchNameChange(title: string) {
 		if (title == '') return;
@@ -94,6 +95,7 @@
 {#if $isLaneCollapsed}
 	<div
 		class="card collapsed-lane"
+		class:collapsed-lane_target-branch={branch.selectedForChanges}
 		on:keydown={(e) => e.key === 'Enter' && expandLane()}
 		tabindex="0"
 		role="button"
@@ -142,7 +144,11 @@
 	</div>
 {:else}
 	<div class="header__wrapper">
-		<div class="header card">
+		<div
+			class="header card"
+			class:header_target-branch={branch.selectedForChanges}
+			class:header_target-branch-animation={isTargetBranchAnimated && branch.selectedForChanges}
+		>
 			<div class="header__info-wrapper">
 				{#if !isUnapplied}
 					<div class="draggable" data-drag-handle>
@@ -200,6 +206,7 @@
 								icon="target"
 								disabled={isUnapplied}
 								on:mousedown={async () => {
+									isTargetBranchAnimated = true;
 									await branchController.setSelectedForChanges(branch.id);
 								}}
 							>
@@ -306,15 +313,46 @@
 		position: relative;
 		flex-direction: column;
 		gap: var(--size-2);
+		transition:
+			border-color 0.12s ease-in-out,
+			box-shadow 0.12s ease-in-out;
 	}
+	.header_target-branch {
+		border-color: var(--clr-theme-pop-element);
+		box-shadow: 0 var(--size-4) 0 var(--clr-theme-pop-element);
+		margin-bottom: var(--size-4);
+	}
+	.header_target-branch-animation {
+		animation: setTargetAnimation 0.25s ease-in-out forwards;
+	}
+	@keyframes setTargetAnimation {
+		0% {
+		}
+		40% {
+			transform: scale(1.015) rotate(0.5deg);
+		}
+		50% {
+			border-color: var(--clr-theme-pop-element);
+			box-shadow: 0 var(--size-4) 0 var(--clr-theme-pop-element);
+			margin-bottom: var(--size-4);
+		}
+		70%,
+		100% {
+			transform: scale(1);
+			border-color: var(--clr-theme-pop-element);
+			box-shadow: 0 var(--size-4) 0 var(--clr-theme-pop-element);
+			margin-bottom: var(--size-4);
+		}
+	}
+
 	.header__top-overlay {
 		z-index: var(--z-ground);
 		position: absolute;
 		top: calc(var(--size-16) * -1);
 		left: 0;
 		width: 100%;
 		height: var(--size-20);
-		background: var(--target-branch-background);
+		background: var(--clr-bg-2);
 	}
 	.header__info-wrapper {
 		display: flex;
@@ -392,6 +430,10 @@
 		}
 	}
 
+	.collapsed-lane_target-branch {
+		border-color: var(--clr-theme-pop-element);
+	}
+
 	.collapsed-lane__actions {
 		display: flex;
 		flex-direction: column;

app/src/lib/components/BranchLane.svelte

@@ -136,8 +136,6 @@
 		flex-shrink: 0;
 		user-select: none; /* here because of user-select draggable interference in board */
 		position: relative;
-		--target-branch-background: var(--clr-bg-2);
-		background-color: var(--target-branch-background);
 	}
 
 	.file-preview {

app/src/lib/components/BranchPreviewHeader.svelte

@@ -134,7 +134,7 @@
 		left: 0;
 		width: 100%;
 		height: var(--size-20);
-		background: var(--target-branch-background);
+		background: var(--clr-bg-2);
 	}
 	.header__info {
 		display: flex;

app/src/lib/components/History.svelte

@@ -132,7 +132,12 @@
 										const path = filePath.detail;
 
 										if (snapshotFilesTempStore?.entryId == entry.id) {
-											updateFilePreview(entry, path);
+											if (selectedFile?.path == path) {
+												currentFilePreview = undefined;
+												selectedFile = undefined;
+											} else {
+												updateFilePreview(entry, path);
+											}
 										} else {
 											snapshotFilesTempStore = {
 												entryId: entry.id,

app/src/lib/components/PreferencesForm.svelte

@@ -29,7 +29,6 @@
 	async function setSnapshotLinesThreshold(value: number) {
 		project.snapshot_lines_threshold = value;
 		await projectService.updateProject(project);
-		console.log(value);
 	}
 </script>
 

app/src/lib/components/RemoteBranchPreview.svelte

@@ -126,7 +126,6 @@
 		flex-direction: column;
 		gap: var(--size-8);
 		margin: var(--size-12) var(--size-6) var(--size-12) var(--size-12);
-		--target-branch-background: var(--clr-bg-2);
 	}
 
 	.card__content {

app/src/lib/components/SnapshotAttachment.svelte

@@ -50,7 +50,7 @@
 		>
 			<span class="text-base-11">{isOpen ? 'Fold files' : `Show ${foldedAmount} more`}</span>
 			<div class="toggle-btn__icon" style="transform: rotate({isOpen ? '180deg' : '0'})">
-				<Icon name="chevron-up-small" />
+				<Icon name="chevron-down-small" />
 			</div>
 		</button>
 	{/if}

app/src/lib/components/SnapshotCard.svelte

@@ -208,7 +208,6 @@
 								selectedFile?.entryId == entry.id}
 							on:click={() => {
 								dispatch('diffClick', filePath);
-								// console.log('diffClick', filePath);
 							}}
 						>
 							<img

crates/gitbutler-tauri/src/menu.rs

@@ -115,7 +115,7 @@ pub fn build(_package_info: &PackageInfo) -> Menu {
     }
 
     view_menu = view_menu.add_item(
-        CustomMenuItem::new("view/history", "Project history").accelerator("CmdOrCtrl+Shift+H"),
+        CustomMenuItem::new("view/history", "Project History").accelerator("CmdOrCtrl+Shift+H"),
     );
 
     #[cfg(any(debug_assertions, feature = "devtools"))]