use the new thing

src/routes/+layout.ts

@@ -2,6 +2,7 @@ import type { LayoutLoad } from './$types';
 import { api, log } from '$lib';
 import Posthog from '$lib/posthog';
 import Sentry from '$lib/sentry';
+import { BranchStoresCache } from '$lib/vbranches';
 import { wrapLoadWithSentry } from '@sentry/sveltekit';
 import { loadUserSettings } from '$lib/userSettings';
 
@@ -14,6 +15,7 @@ export const load: LayoutLoad = wrapLoadWithSentry(({ fetch }) => {
 	return {
 		projects: api.projects.Projects(),
 		cloud: api.CloudApi({ fetch }),
+		branchStoresCache: new BranchStoresCache(),
 		posthog: Posthog(),
 		sentry: Sentry(),
 		userSettings: loadUserSettings()

src/routes/repo/[projectId]/+page.svelte

@@ -2,63 +2,52 @@
 	import Board from './Board.svelte';
 	import Tray from './Tray.svelte';
 	import type { PageData } from './$types';
-	import { getVirtualBranches } from './vbranches';
-	import { getTarget } from './targetData';
-	import { getRemoteBranches } from './remoteBranches';
 	import { Value } from 'svelte-loadable-store';
 	import { Button } from '$lib/components';
-	import { error } from '$lib/toasts';
+	import { BranchController } from '$lib/vbranches';
 
 	export let data: PageData;
-	let { projectId, remoteBranchNames, project, userSettings } = data;
+	let {
-	const remoteBranchOperations = getRemoteBranches(projectId);
+		projectId,
+		vbranchStore,
+		remoteBranchStore,
+		targetBranchStore,
+		remoteBranchNames,
+		project,
+		userSettings
+	} = data;
+
+	const branchController = new BranchController(
+		projectId,
+		vbranchStore,
+		remoteBranchStore,
+		targetBranchStore
+	);
+
 	$: remoteBranches =
-		!$remoteBranchOperations.isLoading && !Value.isError($remoteBranchOperations.value)
+		!$remoteBranchStore.isLoading && !Value.isError($remoteBranchStore.value)
-			? $remoteBranchOperations.value
+			? $remoteBranchStore.value
 			: [];
-	const targetOperations = getTarget(projectId);
 	$: target =
-		!$targetOperations.isLoading && !Value.isError($targetOperations.value)
+		!$targetBranchStore.isLoading && !Value.isError($targetBranchStore.value)
-			? $targetOperations.value
+			? $targetBranchStore.value
 			: undefined;
-	const virtualBranches = getVirtualBranches(projectId);
 	$: branches =
-		!$virtualBranches.isLoading && !Value.isError($virtualBranches.value)
+		!$vbranchStore.isLoading && !Value.isError($vbranchStore.value) ? $vbranchStore.value : [];
-			? $virtualBranches.value
-			: [];
 	let targetChoice: string | undefined;
 
 	function onSetTargetClick() {
 		if (!targetChoice) {
 			return;
 		}
-		virtualBranches
+		branchController.setTarget(targetChoice);
-			.setTarget(targetChoice)
-			.then((t) => {
-				if (t) {
-					target = t;
-				}
-				remoteBranchOperations.refresh();
-			})
-			.catch((e) => {
-				console.log('failed to set branch', e);
-				error('Failed to set target branch');
-			});
 	}
 </script>
 
 {#if target}
 	<div class="flex w-full max-w-full">
-		<Tray
+		<Tray {branches} {target} {branchController} {remoteBranches} {userSettings} />
-			{branches}
+		<Board {branches} {projectId} projectPath={project.path} {branchController} {userSettings} />
-			{target}
-			{virtualBranches}
-			{targetOperations}
-			{remoteBranches}
-			{remoteBranchOperations}
-			{userSettings}
-		/>
-		<Board {branches} {projectId} projectPath={project.path} {virtualBranches} {userSettings} />
 	</div>
 {:else}
 	<div class="m-auto flex max-w-xs flex-col gap-y-4">

src/routes/repo/[projectId]/+page.ts

@@ -12,11 +12,24 @@ function sortBranchData(branchData: BranchData[]): BranchData[] {
 	return branchData.sort((a, b) => b.lastCommitTs - a.lastCommitTs);
 }
 
-export async function load(e: PageLoadEvent) {
+export async function load({ parent, params }: PageLoadEvent) {
-	const projectId = e.params.projectId;
+	const projectId = params.projectId;
 	const remoteBranchNames = await getRemoteBranches({ projectId });
 	const project = api.projects.get({ id: projectId });
-	return { projectId, remoteBranchNames, project };
+
+	const { branchStoresCache } = await parent();
+	const vbranchStore = branchStoresCache.getVirtualBranchStore(projectId);
+	const remoteBranchStore = branchStoresCache.getRemoteBranchStore(projectId);
+	const targetBranchStore = branchStoresCache.getTargetBranchStore(projectId);
+
+	return {
+		projectId,
+		remoteBranchNames,
+		project,
+		vbranchStore,
+		remoteBranchStore,
+		targetBranchStore
+	};
 }
 
 if (import.meta.vitest) {

src/routes/repo/[projectId]/Board.svelte

@@ -2,15 +2,15 @@
 	import Lane from './BranchLane.svelte';
 	import NewBranchDropZone from './NewBranchDropZone.svelte';
 	import type { Branch } from '$lib/api/ipc/vbranches';
-	import type { VirtualBranchOperations } from './vbranches';
 	import { SETTINGS_CONTEXT, type SettingsStore } from '$lib/userSettings';
 	import { setContext } from 'svelte';
 	import { dzHighlight } from './dropZone';
+	import type { BranchController } from '$lib/vbranches';
 
 	export let projectId: string;
 	export let projectPath: string;
 	export let branches: Branch[];
-	export let virtualBranches: VirtualBranchOperations;
+	export let branchController: BranchController;
 	export let userSettings: SettingsStore;
 
 	setContext(SETTINGS_CONTEXT, userSettings);
@@ -60,7 +60,7 @@
 			branches.splice(dropPosition, 0, ...el);
 			branches.forEach((branch, i) => {
 				if (branch.order !== i) {
-					virtualBranches.updateBranchOrder(branch.id, i);
+					branchController.updateBranchOrder(branch.id, i);
 				}
 			});
 		}
@@ -83,11 +83,11 @@
 			{projectId}
 			{upstream}
 			branchId={id}
-			{virtualBranches}
+			{branchController}
 			{projectPath}
 		/>
 	{/each}
-	<NewBranchDropZone {virtualBranches} />
+	<NewBranchDropZone {branchController} />
 </div>
 
 <style lang="postcss">

src/routes/repo/[projectId]/BranchLane.svelte

@@ -8,10 +8,10 @@
 	import CommitCard from './CommitCard.svelte';
 	import IconGithub from '$lib/icons/IconGithub.svelte';
 	import { getExpandedWithCacheFallback, setExpandedWithCache } from './cache';
-	import type { VirtualBranchOperations } from './vbranches';
 	import PopupMenu from '../../../lib/components/PopupMenu/PopupMenu.svelte';
 	import PopupMenuItem from '../../../lib/components/PopupMenu/PopupMenuItem.svelte';
 	import { dzHighlight } from './dropZone';
+	import type { BranchController } from '$lib/vbranches';
 
 	const dispatch = createEventDispatcher<{
 		empty: never;
@@ -26,7 +26,7 @@
 	export let commits: Commit[];
 	export let projectId: string;
 	export let order: number;
-	export let virtualBranches: VirtualBranchOperations;
+	export let branchController: BranchController;
 
 	$: remoteCommits = commits.filter((c) => c.isRemote);
 	$: localCommits = commits.filter((c) => !c.isRemote);
@@ -46,7 +46,7 @@
 			.map((file) => file.id + ':' + file.hunks.map((hunk) => hunk.id).join(','))
 			.join('\n');
 		console.log('updateBranchOwnership', branchId, ownership);
-		virtualBranches.updateBranchOwnership(branchId, ownership);
+		branchController.updateBranchOwnership(branchId, ownership);
 		if (files.length == 0) dispatch('empty');
 	}
 
@@ -68,14 +68,14 @@
 
 	function commit() {
 		console.log('commit', commitMessage, projectId, branchId);
-		virtualBranches.commitBranch(branchId, commitMessage);
+		branchController.commitBranch(branchId, commitMessage);
 	}
 
 	function push() {
 		if (localCommits[0]?.id) {
 			console.log(`pushing ${branchId}`);
 			isPushing = true;
-			virtualBranches.pushBranch(branchId).finally(() => (isPushing = false));
+			branchController.pushBranch(branchId).finally(() => (isPushing = false));
 		}
 	}
 
@@ -112,7 +112,7 @@
 
 	function handleBranchNameChange() {
 		console.log('branch name change:', name);
-		virtualBranches.updateBranchName(branchId, name);
+		branchController.updateBranchName(branchId, name);
 	}
 
 	function isChildOf(child: any, parent: HTMLElement): boolean {
@@ -139,7 +139,7 @@
 		const ownership = files
 			.map((file) => file.id + ':' + file.hunks.map((hunk) => hunk.id).join(','))
 			.join('\n');
-		virtualBranches.updateBranchOwnership(branchId, (data + '\n' + ownership).trim());
+		branchController.updateBranchOwnership(branchId, (data + '\n' + ownership).trim());
 	}}
 >
 	<div
@@ -171,7 +171,7 @@
 	</div>
 
 	<PopupMenu bind:this={popupMenu} let:item={branchId}>
-		<PopupMenuItem on:click={() => branchId && virtualBranches.unapplyBranch(branchId)}>
+		<PopupMenuItem on:click={() => branchId && branchController.unapplyBranch(branchId)}>
 			Unapply
 		</PopupMenuItem>
 
@@ -183,11 +183,11 @@
 			{/if}
 		</PopupMenuItem>
 
-		<PopupMenuItem on:click={() => virtualBranches.createBranch({ order: order + 1 })}>
+		<PopupMenuItem on:click={() => branchController.createBranch({ order: order + 1 })}>
 			Create branch after
 		</PopupMenuItem>
 
-		<PopupMenuItem on:click={() => virtualBranches.createBranch({ order })}>
+		<PopupMenuItem on:click={() => branchController.createBranch({ order })}>
 			Create branch before
 		</PopupMenuItem>
 	</PopupMenu>

src/routes/repo/[projectId]/NewBranchDropZone.svelte

@@ -2,14 +2,14 @@
 	import type { Branch } from '$lib/api/ipc/vbranches';
 	import { Button } from '$lib/components';
 	import { dzHighlight } from './dropZone';
-	import type { VirtualBranchOperations } from './vbranches';
+	import type { BranchController } from '$lib/vbranches';
 
-	export let virtualBranches: VirtualBranchOperations;
+	export let branchController: BranchController;
 	let items: Branch[] = [];
 	let dropZone: HTMLDivElement;
 
 	function handleNewVirtualBranch() {
-		virtualBranches.createBranch({});
+		branchController.createBranch({});
 	}
 
 	function isChildOf(child: any, parent: HTMLElement): boolean {
@@ -30,7 +30,7 @@
 			return;
 		}
 		const ownership = e.dataTransfer.getData('text/hunk');
-		virtualBranches.createBranch({ ownership });
+		branchController.createBranch({ ownership });
 	}}
 >
 	<div class="bg-green-300" />

src/routes/repo/[projectId]/Tray.svelte

@@ -3,23 +3,19 @@
 	import type { BranchData, Target } from './types';
 	import type { Branch } from '$lib/api/ipc/vbranches';
 	import { formatDistanceToNow } from 'date-fns';
-	import type { VirtualBranchOperations } from './vbranches';
+	import { IconGitBranch, IconRemote, IconRefresh } from '$lib/icons';
-	import { IconGitBranch, IconRemote, IconRefresh, IconAdd } from '$lib/icons';
 	import { IconTriangleDown, IconTriangleUp } from '$lib/icons';
 	import { accordion } from './accordion';
 	import Gravatar from '$lib/components/Gravatar/Gravatar.svelte';
 	import PopupMenu from '$lib/components/PopupMenu/PopupMenu.svelte';
 	import PopupMenuItem from '$lib/components/PopupMenu/PopupMenuItem.svelte';
-	import type { RemoteBranchOperations } from './remoteBranches';
-	import type { TargetOperations } from './targetData';
 	import type { SettingsStore } from '$lib/userSettings';
+	import type { BranchController } from '$lib/vbranches';
 
 	export let target: Target;
 	export let branches: Branch[];
-	export let virtualBranches: VirtualBranchOperations;
+	export let branchController: BranchController;
-	export let targetOperations: TargetOperations;
 	export let remoteBranches: BranchData[];
-	export let remoteBranchOperations: RemoteBranchOperations;
 	export let userSettings: SettingsStore;
 
 	let yourBranchesOpen = true;
@@ -34,29 +30,15 @@
 
 	function toggleBranch(branchId: string, applied: boolean) {
 		if (applied) {
-			virtualBranches.unapplyBranch(branchId);
+			branchController.unapplyBranch(branchId);
 		} else {
-			virtualBranches.applyBranch(branchId);
+			branchController.applyBranch(branchId);
 		}
 	}
 
 	// store left tray width preference in localStorage
 	const cacheKey = 'config:tray-width';
 
-	function makeBranch(branch: string) {
-		remoteBranchOperations.createvBranchFromBranch(branch).then(() => {
-			virtualBranches.refresh();
-		});
-	}
-
-	function fetchTarget() {
-		remoteBranchOperations.fetchFromTarget().then(() => {
-			virtualBranches.refresh().then(() => {
-				targetOperations.refresh();
-			});
-		});
-	}
-
 	function rememberWidth(node: HTMLElement) {
 		const cachedWidth = localStorage.getItem(cacheKey);
 		if (cachedWidth) node.style.width = cachedWidth;
@@ -95,7 +77,7 @@
 				{#if target.behind == 0}
 					<button
 						class="p-1 disabled:text-light-300 disabled:dark:text-dark-300"
-						on:click={fetchTarget}
+						on:click={() => branchController.fetchFromTarget()}
 						title="click to fetch"
 					>
 						<IconRefresh />
@@ -238,7 +220,11 @@
 	<!-- Remote branches context menu -->
 	<PopupMenu bind:this={remoteBranchContextMenu} let:item>
 		{@const disabled = !remoteBranches.some((b) => b.sha == item.sha && b.mergeable)}
-		<PopupMenuItem {disabled} on:click={() => item && makeBranch(item.name)}>Apply</PopupMenuItem>
+		<PopupMenuItem
+			{disabled}
+			on:click={() => item && branchController.createvBranchFromBranch(item.name)}
+			>Apply</PopupMenuItem
+		>
 	</PopupMenu>
 
 	<!-- Confirm target update modal -->
@@ -252,9 +238,7 @@
 				height="small"
 				color="purple"
 				on:click={() => {
-					remoteBranchOperations.updateBranchTarget().then(() => {
+					branchController.updateBranchTarget();
-						virtualBranches.refresh();
-					});
 					close();
 				}}
 			>
@@ -276,9 +260,7 @@
 				height="small"
 				color="destructive"
 				on:click={() => {
-					virtualBranches.deleteBranch(item.id).then(() => {
+					branchController.deleteBranch(item.id);
-						remoteBranchOperations.refresh();
-					});
 					close();
 				}}
 			>