fix(ui): завершить адаптивность рекурсивных маршрутов

app/(main)/recursive-routes/page.tsx

@@ -33,7 +33,7 @@ interface BackendServer {
   id: number
   name: string
   host: string
-  type: "jump-host" | "exit-node" | "home-router"
+  type?: "jump-host" | "exit-node" | "home-router"
   site: string
   country: string
   asn: string
@@ -72,7 +72,7 @@ function makeApiFetch(backendUrl: string) {
   }
 }
 
-function mapBackendServer(s: BackendServer): Omit<Server, "status"> & { status: Server["status"] | null } {
+function mapBackendServer(s: BackendServer): Omit<Server, "status" | "type"> & { status: Server["status"] | null; type?: Server["type"] } {
   return {
     id: String(s.id),
     name: s.name || s.host,
@@ -138,7 +138,7 @@ function EndpointCountryField({ value, onChange }: { value: string; onChange: (v
       <label className="text-sm font-medium">Страна</label>
       <div className="flex items-center gap-2">
         <div className="relative flex-1">
-          <Input placeholder="Поиск или код (RU, DE…)" value={query}
+          <Input aria-label="Код страны" placeholder="Поиск или код (RU, DE…)" value={query}
             onChange={e => {
               const v = e.target.value.toUpperCase().slice(0, 3)
               setQuery(v)
@@ -161,7 +161,7 @@ function EndpointCountryField({ value, onChange }: { value: string; onChange: (v
           </span>
         )}
       </div>
-      <div className="grid grid-cols-5 gap-1.5 max-h-40 overflow-y-auto pr-0.5">
+      <div className="grid grid-cols-4 sm:grid-cols-5 gap-1.5">
         {visible.map(c => (
           <button key={c.code} type="button"
             onClick={() => { onChange(c.code); setQuery("") }}
@@ -182,7 +182,7 @@ function EndpointCountryField({ value, onChange }: { value: string; onChange: (v
 }
 
 function RouteSheet({
-  open, mode, initial, onSave, onClose, gateways, busy, saveError,
+  open, mode, initial, onSave, onClose, gateways, busy, saveError, returnFocus,
 }: {
   open: boolean
   mode: "create" | "edit"
@@ -192,6 +192,7 @@ function RouteSheet({
   gateways: GatewayOption[]
   busy: boolean
   saveError: string | null
+  returnFocus: () => HTMLElement | null
 }) {
   const [form, setForm] = useState<RouteForm>(initial)
   const [error, setError] = useState<string | null>(null)
@@ -217,21 +218,21 @@ function RouteSheet({
 
   return (
     <Sheet open={open} onOpenChange={v => { if (!v && !busy && !saveLock.current) onClose() }}>
-      <SheetContent side="right" className="w-full sm:max-w-lg flex flex-col gap-0 p-0" showCloseButton={false}>
+      <SheetContent side="right" finalFocus={returnFocus} className="data-[side=right]:w-full sm:max-w-lg flex flex-col gap-0 p-0" showCloseButton={false}>
         <SheetHeader className="px-5 pt-5 pb-4 border-b shrink-0">
           <div className="flex items-start justify-between gap-2">
             <div>
               <SheetTitle className="text-base">{mode === "create" ? "Новый маршрут" : "Редактировать маршрут"}</SheetTitle>
               <SheetDescription className="text-xs mt-0.5">Рекурсивный статический маршрут</SheetDescription>
             </div>
-            <Button variant="ghost" size="icon-sm" disabled={busy} aria-label="Закрыть форму маршрута" onClick={onClose} className="shrink-0 mt-0.5"><XIcon className="size-4" /></Button>
+            <Button type="button" variant="ghost" size="icon-sm" disabled={busy} aria-label="Закрыть форму маршрута" onClick={onClose} className="shrink-0 mt-0.5"><XIcon aria-hidden="true" className="size-4" /></Button>
           </div>
         </SheetHeader>
         <fieldset disabled={busy} className="flex-1 min-h-0 overflow-y-auto overflow-x-hidden px-6 py-5 flex flex-col gap-5">
           <div className="flex flex-col gap-4">
             <SectionTitle>Основные</SectionTitle>
             <FormField label="Dst Address" required hint="Например 8.8.8.8/32 или 1.1.1.0/24">
-              <Input className="font-mono h-9" placeholder="8.8.8.8/32" value={form.dstAddress} onChange={(e) => set("dstAddress", e.target.value)} />
+              <Input aria-label="Адрес назначения" className="font-mono h-9" placeholder="8.8.8.8/32" value={form.dstAddress} onChange={(e) => set("dstAddress", e.target.value)} />
             </FormField>
           </div>
 
@@ -251,35 +252,35 @@ function RouteSheet({
                       aria-label={`Удалить конечную точку ${idx + 1}`}
                       disabled={form.endpoints.length <= 1}
                     >
-                      <TrashIcon className="size-3.5" />
+                      <TrashIcon aria-hidden="true" className="size-3.5" />
                     </button>
                   </div>
 
                   <EndpointCountryField value={ep.country} onChange={(v) => setEp(ep.id, "country", v)} />
 
                   <FormField label="Gateway" required hint="Можно выбрать карточкой ниже или ввести вручную в формате ip%gateway">
-                    <Input className="font-mono h-9" placeholder="1.2.3.4%GW-NAME" value={ep.gateway} onChange={(e) => setEp(ep.id, "gateway", e.target.value)} />
+                    <Input aria-label="Шлюз" className="font-mono h-9" placeholder="1.2.3.4%GW-NAME" value={ep.gateway} onChange={(e) => setEp(ep.id, "gateway", e.target.value)} />
                   </FormField>
 
                   <div className="grid grid-cols-2 gap-2">
                     <FormField label="Distance (приоритет)">
-                      <Input type="number" className="h-9" value={ep.distance} onChange={(e) => setEp(ep.id, "distance", Number(e.target.value))} />
+                      <Input aria-label="Distance (приоритет)" type="number" className="h-9" value={ep.distance} onChange={(e) => setEp(ep.id, "distance", Number(e.target.value))} />
                     </FormField>
                     <FormField label="Check Gateway">
-                      <Input className="h-9 font-mono" placeholder="ping" value={ep.checkGateway} onChange={(e) => setEp(ep.id, "checkGateway", e.target.value)} />
+                      <Input aria-label="Check Gateway" className="h-9 font-mono" placeholder="ping" value={ep.checkGateway} onChange={(e) => setEp(ep.id, "checkGateway", e.target.value)} />
                     </FormField>
                   </div>
 
                   <div className="grid grid-cols-2 gap-2">
                     <FormField label="Scope">
-                      <Input type="number" className="h-9" value={ep.scope ?? ""} onChange={(e) => setEp(ep.id, "scope", e.target.value ? Number(e.target.value) : null)} />
+                      <Input aria-label="Scope" type="number" className="h-9" value={ep.scope ?? ""} onChange={(e) => setEp(ep.id, "scope", e.target.value ? Number(e.target.value) : null)} />
                     </FormField>
                     <FormField label="T.Scope">
-                      <Input type="number" className="h-9" value={ep.targetScope ?? ""} onChange={(e) => setEp(ep.id, "targetScope", e.target.value ? Number(e.target.value) : null)} />
+                      <Input aria-label="T.Scope" type="number" className="h-9" value={ep.targetScope ?? ""} onChange={(e) => setEp(ep.id, "targetScope", e.target.value ? Number(e.target.value) : null)} />
                     </FormField>
                   </div>
 
-                  <div className="flex flex-col gap-1.5 max-h-[180px] overflow-y-auto overflow-x-hidden pr-1">
+                  <div className="flex flex-col gap-1.5">
               {gateways.map((g) => {
                 const value = `${g.ip}%${g.name}`
                 const selected = ep.gateway === value
@@ -299,7 +300,7 @@ function RouteSheet({
                       <span className={cn("size-1.5 rounded-full shrink-0", g.status === "active" ? "bg-success" : "bg-muted-foreground")} />
                       <span className="font-mono text-xs font-semibold flex-1 truncate">{g.name}</span>
                       <span className="text-xs text-muted-foreground">{g.status === "active" ? "Активный маршрут" : g.status === "inactive" ? "Неактивный маршрут" : "Статус неизвестен"}</span>
-                      {selected && <CheckIcon className="size-3.5 text-primary shrink-0" />}
+                      {selected && <CheckIcon aria-hidden="true" className="size-3.5 text-primary shrink-0" />}
                     </div>
                     <div className="mt-1.5 grid grid-cols-[auto_auto_1fr] items-start gap-2 text-[11px] text-muted-foreground font-mono">
                       <span className="text-muted-foreground/50 break-all">{g.ip}</span>
@@ -315,7 +316,7 @@ function RouteSheet({
                 </div>
               ))}
               <Button type="button" variant="outline" size="sm" className="w-fit gap-1.5" onClick={() => setForm(f => ({ ...f, endpoints: [...f.endpoints, newEndpoint()] }))}>
-                <PlusIcon className="size-3.5" />Добавить endpoint
+                <PlusIcon aria-hidden="true" className="size-3.5" />Добавить endpoint
               </Button>
               {gateways.length === 0 && (
                 <div className="rounded-md border border-dashed p-4 text-center text-sm text-muted-foreground">
@@ -327,18 +328,18 @@ function RouteSheet({
 
           <div className="flex flex-col gap-4">
             <SectionTitle>Параметры</SectionTitle>
-            <FormField label="Routing Table"><Input className="h-9 font-mono" value={form.routingTable} onChange={(e) => set("routingTable", e.target.value)} /></FormField>
+            <FormField label="Routing Table"><Input aria-label="Таблица маршрутизации" className="h-9 font-mono" value={form.routingTable} onChange={(e) => set("routingTable", e.target.value)} /></FormField>
             <FormField label="Комментарий">
-              <Input className="h-9" value={form.comment} onChange={(e) => set("comment", e.target.value)} />
+              <Input aria-label="Комментарий" className="h-9" value={form.comment} onChange={(e) => set("comment", e.target.value)} />
             </FormField>
           </div>
           {saveError && <p role="alert" className="text-sm text-destructive">{saveError}</p>}
           {busy && <p role="status" className="text-sm text-muted-foreground">Ожидание подтверждения роутера…</p>}
-          {error && <div className="flex items-center gap-2 text-sm text-destructive bg-destructive/10 border border-destructive/20 px-3 py-2 rounded-md"><AlertCircleIcon className="size-4 shrink-0" />{error}</div>}
+          {error && <div role="alert" className="flex items-center gap-2 text-sm text-destructive bg-destructive/10 border border-destructive/20 px-3 py-2 rounded-md"><AlertCircleIcon aria-hidden="true" className="size-4 shrink-0" />{error}</div>}
         </fieldset>
         <SheetFooter className="px-6 py-4 border-t shrink-0 gap-2">
-          <Button type="button" variant="outline" disabled={busy} onClick={onClose} className="flex-1">Отмена</Button>
-          <Button type="button" disabled={busy} onClick={() => void handleSave()} className="flex-1"><CheckIcon className="size-4" />{mode === "create" ? "Добавить" : "Сохранить"}</Button>
+          <Button type="button" variant="outline" disabled={busy} onClick={onClose} className="h-8 flex-none">Отмена</Button>
+          <Button type="button" disabled={busy} onClick={() => void handleSave()} className="h-8 flex-none"><CheckIcon aria-hidden="true" className="size-4" />{mode === "create" ? "Добавить" : "Сохранить"}</Button>
         </SheetFooter>
       </SheetContent>
     </Sheet>
@@ -349,10 +350,10 @@ function TypeChip({ type }: { type: "jump-host" | "exit-node" | "home-router" })
   return (
     <span className={cn(
       "inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-bold border shrink-0",
-      type === "home-router" ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20" :
+      type === "home-router" ? "bg-success/10 text-success border-success/20" :
       type === "jump-host"
-        ? "bg-violet-500/10 text-violet-600 dark:text-violet-400 border-violet-500/20"
-        : "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/20",
+        ? "bg-focus/10 text-focus border-focus/20"
+        : "bg-info/10 text-info border-info/20",
     )}>
       {type === "jump-host" ? "JH" : type === "home-router" ? "HR" : "EN"}
     </span>
@@ -393,7 +394,7 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
   const isLive = mode === "live"
   const apiFetch = useMemo(() => makeApiFetch(backendUrl), [backendUrl])
 
-  const [servers, setServers] = useState<Array<Omit<Server, "status"> & { status: Server["status"] | null }>>([])
+  const [servers, setServers] = useState<Array<Omit<Server, "status" | "type"> & { status: Server["status"] | null; type?: Server["type"] }>>([])
   const [selectedServerId, setSelectedServerId] = useState<string>(context.serverId ?? "")
   const [rows, setRows] = useState<RecursiveRouteRow[]>([])
   const [busy, setBusy] = useState<"load" | "apply" | null>(null)
@@ -444,7 +445,7 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
         if (!active) return
         const parsed = recursiveServersSchema.safeParse(data)
         if (!parsed.success) throw new Error("Некорректный список устройств в ответе API")
-        const mapped = parsed.data.map(s => mapBackendServer({ ...s, type: s.type ?? "exit-node", site: s.site ?? "", asn: s.asn ?? "", status: s.status ?? null, latency: s.latency ?? null }))
+        const mapped = parsed.data.map(s => mapBackendServer({ ...s, type: s.type, site: s.site ?? "", asn: s.asn ?? "", status: s.status ?? null, latency: s.latency ?? null }))
         setServers(mapped)
         setSelectedServerId(context.serverId ?? mapped[0]?.id ?? "")
         if (!context.serverId && !context.error && mapped[0]) patchUrl({ serverId: mapped[0].id }, true)
@@ -576,8 +577,16 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
   function groupKeyOf(row: RecursiveRouteRow): string {
     return JSON.stringify([row.dstAddress.trim().toLowerCase(), row.routingTable.trim()])
   }
+  const sheetTrigger = useRef<HTMLElement | null>(null)
+  function returnSheetFocus() {
+    const target = sheetTrigger.current
+    if (target?.isConnected) return target
+    const label = target?.getAttribute("aria-label")
+    return label ? document.querySelector<HTMLElement>(`button[aria-label="${CSS.escape(label)}"]`) : null
+  }
   function openCreate() {
     if (mutationsLocked) return
+    sheetTrigger.current = document.activeElement instanceof HTMLElement ? document.activeElement : null
     setSaveError(null)
     setSheetMode("create")
     setEditingGroupKey(null)
@@ -586,6 +595,7 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
   }
   function openEdit(group: RouteGroup) {
     if (mutationsLocked) return
+    sheetTrigger.current = document.activeElement instanceof HTMLElement ? document.activeElement : null
     setSaveError(null)
     const endpoints = rows.filter(row => groupKeyOf(row) === group.key)
     setSheetMode("edit")
@@ -711,17 +721,17 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
               {isLive && (
                 <>
                   <Button
-                    variant="outline"
+                    type="button" variant="outline"
                     size="sm"
                     onClick={() => { if (!servers.length) setInventoryTick(t => t + 1); else { void loadRoutes(); void loadGateways() } }}
                     disabled={busy !== null}
                     title="Прочитать маршруты с роутера"
                   >
-                    <RefreshCwIcon className={cn("size-4", busy === "load" && "animate-spin")} />
+                    <RefreshCwIcon aria-hidden="true" className={cn("size-4", busy === "load" && "animate-spin")} />
                     Обновить
                   </Button>
                   <Button
-                    variant="outline"
+                    type="button" variant="outline"
                     size="sm"
                     onClick={() => {
                       setHistoryOpen(true)
@@ -729,13 +739,13 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
                     }}
                     disabled={busy !== null}
                   >
-                    <HistoryIcon className="size-4" />
+                    <HistoryIcon aria-hidden="true" className="size-4" />
                     История
                   </Button>
                 </>
               )}
-              <Button size="sm" onClick={openCreate} disabled={mutationsLocked}>
-                <PlusIcon className="size-4" />Добавить
+              <Button type="button" size="sm" onClick={openCreate} disabled={mutationsLocked}>
+                <PlusIcon aria-hidden="true" className="size-4" />Добавить
               </Button>
             </>
           }
@@ -744,13 +754,13 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
       banner={
         <div className="border-b px-4 py-3 flex items-center gap-3 flex-wrap shrink-0 md:px-6">
           <div className="relative min-w-[200px] max-w-xs flex-1">
-            <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none" />
+            <SearchIcon aria-hidden="true" className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground pointer-events-none" />
             <Input aria-label="Поиск маршрутов" className="pl-8 h-8 text-sm" placeholder="Dst, gateway, table, comment…"
               value={search} onChange={(e) => setSearch(e.target.value)} />
             {search && (
               <button type="button" aria-label="Сбросить поиск маршрутов" onClick={() => setSearch("")}
                 className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground">
-                <XIcon className="size-3.5" />
+                <XIcon aria-hidden="true" className="size-3.5" />
               </button>
             )}
           </div>
@@ -761,6 +771,7 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
           <p className="text-xs text-muted-foreground ml-auto">
             {!hasRouteSnapshot ? "Количество неизвестно" : filteredRows.length !== rows.length ? `${filteredRows.length} из ${rows.length} маршрутов` : `${rows.length} маршрутов`}
           </p>
+          {busy === "load" && <p role="status" className="w-full text-xs text-muted-foreground">Обновление маршрутов…</p>}
           {sharedBusy && busy !== "apply" && <p role="status" className="w-full text-sm text-muted-foreground">Операция предыдущего контекста ещё выполняется. Изменения заблокированы до ответа API.</p>}
           {contextError && <p role="alert" className="w-full text-sm text-warning">{contextError}. Выберите устройство или сбросьте ссылку. <Button type="button" variant="outline" size="sm" onClick={() => patchUrl({ serverId: null, q: null, route: null, table: null })}>Сбросить контекст маршрутов</Button></p>}
           {expandedGroupKey && !liveStale && !groupedRoutes.some(group => group.key === expandedGroupKey) && <p role="status" className="w-full text-sm text-muted-foreground">Маршрут из ссылки отсутствует в текущем срезе. <Button type="button" variant="outline" size="sm" onClick={() => patchUrl({ route: null, table: null })}>Закрыть маршрут</Button></p>}
@@ -773,8 +784,8 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
           {isLive && writeAt && <p role="status" className="w-full text-xs text-muted-foreground">Запись подтверждена {new Date(writeAt).toLocaleTimeString("ru-RU")}.</p>}
           {isLive && gatewayError && <p role="status" className="w-full text-xs text-warning">Шлюзы не загружены: {gatewayError}. Адрес можно ввести вручную.</p>}
           {isLive && liveStale && (
-            <div className="w-full text-xs text-amber-700 dark:text-amber-400 bg-amber-500/10 border border-amber-500/20 rounded-md px-3 py-2 flex items-center gap-2">
-              <AlertTriangleIcon className="size-3.5 shrink-0" />
+            <div className="w-full text-xs text-warning bg-warning/10 border border-warning/20 rounded-md px-3 py-2 flex items-center gap-2">
+              <AlertTriangleIcon aria-hidden="true" className="size-3.5 shrink-0" />
               {routeOwner === selectedServerId ? "Последний снимок; актуальное состояние не подтверждено." : "Данные маршрутов пока неизвестны."} Изменения заблокированы.
             </div>
           )}
@@ -790,17 +801,17 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
         ) : (
           <DataPageCard>
             {currentServer && (
-              <div className="flex items-center gap-2.5 px-5 py-3 border-b bg-muted/10">
+              <div className="flex flex-wrap items-center gap-2.5 px-5 py-3 border-b bg-muted/10">
                 {currentServer.status ? <StatusDot status={currentServer.status} pulse={currentServer.status === "online"} /> : <span className="text-xs text-muted-foreground">Состояние неизвестно</span>}
                 <Flag code={currentServer.country} size={16} />
-                <span className="font-mono text-sm font-semibold">{currentServer.name}</span>
-                <TypeChip type={currentServer.type} />
-                <code className="text-[11px] font-mono text-muted-foreground">{currentServer.host}</code>
+                <span className="min-w-0 break-all font-mono text-sm font-semibold">{currentServer.name}</span>
+                {currentServer.type && <TypeChip type={currentServer.type} />}
+                <code className="break-all text-[11px] font-mono text-muted-foreground">{currentServer.host}</code>
                 <span className="text-xs text-muted-foreground">{currentServer.asn}</span>
                 {currentServer.latency !== null && (
                   <span className={cn(
                     "text-xs font-mono",
-                    currentServer.latency > 60 ? "text-amber-600 dark:text-amber-400" : "text-muted-foreground",
+                    currentServer.latency > 60 ? "text-warning" : "text-muted-foreground",
                   )}>{currentServer.latency}мс</span>
                 )}
                 <div className="ml-auto flex items-center gap-1.5 text-xs text-muted-foreground">
@@ -824,9 +835,9 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
                 void applyRoutes(rows.filter((r) => groupKeyOf(r) !== g.key))
               }}
             />
-            <button onClick={openCreate} disabled={mutationsLocked}
+            <button type="button" onClick={openCreate} disabled={mutationsLocked}
               className="w-full flex items-center gap-2 px-5 py-2 text-xs text-muted-foreground hover:text-foreground hover:bg-muted/20 transition-colors border-t disabled:opacity-50">
-              <PlusIcon className="size-3.5" />
+              <PlusIcon aria-hidden="true" className="size-3.5" />
               Добавить маршрут
             </button>
           </DataPageCard>
@@ -834,6 +845,7 @@ function RecursiveRoutesContent({ mode, backendUrl, context, patchUrl, beginWrit
     </ServerRailLayout>
 
       <RouteSheet
+        returnFocus={returnSheetFocus}
         busy={busy !== null}
         saveError={saveError}
         open={sheetOpen}