Server functionality

src/components/app/AppLayout.tsx

@@ -78,7 +78,7 @@ export default function AppLayout({
         <div className="flex-1 min-w-0 flex flex-col bg-sidebar">
           <div className="flex-1 min-h-0">
             {server ? (
-              <SidebarChannels server={server} />
+              <SidebarChannels server={server} app={app} />
             ) : (
               <SidebarDMs app={app} />
             )}

src/components/app/SidebarChannels.tsx

@@ -3,6 +3,7 @@ import { ScrollArea } from "../ui/scroll-area";
 import { Server, Channel } from "@/types/types";
 import { Card } from "../ui/card";
 import { HashIcon, Volume2Icon } from "lucide-react";
+import App from "@/types/app";
 
 export function ChannelIcon({ kind }: { kind: "text" | "voice" }) {
   switch (kind) {
@@ -15,16 +16,28 @@ export function ChannelIcon({ kind }: { kind: "text" | "voice" }) {
   }
 }
 
-export function ChannelItem({ channel }: { channel: Channel }) {
+export function ChannelItem({ channel, app }: { channel: Channel; app: App }) {
   return (
-    <Card className="p-2 flex items-center gap-2 cursor-pointer hover:bg-accent">
+    <Card
+      className="p-2 flex flex-row px-3 items-center gap-2 cursor-pointer hover:bg-accent"
+      onClick={() => {
+        app.setCurrentChannel(channel);
+        app.setSidebarOpen(false);
+      }}
+    >
       <ChannelIcon kind={channel.kind} />
       <span className="text-sm font-medium">{channel.name}</span>
     </Card>
   );
 }
 
-export default function SidebarChannels({ server }: { server: Server }) {
+export default function SidebarChannels({
+  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">
@@ -33,7 +46,7 @@ export default function SidebarChannels({ server }: { server: Server }) {
       <ScrollArea className="flex-1">
         <div className="p-2 flex flex-col gap-2">
           {server.channels.map((channel: Channel) => (
-            <ChannelItem key={channel.id} channel={channel} />
+            <ChannelItem key={channel.id} channel={channel} app={app} />
           ))}
         </div>
       </ScrollArea>