add user accounts and OSM peak catalog with zoom-based notability

src/routes/+layout.svelte

@@ -3,7 +3,7 @@
 	import '../app.css';
 	import { page } from '$app/state';
 
-	let { children } = $props();
+	let { children, data } = $props();
 
 	const links = [
 		{ href: '/', label: 'Dashboard' },
@@ -30,11 +30,17 @@
 			</svg>
 			Streba
 		</a>
-		<div class="nav-links">
-			{#each links as link (link.href)}
-				<a href={link.href} class:active={isActive(link.href)}>{link.label}</a>
-			{/each}
-		</div>
+		{#if data.user}
+			<div class="nav-links">
+				{#each links as link (link.href)}
+					<a href={link.href} class:active={isActive(link.href)}>{link.label}</a>
+				{/each}
+			</div>
+			<form class="user" method="POST" action="/logout">
+				<span class="username">{data.user.username}</span>
+				<button class="logout" type="submit" title="Sign out">Sign out</button>
+			</form>
+		{/if}
 	</nav>
 </header>
 
@@ -97,6 +103,31 @@
 		background: var(--accent-wash);
 		color: var(--accent-strong);
 	}
+	.user {
+		display: flex;
+		align-items: center;
+		gap: 0.6rem;
+		margin: 0;
+	}
+	.username {
+		font-size: 0.85rem;
+		font-weight: 600;
+		color: var(--text-secondary);
+	}
+	.logout {
+		border: none;
+		background: none;
+		padding: 0.3rem 0.5rem;
+		border-radius: 0.4rem;
+		color: var(--text-muted);
+		font: inherit;
+		font-size: 0.8rem;
+		cursor: pointer;
+	}
+	.logout:hover {
+		background: var(--wash);
+		color: var(--text-primary);
+	}
 	main {
 		max-width: 1080px;
 		margin: 0 auto;