feat: refactor operations page to enhance UI and component structure. Remove unused card components and integrate OperationsQuickActions for improved quick action handling. Update tab layout for better responsiveness and user experience.

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

@@ -0,0 +1,123 @@
+<script lang="ts">
+	import type { BirdStatus } from '$lib/api/types.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Card } from '$lib/components/ui/card/index.js';
+	import RefreshCw from '@lucide/svelte/icons/refresh-cw';
+	import Play from '@lucide/svelte/icons/play';
+	import RotateCcw from '@lucide/svelte/icons/rotate-ccw';
+	import Bird from '@lucide/svelte/icons/bird';
+
+	type Props = {
+		applying: boolean;
+		reloading: boolean;
+		birdLoading: boolean;
+		birdStatus: BirdStatus | null;
+		onApply: () => void;
+		onReload: () => void;
+		onRefreshBirdStatus: () => void;
+		onOpenBirdProtocols: () => void;
+		birdHealthyBadgeVariant: (h: boolean | null | undefined) => 'default' | 'secondary' | 'outline' | 'destructive';
+		birdHealthyShortLabel: (h: boolean | null | undefined) => string;
+	};
+
+	let {
+		applying,
+		reloading,
+		birdLoading,
+		birdStatus,
+		onApply,
+		onReload,
+		onRefreshBirdStatus,
+		onOpenBirdProtocols,
+		birdHealthyBadgeVariant,
+		birdHealthyShortLabel
+	}: Props = $props();
+</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">
+		<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>
+			<Button class="w-full shrink-0 self-start sm:w-auto sm:self-auto" onclick={onApply} disabled={applying}>
+				<Play />
+				Apply
+			</Button>
+		</div>
+	</Card>
+
+	<Card class="min-w-0 p-4">
+		<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>
+			<Button
+				variant="outline"
+				class="w-full shrink-0 self-start sm:w-auto sm:self-auto"
+				onclick={onReload}
+				disabled={reloading}
+			>
+				<RotateCcw />
+				Reload
+			</Button>
+		</div>
+	</Card>
+
+	<Card class="min-w-0 p-4 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" />
+					<p class="font-semibold">Состояние BIRD</p>
+					{#if birdStatus}
+						<Badge variant={birdHealthyBadgeVariant(birdStatus.healthy)}>{birdHealthyShortLabel(birdStatus.healthy)}</Badge>
+					{/if}
+				</div>
+				<p class="text-muted-foreground max-w-[56ch] text-sm">
+					Локально на хосте API: <code class="bg-muted rounded px-1 text-xs">birdc show protocols</code>. Не заменяет мониторинг спикеров.
+				</p>
+				{#if birdLoading}
+					<p class="text-muted-foreground text-sm">Загрузка…</p>
+				{:else if birdStatus}
+					{#if !birdStatus.birdc_configured}
+						<p class="text-muted-foreground text-sm">{birdStatus.message ?? 'birdc не настроен на API.'}</p>
+					{:else if birdStatus.error}
+						<p class="text-destructive text-sm">{birdStatus.error}</p>
+					{:else}
+						<p class="text-sm">
+							<span class="text-muted-foreground">BGP сессий:</span>
+							<span class="font-medium">{birdStatus.bgp_established}</span>
+							<span class="text-muted-foreground">/</span>
+							<span class="font-medium">{birdStatus.bgp_sessions_total}</span>
+							<span class="text-muted-foreground"> Established / всего</span>
+						</p>
+					{/if}
+				{:else}
+					<p class="text-muted-foreground text-sm">Статус не загружен</p>
+				{/if}
+			</div>
+
+			<div class="flex w-full shrink-0 flex-wrap gap-2 sm:w-auto sm:flex-col sm:items-stretch">
+				<Button
+					variant="outline"
+					size="sm"
+					class="w-full sm:w-auto"
+					onclick={onRefreshBirdStatus}
+					disabled={birdLoading}
+				>
+					<RefreshCw class={birdLoading ? 'size-3.5 animate-spin' : 'size-3.5'} />
+					Обновить
+				</Button>
+				{#if birdStatus?.birdc_configured && birdStatus.protocols_excerpt}
+					<Button variant="ghost" size="sm" class="w-full sm:w-auto" onclick={onOpenBirdProtocols}>
+						Вывод birdc
+					</Button>
+				{/if}
+			</div>
+		</div>
+	</Card>
+</div>