Show trunk as card

packages/ui/src/lib/backend/cloud.ts

@@ -295,6 +295,6 @@ export function getCloudApiClient(
 	};
 }
 
-export function syncToCloud(projectId: string) {
-	invoke<void>('project_flush_and_push', { id: projectId });
+export function syncToCloud(projectId: string | undefined) {
+	if (projectId) invoke<void>('project_flush_and_push', { id: projectId });
 }

packages/ui/src/routes/[projectId]/+layout.svelte

@@ -18,7 +18,7 @@
 
 	export let data: LayoutData;
 	let {
-		projectId,
+		projectStore,
 		update,
 		sessionsStore,
 		deltasStore,
@@ -46,8 +46,8 @@
 
 	onMount(() =>
 		unsubscribe(
-			hotkeys.on('Meta+Shift+R', () => goto(`/old/${projectId}/player`)),
-			hotkeys.on('Meta+Shift+S', () => syncToCloud(projectId))
+			hotkeys.on('Meta+Shift+R', () => goto(`/old/${$projectStore?.id}/player`)),
+			hotkeys.on('Meta+Shift+S', () => syncToCloud($projectStore?.id))
 		)
 	);
 </script>
@@ -56,19 +56,24 @@
 	Loading...
 {:else if $baseBranchStore}
 	{#if !$vbranchesState.isError}
+		{@const project = $projectStore}
 		<div class="relative flex w-full max-w-full" role="group" on:dragover|preventDefault>
 			<div bind:this={trayViewport} class="z-30 flex flex-shrink">
-				<Navigation
-					branchesWithContentStore={branchesWithContent}
-					{remoteBranchStore}
-					{baseBranchStore}
-					{branchController}
-					{projectId}
-					githubContext={$githubContextStore}
-					user={$userStore}
-					{update}
-					{pullRequestsStore}
-				/>
+				{#if project}
+					<Navigation
+						branchesWithContentStore={branchesWithContent}
+						{remoteBranchStore}
+						{baseBranchStore}
+						{branchController}
+						{project}
+						githubContext={$githubContextStore}
+						user={$userStore}
+						{update}
+						{pullRequestsStore}
+					/>
+				{:else}
+					<p>loading...</p>
+				{/if}
 			</div>
 			<Resizer
 				minWidth={300}

packages/ui/src/routes/[projectId]/+layout.ts

@@ -48,7 +48,7 @@ export const load: LayoutLoad = async ({ params }) => {
 	);
 
 	const githubContextStore = getGitHubContextStore(userStore, baseBranchStore);
-	const project = getProjectStore({ id: params.projectId });
+	const projectStore = getProjectStore({ id: params.projectId });
 
 	const pullRequestsStore = listPullRequestsWithCache(githubContextStore);
 	const pullRequestsState = pullRequestsStore.state;
@@ -66,7 +66,7 @@ export const load: LayoutLoad = async ({ params }) => {
 		baseBranchStore,
 		remoteBranchStore,
 		remoteBranchState,
-		project,
+		projectStore,
 		githubContextStore,
 		pullRequestsStore,
 		pullRequestsState

packages/ui/src/routes/[projectId]/BaseBranchCard.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { Project } from '$lib/backend/projects';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import TimeAgo from '$lib/components/TimeAgo.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
@@ -8,7 +9,7 @@
 	import type { BranchController } from '$lib/vbranches/branchController';
 	import type { BaseBranch, CustomStore } from '$lib/vbranches/types';
 
-	export let projectId: string;
+	export let project: Project;
 	export let branchController: BranchController;
 	export let baseBranchStore: CustomStore<BaseBranch | undefined>;
 
@@ -16,10 +17,15 @@
 	let fetching = false;
 </script>
 
-<a href="/{projectId}/base" class="flex flex-col p-2" tabindex="0" bind:this={baseContents}>
+<a
+	href="/{project.id}/base"
+	class="bg-color-3 m-4 flex flex-col rounded-lg p-3"
+	tabindex="0"
+	bind:this={baseContents}
+>
 	<div class="flex flex-grow items-center">
 		<div class="flex flex-grow items-center gap-1">
-			<span class="font-bold">Trunk</span>
+			<span class="font-bold">{project.title}</span>
 			{#if ($baseBranchStore?.behind || 0) > 0}
 				<Tooltip label="Unmerged upstream commits">
 					<div

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

@@ -32,13 +32,14 @@
 	import IconSpinner from '$lib/icons/IconSpinner.svelte';
 	import { isLoading, loadStack } from '$lib/backend/ipc';
 	import BaseBranchCard from './BaseBranchCard.svelte';
+	import type { Project } from '$lib/backend/projects';
 
 	export let branchesWithContentStore: CustomStore<Branch[] | undefined>;
 	export let remoteBranchStore: CustomStore<RemoteBranch[] | undefined>;
 	export let baseBranchStore: CustomStore<BaseBranch | undefined>;
 	export let pullRequestsStore: CustomStore<PullRequest[] | undefined>;
 	export let branchController: BranchController;
-	export let projectId: string;
+	export let project: Project;
 	export let githubContext: GitHubIntegrationContext | undefined;
 	export let user: User | undefined;
 	export let update: Loadable<Update>;
@@ -83,7 +84,8 @@
 	<!-- Top spacer -->
 	<div class="flex h-5 flex-shrink-0" data-tauri-drag-region></div>
 	<!-- Base branch -->
-	<BaseBranchCard {projectId} {branchController} {baseBranchStore} />
+
+	<BaseBranchCard {project} {branchController} {baseBranchStore} />
 	<!-- Your branches -->
 	<div
 		class="bg-color-4 border-color-4 flex items-center justify-between border-b border-t px-2 py-1 pr-1"
@@ -119,7 +121,7 @@
 						{@const { added, removed } = sumBranchLinesAddedRemoved(branch)}
 						{@const latestModifiedAt = branch.files.at(0)?.hunks.at(0)?.modifiedAt}
 						<a
-							href={`/${projectId}/stashed/${branch.id}`}
+							href={`/${project.id}/stashed/${branch.id}`}
 							transition:slide={{ duration: 250 }}
 							class="border-color-4 group block border-b p-2 pr-0 -outline-offset-2 outline-blue-200 last:border-b focus-within:outline-2"
 							class:bg-light-50={$page.url.pathname.includes(branch.id)}
@@ -202,9 +204,9 @@
 
 	<!-- Remote branches -->
 	{#if githubContext}
-		<PullRequests {pullRequestsStore} {projectId} />
+		<PullRequests {pullRequestsStore} projectId={project.id} />
 	{:else}
-		<RemoteBranches {remoteBranchStore} {projectId}></RemoteBranches>
+		<RemoteBranches {remoteBranchStore} projectId={project.id}></RemoteBranches>
 	{/if}
 	<!-- Bottom spacer -->
 	<div
@@ -214,7 +216,7 @@
 			<Link href="/" class="p-1">
 				<IconHome />
 			</Link>
-			<Link href="/{projectId}/settings" class="p-1">
+			<Link href="/{project.id}/settings" class="p-1">
 				<IconSettings />
 			</Link>
 			<Tooltip label="Send feedback">