web(ui): AppDataTable pattern and modules pilot

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

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

@@ -22,25 +22,11 @@
 		SelectTrigger,
 	} from '$lib/components/ui/select/index.js';
 	import { Switch } from '$lib/components/ui/switch/index.js';
-	import {
-		AlertDialog,
-		AlertDialogAction,
-		AlertDialogCancel,
-		AlertDialogContent,
-		AlertDialogDescription,
-		AlertDialogFooter,
-		AlertDialogHeader,
-		AlertDialogTitle
-	} from '$lib/components/ui/alert-dialog/index.js';
-	import {
-		Table,
-		TableBody,
-		TableCell,
-		TableHead,
-		TableHeader,
-		TableRow
-	} from '$lib/components/ui/table/index.js';
-	import { toast } from 'svelte-sonner';
+	import { Checkbox } from '$lib/ui/core/checkbox/index.js';
+	import AppDataTable from '$lib/ui/patterns/data-table/app-data-table.svelte';
+	import PageHeader from '$lib/ui/app/page-header/page-header.svelte';
+	import { confirm } from '$lib/ui/patterns/confirm/confirm-state.svelte.js';
+	import { notify, notifyApiError } from '$lib/ui/app/toast.js';
 	import { resolve } from '$app/paths';
 	import Plus from '@lucide/svelte/icons/plus';
 	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
@@ -55,7 +41,6 @@
 	let saving = $state(false);
 	let selectedModuleIds = $state(new Set<string>());
 	let deletingBulkModules = $state(false);
-	let bulkDeleteModulesDialog = $state(false);
 
 	const selectedModulesCount = $derived(selectedModuleIds.size);
 	const allModulesSelected = $derived(rows.length > 0 && selectedModuleIds.size === rows.length);
@@ -75,6 +60,17 @@
 		{ value: 'IP_RANGES', label: 'IP Ranges' }
 	] as const;
 
+	const moduleColumns = [
+		{ id: 'select', label: '', class: 'w-10' },
+		{ id: 'name', label: 'Название', sortable: true, sortValue: (m: ModuleRow) => m.name },
+		{ id: 'type', label: 'Тип', sortable: true, sortValue: (m: ModuleRow) => m.type },
+		{ id: 'priority', label: 'Приоритет', sortable: true, sortValue: (m: ModuleRow) => m.priority ?? 0 },
+		{ id: 'interval', label: 'Интервал' },
+		{ id: 'refreshed', label: 'Последнее обновление', sortable: true, sortValue: (m: ModuleRow) => m.last_refreshed_at ?? '' },
+		{ id: 'status', label: 'Статус' },
+		{ id: 'actions', label: '', class: 'w-16' }
+	] as const;
+
 	async function load() {
 		loading = true;
 		try {
@@ -83,7 +79,7 @@
 			const validIds = new Set(rows.map((item) => item.id));
 			selectedModuleIds = new Set([...selectedModuleIds].filter((id) => validIds.has(id)));
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			loading = false;
 		}
@@ -93,18 +89,18 @@
 
 	async function create() {
 		if (!form.name.trim()) {
-			toast.error('Укажите название модуля');
+			notify.error('Укажите название модуля');
 			return;
 		}
 		saving = true;
 		try {
 			await apiMutate('/v1/modules', 'POST', form);
-			toast.success('Модуль создан');
+			notify.success('Модуль создан');
 			dialogOpen = false;
 			form = { type: 'AS_PREFIXES', name: '', enabled: true, priority: 0 };
 			await load();
 		} catch (e) {
-			toast.error(e instanceof Error ? e.message : String(e));
+			notifyApiError(e);
 		} finally {
 			saving = false;
 		}
@@ -154,6 +150,17 @@
 		selectedModuleIds = checked ? new Set(rows.map((item) => item.id)) : new Set<string>();
 	}
 
+	function requestBulkDelete() {
+		if (selectedModuleIds.size === 0) return;
+		void confirm({
+			title: 'Удалить выбранные модули?',
+			description: `Будет удалено: ${selectedModulesCount}. Это действие необратимо.`,
+			confirmLabel: 'Удалить',
+			destructive: true,
+			onConfirm: bulkDeleteModules
+		});
+	}
+
 	async function bulkDeleteModules() {
 		if (selectedModuleIds.size === 0) return;
 		deletingBulkModules = true;
@@ -164,13 +171,12 @@
 					await apiMutate(`/v1/modules/${id}`, 'DELETE', undefined, { idempotent: false });
 					deleted += 1;
 				} catch (e) {
-					toast.error(e instanceof Error ? e.message : String(e));
+					notifyApiError(e);
 				}
 			}
 			if (deleted > 0) {
-				toast.success(`Удалено модулей: ${deleted}`);
+				notify.success(`Удалено модулей: ${deleted}`);
 			}
-			bulkDeleteModulesDialog = false;
 			await load();
 		} finally {
 			deletingBulkModules = false;
@@ -178,21 +184,14 @@
 	}
 </script>
 
-<div class="space-y-6">
-	<div class="flex flex-wrap items-start justify-between gap-3">
-		<div class="flex min-w-0 items-start gap-3">
-			<div
-				class="bg-chart-1/15 text-chart-1 flex size-11 shrink-0 items-center justify-center rounded-xl"
-				aria-hidden="true"
-			>
-				<Boxes 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">Управление модулями — AS, CDN, домены, IP-диапазоны.</p>
-			</div>
-		</div>
-		<div class="flex flex-wrap gap-2">
+<div class="flex flex-col gap-6">
+	<PageHeader
+		title="Модули префиксов"
+		description="Управление модулями — AS, CDN, домены, IP-диапазоны."
+		icon={Boxes}
+		iconClass="bg-chart-1/15 text-chart-1"
+	>
+		{#snippet actions()}
 			<Button variant="outline" size="sm" onclick={load} disabled={loading}>
 				<RefreshCw class={loading ? 'animate-spin' : ''} />
 				Обновить
@@ -201,8 +200,8 @@
 				<Plus />
 				Новый модуль
 			</Button>
-		</div>
-	</div>
+		{/snippet}
+	</PageHeader>
 
 	<Card>
 		<CardHeader class="flex flex-wrap items-center justify-between gap-2 border-b py-3">
@@ -214,7 +213,7 @@
 						variant="destructive"
 						size="sm"
 						disabled={deletingBulkModules}
-						onclick={() => (bulkDeleteModulesDialog = true)}
+						onclick={requestBulkDelete}
 					>
 						<Trash2 class="size-4" />
 						Удалить выбранные
@@ -222,72 +221,45 @@
 				</div>
 			{/if}
 		</CardHeader>
-		<CardContent class="p-0">
-			<Table>
-				<TableHeader>
-					<TableRow>
-						<TableHead class="w-10">
-							<input
-								type="checkbox"
-								checked={allModulesSelected}
-								indeterminate={someModulesSelected}
-								aria-label="Выбрать все модули"
-								onchange={(event) => toggleAllModules((event.currentTarget as HTMLInputElement).checked)}
-							/>
-						</TableHead>
-						<TableHead>Название</TableHead>
-						<TableHead>Тип</TableHead>
-						<TableHead>Приоритет</TableHead>
-						<TableHead>Интервал</TableHead>
-						<TableHead>Последнее обновление</TableHead>
-						<TableHead>Статус</TableHead>
-						<TableHead class="w-16"></TableHead>
-					</TableRow>
-				</TableHeader>
-				<TableBody>
-					{#each rows as m (m.id)}
-						<TableRow>
-							<TableCell class="w-10">
-								<input
-									type="checkbox"
-									checked={selectedModuleIds.has(m.id)}
-									aria-label={`Выбрать модуль ${m.name}`}
-									onchange={() => toggleModuleSelection(m.id)}
-								/>
-							</TableCell>
-							<TableCell class="font-medium">{m.name}</TableCell>
-							<TableCell>
-								<Badge variant={typeBadgeVariant(m.type)}>{moduleTypeRu(m.type)}</Badge>
-							</TableCell>
-							<TableCell class="text-muted-foreground">{m.priority}</TableCell>
-							<TableCell class="text-muted-foreground font-mono text-xs">
-								{moduleIntervalLabel(m)}
-							</TableCell>
-							<TableCell class="text-muted-foreground text-sm whitespace-nowrap">
-								{formatDateTime(m.last_refreshed_at)}
-							</TableCell>
-							<TableCell>
-								{#if m.enabled}
-									<Badge variant="default" class="text-xs">вкл</Badge>
-								{:else}
-									<Badge variant="secondary" class="text-xs">выкл</Badge>
-								{/if}
-							</TableCell>
-							<TableCell>
-								<Button variant="ghost" size="icon-sm" href={resolve(`/modules/${m.id}`)}>
-									<ExternalLink class="size-3.5" />
-								</Button>
-							</TableCell>
-						</TableRow>
-					{:else}
-						<TableRow>
-							<TableCell colspan={8} class="text-muted-foreground text-center py-8">
-								{loading ? 'Загрузка…' : 'Нет модулей. Создайте первый.'}
-							</TableCell>
-						</TableRow>
-					{/each}
-				</TableBody>
-			</Table>
+		<CardContent class="p-4 pt-0">
+			<AppDataTable
+				columns={[...moduleColumns]}
+				rows={rows}
+				rowKey={(m) => m.id}
+				{loading}
+				emptyTitle="Нет модулей"
+				emptyDescription="Создайте первый модуль."
+			>
+				{#snippet cell({ row: m, column })}
+					{#if column.id === 'select'}
+						<Checkbox
+							checked={selectedModuleIds.has(m.id)}
+							aria-label={`Выбрать модуль ${m.name}`}
+							onCheckedChange={() => toggleModuleSelection(m.id)}
+						/>
+					{:else if column.id === 'name'}
+						<span class="font-medium">{m.name}</span>
+					{:else if column.id === 'type'}
+						<Badge variant={typeBadgeVariant(m.type)}>{moduleTypeRu(m.type)}</Badge>
+					{:else if column.id === 'priority'}
+						<span class="text-muted-foreground">{m.priority}</span>
+					{:else if column.id === 'interval'}
+						<span class="text-muted-foreground font-mono text-xs">{moduleIntervalLabel(m)}</span>
+					{:else if column.id === 'refreshed'}
+						<span class="text-muted-foreground text-sm whitespace-nowrap">{formatDateTime(m.last_refreshed_at)}</span>
+					{:else if column.id === 'status'}
+						{#if m.enabled}
+							<Badge variant="default" class="text-xs">вкл</Badge>
+						{:else}
+							<Badge variant="secondary" class="text-xs">выкл</Badge>
+						{/if}
+					{:else if column.id === 'actions'}
+						<Button variant="ghost" size="icon-sm" href={resolve(`/modules/${m.id}`)}>
+							<ExternalLink class="size-3.5" />
+						</Button>
+					{/if}
+				{/snippet}
+			</AppDataTable>
 		</CardContent>
 	</Card>
 </div>
@@ -353,19 +325,3 @@
 	</DialogContent>
 </Dialog>
 
-<AlertDialog bind:open={bulkDeleteModulesDialog}>
-	<AlertDialogContent>
-		<AlertDialogHeader>
-			<AlertDialogTitle>Удалить выбранные модули?</AlertDialogTitle>
-			<AlertDialogDescription>
-				Будет удалено: {selectedModulesCount}. Это действие необратимо.
-			</AlertDialogDescription>
-		</AlertDialogHeader>
-		<AlertDialogFooter>
-			<AlertDialogCancel>Отмена</AlertDialogCancel>
-			<AlertDialogAction onclick={bulkDeleteModules} disabled={deletingBulkModules}>
-				{deletingBulkModules ? 'Удаление…' : 'Удалить'}
-			</AlertDialogAction>
-		</AlertDialogFooter>
-	</AlertDialogContent>
-</AlertDialog>