make user box in the header show current user (& fix backend auth packet)

packages/client/src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import { User } from "./Header/User";
 
 export const Header = () => {
   return (
@@ -6,13 +6,7 @@ export const Header = () => {
       <div></div>
       <div className="spacer"></div>
       <div className="box">
-        <div className="user-card">
-          <div className="user-card--overview">
-            <div className="user-name"></div>
-            <div className="user-instance"></div>
-          </div>
-          <img src="#" alt="User Avatar" className="user-avatar" />
-        </div>
+        <User />
       </div>
     </header>
   );

packages/client/src/components/Header/User.tsx

@@ -0,0 +1,17 @@
+import { useAppContext } from "../../contexts/AppContext";
+
+export const User = () => {
+  const { user } = useAppContext();
+
+  return user ? (
+    <div className="user-card">
+      <div className="user-card--overview">
+        <div className="user-name">{user.user.username}</div>
+        <div className="user-instance">{user.service.instance.hostname}</div>
+      </div>
+      <img src={user.user.profile} alt="User Avatar" className="user-avatar" />
+    </div>
+  ) : (
+    <></>
+  );
+};

packages/server/src/index.ts

@@ -3,6 +3,7 @@ import expressSession from "express-session";
 import http from "node:http";
 import { Server } from "socket.io";
 import {
+  AuthSession,
   CPixelPacket,
   PacketAck,
   SCanvasPacket,
@@ -51,7 +52,7 @@ const io = new Server<
     ) => void;
   },
   {
-    user: (user: SUserPacket) => void;
+    user: (user: AuthSession) => void;
     config: (config: any) => void;
     pixel: (data: SPixelPacket) => void;
     canvas: (pixels: string[]) => void;
@@ -103,11 +104,7 @@ io.on("connection", (socket) => {
   console.log("connection", socket.request.session.user);
 
   if (socket.request.session.user)
-    socket.emit("user", {
-      type: "user",
-      user: socket.request.session.user,
-      _direction: "server->client",
-    });
+    socket.emit("user", socket.request.session.user);
 
   socket.emit("config", {
     pallete: {