feat: update RevisionDiff type and enhance OperationsDiffTab component for better diff handling. Introduce optional prefixes structure in RevisionDiff and refactor diffAdded/diffRemoved functions to utilize new data structure, improving clarity and functionality in the UI.

web/src/lib/components/operations/OperationsQuickActions.svelte

@@ -7,6 +7,7 @@
 	import Play from '@lucide/svelte/icons/play';
 	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
 	import Bird from '@lucide/svelte/icons/bird';
+	import { cn } from '$lib/utils.js';
 
 	type Props = {
 		applying: boolean;
@@ -36,24 +37,48 @@
 </script>
 
 <div class="grid grid-cols-1 items-stretch gap-3 sm:grid-cols-2 xl:grid-cols-3">
-	<Card class="min-w-0 p-4">
+	<Card
+		class={cn(
+			'min-w-0 overflow-hidden border-l-4 border-l-chart-1 bg-chart-1/5 p-4 shadow-sm'
+		)}
+	>
 		<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-			<div class="min-w-0 flex-1 space-y-1">
-				<p class="font-semibold">Apply all speakers</p>
-				<p class="text-muted-foreground max-w-[42ch] text-sm">Применить текущую конфигурацию на всех спикерах</p>
+			<div class="flex min-w-0 flex-1 gap-3">
+				<div
+					class="bg-chart-1/20 flex size-11 shrink-0 items-center justify-center rounded-xl"
+					aria-hidden="true"
+				>
+					<Play class="text-chart-1 size-5" />
+				</div>
+				<div class="min-w-0 flex-1 space-y-1">
+					<p class="font-semibold">Apply all speakers</p>
+					<p class="text-muted-foreground max-w-[42ch] text-sm">Применить текущую конфигурацию на всех спикерах</p>
+				</div>
 			</div>
 			<Button class="w-full shrink-0 self-start sm:w-auto sm:self-auto" onclick={onApply} disabled={applying}>
-				<Play />
+				<Play class="size-4" aria-hidden="true" />
 				Apply
 			</Button>
 		</div>
 	</Card>
 
-	<Card class="min-w-0 p-4">
+	<Card
+		class={cn(
+			'min-w-0 overflow-hidden border-l-4 border-l-chart-4 bg-chart-4/5 p-4 shadow-sm'
+		)}
+	>
 		<div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
-			<div class="min-w-0 flex-1 space-y-1">
-				<p class="font-semibold">BIRD Reload</p>
-				<p class="text-muted-foreground max-w-[42ch] text-sm">Перезагрузить конфигурацию BIRD на всех спикерах</p>
+			<div class="flex min-w-0 flex-1 gap-3">
+				<div
+					class="bg-chart-4/20 flex size-11 shrink-0 items-center justify-center rounded-xl"
+					aria-hidden="true"
+				>
+					<RotateCcw class="text-chart-4 size-5" />
+				</div>
+				<div class="min-w-0 flex-1 space-y-1">
+					<p class="font-semibold">BIRD Reload</p>
+					<p class="text-muted-foreground max-w-[42ch] text-sm">Перезагрузить конфигурацию BIRD на всех спикерах</p>
+				</div>
 			</div>
 			<Button
 				variant="outline"
@@ -61,17 +86,26 @@
 				onclick={onReload}
 				disabled={reloading}
 			>
-				<RotateCcw />
+				<RotateCcw class="size-4" aria-hidden="true" />
 				Reload
 			</Button>
 		</div>
 	</Card>
 
-	<Card class="min-w-0 p-4 sm:col-span-2 xl:col-span-1">
+	<Card
+		class={cn(
+			'min-w-0 overflow-hidden border-l-4 border-l-info bg-info/10 p-4 shadow-sm sm:col-span-2 xl:col-span-1'
+		)}
+	>
 		<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
 			<div class="min-w-0 flex-1 space-y-1">
 				<div class="flex flex-wrap items-center gap-2">
-					<Bird class="text-muted-foreground size-4 shrink-0" />
+					<div
+						class="bg-info/15 mr-0.5 flex size-9 items-center justify-center rounded-lg"
+						aria-hidden="true"
+					>
+						<Bird class="text-info size-5 shrink-0" />
+					</div>
 					<p class="font-semibold">Состояние BIRD</p>
 					{#if birdStatus}
 						<Badge variant={birdHealthyBadgeVariant(birdStatus.healthy)}>{birdHealthyShortLabel(birdStatus.healthy)}</Badge>