persist lane collapsed state in local storage

gitbutler-ui/src/lib/components/ActiveBranchStatus.svelte

@@ -2,6 +2,7 @@
 	import Tag from '$lib/components/Tag.svelte';
 	import { normalizeBranchName } from '$lib/utils/branch';
 	import { open } from '@tauri-apps/api/shell';
+	import type { Persisted } from '$lib/persisted/persisted';
 	import type { BaseBranch, Branch } from '$lib/vbranches/types';
 
 	export let base: BaseBranch | undefined | null;
@@ -9,7 +10,7 @@
 	export let prUrl: string | undefined;
 	export let isUnapplied = false;
 	export let hasIntegratedCommits = false;
-	export let isLaneCollapsed = false;
+	export let isLaneCollapsed: Persisted<boolean>;
 </script>
 
 {#if !branch.upstream}
@@ -19,7 +20,7 @@
 			color="light"
 			help="These changes are stashed away from your working directory."
 			reversedDirection
-			verticalOrientation={isLaneCollapsed}>unapplied</Tag
+			verticalOrientation={$isLaneCollapsed}>unapplied</Tag
 		>
 	{:else if hasIntegratedCommits}
 		<Tag
@@ -27,7 +28,7 @@
 			color="success"
 			help="These changes have been integrated upstream, update your workspace to make this lane disappear."
 			reversedDirection
-			verticalOrientation={isLaneCollapsed}>Integrated</Tag
+			verticalOrientation={$isLaneCollapsed}>Integrated</Tag
 		>
 	{:else}
 		<Tag
@@ -35,18 +36,16 @@
 			color="light"
 			help="These changes are in your working directory."
 			reversedDirection
-			verticalOrientation={isLaneCollapsed}>Virtual</Tag
+			verticalOrientation={$isLaneCollapsed}>Virtual</Tag
 		>
 	{/if}
 	{#if !isUnapplied}
 		<Tag
 			disabled
 			help="Branch name that will be used when pushing. You can change it from the lane menu."
-			verticalOrientation={isLaneCollapsed}
+			verticalOrientation={$isLaneCollapsed}
 		>
-			origin/{branch.upstreamName
-				? branch.upstreamName
-				: normalizeBranchName(branch.name)}</Tag
+			origin/{branch.upstreamName ? branch.upstreamName : normalizeBranchName(branch.name)}</Tag
 		>
 	{/if}
 {:else}
@@ -54,7 +53,7 @@
 		color="dark"
 		icon="remote-branch-small"
 		help="At least some of your changes have been pushed"
-		verticalOrientation={isLaneCollapsed}
+		verticalOrientation={$isLaneCollapsed}
 		reversedDirection>Remote</Tag
 	>
 	<Tag
@@ -63,7 +62,7 @@
 		border
 		clickable
 		shrinkable
-		verticalOrientation={isLaneCollapsed}
+		verticalOrientation={$isLaneCollapsed}
 		on:click={(e) => {
 			const url = base?.branchUrl(branch.upstream?.name);
 			if (url) open(url);
@@ -71,7 +70,7 @@
 			e.stopPropagation();
 		}}
 	>
-		{isLaneCollapsed ? 'View branch' : `origin/${branch.upstream?.name}`}
+		{$isLaneCollapsed ? 'View branch' : `origin/${branch.upstream?.name}`}
 	</Tag>
 	{#if prUrl}
 		<Tag
@@ -79,7 +78,7 @@
 			color="ghost"
 			border
 			clickable
-			verticalOrientation={isLaneCollapsed}
+			verticalOrientation={$isLaneCollapsed}
 			on:click={(e) => {
 				const url = prUrl;
 				if (url) open(url);

gitbutler-ui/src/lib/components/BranchCard.svelte

@@ -7,6 +7,7 @@
 	import ImgThemed from '$lib/components/ImgThemed.svelte';
 	import Resizer from '$lib/components/Resizer.svelte';
 	import { projectAiGenEnabled } from '$lib/config/config';
+	import { projectLaneCollapsed } from '$lib/config/config';
 	import {
 		isDraggableFile,
 		isDraggableHunk,
@@ -49,10 +50,7 @@
 	let rsViewport: HTMLElement;
 
 	const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
-	const defaultBranchWidthRem = persisted<number | undefined>(
-		24,
-		'defaulBranchWidth' + project.id
-	);
+	const defaultBranchWidthRem = persisted<number | undefined>(24, 'defaulBranchWidth' + project.id);
 	const laneWidthKey = 'laneWidth_';
 
 	let laneWidth: number;
@@ -130,10 +128,10 @@
 		}
 	}
 
-	let isLaneCollapsed: boolean;
+	$: isLaneCollapsed = projectLaneCollapsed(project.id, branch.id);
 </script>
 
-{#if isLaneCollapsed}
+{#if $isLaneCollapsed}
 	<div class="collapsed-lane-wrapper">
 		<BranchHeader
 			{isUnapplied}

gitbutler-ui/src/lib/components/BranchHeader.svelte

@@ -17,6 +17,7 @@
 	import type { BranchService } from '$lib/branches/service';
 	import type { GitHubService } from '$lib/github/service';
 	import type { PrStatus } from '$lib/github/types';
+	import type { Persisted } from '$lib/persisted/persisted';
 	import type { BranchController } from '$lib/vbranches/branchController';
 	import type { BaseBranch, Branch } from '$lib/vbranches/types';
 	import type iconsJson from '../icons/icons.json';
@@ -29,7 +30,7 @@
 	export let branchService: BranchService;
 	export let projectId: string;
 
-	export let isLaneCollapsed = false;
+	export let isLaneCollapsed: Persisted<boolean>;
 
 	export let githubService: GitHubService;
 	$: pr$ = githubService.get(branch.upstreamName);
@@ -122,7 +123,7 @@
 	$: hasIntegratedCommits = branch.commits?.some((b) => b.isIntegrated);
 </script>
 
-{#if isLaneCollapsed}
+{#if $isLaneCollapsed}
 	<div class="card collapsed-lane" data-tauri-drag-region>
 		<div class="collapsed-lane__actions">
 			<div class="collapsed-lane__draggable" data-drag-handle>
@@ -134,7 +135,7 @@
 				color="neutral"
 				help="Collapse lane"
 				on:click={() => {
-					isLaneCollapsed = false;
+					$isLaneCollapsed = false;
 				}}
 			/>
 		</div>
@@ -175,6 +176,7 @@
 						{branch}
 						{isUnapplied}
 						{hasIntegratedCommits}
+						{isLaneCollapsed}
 						prUrl={$pr$?.htmlUrl}
 					/>
 					<!-- {#if !branch.upstream}
@@ -387,7 +389,7 @@
 								color="neutral"
 								help="Collapse lane"
 								on:click={() => {
-									isLaneCollapsed = true;
+									$isLaneCollapsed = true;
 								}}
 							/>
 							<Button

gitbutler-ui/src/lib/components/BranchHeaderSecondaryActions.svelte

@@ -2,10 +2,11 @@
 	import BranchLanePopupMenu from './BranchLanePopupMenu.svelte';
 	import { clickOutside } from '$lib/clickOutside';
 	import Button from '$lib/components/Button.svelte';
+	import type { Persisted } from '$lib/persisted/persisted';
 	import type { BranchController } from '$lib/vbranches/branchController';
 	import type { Branch } from '$lib/vbranches/types';
 
-	export let isLaneCollapsed = false;
+	export let isLaneCollapsed: Persisted<boolean>;
 	export let visible = false;
 
 	export let isUnapplied = false;
@@ -18,12 +19,12 @@
 
 <div style="display: contents;">
 	<Button
-		icon={isLaneCollapsed ? 'unfold-lane' : 'fold-lane'}
+		icon={$isLaneCollapsed ? 'unfold-lane' : 'fold-lane'}
 		kind="outlined"
 		color="neutral"
-		help={isLaneCollapsed ? 'Expand lane' : 'Collapse lane'}
+		help={$isLaneCollapsed ? 'Expand lane' : 'Collapse lane'}
 		on:click={() => {
-			isLaneCollapsed = !isLaneCollapsed;
+			$isLaneCollapsed = !$isLaneCollapsed;
 		}}
 	/>
 	<Button

gitbutler-ui/src/lib/components/BranchLane.svelte

@@ -103,9 +103,7 @@
 				selectable={$commitBoxOpen && !isUnapplied}
 				on:close={() => {
 					const selectedId = selected?.id;
-					selectedFiles.update((fileIds) =>
-						fileIds.filter((file) => file.id != selectedId)
-					);
+					selectedFiles.update((fileIds) => fileIds.filter((file) => file.id != selectedId));
 				}}
 			/>
 			<Resizer

gitbutler-ui/src/lib/config/config.ts

@@ -40,3 +40,8 @@ export function projectRunCommitHooks(projectId: string): Persisted<boolean> {
 	const key = 'projectRunCommitHooks_';
 	return persisted(false, key + projectId);
 }
+
+export function projectLaneCollapsed(projectId: string, laneId: string): Persisted<boolean> {
+	const key = 'projectLaneCollapsed_';
+	return persisted(false, key + projectId + '_' + laneId);
+}