Improved app-server structure

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

@@ -15,7 +15,6 @@ export default function Server() {
   const { ip } = useParams<{ ip: string }>();
   const searchParams = useSearchParams();
   const serverRef = useRef<WebSocket | null>(null);
-  const [server, setServer] = useState<undefined | ServerType>();
   const app = useApp();
   const { messages, addMessage } = useServerMessages();
 
@@ -26,7 +25,7 @@ export default function Server() {
       auth(
         ip,
         serverRef,
-        setServer,
+        app.setServer,
         (m) => addMessage(ip, m),
         () => {},
         msgs ? msgs[msgs.length - 1]?.id : undefined
@@ -37,21 +36,20 @@ export default function Server() {
   );
 
   useEffect(() => {
-    app.setServer(server);
     const channelId = searchParams.get("ch");
     if (channelId) {
       app.setCurrentChannel(
-        server?.channels.find((v) => v.id === channelId) ||
+        app.server?.channels.find((v) => v.id === channelId) ||
-          server?.channels[0] ||
+          app.server?.channels[0] ||
           null
       );
     } else {
-      app.setCurrentChannel(server?.channels[0] || null);
+      app.setCurrentChannel(app.server?.channels[0] || null);
     }
-  }, [server]);
+  }, [app.server]);
 
   return (
-    <AppLayout app={app} server={server}>
+    <AppLayout app={app}>
       <ChannelView
         app={app}
         messages={messages}

src/components/app/AppLayout.tsx

@@ -18,13 +18,11 @@ export default function AppLayout({
   children,
   chatWith,
   onNewMessage,
-  server,
   app,
 }: {
   onNewMessage?: (msg: Message) => void;
   chatWith?: string;
   children?: React.ReactNode;
-  server?: Server;
   app: App;
 }) {
   const router = useRouter();
@@ -77,8 +75,8 @@ export default function AppLayout({
 
         <div className="flex-1 min-w-0 flex flex-col bg-sidebar">
           <div className="flex-1 min-h-0">
-            {server ? (
+            {app.server ? (
-              <SidebarChannels server={server} app={app} />
+              <SidebarChannels app={app} />
             ) : (
               <SidebarDMs app={app} />
             )}

src/components/app/SidebarChannels.tsx

@@ -36,21 +36,15 @@ export function ChannelItem({ channel, app }: { channel: Channel; app: App }) {
   );
 }
 
-export default function SidebarChannels({
+export default function SidebarChannels({ app }: { app: App }) {
-  server,
-  app,
-}: {
-  server: Server;
-  app: App;
-}) {
   return (
     <div className="w-full flex flex-col bg-sidebar">
       <div className="p-3 border-b flex items-center gap-2">
-        <h2>{server.name}</h2>
+        <h2>{app.server?.name}</h2>
       </div>
       <ScrollArea className="flex-1">
         <div className="p-2 flex flex-col gap-2">
-          {server.channels.map((channel: Channel) => (
+          {app.server?.channels.map((channel: Channel) => (
             <ChannelItem key={channel.id} channel={channel} app={app} />
           ))}
         </div>