Fixes a few bugs

- project setup back button
- delete repo from problem page
- go to home screen after deleting repo from settings page

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

@@ -1,13 +1,11 @@
 <script>
-	import IconChevronLeft from '$lib/icons/IconChevronLeft.svelte';
 	import { goto } from '$app/navigation';
-
-	let className = '';
-	export { className as class };
+	import Button from './Button.svelte';
 </script>
 
-<button
-	class={className}
+<Button
+	kind="outlined"
+	color="neutral"
 	on:click={() => {
 		if (history.length > 0) {
 			history.back();
@@ -16,5 +14,5 @@
 		}
 	}}
 >
-	<IconChevronLeft />
-</button>
+	<slot />
+</Button>

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

@@ -6,13 +6,16 @@
 	import IconLink from './IconLink.svelte';
 	import Button from './Button.svelte';
 	import ProjectSwitcher from './ProjectSwitcher.svelte';
+	import { goto } from '$app/navigation';
 
 	export let projectService: ProjectService;
-	export let project: Project | undefined;
+	export let project: Project;
 	export let userService: UserService;
 	export let error: any = undefined;
 
 	$: user$ = userService.user$;
+
+	let loading = false;
 </script>
 
 <DecorativeSplitView
@@ -40,7 +43,22 @@
 		</div>
 
 		<div class="problem__delete">
-			<Button wide kind="outlined" color="error" icon="bin-small">
+			<Button
+				wide
+				on:click={() => {
+					loading = true;
+					try {
+						goto('/');
+						projectService.deleteProject(project.id);
+					} finally {
+						loading = false;
+					}
+				}}
+				{loading}
+				kind="outlined"
+				color="error"
+				icon="bin-small"
+			>
 				Remove project from GitButler
 			</Button>
 		</div>

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

@@ -34,7 +34,7 @@
 	}
 </script>
 
-<div class="select-wrapper" class:wide>
+<div class="select-wrapper" class:wide bind:this={element}>
 	{#if label}
 		<label for={id} class="select__label text-base-body-13 text-semibold">{label}</label>
 	{/if}
@@ -47,7 +47,6 @@
 		icon="select-chevron"
 		value={value?.[labelId]}
 		disabled={disabled || loading}
-		bind:element
 		on:click={() => (listOpen = !listOpen)}
 	/>
 	<div

gitbutler-ui/src/lib/vbranches/branchStoresCache.ts

@@ -1,6 +1,6 @@
 import { BaseBranch, Branch } from './types';
 import { plainToInstance } from 'class-transformer';
-import { UserError, invoke, listen } from '$lib/backend/ipc';
+import { invoke, listen } from '$lib/backend/ipc';
 import {
 	switchMap,
 	Observable,
@@ -51,7 +51,7 @@ export class VirtualBranchService {
 			}),
 			shareReplay(1),
 			catchError((err) => {
-				this.branchesError$.next(UserError.fromError(err));
+				this.branchesError$.next(err);
 				return [];
 			})
 		);

gitbutler-ui/src/routes/[projectId]/+layout.svelte

@@ -43,24 +43,24 @@
 	});
 </script>
 
-{#if $baseBranch$ === null}
-	{#if $project$}
-		{#await getRemoteBranches(projectId)}
-			<p>loading...</p>
-		{:then remoteBranches}
-			{#if remoteBranches.length == 0}
-				<ProblemLoadingRepo
-					{userService}
-					{projectService}
-					project={$project$}
-					error="Currently, GitButler requires a remote branch to base it's virtual branch work on. To
+{#if !$project$}
+	<p>Project not found!</p>
+{:else if $baseBranch$ === null}
+	{#await getRemoteBranches(projectId)}
+		<p>loading...</p>
+	{:then remoteBranches}
+		{#if remoteBranches.length == 0}
+			<ProblemLoadingRepo
+				{userService}
+				{projectService}
+				project={$project$}
+				error="Currently, GitButler requires a remote branch to base it's virtual branch work on. To
 						use virtual branches, please push your code to a remote branch to use as a base"
-				/>
-			{:else}
-				<ProjectSetup {branchController} {userService} {projectId} {remoteBranches} />
-			{/if}
-		{/await}
-	{/if}
+			/>
+		{:else}
+			<ProjectSetup {branchController} {userService} {projectId} {remoteBranches} />
+		{/if}
+	{/await}
 {:else if !$gbBranchActive$}
 	<NotOnGitButlerBranch
 		{userService}
@@ -74,19 +74,15 @@
 {:else if $baseBranch$}
 	<div class="relative flex w-full max-w-full" role="group" on:dragover|preventDefault>
 		<div bind:this={trayViewport} class="flex flex-shrink">
-			{#if $project$}
-				<Navigation
-					{branchService}
-					{baseBranchService}
-					{branchController}
-					project={$project$}
-					user={$user$}
-					{githubService}
-					{projectService}
-				/>
-			{:else}
-				<p>loading...</p>
-			{/if}
+			<Navigation
+				{branchService}
+				{baseBranchService}
+				{branchController}
+				project={$project$}
+				user={$user$}
+				{githubService}
+				{projectService}
+			/>
 		</div>
 		<div class="absolute h-4 w-full" data-tauri-drag-region></div>
 		<slot />

gitbutler-ui/src/routes/[projectId]/ProjectSetup.svelte

@@ -1,15 +1,17 @@
 <script async lang="ts">
-	import Button from '$lib/components/Button.svelte';
-	import type { BranchController } from '$lib/vbranches/branchController';
-	import { goto } from '$app/navigation';
-	import Login from '$lib/components/Login.svelte';
 	import type { UserService } from '$lib/stores/user';
-	import GithubIntegration from '../components/GithubIntegration.svelte';
+	import type { BranchController } from '$lib/vbranches/branchController';
+
 	import { projectAiGenEnabled } from '$lib/config/config';
-	import DecorativeSplitView from '$lib/components/DecorativeSplitView.svelte';
-	import SetupFeature from './components/SetupFeature.svelte';
+
+	import Login from '$lib/components/Login.svelte';
+	import Button from '$lib/components/Button.svelte';
 	import Toggle from '$lib/components/Toggle.svelte';
 	import IconLink from '$lib/components/IconLink.svelte';
+	import BackButton from '$lib/components/BackButton.svelte';
+	import SetupFeature from './components/SetupFeature.svelte';
+	import GithubIntegration from '../components/GithubIntegration.svelte';
+	import DecorativeSplitView from '$lib/components/DecorativeSplitView.svelte';
 
 	export let branchController: BranchController;
 	export let userService: UserService;
@@ -171,7 +173,7 @@
 			</SetupFeature>
 		</div>
 		<div class="floating-buttons">
-			<Button kind="outlined" color="neutral" on:click={() => goto('/')}>Back</Button>
+			<BackButton>Back</BackButton>
 			<Button {loading} on:click={onSetTargetClick} icon="chevron-right-small" id="set-base-branch"
 				>Let's go!</Button
 			>

gitbutler-ui/src/routes/[projectId]/settings/+page.svelte

@@ -27,13 +27,13 @@
 	const onDeleteClicked = () =>
 		Promise.resolve()
 			.then(() => (isDeleting = true))
+			.then(() => goto('/'))
 			.then(() => projectService.deleteProject($project$?.id))
 			.then(() => deleteConfirmationModal.close())
 			.catch((e) => {
 				console.error(e);
 				toasts.error('Failed to delete project');
 			})
-			.then(() => goto('/'))
 			.then(() => toasts.success('Project deleted'))
 			.finally(() => (isDeleting = false));