fix(ui): ограничить списки деталей OSPF без потери данных

app/(main)/ospf/page.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { OspfDetailList } from "@/components/ospf-detail-list"
 import { OspfTopologyScope } from "@/components/ospf-topology-scope"
 import { usePrefersReducedMotion } from "@/hooks/use-prefers-reduced-motion"
 import { deriveOspfRouterIdentity } from "@/lib/ospf-router-identity"
@@ -559,7 +560,7 @@ function NodeDetailPanel({
           <p className="text-sm font-mono font-semibold text-foreground truncate leading-tight">{node.label}</p>
           <p className="text-[10px] font-mono text-muted-foreground mt-0.5">Router-ID: {routerId}</p>
         </div>
-        <button type="button" aria-label="Закрыть" onClick={onClose} className="text-muted-foreground hover:text-foreground transition-colors mt-0.5 shrink-0">
+        <button type="button" aria-label="Закрыть" onClick={onClose} className="flex min-h-11 min-w-11 items-center justify-center text-muted-foreground hover:text-foreground transition-colors shrink-0">
           <XIcon className="size-3.5" />
         </button>
       </div>
@@ -578,8 +579,7 @@ function NodeDetailPanel({
       <div className="px-4 py-3 border-b border-border">
         <p className="text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2">Соседи ({adjacencies.length})</p>
         {adjacencies.length === 0 && <p className="text-[11px] text-muted-foreground">Нет активных adjacency</p>}
-        <div className="flex flex-col gap-0 divide-y divide-border">
-          {adjacencies.map((adj, i) => {
+        <OspfDetailList key={`neighbors-${nodeId}`} label="Соседи узла OSPF" items={adjacencies} getSearchValue={adj => `${adj.peerLabel} ${adj.peerId} ${adj.iface} ${adj.state}`} renderItem={(adj, i) => {
             const ec = EDGE_COLOR[adj.state] ?? "var(--muted-foreground)"
             return (
               <div key={i} className="flex items-start gap-2.5 py-2.5">
@@ -592,8 +592,7 @@ function NodeDetailPanel({
                 <span className="text-[10px] font-mono font-semibold shrink-0 mt-0.5" style={{ color: ec }}>{adj.state}</span>
               </div>
             )
-          })}
-        </div>
+          }} />
       </div>
 
       <div className="px-4 py-3">
@@ -601,8 +600,7 @@ function NodeDetailPanel({
           Интерфейсы OSPF{ifaces.length > 0 && <span className="ml-1 text-muted-foreground">({ifaces.length})</span>}
         </p>
         {ifaces.length === 0 && <p className="text-[11px] text-muted-foreground">Нет данных</p>}
-        <div className="flex flex-col gap-0 divide-y divide-border">
-          {ifaces.map(iface => (
+        <OspfDetailList key={`interfaces-${nodeId}`} label="Интерфейсы узла OSPF" items={ifaces} getSearchValue={iface => `${iface.interfaceName} ${iface.area} ${iface.cost ?? ""}`} renderItem={iface => (
             <div key={iface.key} className="flex items-center gap-2 py-2">
               <span className={cn("size-1.5 rounded-full shrink-0", iface.active ? "bg-emerald-500" : "bg-muted-foreground/40")} />
               <code className="text-[11px] font-mono flex-1 min-w-0 truncate" style={{ color: "var(--muted-foreground)" }}>{iface.interfaceName}</code>
@@ -611,8 +609,7 @@ function NodeDetailPanel({
               </span>
               <span className="text-[10px] font-mono shrink-0" style={{ color: "var(--info)" }}>cost {iface.cost ?? "—"}</span>
             </div>
-          ))}
-        </div>
+          )} />
       </div>
     </div>
   )