web(ui): migrate dashboard, schedule, monitoring to ui patterns

Co-authored-by: Cursor <[email protected]>

web/src/routes/+page.svelte

@@ -17,6 +17,7 @@ const resolve = (path: string) => path as any;
 	import Clock from '@lucide/svelte/icons/clock';
 	import ArrowRight from '@lucide/svelte/icons/arrow-right';
 	import LayoutDashboard from '@lucide/svelte/icons/layout-dashboard';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 
 	let healthy = $state<boolean | null>(null);
 	let modules = $state(0);
@@ -133,19 +134,13 @@ const resolve = (path: string) => path as any;
 	]);
 </script>
 
-<div class="space-y-6">
+<div class="flex flex-col gap-6">
-	<div class="flex items-start gap-3">
+	<PageHeader
-		<div
+		title="Обзор"
-			class="bg-primary/10 text-primary flex size-11 shrink-0 items-center justify-center rounded-xl"
+		description="Состояние панели управления EvoBGP."
-			aria-hidden="true"
+		icon={LayoutDashboard}
-		>
+		iconClass="bg-primary/10 text-primary"
-			<LayoutDashboard class="size-6" />
+	/>
-		</div>
-		<div class="min-w-0">
-			<h1 class="text-2xl font-semibold tracking-tight">Обзор</h1>
-			<p class="text-muted-foreground mt-1 text-sm">Состояние панели управления EvoBGP.</p>
-		</div>
-	</div>
 
 	<!-- Health -->
 	<Card>

web/src/routes/monitoring/+page.svelte

@@ -12,6 +12,7 @@
 	import Server from '@lucide/svelte/icons/server';
 	import Hash from '@lucide/svelte/icons/hash';
 	import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 
 	type ReadyStatus = { status: string; checks?: Record<string, unknown> };
 	type VersionInfo = { version?: string; git_sha?: string; build_time?: string; [k: string]: unknown };
@@ -136,32 +137,22 @@
 	onMount(load);
 </script>
 
-<div class="space-y-6">
+<div class="flex flex-col gap-6">
-	<div class="flex items-start justify-between gap-4">
+	<PageHeader
-		<div class="flex min-w-0 items-start gap-3">
+		title="Мониторинг"
-			<div
+		description={lastUpdated
-				class="bg-info/15 text-info flex size-11 shrink-0 items-center justify-center rounded-xl"
+			? `Состояние API, BGP и задач. Обновлено: ${lastUpdated.toLocaleTimeString('ru-RU')}`
-				aria-hidden="true"
+			: 'Состояние API, BGP и задач для быстрой диагностики инцидентов.'}
-			>
+		icon={Gauge}
-				<Gauge class="size-6" />
+		iconClass="bg-info/15 text-info"
-			</div>
+	>
-			<div class="min-w-0">
+		{#snippet actions()}
-				<h1 class="text-2xl font-semibold tracking-tight">Мониторинг</h1>
+			<Button variant="outline" size="sm" onclick={load} disabled={loading}>
-				<p class="text-muted-foreground mt-1 text-sm">
+				<RefreshCw class={loading ? 'animate-spin' : ''} />
-					Состояние API, BGP и задач для быстрой диагностики инцидентов.
+				Обновить
-				</p>
+			</Button>
-				{#if lastUpdated}
+		{/snippet}
-					<p class="text-muted-foreground mt-1 text-xs">
+	</PageHeader>
-						Обновлено: {lastUpdated.toLocaleTimeString('ru-RU')}
-					</p>
-				{/if}
-			</div>
-		</div>
-		<Button variant="outline" size="sm" onclick={load} disabled={loading}>
-			<RefreshCw class={loading ? 'animate-spin' : ''} />
-			Обновить
-		</Button>
-	</div>
 
 	<div class="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
 		<Card class="border-l-4 border-l-chart-1 bg-chart-1/5 shadow-sm">

web/src/routes/schedule/+page.svelte

@@ -16,6 +16,7 @@
 	import { toast } from 'svelte-sonner';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
 	import CalendarClock from '@lucide/svelte/icons/calendar-clock';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 	import { jobStatusRu, moduleTypeRu } from '$lib/ui-labels.js';
 	import { jobKindTitle } from '$lib/operations/job-kind-label.js';
 
@@ -80,25 +81,20 @@
 	const failedJobsCount = $derived(jobs.filter((j) => j.status === 'failed').length);
 </script>
 
-<div class="space-y-6">
+<div class="flex flex-col gap-6">
-	<div class="flex items-start justify-between gap-4">
+	<PageHeader
-		<div class="flex min-w-0 items-start gap-3">
+		title="Расписание и задачи"
-			<div
+		description="Интервалы обновления модулей и ручной запуск обновления."
-				class="bg-chart-4/15 text-chart-4 flex size-11 shrink-0 items-center justify-center rounded-xl"
+		icon={CalendarClock}
-				aria-hidden="true"
+		iconClass="bg-chart-4/15 text-chart-4"
-			>
+	>
-				<CalendarClock class="size-6" />
+		{#snippet actions()}
-			</div>
+			<Button variant="outline" size="sm" onclick={load} disabled={loading}>
-			<div class="min-w-0">
+				<RefreshCw class={loading ? 'animate-spin' : ''} />
-				<h1 class="text-2xl font-semibold tracking-tight">Расписание и задачи</h1>
+				Обновить
-				<p class="text-muted-foreground mt-1 text-sm">Интервалы обновления модулей и ручной запуск обновления.</p>
+			</Button>
-			</div>
+		{/snippet}
-		</div>
+	</PageHeader>
-		<Button variant="outline" size="sm" onclick={load} disabled={loading}>
-			<RefreshCw class={loading ? 'animate-spin' : ''} />
-			Обновить
-		</Button>
-	</div>
 
 	<div class="grid gap-3 sm:grid-cols-3">
 		<Card class="p-4">