feat: enhance settings page layout and section management

Redesigned the settings page to improve user experience by introducing a section-based layout for managing API keys and BIRD parameters. Added a new type for settings sections and implemented dynamic content rendering based on the selected section. Updated descriptions for clarity and improved the overall structure of the settings interface.

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

@@ -5,7 +5,7 @@
 	import { apiJSON, apiMutate } from '$lib/api/client.js';
 	import type { AppSettings } from '$lib/api/types.js';
 	import { Button } from '$lib/components/ui/button/index.js';
-	import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '$lib/components/ui/card/index.js';
+	import { Card, CardContent, CardHeader, CardDescription } from '$lib/components/ui/card/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
 	import { Label } from '$lib/components/ui/label/index.js';
 	import { toast } from 'svelte-sonner';
@@ -39,6 +39,8 @@
 		| 'bird_bgp_source_ipv6'
 		| 'revision_retention_minutes';
 
+	type SettingsSection = 'token' | 'bird' | 'revisions' | 'additional';
+
 	const knownFieldKeys: KnownFieldKey[] = [
 		'bird_router_id',
 		'bird_local_ipv4',
@@ -49,6 +51,15 @@
 		'revision_retention_minutes'
 	];
 
+	let activeSection = $state<SettingsSection>('token');
+
+	const sectionItems: Array<{ id: SettingsSection; label: string; description: string }> = [
+		{ id: 'token', label: 'API-ключ', description: 'Авторизация в UI' },
+		{ id: 'bird', label: 'BIRD', description: 'Сетевые параметры' },
+		{ id: 'revisions', label: 'Ревизии', description: 'Хранение истории' },
+		{ id: 'additional', label: 'Дополнительно', description: 'Ключ-значение' }
+	];
+
 	function isValidIPv4(value: string): boolean {
 		const parts = value.split('.');
 		if (parts.length !== 4) return false;
@@ -257,7 +268,7 @@
 	});
 </script>
 
-<div class="mx-auto max-w-2xl space-y-6">
+<div class="mx-auto max-w-5xl space-y-6">
 	<div class="flex items-start gap-3">
 		<div
 			class="bg-muted text-muted-foreground flex size-11 shrink-0 items-center justify-center rounded-xl"
@@ -267,48 +278,64 @@
 		</div>
 		<div class="min-w-0">
 			<h1 class="text-2xl font-semibold tracking-tight">Настройки</h1>
-			<p class="text-muted-foreground mt-1 text-sm">Токен доступа и параметры API.</p>
+			<p class="text-muted-foreground mt-1 text-sm">
+				Управление токеном доступа и глобальными параметрами control plane.
+			</p>
 		</div>
 	</div>
 
-	<!-- Token -->
 	<Card>
-		<CardHeader>
+		<CardContent class="p-4 md:p-6">
-			<CardTitle class="text-base">API-ключ</CardTitle>
+			<div class="grid gap-6 md:grid-cols-[220px_1fr]">
-			<CardDescription>
+				<div class="space-y-1">
+					{#each sectionItems as section (section.id)}
+						<button
+							type="button"
+							class={[
+								'w-full rounded-lg border px-3 py-2 text-left transition-colors',
+								activeSection === section.id
+									? 'border-primary bg-muted text-foreground'
+									: 'border-transparent text-muted-foreground hover:border-border hover:bg-muted/70 hover:text-foreground'
+							]}
+							onclick={() => (activeSection = section.id)}
+						>
+							<div class="text-sm font-medium">{section.label}</div>
+							<div class="text-xs opacity-80">{section.description}</div>
+						</button>
+					{/each}
+				</div>
+
+				<div class="border-border rounded-xl border p-4 md:p-5">
+					{#if activeSection === 'token'}
+						<div class="space-y-4">
+							<div class="space-y-1">
+								<h2 class="text-base font-semibold">API-ключ</h2>
+								<p class="text-muted-foreground text-sm">
 									Bearer-токен хранится только в localStorage браузера. Для локального демо с
 									<code class="bg-muted rounded px-1 py-0.5 text-xs">EVOBGP_DEV_INSECURE=1</code>
 									используйте токен <code class="bg-muted rounded px-1 py-0.5 text-xs">dev</code>.
-			</CardDescription>
+								</p>
-		</CardHeader>
+							</div>
-		<CardContent class="space-y-4">
+
 							<div class="space-y-2">
 								<Label for="token">Токен</Label>
 								<Input id="token" type="password" autocomplete="off" bind:value={token} placeholder="Bearer …" />
 							</div>
+
 							<Button onclick={saveToken}>
 								<Save />
 								Сохранить токен
 							</Button>
-		</CardContent>
+						</div>
-	</Card>
+					{:else if loadingSettings}
-
-	<!-- API Settings -->
-	<Card>
-		<CardHeader>
-			<CardTitle class="text-base">Настройки системы (API)</CardTitle>
-			<CardDescription>
-				<code class="text-xs">GET/PATCH /v1/settings</code> — глобальные параметры control plane (хранятся в БД).
-				Требуется роль operator.
-			</CardDescription>
-		</CardHeader>
-		<CardContent class="space-y-4">
-			{#if loadingSettings}
 						<p class="text-muted-foreground text-sm">Загрузка…</p>
-			{:else if apiSettings !== null}
+					{:else if apiSettings === null}
+						<Button variant="outline" onclick={loadApiSettings}>Загрузить настройки</Button>
+					{:else}
 						<div class="space-y-5">
+							{#if activeSection === 'bird'}
 								<div class="space-y-3">
-						<h3 class="text-sm font-medium">Параметры BIRD</h3>
+									<h2 class="text-base font-semibold">Параметры BIRD</h2>
 
 									<div class="space-y-2">
 										<Label for="bird-router-id">Router ID (bird_router_id)</Label>
@@ -336,7 +363,13 @@
 
 									<div class="space-y-2">
 										<Label for="bird-local-asn">Локальный ASN (bird_local_asn)</Label>
-							<Input id="bird-local-asn" type="number" min="1" bind:value={knownFields.bird_local_asn} placeholder="65001" />
+										<Input
+											id="bird-local-asn"
+											type="number"
+											min="1"
+											bind:value={knownFields.bird_local_asn}
+											placeholder="65001"
+										/>
 										{#if knownFieldErrors.bird_local_asn}
 											<p class="text-sm text-red-600">{knownFieldErrors.bird_local_asn}</p>
 										{/if}
@@ -366,9 +399,9 @@
 										{/if}
 									</div>
 								</div>
-
+							{:else if activeSection === 'revisions'}
 								<div class="space-y-3">
-						<h3 class="text-sm font-medium">Управление ревизиями</h3>
+									<h2 class="text-base font-semibold">Управление ревизиями</h2>
 
 									<div class="space-y-2">
 										<Label for="revision-retention-minutes">
@@ -390,10 +423,10 @@
 										</p>
 									</div>
 								</div>
-
+							{:else if activeSection === 'additional'}
 								<div class="space-y-3">
 									<div class="flex items-center justify-between">
-							<h3 class="text-sm font-medium">Дополнительные настройки (KV)</h3>
+										<h2 class="text-base font-semibold">Дополнительные настройки (KV)</h2>
 										<Button variant="outline" size="sm" onclick={addAdditionalSetting}>
 											<Plus class="size-4" />
 											Добавить строку
@@ -421,7 +454,7 @@
 										{/each}
 									</div>
 								</div>
-				</div>
+							{/if}
 
 							{#if hasValidationErrors}
 								<p class="text-sm text-red-600">
@@ -429,13 +462,22 @@
 								</p>
 							{/if}
 
+							<div class="pt-2">
 								<Button onclick={saveApiSettings} disabled={!canSaveSettings}>
 									<Save />
 									{savingSettings ? 'Сохранение…' : 'Применить настройки'}
 								</Button>
-			{:else}
+							</div>
-				<Button variant="outline" onclick={loadApiSettings}>Загрузить настройки</Button>
+						</div>
 					{/if}
+				</div>
+			</div>
 		</CardContent>
+		<CardHeader class="pt-0">
+			<CardDescription>
+				<code class="text-xs">GET/PATCH /v1/settings</code> — глобальные параметры control plane (хранятся в БД).
+				Требуется роль operator.
+			</CardDescription>
+		</CardHeader>
 	</Card>
 </div>