From 232a0dcf01ca71737892bf514be97a6eba2d354c Mon Sep 17 00:00:00 2001
From: Kiril Videlov <kiril@videlov.com>
Date: Thu, 2 Nov 2023 17:32:30 +0100
Subject: [PATCH] feat: add ProjectHeader component to display project title
 and GitHub icon, update SVG components to spread props for reusability

---
 .../ui/src/lib/icons/IconChevronRight.svelte  |  5 ++--
 packages/ui/src/lib/icons/IconGithub.svelte   |  2 ++
 .../src/routes/[projectId]/board/+page.svelte |  6 ++++
 .../[projectId]/board/ProjectHeader.svelte    | 28 +++++++++++++++++++
 4 files changed, 39 insertions(+), 2 deletions(-)
 create mode 100644 packages/ui/src/routes/[projectId]/board/ProjectHeader.svelte

diff --git a/packages/ui/src/lib/icons/IconChevronRight.svelte b/packages/ui/src/lib/icons/IconChevronRight.svelte
index 074658aa0..61076b6d9 100644
--- a/packages/ui/src/lib/icons/IconChevronRight.svelte
+++ b/packages/ui/src/lib/icons/IconChevronRight.svelte
@@ -4,6 +4,7 @@
 </script>
 
 <svg
+	{...$$restProps}
 	class={className}
 	xmlns="http://www.w3.org/2000/svg"
 	width="24"
@@ -15,6 +16,6 @@
 	stroke-linecap="round"
 	stroke-linejoin="round"
 >
-	<path stroke="none" d="M0 0h24v24H0z" fill="none" />
-	<path d="M9 6l6 6l-6 6" />
+	<path {...$$restProps} stroke="none" d="M0 0h24v24H0z" fill="none" />
+	<path {...$$restProps} d="M9 6l6 6l-6 6" />
 </svg>
diff --git a/packages/ui/src/lib/icons/IconGithub.svelte b/packages/ui/src/lib/icons/IconGithub.svelte
index fd01f0ae6..2ae7b0983 100644
--- a/packages/ui/src/lib/icons/IconGithub.svelte
+++ b/packages/ui/src/lib/icons/IconGithub.svelte
@@ -4,6 +4,7 @@
 </script>
 
 <svg
+	{...$$restProps}
 	class={className}
 	width="20"
 	height="20"
@@ -12,6 +13,7 @@
 	xmlns="http://www.w3.org/2000/svg"
 >
 	<path
+		{...$$restProps}
 		fill-rule="evenodd"
 		clip-rule="evenodd"
 		d="M6.98091 0.599976C3.45242 0.599976 0.599976 3.47344 0.599976 7.02832C0.599976 9.86992 2.42763 12.2753 4.96308 13.1266C5.28007 13.1906 5.39619 12.9883 5.39619 12.8181C5.39619 12.6691 5.38574 12.1582 5.38574 11.626C3.61072 12.0092 3.24109 10.8597 3.24109 10.8597C2.95583 10.1147 2.53317 9.92321 2.53317 9.92321C1.9522 9.52941 2.57549 9.52941 2.57549 9.52941C3.21993 9.57199 3.55808 10.1893 3.55808 10.1893C4.12847 11.1683 5.04758 10.8917 5.41735 10.7214C5.47011 10.3063 5.63926 10.0189 5.81885 9.85934C4.40314 9.71031 2.91364 9.15691 2.91364 6.68768C2.91364 5.98525 3.16703 5.41055 3.56853 4.9636C3.50518 4.80399 3.28327 4.14401 3.63201 3.26068C3.63201 3.26068 4.17078 3.09036 5.38561 3.92053C5.90572 3.77982 6.4421 3.70824 6.98091 3.70763C7.51968 3.70763 8.06891 3.78221 8.57607 3.92053C9.79103 3.09036 10.3298 3.26068 10.3298 3.26068C10.6785 4.14401 10.4565 4.80399 10.3932 4.9636C10.8052 5.41055 11.0482 5.98525 11.0482 6.68768C11.0482 9.15691 9.55867 9.6996 8.13238 9.85934C8.36487 10.0615 8.56549 10.4446 8.56549 11.0513C8.56549 11.9133 8.55504 12.6052 8.55504 12.818C8.55504 12.9883 8.67129 13.1906 8.98815 13.1267C11.5236 12.2751 13.3513 9.86992 13.3513 7.02832C13.3617 3.47344 10.4988 0.599976 6.98091 0.599976Z"
diff --git a/packages/ui/src/routes/[projectId]/board/+page.svelte b/packages/ui/src/routes/[projectId]/board/+page.svelte
index 03a7003c7..dcc9aceec 100644
--- a/packages/ui/src/routes/[projectId]/board/+page.svelte
+++ b/packages/ui/src/routes/[projectId]/board/+page.svelte
@@ -3,6 +3,7 @@
 	import type { PageData } from './$types';
 	import IconExternalLink from '$lib/icons/IconExternalLink.svelte';
 	import Board from './Board.svelte';
+	import ProjectHeader from './ProjectHeader.svelte';
 
 	export let data: PageData;
 	let {
@@ -21,6 +22,11 @@
 </script>
 
 <div class="flex h-full w-full flex-grow flex-col overflow-hidden">
+	<ProjectHeader
+		{projectId}
+		projectTitle={$project?.title || ''}
+		isGitHub={$githubContextStore !== undefined}
+	></ProjectHeader>
 	{#if $baseBranchStore?.remoteUrl.startsWith('https') && !$httpsWarningBannerDismissed}
 		<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;
diff --git a/packages/ui/src/routes/[projectId]/board/ProjectHeader.svelte b/packages/ui/src/routes/[projectId]/board/ProjectHeader.svelte
new file mode 100644
index 000000000..bc26b7791
--- /dev/null
+++ b/packages/ui/src/routes/[projectId]/board/ProjectHeader.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import IconChevronRight from '$lib/icons/IconChevronRight.svelte';
+	import IconGithub from '$lib/icons/IconGithub.svelte';
+	export let projectId: string;
+	export let projectTitle: string;
+	export let isGitHub: boolean;
+	// Optional page title as a prop instead of a slot to ensure header is always draggable
+	export let pageTitle: string | undefined = undefined;
+</script>
+
+<!-- data-tauri-drag-region needs to be on all elements recursively https://github.com/tauri-apps/tauri/issues/1656#issuecomment-1178574760 -->
+<div class="flex h-8 items-center justify-center gap-x-1" data-tauri-drag-region>
+	<div class="relative flex items-center gap-x-1" data-tauri-drag-region>
+		{#if isGitHub}
+			<IconGithub class="h-4 w-4" data-tauri-drag-region></IconGithub>
+		{/if}
+		<a data-tauri-drag-region class="cursor-default font-semibold" href={`/${projectId}/board`}>
+			{projectTitle}</a
+		>
+		<!-- Center only the project title to avoid content shift during navigatin -->
+		<div class="absolute left-full flex items-center" data-tauri-drag-region>
+			{#if pageTitle}
+				<IconChevronRight class="h-4 w-4" data-tauri-drag-region></IconChevronRight>
+				{pageTitle}
+			{/if}
+		</div>
+	</div>
+</div>