Make resizing better for sidebar and lanes

packages/ui/src/lib/settings/userSettings.ts

@@ -11,6 +11,7 @@ export interface Settings {
 	theme?: string;
 	trayWidth: number;
 	vbranchExpandableHeight: number;
+	stashedBranchesHeight: number;
 	defaultLaneWidth: number;
 	defaultTreeHeight: number;
 	zoom: number;
@@ -22,9 +23,10 @@ const defaults: Settings = {
 	bottomPanelHeight: 200,
 	peekTrayWidth: 480,
 	trayWidth: 320,
-	defaultLaneWidth: 380,
+	defaultLaneWidth: 460,
 	defaultTreeHeight: 100,
-	vbranchExpandableHeight: 320,
+	vbranchExpandableHeight: 150,
+	stashedBranchesHeight: 150,
 	zoom: 1
 };
 

packages/ui/src/routes/[projectId]/components/BranchLane.svelte

@@ -935,6 +935,10 @@
 			on:width={(e) => {
 				laneWidth = e.detail;
 				lscache.set(laneWidthKey + branch.id, e.detail, 7 * 1440); // 7 day ttl
+				userSettings.update((s) => ({
+					...s,
+					defaultLaneWidth: e.detail
+				}));
 			}}
 		/>
 	{/if}

packages/ui/src/routes/[projectId]/navigation/Branches.svelte

@@ -12,7 +12,6 @@
 
 	export let branchService: BranchService;
 	export let projectId: string;
-	export let grow: boolean;
 	$: branches$ = branchService.branches$;
 
 	let viewport: HTMLElement;
@@ -24,12 +23,21 @@
 	};
 </script>
 
+<Resizer
+	minHeight={100}
+	{viewport}
+	direction="vertical"
+	class="z-30"
+	reverse={true}
+	on:height={(e) => {
+		userSettings.update((s) => ({
+			...s,
+			vbranchExpandableHeight: e.detail
+		}));
+	}}
+/>
 <SectionHeader {scrolled} count={$branches$?.length ?? 0}>Other branches</SectionHeader>
-<div
-	class="wrapper"
-	style:height={`${$userSettings.vbranchExpandableHeight}px`}
-	class:flex-grow={grow}
->
+<div class="wrapper" style:height={`${$userSettings.vbranchExpandableHeight}px`}>
 	<div bind:this={viewport} class="viewport hide-native-scrollbar" on:scroll={onScroll}>
 		<div bind:this={contents} class="content">
 			{#if $branches$}
@@ -42,22 +50,8 @@
 	<Scrollbar {viewport} {contents} width="0.5rem" />
 </div>
 
-<Resizer
-	minHeight={200}
-	{viewport}
-	direction="vertical"
-	class="z-30"
-	on:height={(e) => {
-		userSettings.update((s) => ({
-			...s,
-			vbranchExpandableHeight: e.detail
-		}));
-	}}
-/>
-
 <style lang="postcss">
 	.wrapper {
-		min-height: 10rem;
 		position: relative;
 		overflow: hidden;
 	}

packages/ui/src/routes/[projectId]/navigation/Navigation.svelte

@@ -64,11 +64,7 @@
 			</DomainButton>
 		</div>
 	</div>
-	<Branches
-		projectId={project.id}
-		{branchService}
-		grow={!stashExpanded || $activeBranches$?.length == 0}
-	/>
+	<Branches projectId={project.id} {branchService} />
 	<StashedBranches {project} {branchController} {vbranchService} bind:expanded={stashExpanded} />
 	<Footer {user} projectId={project.id} />
 	<AppUpdater {update} />
@@ -76,6 +72,7 @@
 
 <style lang="postcss">
 	.domains {
+		flex-grow: 1;
 		padding-top: var(--space-14);
 		padding-bottom: var(--space-24);
 		padding-left: var(--space-16);

packages/ui/src/routes/[projectId]/navigation/StashedBranches.svelte

@@ -10,6 +10,11 @@
 	import type { UIEventHandler } from 'svelte/elements';
 	import SectionHeader from './SectionHeader.svelte';
 	import Icon from '$lib/icons/Icon.svelte';
+	import Resizer from '$lib/components/Resizer.svelte';
+	import { getContext } from 'svelte';
+	import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/settings/userSettings';
+
+	const userSettings = getContext<SettingsStore>(SETTINGS_CONTEXT);
 
 	export let vbranchService: VirtualBranchService;
 	export let branchController: BranchController;
@@ -30,10 +35,27 @@
 	};
 </script>
 
+<Resizer
+	minHeight={100}
+	{viewport}
+	direction="vertical"
+	class="z-30"
+	reverse={true}
+	on:height={(e) => {
+		userSettings.update((s) => ({
+			...s,
+			stashedBranchesHeight: e.detail
+		}));
+	}}
+/>
 <SectionHeader {scrolled} count={$branches$?.length ?? 0} expandable={true} bind:expanded>
 	Stashed branches
 </SectionHeader>
-<div use:accordion={$branches$?.length > 0 && expanded} class="wrapper relative flex-grow">
+<div
+	class="wrapper"
+	use:accordion={$branches$?.length > 0 && expanded}
+	style:height={`${$userSettings.stashedBranchesHeight}px`}
+>
 	<div
 		bind:this={viewport}
 		on:scroll={onScroll}
@@ -91,7 +113,7 @@
 		padding-right: var(--space-16);
 	}
 	.wrapper {
-		min-height: 10rem;
+		position: relative;
 	}
 	.item {
 		display: flex;