From 6fb83315a6e7fcb1c82633f39f0a7bb74ac63af6 Mon Sep 17 00:00:00 2001
From: Mattias Granlund <mtsgrd@gmail.com>
Date: Fri, 17 Nov 2023 15:09:37 +0100
Subject: [PATCH] Moving a bit towards Pavel's unfinished nav design

---
 packages/ui/src/lib/components/Button.svelte  |   4 +-
 packages/ui/src/lib/components/Tooltip.svelte |   2 +-
 .../navigation/BaseBranchCard.svelte          | 125 +++++++++---------
 .../navigation/DomainButton.svelte            |   3 +-
 .../[projectId]/navigation/Navigation.svelte  |   8 +-
 .../navigation/ProjectSelector.svelte         |  34 +++++
 packages/ui/src/routes/user/+page.svelte      |   2 +-
 packages/ui/src/styles/main.postcss           |   4 +-
 packages/ui/tailwind.config.cjs               |   2 +-
 9 files changed, 111 insertions(+), 73 deletions(-)
 create mode 100644 packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte

diff --git a/packages/ui/src/lib/components/Button.svelte b/packages/ui/src/lib/components/Button.svelte
index b4160b1f5..995f2e0d0 100644
--- a/packages/ui/src/lib/components/Button.svelte
+++ b/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}
diff --git a/packages/ui/src/lib/components/Tooltip.svelte b/packages/ui/src/lib/components/Tooltip.svelte
index 95f586722..37a6c305b 100644
--- a/packages/ui/src/lib/components/Tooltip.svelte
+++ b/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);
diff --git a/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte b/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
index aa7d76642..fbce3664a 100644
--- a/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
+++ b/packages/ui/src/routes/[projectId]/navigation/BaseBranchCard.svelte
@@ -1,88 +1,91 @@
 <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
-	class="relative flex flex-col rounded-lg p-3"
-	style:background-color="var(--bg-card)"
+<a
+	href="/{project.id}/base"
+	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 flex-grow items-center gap-1">
-			<a href="/{project.id}/base" class="font-bold">{project.title}</a>
-			{#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"
-					>
-						{$base$?.behind}
-					</div>
-				</Tooltip>
-			{/if}
-		</div>
-		<div class="flex gap-x-2">
-			<IconButton
-				class="items-center justify-center align-top "
-				icon={IconDropDown}
-				on:click={() => {
-					popup.show();
-				}}
-			/>
-			<IconButton
-				class="items-center justify-center align-top "
-				on:click={() => {
-					fetching = true;
-					branchController.fetchFromTarget().finally(() => (fetching = false));
-					prService.reload();
-				}}
+	<div class="flex items-center gap-1">
+		{#if $base$?.remoteUrl.includes('github.com')}
+			<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 text-base font-bold"
+				style:background-color="var(--bg-surface-highlight)"
 			>
-				<div class:animate-spin={fetching}>
-					<IconRefresh class="h-4 w-4" />
-				</div>
-			</IconButton>
+				{$base$?.behind}
+			</div>
+		</Tooltip>
+		<Button
+			height="small"
+			color="purple"
+			{loading}
+			on:click={async (e) => {
+				loading = true;
+				try {
+					await branchController.updateBaseBranch();
+				} finally {
+					loading = false;
+				}
+
+				e.preventDefault();
+			}}
+		>
+			update
+		</Button>
+	{/if}
+	<IconButton
+		class="items-center justify-center align-top "
+		on:click={async () => {
+			fetching = true;
+			await branchController.fetchFromTarget().finally(() => (fetching = false));
+			prService.reload();
+		}}
+	>
+		<div class:animate-spin={fetching}>
+			<IconRefresh class="h-4 w-4" />
 		</div>
-	</div>
-	<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>
+	</IconButton>
+</a>
+<div class="text-color-3 py-0.5 pl-9 text-sm">
+	<Tooltip label="Last fetch from upstream">
+		{#if $base$?.fetchedAt}
+			<TimeAgo date={$base$.fetchedAt} />
+		{/if}
+	</Tooltip>
 </div>
-<ProjectsPopup bind:this={popup} projects={$projects$} />
diff --git a/packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte b/packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte
index f885a4dda..759e460ee 100644
--- a/packages/ui/src/routes/[projectId]/navigation/DomainButton.svelte
+++ b/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" />
diff --git a/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte b/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
index f63e9e927..b4c8f95dd 100644
--- a/packages/ui/src/routes/[projectId]/navigation/Navigation.svelte
+++ b/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>
diff --git a/packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte b/packages/ui/src/routes/[projectId]/navigation/ProjectSelector.svelte
new file mode 100644
index 000000000..4f29656e3
--- /dev/null
+++ b/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$} />
diff --git a/packages/ui/src/routes/user/+page.svelte b/packages/ui/src/routes/user/+page.svelte
index 5868a1476..0e30c8d84 100644
--- a/packages/ui/src/routes/user/+page.svelte
+++ b/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)"
diff --git a/packages/ui/src/styles/main.postcss b/packages/ui/src/styles/main.postcss
index 011665c79..34bdb2707 100644
--- a/packages/ui/src/styles/main.postcss
+++ b/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];
diff --git a/packages/ui/tailwind.config.cjs b/packages/ui/tailwind.config.cjs
index d3a3e27cc..1398e8998 100644
--- a/packages/ui/tailwind.config.cjs
+++ b/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',