Custom iframe channel view

src/app/layout.tsx

@@ -36,7 +36,7 @@ export default async function RootLayout({
 }>) {
   const cookieStore = await cookies();
 
-  const settings = parseClientSettings(cookieStore.get("settings")?.value);
+  const settings = parseClientSettings(cookieStore.get("settings")?.value || 'black');
 
   return (
     <html lang="en">

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

@@ -9,6 +9,7 @@ import auth from "@/lib/auth";
 import { useServerMessages } from "@/hooks/use-messages";
 import useApp from "@/hooks/use-app";
 import { useEffectOnceWhenReady } from "@/hooks/use-once";
+import ChannelView from "@/components/ChannelView";
 
 export default function Server() {
   const { ip } = useParams<{ ip: string }>();
@@ -50,30 +51,12 @@ export default function Server() {
 
   return (
     <AppLayout app={app} server={server}>
-      {app.currentChannel ? (
+      <ChannelView
-        <MessageBox
         app={app}
-          channelName={app.currentChannel.name}
+        messages={messages}
-          messages={
+        ip={ip}
-            messages[ip]?.filter(
+        serverRef={serverRef}
-              (m) => m.channel_id === app.currentChannel?.id
-            ) || []
-          }
-          sendMessage={(message) => {
-            serverRef.current?.send(
-              JSON.stringify({
-                type: "send_message",
-                params: {
-                  channel_id: app.currentChannel?.id,
-                  contents: message,
-                },
-              })
-            );
-          }}
       />
-      ) : (
-        <div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5"></div>
-      )}
     </AppLayout>
   );
 }

src/components/ChannelView.tsx

@@ -0,0 +1,52 @@
+import { Channel, Message, Server } from "@/types/types";
+import MessageBox from "./MessageBox";
+import App from "@/types/app";
+import React, { Ref } from "react";
+
+export default function ChannelView({
+  app,
+  messages,
+  ip,
+  serverRef,
+}: {
+  app: App;
+  messages: Record<string, Message[]>;
+  ip: string;
+  serverRef: React.RefObject<WebSocket | null>;
+}) {
+  if (!app.currentChannel)
+    return (
+      <div className="h-svh w-full max-h-svh flex flex-col pb-5 pl-5 gap-5" />
+    );
+  switch (app.currentChannel.kind) {
+    case "text":
+      return (
+        <MessageBox
+          app={app}
+          channelName={app.currentChannel.name}
+          messages={
+            messages[ip]?.filter(
+              (m) => m.channel_id === app.currentChannel?.id
+            ) || []
+          }
+          sendMessage={(message) => {
+            serverRef.current?.send(
+              JSON.stringify({
+                type: "send_message",
+                params: {
+                  channel_id: app.currentChannel?.id,
+                  contents: message,
+                },
+              })
+            );
+          }}
+        />
+      );
+
+    case "voice":
+      return null;
+
+    default:
+      return <iframe src={app.currentChannel.kind} className="w-full" />;
+  }
+}