Fix server implementatio

src/app/server/[ip]/page.tsx

@@ -5,36 +5,30 @@ import { useParams } from "next/navigation";
 import MessageBox from "@/components/MessageBox";
 import AppSidebar from "@/components/Sidebar";
 import { Message, Server as ServerType } from "@/types/types";
-import useUser, { User } from "@/hooks/get-user";
-import { NumberMap } from "@/types/typeUtils";
+import { User } from "@/hooks/get-user";
+import { StringMap } from "@/types/typeUtils";
 import auth, { makeAddress } from "@/lib/auth";
 
 export default function Server() {
-  const { id: ip } = useParams<{ id: string }>();
+  const { ip } = useParams<{ ip: string }>();
+  const wsServerRef = useRef<WebSocket | null>(null);
+  const wsNodeRef = useRef<WebSocket | null>(null);
   const [server, setServer] = useState<undefined | ServerType>();
-  const wsRef = useRef<WebSocket | null>(null);
   const [messages, setMessages] = useState<Message[]>([]);
-  const { user, loading } = useUser();
-  const [userList, setUserList] = useState<NumberMap<User>>({});
+  const [userList, setUserList] = useState<StringMap<User>>({});
 
   useEffect(() => {
-    if (!ip || !user || loading) return;
-    auth(makeAddress(ip), wsRef, setServer, setMessages);
-    setUserList((prev) => {
-      prev[user.id] = user;
-      return prev;
-    });
-  }, [ip, user, loading]);
+    if (!ip) return;
+    auth(makeAddress(ip, 7080), wsServerRef, setServer, setMessages);
+  }, [ip]);
 
   return (
     <AppSidebar
-      user={user}
-      server={
-        {
-          channels: [{ id: "general", name: "General", kind: "text" }],
-          ...server,
-        } as ServerType
-      }
+      wsRef={wsNodeRef}
+      setMessages={setMessages}
+      userList={userList}
+      setUserList={setUserList}
+      server={server}
     >
       <MessageBox
         channelName="General"
@@ -44,7 +38,7 @@ export default function Server() {
           .filter((m) => m.channel_id === "general")
           .toReversed()}
         sendMessage={(message) => {
-          wsRef.current?.send(
+          wsServerRef.current?.send(
             JSON.stringify({
               type: "send_message",
               params: {

src/app/settings/page.tsx

@@ -7,15 +7,17 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Card } from "@/components/ui/card";
 import { CardContent } from "@/components/ui/card";
 import { PROFILE_SCHEMA, CLIENT_SCHEMA } from "@/types/settings";
-import { useRouter } from "next/navigation";
+import { useParams, useRouter, useSearchParams } from "next/navigation";
 import { Button } from "@/components/ui/button";
 import { ChevronLeftCircle } from "lucide-react";
 import axios from "axios";
+import { useEffect } from "react";
 
 export default function SettingsPage() {
   const [settings, setSettings] = useClientSettings();
   const [profileSettings, setProfileSettings] = useProfileSettings();
   const router = useRouter();
+  const params = useSearchParams();
 
   return (
     <div>
@@ -26,7 +28,10 @@ export default function SettingsPage() {
       >
         <ChevronLeftCircle />
       </Button>
-      <Tabs className="mx-auto mt-3" defaultValue="client">
+      <Tabs
+        className="mx-auto mt-3"
+        defaultValue={params.get("tab") || "client"}
+      >
         <TabsList className="mx-auto">
           <TabsTrigger value="client">Client Settings</TabsTrigger>
           <TabsTrigger value="profile">Profile Settings</TabsTrigger>

src/components/Sidebar.tsx

@@ -41,6 +41,7 @@ export default function AppSidebar({
   setMessages,
   onNewMessage,
   setUser,
+  server,
 }: Readonly<{
   wsRef: React.RefObject<WebSocket | null>;
   setMessages: React.Dispatch<React.SetStateAction<Message[]>>;
@@ -50,10 +51,10 @@ export default function AppSidebar({
   chatWith?: string;
   children?: React.ReactNode;
   setUser?: React.Dispatch<React.SetStateAction<User | undefined>>;
+  server?: Server | undefined;
 }>) {
   const [servers, setServers] = useState<[string, string][]>([]);
   const [newServer, setNewServer] = useState({ name: "", ip: "" });
-  const [server, setServer] = useState<Server | undefined>();
   const router = useRouter();
   const user = useUser();
   const [userList, setUserList] = useState<StringMap<User>>({});
@@ -225,16 +226,21 @@ export default function AppSidebar({
                 </>
               ) : (
                 <>
-                  <DMItem name="Alice" status="online" />
-                  <DMItem name="Bob" status="offline" />
-                  <DMItem name="Charlie" status="away" />
+                  <DMItem name="Alice" status="online" avatar="" />
+                  <DMItem name="Bob" status="offline" avatar="" />
+                  <DMItem name="Charlie" status="away" avatar="" />
                 </>
               )}
             </div>
           </ScrollArea>
 
           <footer className="mt-auto pb-3 pl-3 pr-3">
-            <DMItem name={user?.username || "Loading.."} status="online" />
+            <DMItem
+              name={user?.display_name || "Loading.."}
+              avatar={user?.avatar_url || ""}
+              status="online"
+              settings
+            />
           </footer>
         </div>
       </div>
@@ -244,14 +250,34 @@ export default function AppSidebar({
   );
 }
 
-function DMItem({ name, status }: { name: string; status: string }) {
+function DMItem({
+  name,
+  avatar,
+  status,
+  settings,
+}: {
+  name: string;
+  avatar: string;
+  status: string;
+  settings?: boolean;
+}) {
+  const router = useRouter();
+
   return (
     <Card className="p-2 flex flex-row items-center gap-2 cursor-pointer hover:bg-accent">
-      <ProfilePicture name={name} url="" />
+      <ProfilePicture name={name} url={avatar} />
       <div className="flex flex-col">
         <span className="text-sm font-medium">{name}</span>
         <span className="text-xs text-muted-foreground">{status}</span>
       </div>
+      {settings && (
+        <Button
+          onClick={() => router.push(`/settings?tab=profile`)}
+          className="bg-transparent text-accent-foreground hover:text-accent ml-auto w-7 h-7 p-0 flex items-center justify-center rounded-md"
+        >
+          <SettingsIcon size={16} />
+        </Button>
+      )}
     </Card>
   );
 }