fix(ui): заменить таблицы на карточки данных и улучшить функциональность поиска

app/(main)/wireguard/page.tsx

@@ -2,36 +2,29 @@
 
 import { useMemo, useState } from "react"
 import { PageHeader } from "@/components/page-header"
-import { EmptyState } from "@/components/empty-state"
 import { servers } from "@/lib/data"
-import type { WireGuardInterface, WireGuardPeer } from "@/lib/data"
-import { Flag } from "@/components/flag"
-import { Card, CardContent } from "@/components/ui/card"
+import type { WireGuardInterface } from "@/lib/data"
+import { DataPageCard } from "@/components/data-page-card"
+import { DataPageToolbar } from "@/components/data-page-toolbar"
+import {
+  WireguardDataGrid,
+  type WgIfaceWithServer,
+} from "@/components/data-grids/wireguard-data-grid"
 import { Button } from "@/components/ui/button"
+import { Card, CardContent } from "@/components/ui/card"
 import { cn } from "@/lib/utils"
 import {
   Sheet, SheetContent, SheetHeader, SheetTitle,
   SheetDescription, SheetFooter, SheetClose,
 } from "@/components/ui/sheet"
 import {
-  DropdownMenu, DropdownMenuTrigger, DropdownMenuContent,
-  DropdownMenuItem, DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu"
-import {
-  ShieldCheckIcon, PlusIcon, SearchIcon, KeyRoundIcon,
-  ChevronDownIcon, ChevronRightIcon, MoreHorizontalIcon,
-  PencilIcon, Trash2Icon, PowerIcon, CopyIcon, CheckIcon,
-  CodeXmlIcon, UsersIcon, ActivityIcon, ArrowDownIcon, ArrowUpIcon,
+  ShieldCheckIcon, PlusIcon, KeyRoundIcon,
+  CodeXmlIcon, UsersIcon, ActivityIcon,
+  CopyIcon, CheckIcon,
 } from "lucide-react"
 
 // ─── collect all WireGuard interfaces from all servers ────────────────────────
 
-interface WgIfaceWithServer extends WireGuardInterface {
-  serverId: string
-  serverName: string
-  serverCountry: string
-}
-
 function collectInterfaces(): WgIfaceWithServer[] {
   const result: WgIfaceWithServer[] = []
   for (const srv of servers) {
@@ -49,19 +42,6 @@ function collectInterfaces(): WgIfaceWithServer[] {
 
 // ─── helpers ──────────────────────────────────────────────────────────────────
 
-function fmtBytes(n: number | undefined): string {
-  if (!n) return "—"
-  if (n >= 1_000_000_000) return `${(n / 1_000_000_000).toFixed(1)} ГБ`
-  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)} МБ`
-  if (n >= 1_000) return `${(n / 1_000).toFixed(0)} КБ`
-  return `${n} Б`
-}
-
-function truncKey(key: string): string {
-  if (key.length <= 20) return key
-  return `${key.slice(0, 8)}…${key.slice(-8)}`
-}
-
 // ─── RSC generator ────────────────────────────────────────────────────────────
 
 function generateWgRsc(iface: WgIfaceWithServer): string {
@@ -90,161 +70,6 @@ function generateWgRsc(iface: WgIfaceWithServer): string {
   return lines.join("\n")
 }
 
-// ─── Peer row ─────────────────────────────────────────────────────────────────
-
-function PeerRow({ peer }: { peer: WireGuardPeer }) {
-  return (
-    <div className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-3 px-4 py-2.5 items-center text-xs border-t border-border/50 bg-muted/20">
-      {/* public key */}
-      <div className="flex items-center gap-1.5 min-w-0">
-        <KeyRoundIcon className="size-3 text-muted-foreground shrink-0" />
-        <span className="font-mono text-muted-foreground truncate" title={peer.publicKey}>
-          {truncKey(peer.publicKey)}
-        </span>
-      </div>
-      {/* allowed IPs */}
-      <div className="font-mono text-muted-foreground truncate">
-        {peer.allowedIps.join(", ")}
-      </div>
-      {/* handshake */}
-      <span className={cn(
-        "font-mono text-[11px] whitespace-nowrap",
-        peer.latestHandshake ? "text-emerald-600 dark:text-emerald-400" : "text-muted-foreground",
-      )}>
-        {peer.latestHandshake ?? "нет рукопожатия"}
-      </span>
-      {/* rx / tx */}
-      <div className="flex items-center gap-2 text-muted-foreground whitespace-nowrap">
-        <span className="flex items-center gap-0.5">
-          <ArrowDownIcon className="size-3 text-emerald-500" />{fmtBytes(peer.transferRx)}
-        </span>
-        <span className="flex items-center gap-0.5">
-          <ArrowUpIcon className="size-3 text-blue-400" />{fmtBytes(peer.transferTx)}
-        </span>
-      </div>
-      {/* endpoint */}
-      <span className="font-mono text-muted-foreground/60 text-[11px]">{peer.endpoint ?? "—"}</span>
-    </div>
-  )
-}
-
-// ─── Interface card ───────────────────────────────────────────────────────────
-
-function IfaceRow({
-  iface,
-  expanded,
-  onToggleExpand,
-  onExport,
-}: {
-  iface: WgIfaceWithServer
-  expanded: boolean
-  onToggleExpand: () => void
-  onExport: () => void
-}) {
-  const onlinePeers = iface.peers.filter((p) => !!p.latestHandshake).length
-
-  return (
-    <div className={cn("border-b last:border-b-0", !iface.enabled && "opacity-50")}>
-      <div
-        className="grid grid-cols-[20px_1fr_auto_auto_auto_auto_auto_auto] gap-3 px-4 py-3 items-center hover:bg-muted/30 transition-colors cursor-pointer"
-        onClick={onToggleExpand}
-      >
-        {/* expand */}
-        <button className="text-muted-foreground" onClick={(e) => { e.stopPropagation(); onToggleExpand() }}>
-          {expanded
-            ? <ChevronDownIcon className="size-3.5" />
-            : <ChevronRightIcon className="size-3.5" />}
-        </button>
-
-        {/* name + server */}
-        <div className="min-w-0">
-          <div className="flex items-center gap-2">
-            <span className={cn(
-              "size-2 rounded-full shrink-0",
-              iface.status === "up" ? "bg-emerald-500 animate-pulse" : "bg-red-500",
-            )} />
-            <span className="font-mono font-semibold text-sm">{iface.name}</span>
-          </div>
-          <div className="flex items-center gap-1.5 mt-0.5 text-[11px] text-muted-foreground font-mono">
-            <Flag code={iface.serverCountry} size={12} />
-            {iface.serverName}
-          </div>
-        </div>
-
-        {/* port */}
-        <div className="text-center">
-          <p className="text-[10px] text-muted-foreground">Порт</p>
-          <p className="font-mono text-sm">{iface.listenPort}</p>
-        </div>
-
-        {/* MTU */}
-        <div className="text-center">
-          <p className="text-[10px] text-muted-foreground">MTU</p>
-          <p className="font-mono text-sm">{iface.mtu}</p>
-        </div>
-
-        {/* peers */}
-        <div className="text-center">
-          <p className="text-[10px] text-muted-foreground">Пиров</p>
-          <p className="font-mono text-sm">
-            <span className="text-emerald-600 dark:text-emerald-400">{onlinePeers}</span>
-            <span className="text-muted-foreground">/{iface.peers.length}</span>
-          </p>
-        </div>
-
-        {/* status badge */}
-        <span className={cn(
-          "text-[11px] font-mono px-2 py-0.5 rounded border",
-          iface.status === "up"
-            ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/20"
-            : "bg-red-500/10 text-red-500 border-red-500/20",
-        )}>
-          {iface.status === "up" ? "UP" : "DOWN"}
-        </span>
-
-        {/* menu */}
-        <DropdownMenu>
-          <DropdownMenuTrigger render={
-            <Button variant="ghost" size="icon" className="size-7" onClick={(e) => e.stopPropagation()}>
-              <MoreHorizontalIcon className="size-4" />
-            </Button>
-          } />
-          <DropdownMenuContent side="bottom" align="end">
-            <DropdownMenuItem onClick={(e) => { e.stopPropagation(); onExport() }}>
-              <CodeXmlIcon className="size-4" />Экспорт .rsc
-            </DropdownMenuItem>
-            <DropdownMenuItem><PencilIcon className="size-4" />Редактировать</DropdownMenuItem>
-            <DropdownMenuItem><PlusIcon className="size-4" />Добавить пира</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem><PowerIcon className="size-4" />{iface.enabled ? "Отключить" : "Включить"}</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem variant="destructive"><Trash2Icon className="size-4" />Удалить</DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
-
-      {/* expanded peers */}
-      {expanded && iface.peers.length > 0 && (
-        <div>
-          <div className="grid grid-cols-[1fr_1fr_auto_auto_auto] gap-3 px-4 py-1.5 bg-muted/10 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground border-t border-border/50">
-            <span>Public Key</span>
-            <span>Allowed IPs</span>
-            <span>Последнее рукопожатие</span>
-            <span>RX / TX</span>
-            <span>Endpoint</span>
-          </div>
-          {iface.peers.map((p) => <PeerRow key={p.publicKey} peer={p} />)}
-        </div>
-      )}
-      {expanded && iface.peers.length === 0 && (
-        <div className="px-4 py-4 text-xs text-muted-foreground text-center border-t border-border/50">
-          Нет пиров
-        </div>
-      )}
-    </div>
-  )
-}
-
 // ─── Export Sheet ─────────────────────────────────────────────────────────────
 
 function ExportSheet({ open, iface, onClose }: {
@@ -310,8 +135,7 @@ function ExportSheet({ open, iface, onClose }: {
 export default function WireGuardPage() {
   const allIfaces = useMemo(() => collectInterfaces(), [])
 
-  const [search, setSearch]           = useState("")
-  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+  const [search, setSearch] = useState("")
   const [exportIface, setExportIface] = useState<WgIfaceWithServer | null>(null)
 
   const filtered = useMemo(() => {
@@ -328,14 +152,6 @@ export default function WireGuardPage() {
   const onlinePeers  = allIfaces.reduce((s, i) => s + i.peers.filter((p) => !!p.latestHandshake).length, 0)
   const upIfaces     = allIfaces.filter((i) => i.status === "up").length
 
-  function toggleExpand(id: string) {
-    setExpandedIds((prev) => {
-      const next = new Set(prev)
-      if (next.has(id)) next.delete(id); else next.add(id)
-      return next
-    })
-  }
-
   return (
     <div className="flex flex-col h-full">
       <PageHeader
@@ -385,50 +201,18 @@ export default function WireGuardPage() {
           </div>
 
           {/* Search + table */}
-          <Card>
-            <div className="flex items-center gap-3 px-4 py-3 border-b">
-              <div className="flex items-center gap-2 h-8 px-3 border border-input rounded-md bg-background min-w-[260px]">
-                <SearchIcon className="size-3.5 text-muted-foreground shrink-0" />
-                <input
-                  className="flex-1 bg-transparent outline-none placeholder:text-muted-foreground text-sm"
-                  placeholder="Поиск по имени, серверу, IP…"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                />
-              </div>
-              <span className="text-sm text-muted-foreground ml-auto">{filtered.length} интерфейсов</span>
-            </div>
-
-            {/* table header */}
-            <div className="grid grid-cols-[20px_1fr_auto_auto_auto_auto_auto_auto] gap-3 px-4 py-2 border-b text-[10px] font-semibold uppercase tracking-widest text-muted-foreground bg-muted/20">
-              <span />
-              <span>Интерфейс / Сервер</span>
-              <span>Порт</span>
-              <span>MTU</span>
-              <span>Пиры</span>
-              <span>Статус</span>
-              <span />
-            </div>
-
-            {filtered.length === 0 ? (
-              <EmptyState
-                icon={<ShieldCheckIcon className="size-4" />}
-                title="Нет WireGuard интерфейсов"
-                description="Добавьте первый интерфейс или проверьте поиск"
-                className="border-0 py-16"
-              />
-            ) : (
-              filtered.map((iface) => (
-                <IfaceRow
-                  key={iface.id}
-                  iface={iface}
-                  expanded={expandedIds.has(iface.id)}
-                  onToggleExpand={() => toggleExpand(iface.id)}
-                  onExport={() => setExportIface(iface)}
-                />
-              ))
-            )}
-          </Card>
+          <DataPageCard>
+            <DataPageToolbar
+              search={search}
+              onSearchChange={setSearch}
+              searchPlaceholder="Поиск по имени, серверу, IP…"
+              countLabel={`${filtered.length} интерфейсов`}
+            />
+            <WireguardDataGrid
+              interfaces={filtered}
+              onExport={setExportIface}
+            />
+          </DataPageCard>
 
           {/* RouterOS reference */}
           <Card>