Moving a bit towards Pavel's unfinished nav design

packages/ui/src/lib/components/Button.svelte

@@ -27,7 +27,7 @@
 </script>
 
 <button
-	class={color + ' ' + classes + ' button'}
+	class={color + ' ' + classes + ' button rounded-md px-2 py-0.5'}
 	class:small={height === 'small'}
 	class:full-width={width === 'full-width'}
 	class:pointer-events-none={loading}
@@ -42,8 +42,6 @@
 	class:justify-start={align == 'left'}
 	class:justify-center={align == 'center'}
 	class:justify-end={align == 'right'}
-	class:px-4={!!$$slots.default}
-	class:px-2={!$$slots.default}
 	{tabindex}
 >
 	{#if loading}

packages/ui/src/lib/components/Tooltip.svelte

@@ -40,7 +40,7 @@
 
 <div
 	role="tooltip"
-	class="inline-block h-fit overflow-auto align-top"
+	class="inline-block h-fit overflow-auto"
 	on:mouseenter={() => (timeout = setTimeout(() => (showTooltip = true), timeoutMilliseconds))}
 	on:mouseleave={() => {
 		clearTimeout(timeout);

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

@@ -1,63 +1,79 @@
 <script lang="ts">
-	import type { Project, ProjectService } from '$lib/backend/projects';
+	import { page } from '$app/stores';
+	import type { Project } from '$lib/backend/projects';
+	import Button from '$lib/components/Button.svelte';
 	import IconButton from '$lib/components/IconButton.svelte';
 	import TimeAgo from '$lib/components/TimeAgo.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
 	import type { PrService } from '$lib/github/pullrequest';
 	import IconBranch from '$lib/icons/IconBranch.svelte';
-	import IconDropDown from '$lib/icons/IconDropDown.svelte';
 	import IconGithub from '$lib/icons/IconGithub.svelte';
 	import IconRefresh from '$lib/icons/IconRefresh.svelte';
 	import type { BranchController } from '$lib/vbranches/branchController';
 	import type { BaseBranchService } from '$lib/vbranches/branchStoresCache';
-	import ProjectsPopup from './ProjectsPopup.svelte';
 
 	export let project: Project;
-	export let projectService: ProjectService;
 	export let branchController: BranchController;
 	export let baseBranchService: BaseBranchService;
 	export let prService: PrService;
 
 	$: base$ = baseBranchService.base$;
+	$: selected = $page.url.href.endsWith('/base');
 
-	$: projects$ = projectService.projects$;
-
-	let popup: ProjectsPopup;
 	let baseContents: HTMLElement;
 	let fetching = false;
+	let loading = false;
 </script>
 
-<div
+<a
-	class="relative flex flex-col rounded-lg p-3"
+	href="/{project.id}/base"
-	style:background-color="var(--bg-card)"
+	class="relative flex flex-grow items-center gap-x-2 rounded-md px-3 py-1 text-lg"
+	style:background-color={selected ? 'var(--bg-surface-highlight)' : undefined}
 	bind:this={baseContents}
 >
-	<div class="flex flex-grow items-center">
+	<div class="flex items-center gap-1">
-		<div class="flex flex-grow items-center gap-1">
+		{#if $base$?.remoteUrl.includes('github.com')}
-			<a href="/{project.id}/base" class="font-bold">{project.title}</a>
+			<IconGithub class="h-4 w-4" />
+		{:else}
+			<IconBranch class="h-4 w-4" />
+		{/if}
+	</div>
+	<div class="font-semibold">
+		{$base$?.branchName}
+	</div>
+
 	{#if ($base$?.behind || 0) > 0}
 		<Tooltip label="Unmerged upstream commits">
 			<div
-						class="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-bold text-white"
+				class="flex h-4 w-4 items-center justify-center rounded-full text-base font-bold"
+				style:background-color="var(--bg-surface-highlight)"
 			>
 				{$base$?.behind}
 			</div>
 		</Tooltip>
-			{/if}
+		<Button
-		</div>
+			height="small"
-		<div class="flex gap-x-2">
+			color="purple"
-			<IconButton
+			{loading}
-				class="items-center justify-center align-top "
+			on:click={async (e) => {
-				icon={IconDropDown}
+				loading = true;
-				on:click={() => {
+				try {
-					popup.show();
+					await branchController.updateBaseBranch();
+				} finally {
+					loading = false;
+				}
+
+				e.preventDefault();
 			}}
-			/>
+		>
+			update
+		</Button>
+	{/if}
 	<IconButton
 		class="items-center justify-center align-top "
-				on:click={() => {
+		on:click={async () => {
 			fetching = true;
-					branchController.fetchFromTarget().finally(() => (fetching = false));
+			await branchController.fetchFromTarget().finally(() => (fetching = false));
 			prService.reload();
 		}}
 	>
@@ -65,24 +81,11 @@
 			<IconRefresh class="h-4 w-4" />
 		</div>
 	</IconButton>
-		</div>
+</a>
-	</div>
+<div class="text-color-3 py-0.5 pl-9 text-sm">
-	<div class="flex flex-grow items-center text-sm">
-		<div class="flex flex-grow items-center gap-1">
-			{#if $base$?.remoteUrl.includes('github.com')}
-				<IconGithub class="h-2.5 w-2.5" />
-			{:else}
-				<IconBranch class="h-2.5 w-2.5" />
-			{/if}
-			{$base$?.branchName}
-		</div>
-		<div>
 	<Tooltip label="Last fetch from upstream">
 		{#if $base$?.fetchedAt}
 			<TimeAgo date={$base$.fetchedAt} />
 		{/if}
 	</Tooltip>
-		</div>
-	</div>
 </div>
-<ProjectsPopup bind:this={popup} projects={$projects$} />

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

@@ -8,9 +8,8 @@
 </script>
 
 <a
-	class="mx-4 block rounded px-3 py-2 font-semibold"
-	class:bg-color-3={selected}
 	{href}
+	class="mx-4 block rounded px-3 py-2 font-semibold"
 	style:background-color={selected ? 'var(--bg-surface-highlight)' : undefined}
 >
 	<svelte:component this={icon} class="text-color-4 mr-1 inline h-4 w-4 align-middle" />

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

@@ -19,6 +19,7 @@
 	import type { PrService } from '$lib/github/pullrequest';
 	import type { BaseBranchService, VirtualBranchService } from '$lib/vbranches/branchStoresCache';
 	import type { RemoteBranchService } from '$lib/stores/remoteBranches';
+	import ProjectSelector from './ProjectSelector.svelte';
 
 	export let vbranchService: VirtualBranchService;
 	export let remoteBranchService: RemoteBranchService;
@@ -42,11 +43,14 @@
 	role="menu"
 	tabindex="0"
 >
-	<div class="flex h-7 flex-shrink-0" data-tauri-drag-region>
+	<div class="flex h-8 flex-shrink-0" data-tauri-drag-region>
 		<!-- Top spacer & drag region -->
 	</div>
 	<div class="relative mx-4 mb-4 mt-1">
-		<BaseBranchCard {project} {branchController} {baseBranchService} {prService} {projectService} />
+		<ProjectSelector {project} {projectService} />
+	</div>
+	<div class="mx-4 mb-4 mt-1">
+		<BaseBranchCard {project} {baseBranchService} {branchController} {prService} />
 	</div>
 	<div class="mb-4">
 		<DomainButton href={`/${project.id}/board`} icon={IconBranch}>Active branches</DomainButton>

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { Project, ProjectService } from '$lib/backend/projects';
+	import IconButton from '$lib/components/IconButton.svelte';
+	import type { PrService } from '$lib/github/pullrequest';
+	import IconDropDown from '$lib/icons/IconDropDown.svelte';
+	import ProjectsPopup from './ProjectsPopup.svelte';
+
+	export let project: Project;
+	export let projectService: ProjectService;
+
+	$: projects$ = projectService.projects$;
+
+	let popup: ProjectsPopup;
+</script>
+
+<div
+	class="flex flex-grow items-center rounded-md p-3"
+	style:background-color="var(--bg-surface-highlight)"
+>
+	<div class="flex flex-grow items-center gap-1 font-bold">
+		{project.title}
+	</div>
+	<div class="flex gap-x-2">
+		<IconButton
+			class="items-center justify-center align-top "
+			icon={IconDropDown}
+			on:click={(e) => {
+				popup.show();
+				e.preventDefault();
+			}}
+		/>
+	</div>
+</div>
+<ProjectsPopup bind:this={popup} projects={$projects$} />

packages/ui/src/routes/user/+page.svelte

@@ -167,7 +167,7 @@
 	class="flex h-full flex-shrink flex-grow flex-col pb-4"
 	style:background-color="var(--bg-surface)"
 >
-	<div class="h-8" data-tauri-drag-region></div>
+	<div class="h-16" data-tauri-drag-region></div>
 	<div
 		class="flex w-full items-center justify-between border-b px-2 pb-2"
 		style:border-color="var(--border-surface)"

packages/ui/src/styles/main.postcss

@@ -144,7 +144,7 @@ button.active {
 }
 
 .button {
-	@apply relative inline-flex w-fit items-center gap-0.5 whitespace-nowrap rounded py-2 text-base font-medium leading-5 outline-blue-200 transition-none focus:outline-2 dark:outline-blue-500;
+	@apply relative inline-flex w-fit items-center gap-0.5 whitespace-nowrap rounded-lg py-2 text-base font-medium leading-5 outline-blue-200 transition-none focus:outline-2 dark:outline-blue-500;
 }
 
 .disabled {
@@ -255,7 +255,7 @@ button.active {
 	@apply bg-[#524C93]/20;
 }
 .purple.filled {
-	@apply border-b border-t border-b-[#3C386D] border-t-[#7570B1] bg-gradient-to-b from-[#5852A0] to-[#474281] text-light-50 no-underline;
+	@apply border-b border-t bg-purple-500 font-semibold text-light-50 no-underline;
 }
 .purple.filled:hover {
 	@apply bg-[#423E7A];

packages/ui/tailwind.config.cjs

@@ -138,7 +138,7 @@ const config = {
 				200: '#CFC7F5',
 				300: '#B8ADF1',
 				400: '#A193EC',
-				500: '#8A79E7',
+				500: '#666ADB',
 				600: '#5852A0',
 				700: '#443D7A',
 				800: '#302854',