websocket updates

* sync page title on icon via websocket
* sync on page tree too

apps/client/src/App.tsx

@@ -13,8 +13,46 @@ import Groups from "@/pages/settings/group/groups";
 import GroupInfo from "./pages/settings/group/group-info";
 import Spaces from "@/pages/settings/space/spaces.tsx";
 import { Error404 } from "@/components/ui/error-404.tsx";
+import { useQuerySubscription } from "@/features/websocket/use-query-subscription.ts";
+import { useAtom, useAtomValue } from "jotai";
+import { socketAtom } from "@/features/websocket/atoms/socket-atom.ts";
+import { useTreeSocket } from "@/features/websocket/use-tree-socket.ts";
+import { useEffect } from "react";
+import { io } from "socket.io-client";
+import { authTokensAtom } from "@/features/auth/atoms/auth-tokens-atom.ts";
+import { SOCKET_URL } from "@/features/websocket/types";
 
 export default function App() {
+  const [, setSocket] = useAtom(socketAtom);
+  const authToken = useAtomValue(authTokensAtom);
+
+  useEffect(() => {
+    if (!authToken?.accessToken) {
+      return;
+    }
+    const newSocket = io(SOCKET_URL, {
+      transports: ["websocket"],
+      auth: {
+        token: authToken.accessToken,
+      },
+    });
+
+    // @ts-ignore
+    setSocket(newSocket);
+
+    newSocket.on("connect", () => {
+      console.log("ws connected");
+    });
+
+    return () => {
+      console.log("ws disconnected");
+      newSocket.disconnect();
+    };
+  }, [authToken?.accessToken]);
+
+  useQuerySubscription();
+  useTreeSocket();
+
   return (
     <>
       <Routes>