fix(ui): выровнять экспорт WireGuard под ReUI Frame

Убрать дубль копирования, вынести CodeExportSheet и семантические токены.
Открывать вкладку Peer при экспорте пира. Мигрировать VXLAN/Firewall/Containers/GRE.

Co-authored-by: Cursor <[email protected]>

components/data-grids/wireguard-data-grid.tsx

@@ -11,6 +11,7 @@ import {
 import type { WireGuardInterface } from "@/lib/data"
 import { Flag } from "@/components/flag"
 import { cn } from "@/lib/utils"
+import { Badge } from "@/components/reui/badge"
 import { Button } from "@/components/ui/button"
 import {
   DropdownMenu,
@@ -88,7 +89,7 @@ function WireguardDataGrid({
                   <span
                     className={cn(
                       "size-2 rounded-full shrink-0",
-                      iface.status === "up" ? "bg-emerald-500 animate-pulse" : "bg-red-500",
+                      iface.status === "up" ? "bg-success animate-pulse" : "bg-destructive",
                     )}
                   />
                   <span className="font-mono font-semibold text-sm">{iface.name}</span>
@@ -152,7 +153,7 @@ function WireguardDataGrid({
           const onlinePeers = iface.peers.filter((p) => !!p.latestHandshake).length
           return (
             <span className="font-mono text-sm text-center block">
-              <span className="text-emerald-600 dark:text-emerald-400">{onlinePeers}</span>
+              <span className="text-success">{onlinePeers}</span>
               <span className="text-muted-foreground">/{iface.peers.length}</span>
             </span>
           )
@@ -168,16 +169,13 @@ function WireguardDataGrid({
         accessorKey: "status",
         header: ({ column }) => <DataGridSortHeader column={column} title="Статус" />,
         cell: ({ row }) => (
-          <span
-            className={cn(
-              "text-[11px] font-mono px-2 py-0.5 rounded border",
-              row.original.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",
-            )}
+          <Badge
+            variant={row.original.status === "up" ? "success-light" : "destructive-light"}
+            size="sm"
+            className="font-mono"
           >
             {row.original.status === "up" ? "UP" : "DOWN"}
-          </span>
+          </Badge>
         ),
         meta: {
           headerTitle: "Статус",