From 1f9930d467f9bef648d8ee037edb79536e3a3777 Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 19 May 2026 12:01:15 +0700
Subject: [PATCH] web(ui): migrate operations and module detail to ui patterns

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../routes/modules/[moduleId]/+page.svelte    | 63 +++++++++----------
 web/src/routes/operations/+page.svelte        | 23 +++----
 2 files changed, 38 insertions(+), 48 deletions(-)

diff --git a/web/src/routes/modules/[moduleId]/+page.svelte b/web/src/routes/modules/[moduleId]/+page.svelte
index 88fffbf..f8e9cdb 100644
--- a/web/src/routes/modules/[moduleId]/+page.svelte
+++ b/web/src/routes/modules/[moduleId]/+page.svelte
@@ -75,6 +75,7 @@
 	import Upload from '@lucide/svelte/icons/upload';
 	import Download from '@lucide/svelte/icons/download';
 	import Blocks from '@lucide/svelte/icons/blocks';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 	import ArrowDownUp from '@lucide/svelte/icons/arrow-down-up';
 	import Timer from '@lucide/svelte/icons/timer';
 	import ShieldCheck from '@lucide/svelte/icons/shield-check';
@@ -788,6 +789,7 @@
 {#if loadingMod}
 	<div class="text-muted-foreground flex h-32 items-center justify-center">Загрузка…</div>
 {:else if mod}
+	{@const m = mod}
 	<div class="space-y-6">
 		<input
 			class="hidden"
@@ -796,45 +798,40 @@
 			bind:this={csvFileInput}
 			onchange={handleImportCsvChange}
 		/>
-		<!-- Header -->
-		<div class="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
-			<div class="flex min-w-0 items-start gap-3">
-				<Button variant="ghost" size="icon-sm" href={resolve('/modules')}>
-					<ArrowLeft class="size-4" />
-				</Button>
-				<div
-					class="bg-chart-2/15 text-chart-2 flex size-11 shrink-0 items-center justify-center rounded-xl"
-					aria-hidden="true"
-				>
-					<Blocks class="size-6" />
-				</div>
-				<div class="min-w-0">
+		<div class="flex min-w-0 items-start gap-2">
+			<Button variant="ghost" size="icon-sm" class="mt-1 shrink-0" href={resolve('/modules')}>
+				<ArrowLeft class="size-4" />
+			</Button>
+			<PageHeader
+				class="min-w-0 flex-1"
+				title={m.name}
+				description={m.id}
+				icon={Blocks}
+				iconClass="bg-chart-2/15 text-chart-2"
+			>
+				{#snippet actions()}
 					<div class="flex flex-wrap items-center gap-2">
-						<h1 class="min-w-0 break-words text-2xl font-semibold tracking-tight">{mod.name}</h1>
-						<Badge variant="outline">{moduleTypeRu(mod.type)}</Badge>
-						{#if mod.enabled}
+						<Badge variant="outline">{moduleTypeRu(m.type)}</Badge>
+						{#if m.enabled}
 							<Badge variant="default" class="text-xs">вкл</Badge>
 						{:else}
 							<Badge variant="secondary" class="text-xs">выкл</Badge>
 						{/if}
+						<Button variant="outline" size="sm" onclick={refreshMod} disabled={refreshing}>
+							<RefreshCw class={refreshing ? 'animate-spin' : ''} />
+							Обновить
+						</Button>
+						<Button variant="outline" size="sm" onclick={openEditMod}>
+							<Pencil />
+							Редактировать
+						</Button>
+						<Button variant="destructive" size="sm" onclick={() => (deleteModDialog = true)}>
+							<Trash2 />
+							Удалить
+						</Button>
 					</div>
-					<p class="text-muted-foreground mt-0.5 break-all font-mono text-xs">{mod.id}</p>
-				</div>
-			</div>
-			<div class="flex flex-wrap gap-2">
-				<Button variant="outline" size="sm" onclick={refreshMod} disabled={refreshing}>
-					<RefreshCw class={refreshing ? 'animate-spin' : ''} />
-					Обновить
-				</Button>
-				<Button variant="outline" size="sm" onclick={openEditMod}>
-					<Pencil />
-					Редактировать
-				</Button>
-				<Button variant="destructive" size="sm" onclick={() => (deleteModDialog = true)}>
-					<Trash2 />
-					Удалить
-				</Button>
-			</div>
+				{/snippet}
+			</PageHeader>
 		</div>
 
 		<!-- Module metadata -->
diff --git a/web/src/routes/operations/+page.svelte b/web/src/routes/operations/+page.svelte
index 12c4184..8bf0595 100644
--- a/web/src/routes/operations/+page.svelte
+++ b/web/src/routes/operations/+page.svelte
@@ -67,6 +67,7 @@
 	import { cn } from '$lib/utils.js';
 	import { toast } from 'svelte-sonner';
 	import Zap from '@lucide/svelte/icons/zap';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
 
 	// Revisions
 	let revisions = $state<RevisionRow[]>([]);
@@ -727,21 +728,13 @@
 	}
 </script>
 
-<div class="space-y-6">
-	<div class="flex items-start gap-3">
-		<div
-			class="bg-chart-2/15 text-chart-2 flex size-11 shrink-0 items-center justify-center rounded-xl"
-			aria-hidden="true"
-		>
-			<Zap class="size-6" />
-		</div>
-		<div class="min-w-0">
-			<h1 class="text-2xl font-semibold tracking-tight">Операции</h1>
-			<p class="mt-1 text-sm text-muted-foreground">
-				Деплой конфигурации, управление ревизиями и задачами.
-			</p>
-		</div>
-	</div>
+<div class="flex flex-col gap-6">
+	<PageHeader
+		title="Операции"
+		description="Деплой конфигурации, управление ревизиями и задачами."
+		icon={Zap}
+		iconClass="bg-chart-2/15 text-chart-2"
+	/>
 
 	<OperationsQuickActions
 		{applying}