wordeck/apps/web/src/lib/components/Header.svelte

<script lang="ts">
	import { onMount } from 'svelte';
	import { page } from '$app/state';
	import { goto } from '$app/navigation';
	import { devUser } from '$lib/auth/dev-stub.svelte.ts';
	import { t } from '$lib/i18n/index.svelte.ts';
	import { loadSummary } from '$lib/api/me.ts';

	const navItems = $derived([
		{ id: 'decks', label: t('nav.decks') },
		{ id: 'explore', label: t('nav.explore') },
		{ id: 'import', label: t('nav.import') },
		{ id: 'stats', label: t('nav.stats') },
	]);

	const activeNav = $derived.by(() => {
		const path = page.url.pathname;
		if (path.startsWith('/decks') || path.startsWith('/study')) return 'decks';
		if (
			path.startsWith('/explore') ||
			path.startsWith('/d/') ||
			path.startsWith('/u/') ||
			path.startsWith('/me/')
		) return 'explore';
		if (path.startsWith('/import')) return 'import';
		if (path.startsWith('/stats')) return 'stats';
		return '';
	});

	const userInitial = $derived(
		devUser.user?.name?.charAt(0).toUpperCase() ??
		devUser.user?.email?.charAt(0).toUpperCase() ??
		'?'
	);

	let streakDays = $state(0);
	let dueNow = $state(0);

	onMount(async () => {
		if (!devUser.id) return;
		try {
			const s = await loadSummary();
			streakDays = s.streak_days;
			dueNow = s.due_now;
		} catch {
			// ignorieren — Header ist non-critical
		}
	});
</script>

<div class="bottom-bar" role="navigation" aria-label={t('common.main_nav')}>
	<!-- Logo -->
	<a href="/" class="logo-badge" aria-label={t('app.name')}>C</a>

	<div class="divider" aria-hidden="true"></div>

	{#if devUser.id && (streakDays > 0 || dueNow > 0)}
		<div class="header-meta" aria-label="Lernstatus">
			{#if streakDays > 0}
				<span class="streak-pill" title="{streakDays} Tage Streak">
					🔥 {streakDays}
				</span>
			{/if}
			{#if dueNow > 0}
				<span class="due-pill" title="{dueNow} Karten fällig">
					{dueNow}
				</span>
			{/if}
		</div>
		<div class="divider" aria-hidden="true"></div>
	{/if}

	<!-- Hauptnavigation -->
	{#each navItems as item (item.id)}
		<button
			class="nav-item"
			class:active={activeNav === item.id}
			onclick={() => goto('/' + item.id)}
			aria-current={activeNav === item.id ? 'page' : undefined}
		>
			{item.label}
		</button>
	{/each}

	<!-- Account -->
	{#if devUser.id}
		<a
			href="/account"
			class="account-badge"
			title={devUser.user?.email ?? devUser.id}
			aria-label={devUser.user?.email ?? devUser.id}
		>
			{userInitial}
		</a>
	{:else}
		<a href="/" class="login-btn">Login</a>
	{/if}
</div>

<style>
	.bottom-bar {
		position: fixed;
		bottom: 1.25rem;
		left: 50%;
		transform: translateX(-50%);
		z-index: 50;
		display: flex;
		align-items: center;
		gap: 0.375rem;
		padding: 0.375rem 0.625rem;
		background: hsl(var(--color-surface) / 0.88);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border: 1px solid hsl(var(--color-border));
		border-radius: 9999px;
		box-shadow:
			0 8px 32px hsl(var(--color-foreground) / 0.12),
			0 2px 8px hsl(var(--color-foreground) / 0.08);
		white-space: nowrap;
	}

	@media (max-width: 640px) {
		.bottom-bar {
			left: 0.75rem;
			right: 0.75rem;
			bottom: 0.75rem;
			transform: none;
			overflow-x: auto;
			overflow-y: hidden;
			scrollbar-width: none;
		}

		.bottom-bar::-webkit-scrollbar {
			display: none;
		}
	}

	.divider {
		width: 1px;
		height: 1.25rem;
		background: hsl(var(--color-border));
		flex-shrink: 0;
		margin: 0 0.125rem;
	}

	.nav-item {
		display: inline-flex;
		align-items: center;
		padding: 0.25rem 0.625rem;
		border-radius: 9999px;
		border: none;
		background: transparent;
		color: hsl(var(--color-muted-foreground));
		font-family: inherit;
		font-size: 0.8125rem;
		font-weight: 500;
		cursor: pointer;
		white-space: nowrap;
		transition: color 0.15s ease, background-color 0.15s ease;
	}

	.nav-item:hover {
		color: hsl(var(--color-foreground));
		background: hsl(var(--color-surface-hover));
	}

	.nav-item.active {
		color: hsl(var(--color-primary));
		background: hsl(var(--color-primary) / 0.1);
	}

	.nav-item:focus-visible {
		outline: 2px solid hsl(var(--color-primary));
		outline-offset: 2px;
	}

	.logo-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 0.375rem;
		background: hsl(var(--color-primary));
		color: hsl(var(--color-primary-foreground));
		font-size: 0.8125rem;
		font-weight: 700;
		text-decoration: none;
		flex-shrink: 0;
	}

	.account-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 1.75rem;
		height: 1.75rem;
		border-radius: 50%;
		background: hsl(var(--color-primary) / 0.12);
		color: hsl(var(--color-primary));
		font-size: 0.6875rem;
		font-weight: 700;
		text-decoration: none;
		flex-shrink: 0;
		margin-left: 0.125rem;
	}

	.account-badge:hover {
		background: hsl(var(--color-primary) / 0.2);
	}

	.login-btn {
		padding: 0.25rem 0.75rem;
		border-radius: 9999px;
		background: hsl(var(--color-primary));
		color: hsl(var(--color-primary-foreground));
		font-size: 0.8125rem;
		font-weight: 500;
		text-decoration: none;
		flex-shrink: 0;
	}

	.header-meta {
		display: inline-flex;
		align-items: center;
		gap: 0.25rem;
	}

	.streak-pill {
		font-size: 0.75rem;
		font-weight: 600;
		color: hsl(var(--color-foreground));
		padding: 0.125rem 0.375rem;
		border-radius: 9999px;
		background: hsl(30 100% 55% / 0.12);
		white-space: nowrap;
	}

	.due-pill {
		font-size: 0.6875rem;
		font-weight: 700;
		color: hsl(var(--color-primary-foreground));
		background: hsl(var(--color-primary));
		padding: 0.125rem 0.4rem;
		border-radius: 9999px;
		min-width: 1.25rem;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}
</style>