feat(traffic, users): enhance interface and peer management features

Added support for managing peer information in interface bindings, including new fields for peerPublicKey and peerName in the BoundIfaceTraffic interface. Updated the database schema to include these fields in user_interface_bindings and traffic_samples tables. Enhanced the UI components to display peer details alongside interface names, improving user experience and clarity in the traffic management system. Updated relevant functions and services to handle peer-specific logic, ensuring robust integration across the application.

components/data-grids/users-expanded-detail.tsx

@@ -12,7 +12,7 @@ import {
   type AppUser,
   type InterfaceType,
 } from "@/lib/users"
-import { CableIcon, NetworkIcon, ShieldIcon } from "lucide-react"
+import { CableIcon, KeyRoundIcon, NetworkIcon, ShieldIcon } from "lucide-react"
 
 const TYPE_VARIANT: Record<InterfaceType, "outline" | "info-light" | "success-light" | "secondary"> = {
   ether: "outline",
@@ -87,23 +87,29 @@ function UsersExpandedDetail({
               <div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-5 gap-2">
                 {items.map((b) => {
                   const meta = TYPE_ICON[b.interfaceType]
-                  const Icon = meta.icon
+                  const Icon = b.interfaceType === "wg" && b.peerPublicKey ? KeyRoundIcon : meta.icon
+                  const iconClass = b.interfaceType === "wg" && b.peerPublicKey ? "text-success" : meta.className
                   return (
                     <div
                       key={b.id}
                       className="flex items-start gap-2 rounded-md border px-3 py-2.5"
                     >
-                      <IconTile variant="elevated" className={cn("size-10.5 shrink-0", meta.className)}>
+                      <IconTile variant="elevated" className={cn("size-10.5 shrink-0", iconClass)}>
                         <Icon />
                       </IconTile>
                       <div className="min-w-0">
                         <p className="text-xs font-mono font-medium leading-tight truncate">
-                          {b.interfaceName}
+                          {b.interfaceType === "wg" && (b.peerName || b.peerPublicKey)
+                            ? `${b.peerName || "peer"} · ${b.interfaceName}`
+                            : b.interfaceName}
                         </p>
                         <div className="flex flex-wrap items-center gap-1 mt-0.5">
                           <Badge variant={TYPE_VARIANT[b.interfaceType]} size="sm">
                             {IFACE_TYPE_LABEL[b.interfaceType]}
                           </Badge>
+                          {b.interfaceType === "wg" && !(b.peerPublicKey ?? "") ? (
+                            <Badge variant="warning-light" size="sm">весь интерфейс</Badge>
+                          ) : null}
                           {b.comment ? (
                             <span className="text-[10px] text-muted-foreground leading-tight truncate">
                               {b.comment}