Refactor Mihomo page layout and remove unused components

- Removed the Tabs component and associated state variable to simplify the Mihomo page structure.
- Updated the card descriptions for clarity and improved user guidance on proxy settings.
- Enhanced the layout for displaying proxies by introducing a new section with clearer instructions and a more organized presentation of nodes.

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

@@ -9,7 +9,6 @@
 	} from '$lib/api/client.js';
 	import type { MihomoConnectionsResponse, MihomoMetaResponse } from '$lib/api/mihomo-types.js';
 	import { formatBytes } from '$lib/format.js';
-	import * as Tabs from '$lib/components/ui/tabs/index.js';
 	import * as Table from '$lib/components/ui/table/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { Button } from '$lib/components/ui/button/index.js';
@@ -43,7 +42,6 @@
 
 	const POLL_MS = 8000;
 
-	let tab = $state<string>('summary');
 	let loading = $state(true);
 	let err = $state<string | null>(null);
 	let rows = $state<FleetRow[]>([]);
@@ -185,12 +183,6 @@
 		</p>
 	</div>
 	<div class="flex flex-wrap items-center gap-2">
-		<Tabs.Root bind:value={tab} class="w-fit shrink-0">
-			<Tabs.List class="min-w-[240px] gap-0.5 p-1">
-				<Tabs.Trigger value="summary" class="flex-1 px-3">Сводка</Tabs.Trigger>
-				<Tabs.Trigger value="proxies" class="flex-1 px-3">Прокси по нодам</Tabs.Trigger>
-			</Tabs.List>
-		</Tabs.Root>
 		<Button variant="outline" size="sm" onclick={() => void reloadAll()} disabled={loading}>
 			<RefreshCwIcon class="mr-1 size-4 {loading ? 'animate-spin' : ''}" />
 			Обновить
@@ -213,7 +205,7 @@
 		<Skeleton class="h-64 w-full rounded-lg" />
 	{/snippet}
 	{#snippet children()}
-		{#if tab === 'summary' && rows.length > 0}
+		{#if rows.length > 0}
 			<div class="mb-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5">
 				<KpiStatCard accent="violet" label="Нод с Mihomo" footer="meta OK" valueClass="text-xl">
 					{#snippet icon()}
@@ -252,7 +244,10 @@
 			<Card.Root class="border-l-4 border-l-violet-500/40 shadow-sm">
 				<Card.Header class="pb-2">
 					<Card.Title class="text-base">Ноды</Card.Title>
-					<Card.Description>Контроллер, статус опроса, ссылка на детальную панель.</Card.Description>
+					<Card.Description>
+						Контроллер и метрики. Ниже на этой же странице — переключение прокси по каждой ноде; «Детально»
+						ведёт на полный обзор с графиками.
+					</Card.Description>
 				</Card.Header>
 				<Card.Content class="overflow-x-auto px-2 sm:px-6">
 					<Table.Root>
@@ -264,6 +259,7 @@
 								<Table.Head class="text-xs sm:text-sm text-right">Conn</Table.Head>
 								<Table.Head class="text-xs sm:text-sm text-right">Память</Table.Head>
 								<Table.Head class="text-xs sm:text-sm text-right">Трафик</Table.Head>
+								<Table.Head class="text-xs sm:text-sm w-[1%]">Прокси</Table.Head>
 								<Table.Head class="text-xs sm:text-sm w-[1%]"></Table.Head>
 							</Table.Row>
 						</Table.Header>
@@ -298,6 +294,16 @@
 											—
 										{/if}
 									</Table.Cell>
+									<Table.Cell class="text-right">
+										{#if r.metaStatus === 'ok'}
+											<a
+												href="#mihomo-proxies-{encodeURIComponent(r.alias)}"
+												class="text-primary text-sm hover:underline"
+											>
+												К настройке
+											</a>
+										{/if}
+									</Table.Cell>
 									<Table.Cell class="text-right">
 										{#if r.metaStatus === 'ok'}
 											<a
@@ -315,28 +321,40 @@
 					</Table.Root>
 				</Card.Content>
 			</Card.Root>
-		{:else if tab === 'proxies'}
-			<div class="flex flex-col gap-8">
-				{#each rows.filter((r) => r.metaStatus === 'ok') as r (r.alias)}
-					<Card.Root class="border-l-4 border-l-primary/30 shadow-sm">
-						<Card.Header class="pb-2">
-							<Card.Title class="text-lg">{r.alias}</Card.Title>
-							{#if r.meta?.controller_base}
-								<Card.Description class="font-mono text-xs">
-									{r.meta.controller_base}
-								</Card.Description>
-							{/if}
-						</Card.Header>
-						<Card.Content>
-							<MihomoProxyGroups alias={r.alias} lazy={true} />
-						</Card.Content>
-					</Card.Root>
-				{/each}
-				{#if rows.filter((r) => r.metaStatus === 'ok').length === 0}
-					<p class="text-muted-foreground text-sm">
-						Нет нод с настроенным Mihomo. Проверьте конфиг шлюза и вкладку «Сводка».
+
+			<div class="mt-10 space-y-4">
+				<div>
+					<h2 class="text-lg font-semibold tracking-tight">Прокси по нодам</h2>
+					<p class="text-muted-foreground mt-1 text-sm">
+						Выбор узла в группах Mihomo на месте. Для каждой ноды список загружается по кнопке «Загрузить
+						прокси», чтобы не запрашивать все конфиги сразу.
 					</p>
-				{/if}
+				</div>
+				<div class="flex flex-col gap-8">
+					{#each rows.filter((r) => r.metaStatus === 'ok') as r (r.alias)}
+						<Card.Root
+							id="mihomo-proxies-{encodeURIComponent(r.alias)}"
+							class="border-l-4 border-l-primary/30 scroll-mt-20 shadow-sm"
+						>
+							<Card.Header class="pb-2">
+								<Card.Title class="text-lg">{r.alias}</Card.Title>
+								{#if r.meta?.controller_base}
+									<Card.Description class="font-mono text-xs">
+										{r.meta.controller_base}
+									</Card.Description>
+								{/if}
+							</Card.Header>
+							<Card.Content>
+								<MihomoProxyGroups alias={r.alias} lazy={true} />
+							</Card.Content>
+						</Card.Root>
+					{/each}
+					{#if rows.filter((r) => r.metaStatus === 'ok').length === 0}
+						<p class="text-muted-foreground text-sm">
+							Нет нод с настроенным Mihomo — переключать прокси негде. Проверьте конфиг шлюза.
+						</p>
+					{/if}
+				</div>
 			</div>
 		{/if}
 	{/snippet}