get remote branches only from the store

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

@@ -4,12 +4,18 @@
 	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';
 
 	export let data: PageData;
-	let { projectId, project, remoteBranches } = data;
+	let { projectId, remoteBranchNames, project } = data;
+	const remoteBranchOperations = getRemoteBranches(projectId);
+	$: remoteBranches =
+		!$remoteBranchOperations.isLoading && !Value.isError($remoteBranchOperations.value)
+			? $remoteBranchOperations.value
+			: [];
 	const targetOperations = getTarget(projectId);
 	$: target =
 		!$targetOperations.isLoading && !Value.isError($targetOperations.value)
@@ -38,7 +44,14 @@
 
 {#if target}
 	<div class="flex w-full max-w-full">
-		<Tray {branches} {projectId} {target} {virtualBranches} {targetOperations} />
+		<Tray
+			{branches}
+			{target}
+			{virtualBranches}
+			{targetOperations}
+			{remoteBranches}
+			{remoteBranchOperations}
+		/>
 		<Board {branches} {projectId} projectPath={project.path} {virtualBranches} />
 	</div>
 {:else}
@@ -48,11 +61,11 @@
 			You need to set your target before you can start working on your project.
 		</p>
 		<!-- select menu of remoteBranches -->
-		{#if remoteBranches.length === 0}
+		{#if remoteBranchNames.length === 0}
 			<p class="text-gray-500">You don't have any remote branches.</p>
 		{:else}
 			<select bind:value={targetChoice}>
-				{#each remoteBranches as branch}
+				{#each remoteBranchNames as branch}
 					{#if branch == 'origin/master' || branch == 'origin/main'}
 						<option value={branch} selected>{branch}</option>
 					{:else}

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

@@ -1,6 +1,6 @@
-import type { Target, BranchData } from './types';
-import { invoke } from '$lib/ipc';
+import type { BranchData } from './types';
 import type { PageLoadEvent } from './$types';
+import { invoke } from '$lib/ipc';
 import { api } from '$lib';
 
 async function getRemoteBranches(params: { projectId: string }) {
@@ -14,9 +14,9 @@ function sortBranchData(branchData: BranchData[]): BranchData[] {
 
 export async function load(e: PageLoadEvent) {
 	const projectId = e.params.projectId;
-	const remoteBranches = await getRemoteBranches({ projectId });
+	const remoteBranchNames = await getRemoteBranches({ projectId });
 	const project = api.projects.get({ id: projectId });
-	return { projectId, remoteBranches, project };
+	return { projectId, remoteBranchNames, project };
 }
 
 if (import.meta.vitest) {

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

@@ -10,20 +10,15 @@
 	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 { getRemoteBranches } from './remoteBranches';
-	import { Value } from 'svelte-loadable-store';
+	import type { RemoteBranchOperations } from './remoteBranches';
 	import type { TargetOperations } from './targetData';
 
 	export let target: Target;
 	export let branches: Branch[];
-	export let projectId: string;
 	export let virtualBranches: VirtualBranchOperations;
 	export let targetOperations: TargetOperations;
-	const remoteBranchOperations = getRemoteBranches(projectId);
-	$: remoteBranches =
-		!$remoteBranchOperations.isLoading && !Value.isError($remoteBranchOperations.value)
-			? $remoteBranchOperations.value
-			: [];
+	export let remoteBranches: BranchData[];
+	export let remoteBranchOperations: RemoteBranchOperations;
 
 	let yourBranchesOpen = true;
 	let remoteBranchesOpen = true;