- active branch domain link

- settigns domain link
- remove project header

packages/ui/src/routes/[projectId]/base/+page.svelte

@@ -1,26 +1,12 @@
 <script lang="ts">
 	import type { PageData } from './$types';
 	import BaseBranch from './BaseBranch.svelte';
-	import ProjectHeader from '../ProjectHeader.svelte';
 
 	export let data: PageData;
-	let {
-		projectId,
-		branchController,
-		baseBranchStore,
-		baseBranchesState,
-		projectStore,
-		githubContextStore
-	} = data;
+	let { projectId, branchController, baseBranchStore, baseBranchesState } = data;
 </script>
 
 <div class="bg-color-3 h-full flex-grow overflow-y-auto overscroll-none">
-	<ProjectHeader
-		{projectId}
-		projectTitle={$projectStore?.title || ''}
-		isGitHub={$githubContextStore !== undefined}
-		pageTitle="Trunk"
-	></ProjectHeader>
 	<div class="mx-auto flex max-w-xl flex-col gap-y-6 overflow-visible p-8">
 		{#if $baseBranchesState.isLoading}
 			<p>Loading...</p>

packages/ui/src/routes/[projectId]/board/+page.svelte

@@ -28,11 +28,6 @@
 </script>
 
 <div class="flex h-full w-full flex-grow flex-col overflow-hidden">
-	<ProjectHeader
-		{projectId}
-		projectTitle={$projectStore?.title || ''}
-		isGitHub={$githubContextStore !== undefined}
-	></ProjectHeader>
 	{#if shouldShowHttpsWarning()}
 		<div class="w-full bg-yellow-200/70 px-2 py-1 dark:bg-yellow-700/70">
 			HTTPS remote detected. In order to push & fetch, you may need to&nbsp;

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

@@ -19,7 +19,7 @@
 
 <a
 	href="/{project.id}/base"
-	class="bg-color-3 mx-4 mb-4 mt-1 flex flex-col rounded-lg p-3"
+	class="bg-color-3 flex flex-col rounded-lg p-3"
 	tabindex="0"
 	bind:this={baseContents}
 >

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import type { ComponentType } from 'svelte';
+
+	export let href: string;
+	export let icon: ComponentType | undefined = undefined;
+	$: selected = $page.url.href.includes(href);
+</script>
+
+<a class="bg-color-3 mx-4 block rounded px-3 py-2 font-semibold" class:bg-color-3={selected} {href}>
+	<svelte:component this={icon} class="text-color-4 mr-1 inline h-4 w-4 align-middle" />
+	<slot />
+</a>

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

@@ -1,16 +1,13 @@
 <script lang="ts">
 	import type { User } from '$lib/backend/cloud';
 	import { isLoading, loadStack } from '$lib/backend/ipc';
-	import type { Project } from '$lib/backend/projects';
 	import Link from '$lib/components/Link.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import IconEmail from '$lib/icons/IconEmail.svelte';
 	import IconHome from '$lib/icons/IconHome.svelte';
-	import IconSettings from '$lib/icons/IconSettings.svelte';
 	import IconSpinner from '$lib/icons/IconSpinner.svelte';
 	import * as events from '$lib/utils/events';
 
-	export let project: Project;
 	export let user: User | undefined;
 </script>
 
@@ -21,9 +18,6 @@
 		<Link href="/" class="p-1">
 			<IconHome />
 		</Link>
-		<Link href="/{project.id}/settings" class="p-1">
-			<IconSettings />
-		</Link>
 		<Tooltip label="Send feedback">
 			<button class="p-1" on:click={() => events.emit('openSendIssueModal')}>
 				<IconEmail />

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

@@ -14,6 +14,9 @@
 	import AppUpdater from './AppUpdater.svelte';
 	import type { Loadable } from '@square/svelte-store';
 	import type { Update } from '../../updater';
+	import DomainButton from './DomainButton.svelte';
+	import IconBranch from '$lib/icons/IconBranch.svelte';
+	import IconSettings from '$lib/icons/IconSettings.svelte';
 
 	export let branchesWithContentStore: CustomStore<Branch[] | undefined>;
 	export let remoteBranchStore: CustomStore<RemoteBranch[] | undefined>;
@@ -34,19 +37,22 @@
 	role="menu"
 	tabindex="0"
 >
-	<!-- Top spacer -->
-	<div class="flex h-7 flex-shrink-0" data-tauri-drag-region></div>
-	<!-- Base branch -->
-	<BaseBranchCard {project} {branchController} {baseBranchStore} />
-	<!-- Your branches -->
+	<div class="flex h-7 flex-shrink-0" data-tauri-drag-region>
+		<!-- Top spacer & drag region -->
+	</div>
+	<div class="mx-4 mb-4 mt-1">
+		<BaseBranchCard {project} {branchController} {baseBranchStore} />
+	</div>
+	<div class="mb-4">
+		<DomainButton href={`/${project.id}/board`} icon={IconBranch}>Active branches</DomainButton>
+		<DomainButton href={`/${project.id}/settings`} icon={IconSettings}>Settings</DomainButton>
+	</div>
 	<YourBranches {project} {branchController} {branchesWithContentStore} />
-	<!-- Remote branches -->
 	{#if githubContext}
 		<PullRequests {pullRequestsStore} projectId={project.id} />
 	{:else}
 		<RemoteBranches {remoteBranchStore} projectId={project.id}></RemoteBranches>
 	{/if}
-	<!-- Bottom spacer -->
-	<Footer {user} {project} />
+	<Footer {user} />
 	<AppUpdater {update} />
 </div>

packages/ui/src/routes/[projectId]/pull/[number]/+page.svelte

@@ -5,25 +5,12 @@
 	import PullRequestPreview from './PullRequestPreview.svelte';
 
 	export let data: PageData;
-	let {
-		projectId,
-		branchController,
-		projectStore,
-		githubContextStore,
-		pullRequestsState,
-		pullRequestsStore
-	} = data;
+	let { branchController, pullRequestsState, pullRequestsStore } = data;
 
 	$: pr = $pullRequestsStore?.find((b) => b.number.toString() == $page.params.number);
 </script>
 
 <div class="bg-color-3 flex h-full flex-grow flex-col overflow-y-auto overscroll-none">
-	<ProjectHeader
-		{projectId}
-		projectTitle={$projectStore?.title || ''}
-		isGitHub={!!$githubContextStore}
-		pageTitle={pr?.title}
-	/>
 	<div class="flex-grow px-8">
 		{#if $pullRequestsState?.isLoading}
 			<p>Loading...</p>

packages/ui/src/routes/[projectId]/remote/[sha]/+page.svelte

@@ -5,25 +5,12 @@
 	import RemoteBranchPreview from './RemoteBranchPreview.svelte';
 
 	export let data: PageData;
-	let {
-		projectId,
-		branchController,
-		projectStore,
-		githubContextStore,
-		remoteBranchStore,
-		remoteBranchState
-	} = data;
+	let { projectId, branchController, remoteBranchStore, remoteBranchState } = data;
 
 	$: branch = $remoteBranchStore?.find((b) => b.sha == $page.params.sha);
 </script>
 
 <div class="bg-color-3 flex h-full flex-grow flex-col overflow-y-auto overscroll-none">
-	<ProjectHeader
-		{projectId}
-		projectTitle={$projectStore?.title || ''}
-		isGitHub={!!$githubContextStore}
-		pageTitle={branch?.name}
-	/>
 	<div class="flex-grow px-8">
 		{#if $remoteBranchState?.isLoading}
 			<p>Loading...</p>

packages/ui/src/routes/[projectId]/stashed/[branchId]/+page.svelte

@@ -8,7 +8,6 @@
 	let {
 		projectId,
 		branchController,
-		projectStore,
 		githubContextStore,
 		cloud,
 		vbranchStore,
@@ -20,12 +19,6 @@
 </script>
 
 <div class="bg-color-3 flex h-full flex-grow flex-col overflow-y-auto overscroll-none">
-	<ProjectHeader
-		{projectId}
-		projectTitle={$projectStore?.title || ''}
-		isGitHub={!!$githubContextStore}
-		pageTitle={branch?.name}
-	/>
 	<div class="flex-grow px-8">
 		{#if $vbranchesState.isLoading}
 			<p>Loading...</p>