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, IconProxies, IconEvents, IconSettings, IconMenu, IconX } from '$lib/components/icons';
	import { connectGlobalEvents, type SSEConnection } from '$lib/sse';
	import { instanceStatusStore } from '$lib/stores/instance-status';
	import { resolvedTheme, applyTheme } from '$lib/stores/theme';
	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);

	// 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(() => {
		sseConnection = connectGlobalEvents({
			onInstanceStatus(payload) {
				instanceStatusStore.update(payload);
			},
			onDeployStatus(payload) {
				instanceStatusStore.notifyDeploy(payload);
			}
		});
	});

	onDestroy(() => {
		sseConnection?.close();
		sseConnection = null;
	});
</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'}
						<IconProxies 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">
			<div class="flex items-center justify-between">
				<ThemeToggle />
				<LocaleSwitcher />
			</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 />