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.

app/(main)/traffic/page.tsx

@@ -53,6 +53,8 @@ interface BoundIfaceTraffic {
   userName: string
   interfaceName: string
   interfaceType: InterfaceType
+  peerPublicKey?: string
+  peerName?: string
   comment: string
   serverId: string
   serverName: string
@@ -141,6 +143,11 @@ function hashSeed(s: string): number {
   return Math.abs(h)
 }
 
+function boundIfaceLabel(c: Pick<BoundIfaceTraffic, "interfaceName" | "interfaceType" | "peerName">): string {
+  if (c.interfaceType === "wg" && c.peerName) return `${c.peerName} · ${c.interfaceName}`
+  return c.interfaceName
+}
+
 function mockBoundFromUsers(): BoundIfaceTraffic[] {
   return INIT_USERS.flatMap((u) =>
     u.bindings.map((b) => {
@@ -149,13 +156,15 @@ function mockBoundFromUsers(): BoundIfaceTraffic[] {
       const rxNow = offline ? 0 : 12 + (seed % 140)
       const txNow = offline ? 0 : 8 + (seed % 110)
       return {
-        id: `${b.userId}:${b.serverId}:${b.interfaceName}`,
+        id: `${b.userId}:${b.serverId}:${b.interfaceName}:${b.peerPublicKey ?? "_iface"}`,
         bindingId: b.id,
         userId: u.id,
         userLogin: u.login,
         userName: u.name,
         interfaceName: b.interfaceName,
         interfaceType: b.interfaceType,
+        peerPublicKey: b.peerPublicKey,
+        peerName: b.peerName,
         comment: b.comment,
         serverId: b.serverId,
         serverName: b.serverName,
@@ -397,7 +406,7 @@ function IfaceCard({ c, selected, onClick }: { c: BoundIfaceTraffic; selected: b
         <div className="flex items-center gap-1.5 min-w-0">
           <StatusDot status={c.status} />
           <div className="min-w-0">
-            <p className="text-xs font-mono font-medium truncate">{c.interfaceName}</p>
+            <p className="text-xs font-mono font-medium truncate">{boundIfaceLabel(c)}</p>
             <p className="text-[10px] text-muted-foreground truncate">{c.userLogin}</p>
           </div>
         </div>
@@ -435,7 +444,7 @@ function IfaceRow({ c, showServer = false }: { c: BoundIfaceTraffic; showServer?
       <StatusDot status={c.status} />
       <div className="flex-1 min-w-0">
         <div className="flex items-center gap-2 flex-wrap">
-          <span className="text-xs font-mono font-semibold">{c.interfaceName}</span>
+          <span className="text-xs font-mono font-semibold">{boundIfaceLabel(c)}</span>
           <Badge variant={TYPE_VARIANT[c.interfaceType]} size="sm">{IFACE_TYPE_LABEL[c.interfaceType]}</Badge>
           {showServer && (
             <span className="inline-flex items-center gap-1 text-[10px] font-mono text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
@@ -652,7 +661,7 @@ function IfaceDetail({ sel, range, setRange }: { sel: BoundIfaceTraffic; range:
       <DetailHeader range={range} setRange={setRange}>
         <StatusDot status={sel.status} />
         <div className="leading-tight min-w-0">
-          <h2 className="text-base font-mono font-semibold">{sel.interfaceName}</h2>
+          <h2 className="text-base font-mono font-semibold">{boundIfaceLabel(sel)}</h2>
           <p className="text-xs text-muted-foreground truncate">{sel.comment || sel.userLogin}</p>
         </div>
         <Badge variant={TYPE_VARIANT[sel.interfaceType]} size="sm">{IFACE_TYPE_LABEL[sel.interfaceType]}</Badge>
@@ -897,6 +906,7 @@ export default function TrafficPage() {
     return [...activeBoundIfaces]
       .filter(c => !q
         || c.interfaceName.toLowerCase().includes(q)
+        || (c.peerName ?? "").toLowerCase().includes(q)
         || c.comment.toLowerCase().includes(q)
         || c.userLogin.toLowerCase().includes(q))
       .sort((a, b) => {

app/(main)/users/page.tsx

@@ -23,6 +23,7 @@ import { useDataSource } from "@/lib/data-source"
 import {
   ALL_SECTIONS,
   INIT_USERS,
+  bindingDiffKey,
   userInitials,
   type AppUser,
   type AppUserForm,
@@ -106,19 +107,21 @@ export default function UsersPage() {
   const activeCount = users.filter((u) => u.active).length
 
   const applyBindingsDiff = async (userId: string, next: AppUserForm["bindings"], prev: AppUser["bindings"]) => {
-    const nextKeys = new Set(next.map((b) => `${b.serverId}::${b.interfaceName}`))
-    const prevKeys = new Map(prev.map((b) => [`${b.serverId}::${b.interfaceName}`, b] as const))
+    const nextKeys = new Set(next.map(bindingDiffKey))
+    const prevKeys = new Map(prev.map((b) => [bindingDiffKey(b), b] as const))
     for (const b of prev) {
-      if (!nextKeys.has(`${b.serverId}::${b.interfaceName}`)) {
+      if (!nextKeys.has(bindingDiffKey(b))) {
         await deleteUserBinding(backendUrl, userId, b.id)
       }
     }
     for (const b of next) {
-      if (!prevKeys.has(`${b.serverId}::${b.interfaceName}`)) {
+      if (!prevKeys.has(bindingDiffKey(b))) {
         await createUserBinding(backendUrl, userId, {
           serverId: Number(b.serverId),
           interfaceName: b.interfaceName,
           interfaceType: b.interfaceType,
+          peerPublicKey: b.peerPublicKey,
+          peerName: b.peerName,
           comment: b.comment,
         })
       }