fix(frontend): share one WebSocket connection across bridge and hooks

websocketBridge.ts and useWebSocket.ts each declared their own
module-scoped sharedClient plus an identical getSharedClient, so the
"shared" client was not shared between them: whenever a page using
useWebSocket (Clients/Inbounds) mounted alongside the always-mounted
bridge, the panel opened two sockets to /ws. The server then pushed every
traffic/stats/nodes/inbounds snapshot to both, doubling WebSocket bandwidth
and running two independent reconnect loops, and the hook's socket was never
disconnected on unmount.

Hoist a single getSharedWebSocketClient into api/websocket.ts and route both
the bridge and the hook through it, so exactly one connection is opened.

frontend/src/api/websocketBridge.ts

@@ -1,34 +1,19 @@
 import { useEffect } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 
-import { WebSocketClient } from '@/api/websocket';
+import { getSharedWebSocketClient } from '@/api/websocket';
 import { keys } from '@/api/queryKeys';
 import { isRecentLocalInvalidate } from '@/api/invalidationTracker';
 
 type Handler = (payload: unknown) => void;
 
-interface SharedClient {
-  connect(): void;
-  on(event: string, fn: Handler): void;
-  off(event: string, fn: Handler): void;
-}
-
-let sharedClient: SharedClient | null = null;
-
-function getSharedClient(): SharedClient {
-  if (sharedClient) return sharedClient;
-  const basePath = (typeof window !== 'undefined' && window.X_UI_BASE_PATH) || '';
-  sharedClient = new WebSocketClient(basePath) as SharedClient;
-  return sharedClient;
-}
-
 let invalidateTimer: number | null = null;
 
 export function useWebSocketBridge() {
   const queryClient = useQueryClient();
 
   useEffect(() => {
-    const client = getSharedClient();
+    const client = getSharedWebSocketClient();
 
     const onInvalidate: Handler = (payload) => {
       const p = payload as { type?: string } | undefined;