From e1c4cbce9382ba192b304573cc52001d4264f5dc Mon Sep 17 00:00:00 2001
From: Denozordec <shatskiy.blog@gmail.com>
Date: Tue, 7 Apr 2026 00:41:29 +0700
Subject: [PATCH] feat: enhance job filtering and display functionality in
 operations page. Introduce job search and filter options, allowing users to
 refine job listings by status, kind, and module. Update OperationsJobsTab to
 reflect total fetched jobs and improve overall user experience with better
 layout and responsiveness.

---
 .../operations/OperationsDiffTab.svelte       | 127 +++++++++++++++---
 web/src/lib/sort-prefixes.ts                  | 112 +++++++++++++++
 2 files changed, 217 insertions(+), 22 deletions(-)
 create mode 100644 web/src/lib/sort-prefixes.ts

diff --git a/web/src/lib/components/operations/OperationsDiffTab.svelte b/web/src/lib/components/operations/OperationsDiffTab.svelte
index f110c07..11653bc 100644
--- a/web/src/lib/components/operations/OperationsDiffTab.svelte
+++ b/web/src/lib/components/operations/OperationsDiffTab.svelte
@@ -2,7 +2,7 @@
 	import type { RevisionDiff, RevisionPrefix, RevisionRow } from '$lib/api/types.js';
 	import { Button } from '$lib/components/ui/button/index.js';
 	import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '$lib/components/ui/card/index.js';
-	import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
+	import { sortRevisionDiffItems } from '$lib/sort-prefixes.js';
 
 	type Props = {
 		revisions: RevisionRow[];
@@ -29,27 +29,52 @@
 	}: Props = $props();
 
 	/** Бэкенд отдаёт `prefixes.added` / `prefixes.removed`; верхний уровень added/removed — опционально. */
-	function diffAdded(d: RevisionDiff | null): (string | RevisionPrefix)[] {
+	function diffAddedRaw(d: RevisionDiff | null): (string | RevisionPrefix)[] {
 		if (!d) return [];
 		if (d.prefixes && Array.isArray(d.prefixes.added)) return d.prefixes.added;
 		if (Array.isArray(d.added)) return d.added;
 		return [];
 	}
 
-	function diffRemoved(d: RevisionDiff | null): (string | RevisionPrefix)[] {
+	function diffRemovedRaw(d: RevisionDiff | null): (string | RevisionPrefix)[] {
 		if (!d) return [];
 		if (d.prefixes && Array.isArray(d.prefixes.removed)) return d.prefixes.removed;
 		if (Array.isArray(d.removed)) return d.removed;
 		return [];
 	}
+
+	let addedSorted = $derived(diffData ? sortRevisionDiffItems(diffAddedRaw(diffData)) : []);
+	let removedSorted = $derived(diffData ? sortRevisionDiffItems(diffRemovedRaw(diffData)) : []);
+
+	let scrollAddedEl: HTMLDivElement | null = $state(null);
+	let scrollRemovedEl: HTMLDivElement | null = $state(null);
+	let syncScrollLock = false;
+
+	function syncFromAdded() {
+		if (syncScrollLock || !scrollAddedEl || !scrollRemovedEl) return;
+		syncScrollLock = true;
+		scrollRemovedEl.scrollTop = scrollAddedEl.scrollTop;
+		queueMicrotask(() => {
+			syncScrollLock = false;
+		});
+	}
+
+	function syncFromRemoved() {
+		if (syncScrollLock || !scrollAddedEl || !scrollRemovedEl) return;
+		syncScrollLock = true;
+		scrollAddedEl.scrollTop = scrollRemovedEl.scrollTop;
+		queueMicrotask(() => {
+			syncScrollLock = false;
+		});
+	}
 </script>
 
-<Card>
+<Card class="min-h-0">
 	<CardHeader>
 		<CardTitle class="text-base">Сравнение ревизий</CardTitle>
 		<CardDescription>Выберите ID двух ревизий для сравнения</CardDescription>
 	</CardHeader>
-	<CardContent class="space-y-4">
+	<CardContent class="min-h-0 space-y-4">
 		<div class="flex flex-col gap-2 sm:flex-row">
 			<select
 				value={diffRevA}
@@ -77,26 +102,84 @@
 		</div>
 
 		{#if diffData}
-			<div class="grid gap-3 sm:grid-cols-2">
-				<div>
-					<p class="mb-2 text-sm font-medium text-green-600">+ Добавлено ({diffAdded(diffData).length})</p>
-					<ScrollArea class="max-h-64 rounded border p-2">
-						{#each diffAdded(diffData) as p, idx (`added-${idx}-${typeof p === 'string' ? p : (p as { prefix?: string }).prefix ?? 'item'}`)}
-							<p class="font-mono text-xs break-all">{typeof p === 'string' ? p : (p as { prefix?: string }).prefix ?? JSON.stringify(p)}</p>
+			<div
+				class="border-border grid min-h-0 grid-cols-1 overflow-hidden rounded-md border sm:grid-cols-2"
+				style="scrollbar-gutter: stable;"
+			>
+				<!-- + Добавлено -->
+				<div class="border-border flex min-h-0 min-w-0 flex-col border-b sm:border-r sm:border-b-0">
+					<div
+						class="border-border bg-muted/60 flex shrink-0 items-center border-b px-3 py-2 font-mono text-xs font-semibold text-green-600 dark:text-green-400"
+					>
+						<span class="text-muted-foreground mr-2 w-10 shrink-0 select-none text-right">+</span>
+						<span>Добавлено ({addedSorted.length})</span>
+					</div>
+					<div
+						bind:this={scrollAddedEl}
+						class="bg-background/50 max-h-[min(28rem,70vh)] min-h-0 overflow-x-auto overflow-y-scroll overscroll-contain"
+						onscroll={syncFromAdded}
+					>
+						{#if addedSorted.length === 0}
+							<p class="text-muted-foreground p-3 font-mono text-xs">Нет изменений</p>
 						{:else}
-							<p class="text-muted-foreground text-xs">Нет изменений</p>
-						{/each}
-					</ScrollArea>
+							<table class="w-full border-collapse font-mono text-xs">
+								<tbody>
+									{#each addedSorted as line, i (`a-${i}-${line}`)}
+										<tr
+											class="border-border/50 hover:bg-muted/30 border-b border-l-2 border-l-green-500/80 bg-green-500/[0.08] dark:bg-green-500/15"
+										>
+											<td
+												class="text-muted-foreground w-10 shrink-0 border-r border-transparent py-0.5 pr-1 pl-2 text-right align-top text-[11px] tabular-nums select-none"
+											>
+												{i + 1}
+											</td>
+											<td class="text-foreground max-w-0 break-all py-0.5 pr-3 pl-1 whitespace-pre-wrap">
+												{line}
+											</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						{/if}
+					</div>
 				</div>
-				<div>
-					<p class="mb-2 text-sm font-medium text-red-600">- Удалено ({diffRemoved(diffData).length})</p>
-					<ScrollArea class="max-h-64 rounded border p-2">
-						{#each diffRemoved(diffData) as p, idx (`removed-${idx}-${typeof p === 'string' ? p : (p as { prefix?: string }).prefix ?? 'item'}`)}
-							<p class="font-mono text-xs break-all">{typeof p === 'string' ? p : (p as { prefix?: string }).prefix ?? JSON.stringify(p)}</p>
+
+				<!-- − Удалено -->
+				<div class="flex min-h-0 min-w-0 flex-col">
+					<div
+						class="border-border bg-muted/60 flex shrink-0 items-center border-b px-3 py-2 font-mono text-xs font-semibold text-red-600 dark:text-red-400"
+					>
+						<span class="text-muted-foreground mr-2 w-10 shrink-0 select-none text-right">−</span>
+						<span>Удалено ({removedSorted.length})</span>
+					</div>
+					<div
+						bind:this={scrollRemovedEl}
+						class="bg-background/50 max-h-[min(28rem,70vh)] min-h-0 overflow-x-auto overflow-y-scroll overscroll-contain"
+						onscroll={syncFromRemoved}
+					>
+						{#if removedSorted.length === 0}
+							<p class="text-muted-foreground p-3 font-mono text-xs">Нет изменений</p>
 						{:else}
-							<p class="text-muted-foreground text-xs">Нет изменений</p>
-						{/each}
-					</ScrollArea>
+							<table class="w-full border-collapse font-mono text-xs">
+								<tbody>
+									{#each removedSorted as line, i (`r-${i}-${line}`)}
+										<tr
+											class="border-border/50 hover:bg-muted/30 border-b border-l-2 border-l-red-500/80 bg-red-500/[0.08] dark:bg-red-500/15"
+										>
+											<td
+												class="text-muted-foreground w-10 shrink-0 border-r border-transparent py-0.5 pr-1 pl-2 text-right align-top text-[11px] tabular-nums select-none"
+											>
+												{i + 1}
+											</td>
+											<td class="text-foreground max-w-0 break-all py-0.5 pr-3 pl-1 whitespace-pre-wrap">
+												{line}
+											</td>
+										</tr>
+									{/each}
+								</tbody>
+							</table>
+						{/if}
+					</div>
 				</div>
 			</div>
 		{/if}
diff --git a/web/src/lib/sort-prefixes.ts b/web/src/lib/sort-prefixes.ts
new file mode 100644
index 0000000..3520710
--- /dev/null
+++ b/web/src/lib/sort-prefixes.ts
@@ -0,0 +1,112 @@
+import type { RevisionPrefix } from '$lib/api/types.js';
+
+export function prefixStringFromItem(p: string | RevisionPrefix): string {
+	if (typeof p === 'string') return p;
+	return p.prefix ?? '';
+}
+
+function parseIPv4Octets(addr: string): [number, number, number, number] | null {
+	const m = /^(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})$/.exec(addr);
+	if (!m) return null;
+	const o = [m[1], m[2], m[3], m[4]].map((x) => parseInt(x, 10));
+	if (o.some((n) => !Number.isFinite(n) || n < 0 || n > 255)) return null;
+	return [o[0], o[1], o[2], o[3]];
+}
+
+/** 8 групп по 16 бит + длина префикса (или null, если не распознали). */
+function parseIPv6(addrPart: string): { words: number[]; pl: number } | null {
+	if (!addrPart.includes(':')) return null;
+	const zone = addrPart.indexOf('%');
+	if (zone >= 0) addrPart = addrPart.slice(0, zone);
+	const parts = addrPart.split('::');
+	if (parts.length > 2) return null;
+
+	const parseGroup = (h: string) => parseInt(h, 16);
+
+	if (parts.length === 1) {
+		const g = parts[0].split(':').filter(Boolean);
+		if (g.length === 8) {
+			return { words: g.map(parseGroup), pl: 128 };
+		}
+		// IPv4-хвост: x:x:x:x:x:x:a.b.c.d (6 групп + IPv4)
+		if (g.length === 7 && g[6].includes('.')) {
+			const o = parseIPv4Octets(g[6]);
+			if (!o) return null;
+			const w = g.slice(0, 6).map(parseGroup);
+			w.push((o[0] << 8) | o[1], (o[2] << 8) | o[3]);
+			return { words: w, pl: 128 };
+		}
+		return null;
+	}
+
+	const left = parts[0] ? parts[0].split(':').filter(Boolean) : [];
+	const right = parts[1] ? parts[1].split(':').filter(Boolean) : [];
+	const lastR = right[right.length - 1];
+	if (lastR && lastR.includes('.')) {
+		const o = parseIPv4Octets(lastR);
+		if (!o) return null;
+		const rWords = right.slice(0, -1).map(parseGroup);
+		rWords.push((o[0] << 8) | o[1], (o[2] << 8) | o[3]);
+		const missing = 8 - left.length - rWords.length;
+		if (missing < 0) return null;
+		return { words: [...left.map(parseGroup), ...Array(missing).fill(0), ...rWords], pl: 128 };
+	}
+	const missing = 8 - left.length - right.length;
+	if (missing < 0) return null;
+	return { words: [...left.map(parseGroup), ...Array(missing).fill(0), ...right.map(parseGroup)], pl: 128 };
+}
+
+type SortKey =
+	| { t: 0; v4: [number, number, number, number]; pl: number }
+	| { t: 1; v6: number[]; pl: number }
+	| { t: 2; s: string };
+
+function sortKeyForCidr(s: string): SortKey {
+	const slash = s.indexOf('/');
+	const addr = slash >= 0 ? s.slice(0, slash) : s;
+	const plStr = slash >= 0 ? s.slice(slash + 1) : '';
+	const plNum = plStr ? parseInt(plStr, 10) : NaN;
+
+	const v4 = parseIPv4Octets(addr);
+	if (v4 && !addr.includes(':')) {
+		const pl = Number.isFinite(plNum) ? plNum : 32;
+		return { t: 0, v4, pl };
+	}
+
+	const v6 = parseIPv6(addr);
+	if (v6) {
+		const pl = Number.isFinite(plNum) ? plNum : v6.pl;
+		return { t: 1, v6: v6.words, pl };
+	}
+
+	return { t: 2, s: s.toLowerCase() };
+}
+
+function compareKeys(a: SortKey, b: SortKey): number {
+	if (a.t !== b.t) return a.t - b.t;
+	if (a.t === 2 && b.t === 2) {
+		return a.s.localeCompare(b.s, 'en', { numeric: true, sensitivity: 'base' });
+	}
+	if (a.t === 0 && b.t === 0) {
+		for (let i = 0; i < 4; i++) {
+			if (a.v4[i] !== b.v4[i]) return a.v4[i] - b.v4[i];
+		}
+		return a.pl - b.pl;
+	}
+	if (a.t === 1 && b.t === 1) {
+		for (let i = 0; i < 8; i++) {
+			if (a.v6[i] !== b.v6[i]) return a.v6[i] - b.v6[i];
+		}
+		return a.pl - b.pl;
+	}
+	return 0;
+}
+
+/** Сортировка CIDR и прочих строк префиксов (as:, домены и т.д.) для отображения. */
+export function sortPrefixStrings(strings: string[]): string[] {
+	return [...strings].sort((a, b) => compareKeys(sortKeyForCidr(a), sortKeyForCidr(b)));
+}
+
+export function sortRevisionDiffItems(items: (string | RevisionPrefix)[]): string[] {
+	return sortPrefixStrings(items.map(prefixStringFromItem));
+}