ui:add header component

src/lib/components/Header.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+	import { ProfileIcon, ProfilePanel } from '$lib';
+
+	type User = {
+		id: string;
+		username: string;
+	};
+
+	let { user }: { user: User } = $props();
+
+	let showProfilePanel = $state(false);
+
+	function toggleProfilePanel() {
+		showProfilePanel = !showProfilePanel;
+	}
+
+	function closeProfilePanel() {
+		showProfilePanel = false;
+	}
+</script>
+
+<header class="app-header">
+	<h1 class="app-title">Serengo</h1>
+	<ProfileIcon username={user.username} onclick={toggleProfilePanel} />
+</header>
+
+<ProfilePanel
+	username={user.username}
+	id={user.id}
+	isOpen={showProfilePanel}
+	onClose={closeProfilePanel}
+/>
+
+<style>
+	.app-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 16px 20px;
+	}
+</style>

src/lib/index.ts

@@ -4,3 +4,4 @@ export { default as Button } from './components/Button.svelte';
 export { default as ErrorMessage } from './components/ErrorMessage.svelte';
 export { default as ProfileIcon } from './components/ProfileIcon.svelte';
 export { default as ProfilePanel } from './components/ProfilePanel.svelte';
+export { default as Header } from './components/Header.svelte';

src/routes/+layout.server.ts

@@ -0,0 +1,7 @@
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async (event) => {
+	return {
+		user: event.locals.user
+	};
+};

src/routes/+layout.svelte

@@ -1,12 +1,21 @@
 <script lang="ts">
 	import '../app.css';
 	import favicon from '$lib/assets/favicon.svg';
+	import { Header } from '$lib';
+	import { page } from '$app/stores';
 
-	let { children } = $props();
+	let { children, data } = $props();
+
+	let isLoginRoute = $derived($page.url.pathname.startsWith('/login'));
+	let showHeader = $derived(!isLoginRoute && data?.user);
 </script>
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
+{#if showHeader && data.user}
+	<Header user={data.user} />
+{/if}
+
 {@render children?.()}

src/routes/+page.svelte

@@ -1,36 +1,10 @@
 <script lang="ts">
-	import { ProfileIcon, ProfilePanel } from '$lib';
-	import type { PageServerData } from './$types';
-
-	let { data }: { data: PageServerData } = $props();
-
-	let showProfilePanel = $state(false);
-
-	function toggleProfilePanel() {
-		showProfilePanel = !showProfilePanel;
-	}
-
-	function closeProfilePanel() {
-		showProfilePanel = false;
-	}
 </script>
 
 <div class="home-container">
-	<header class="app-header">
-		<h1 class="app-title">Serengo</h1>
-		<ProfileIcon username={data.user.username} onclick={toggleProfilePanel} />
-	</header>
-
 	<main class="main-content">
 		<!-- Future content will go here -->
 	</main>
-
-	<ProfilePanel
-		username={data.user.username}
-		id={data.user.id}
-		isOpen={showProfilePanel}
-		onClose={closeProfilePanel}
-	/>
 </div>
 
 <style>
@@ -39,24 +13,6 @@
 		background-color: #f8f8f8;
 	}
 
-	.app-header {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 16px 20px;
-		background-color: white;
-		border-bottom: 1px solid #e5e5e5;
-		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-	}
-
-	.app-title {
-		font-family: 'Washington', serif;
-		font-size: 24px;
-		font-weight: normal;
-		color: #333;
-		margin: 0;
-	}
-
 	.main-content {
 		padding: 24px 20px;
 		max-width: 1200px;
@@ -64,14 +20,6 @@
 	}
 
 	@media (max-width: 480px) {
-		.app-header {
-			padding: 12px 16px;
-		}
-
-		.app-title {
-			font-size: 20px;
-		}
-
 		.main-content {
 			padding: 20px 16px;
 		}