tiny-forge/web/src/routes/+layout.svelte

<script lang="ts">
	import '../app.css';
	import type { Snippet } from 'svelte';
	import { onMount, onDestroy } from 'svelte';
	import { page } from '$app/stores';
	import Toast from '$lib/components/Toast.svelte';
	import ThemeToggle from '$lib/components/ThemeToggle.svelte';
	import LocaleSwitcher from '$lib/components/LocaleSwitcher.svelte';
	import { IconDashboard, IconProjects, IconDeploy, IconEvents, IconWifi, IconSettings, IconMenu, IconX, IconLogout } from '$lib/components/icons';
	import { goto } from '$app/navigation';
	import { connectGlobalEvents, type SSEConnection } from '$lib/sse';
	import { instanceStatusStore } from '$lib/stores/instance-status';
	import { resolvedTheme, applyTheme } from '$lib/stores/theme';
	import { exchangeOidcToken, setAuthToken, clearAuth, isAuthenticated } from '$lib/auth';
	import { logout as apiLogout, getHealth } from '$lib/api';
	import type { DockerHealth, ProxyHealth } from '$lib/types';
	import { t } from '$lib/i18n';

	interface Props {
		children: Snippet;
	}

	const { children }: Props = $props();

	const navItems = [
		{ href: '/', labelKey: 'nav.dashboard', icon: 'dashboard' },
		{ href: '/projects', labelKey: 'nav.projects', icon: 'projects' },
		{ href: '/deploy', labelKey: 'nav.deploy', icon: 'deploy' },
		{ href: '/proxies', labelKey: 'nav.proxies', icon: 'proxies' },
		{ href: '/events', labelKey: 'nav.events', icon: 'events' },
		{ href: '/settings', labelKey: 'nav.settings', icon: 'settings' }
	] as const;

	function isActive(href: string, pathname: string): boolean {
		if (href === '/') return pathname === '/';
		return pathname.startsWith(href);
	}

	let sseConnection: SSEConnection | null = null;
	let sidebarOpen = $state(false);
	let dockerHealth = $state<DockerHealth | null>(null);
	let proxyHealth = $state<ProxyHealth | null>(null);
	let healthChecked = $state(false);
	let healthInterval: ReturnType<typeof setInterval> | null = null;
	let hintsExpanded = $state(false);
	let proxyHintsExpanded = $state(false);

	const dockerConnected = $derived(dockerHealth?.connected ?? false);
	const proxyConnected = $derived(proxyHealth?.connected ?? true);
	const proxyProviderName = $derived(proxyHealth?.provider ?? '');

	// Hide sidebar and chrome on the login page.
	const isLoginPage = $derived($page.url.pathname === '/login');

	// Apply theme reactively.
	$effect(() => {
		applyTheme($resolvedTheme);
	});

	// Listen for system theme changes when in "system" mode.
	$effect(() => {
		if (typeof window === 'undefined') return;
		const mq = window.matchMedia('(prefers-color-scheme: dark)');
		const handler = () => applyTheme($resolvedTheme);
		mq.addEventListener('change', handler);
		return () => mq.removeEventListener('change', handler);
	});

	// Close sidebar on route change (mobile).
	$effect(() => {
		void $page.url.pathname;
		sidebarOpen = false;
	});

	onMount(async () => {
		// Handle OIDC redirect: exchange the HttpOnly session cookie for a bearer token.
		if ($page.url.searchParams.get('oidc') === 'success') {
			const token = await exchangeOidcToken();
			if (token) {
				setAuthToken(token);
				goto('/', { replaceState: true });
			}
		}
	});

	// Start SSE and health polling when authenticated.
	// Uses $effect to react to route changes (e.g., after login navigation).
	$effect(() => {
		void $page.url.pathname;

		if (!isAuthenticated() || sseConnection) return;

		sseConnection = connectGlobalEvents({
			onInstanceStatus(payload) {
				instanceStatusStore.update(payload);
			},
			onDeployStatus(payload) {
				instanceStatusStore.notifyDeploy(payload);
			}
		});

		// Poll Docker health every 30s.
		async function checkHealth() {
			try {
				const h = await getHealth();
				dockerHealth = h.docker;
				proxyHealth = h.proxy ?? null;
			} catch {
				dockerHealth = { connected: false };
				proxyHealth = null;
			}
			healthChecked = true;
		}
		checkHealth();
		healthInterval = setInterval(checkHealth, 30_000);
	});

	onDestroy(() => {
		sseConnection?.close();
		sseConnection = null;
		if (healthInterval) clearInterval(healthInterval);
	});
</script>

{#if isLoginPage}
	<!-- Login page: no sidebar, no chrome -->
	{@render children()}
{:else}
<div class="flex h-screen overflow-hidden bg-[var(--surface-page)]">
	<!-- Mobile overlay -->
	{#if sidebarOpen}
		<div
			class="fixed inset-0 z-40 bg-[var(--surface-overlay)] lg:hidden animate-fade-in"
			role="presentation"
			onclick={() => { sidebarOpen = false; }}
		></div>
	{/if}

	<!-- Sidebar -->
	<aside
		class="fixed inset-y-0 left-0 z-50 flex w-64 flex-col border-r border-[var(--border-primary)] bg-[var(--surface-sidebar)] transition-transform duration-300 lg:static lg:translate-x-0
			{sidebarOpen ? 'translate-x-0' : '-translate-x-full'}"
	>
		<!-- Logo -->
		<div class="flex h-16 items-center gap-2.5 border-b border-[var(--border-primary)] px-5">
			<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--color-brand-600)]">
				<svg class="h-4.5 w-4.5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
				</svg>
			</div>
			<span class="text-base font-bold text-[var(--text-primary)]">{$t('app.name')}</span>

			<!-- Close sidebar (mobile) -->
			<button
				class="ml-auto rounded-md p-1 text-[var(--text-tertiary)] hover:text-[var(--text-primary)] lg:hidden"
				onclick={() => { sidebarOpen = false; }}
				aria-label="Close sidebar"
			>
				<IconX size={20} />
			</button>
		</div>

		<!-- Navigation -->
		<nav class="flex-1 space-y-0.5 px-3 py-3">
			{#each navItems as item}
				{@const active = isActive(item.href, $page.url.pathname)}
				<a
					href={item.href}
					class="group flex items-center gap-3 rounded-lg px-3 py-2.5 text-sm font-medium transition-all duration-150
						{active
							? 'bg-[var(--color-brand-50)] text-[var(--color-brand-700)] shadow-sm'
							: 'text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)]'}"
				>
					{#if item.icon === 'dashboard'}
						<IconDashboard size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'projects'}
						<IconProjects size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'deploy'}
						<IconDeploy size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'proxies'}
						<IconWifi size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'events'}
						<IconEvents size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{:else if item.icon === 'settings'}
						<IconSettings size={18} class="{active ? 'text-[var(--color-brand-600)]' : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-secondary)]'} transition-colors duration-150" />
					{/if}
					{$t(item.labelKey)}
					{#if active}
						<div class="ml-auto h-1.5 w-1.5 rounded-full bg-[var(--color-brand-600)]"></div>
					{/if}
				</a>
			{/each}
		</nav>

		<!-- Footer controls -->
		<div class="space-y-3 border-t border-[var(--border-primary)] px-4 py-3">
			{#if healthChecked}
				<div class="flex items-center gap-3 px-1 text-[11px]">
					<button
						type="button"
						class="flex items-center gap-1.5 {dockerConnected ? 'text-emerald-600' : 'text-red-500'}"
						title={dockerConnected ? 'Docker connected' : dockerHealth?.error ?? 'Docker disconnected'}
						onclick={() => { if (!dockerConnected) hintsExpanded = !hintsExpanded; }}
					>
						<span class="relative flex h-2 w-2 shrink-0">
							{#if dockerConnected}
								<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-50"></span>
							{/if}
							<span class="relative inline-flex h-2 w-2 rounded-full {dockerConnected ? 'bg-emerald-500' : 'bg-red-500'}"></span>
						</span>
						Docker
					</button>
					{#if proxyHealth && proxyProviderName !== 'none'}
						<button
							type="button"
							class="flex items-center gap-1.5 {proxyConnected ? 'text-emerald-600' : 'text-red-500'}"
							title={proxyConnected ? (proxyProviderName === 'npm' ? 'NPM' : 'Traefik') + ' connected' : proxyHealth.error ?? 'Proxy disconnected'}
							onclick={() => { if (!proxyConnected) proxyHintsExpanded = !proxyHintsExpanded; }}
						>
							<span class="relative flex h-2 w-2 shrink-0">
								{#if proxyConnected}
									<span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-50"></span>
								{/if}
								<span class="relative inline-flex h-2 w-2 rounded-full {proxyConnected ? 'bg-emerald-500' : 'bg-red-500'}"></span>
							</span>
							{proxyProviderName === 'npm' ? 'NPM' : 'Traefik'}
						</button>
					{/if}
				</div>
				{#if !dockerConnected && hintsExpanded && dockerHealth?.error}
					<div class="rounded-md bg-red-50 dark:bg-red-950/30 px-2 py-2">
						<code class="block text-[10px] text-red-600 dark:text-red-400 break-all leading-relaxed">{dockerHealth.error}</code>
						<button
							type="button"
							class="mt-1.5 w-full rounded border border-red-300 dark:border-red-700 px-2 py-0.5 text-[10px] font-medium text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-colors"
							onclick={async () => {
								try {
									const h = await getHealth();
									dockerHealth = h.docker;
									proxyHealth = h.proxy ?? null;
								} catch {
									dockerHealth = { connected: false };
								}
							}}
						>
							{$t('health.retryNow')}
						</button>
					</div>
				{/if}
				{#if !proxyConnected && proxyHintsExpanded && proxyHealth?.error}
					<div class="rounded-md bg-red-50 dark:bg-red-950/30 px-2 py-2">
						<code class="block text-[10px] text-red-600 dark:text-red-400 break-all leading-relaxed">{proxyHealth.error}</code>
					</div>
				{/if}
			{/if}
			<div class="flex items-center justify-between">
				<ThemeToggle />
				<LocaleSwitcher />
				<button
					type="button"
					title={$t('nav.logout')}
					aria-label={$t('nav.logout')}
					onclick={async () => {
						try { await apiLogout(); } catch { /* best effort */ }
						clearAuth();
						goto('/login');
					}}
					class="rounded-md p-1.5 text-[var(--text-tertiary)] hover:text-[var(--color-danger)] transition-colors"
				>
					<IconLogout size={16} />
				</button>
			</div>
			<p class="text-xs text-[var(--text-tertiary)]">{$t('app.name')} {$t('app.version')}</p>
		</div>
	</aside>

	<!-- Main content -->
	<div class="flex flex-1 flex-col overflow-hidden">
		<!-- Top bar (mobile) -->
		<header class="flex h-14 items-center gap-3 border-b border-[var(--border-primary)] bg-[var(--surface-sidebar)] px-4 lg:hidden">
			<button
				class="rounded-md p-1.5 text-[var(--text-secondary)] hover:bg-[var(--surface-card-hover)] hover:text-[var(--text-primary)] transition-colors"
				onclick={() => { sidebarOpen = true; }}
				aria-label="Open sidebar"
			>
				<IconMenu size={22} />
			</button>
			<div class="flex h-7 w-7 items-center justify-center rounded-lg bg-[var(--color-brand-600)]">
				<svg class="h-3.5 w-3.5 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
					<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25" />
				</svg>
			</div>
			<span class="text-sm font-bold text-[var(--text-primary)]">{$t('app.name')}</span>
		</header>

		<!-- Page content -->
		<main class="flex-1 overflow-y-auto">
			<div class="mx-auto max-w-7xl px-4 py-6 sm:px-6 sm:py-8">
				{@render children()}
			</div>
		</main>
	</div>
</div>
{/if}

<Toast />