Voice chat pre UI

src/components/page/channel/ChannelPage.tsx

@@ -1,6 +1,7 @@
 import Enclave from "@/app/app";
 import { ChannelPageProps } from "@/components/page/PageView";
 import TextChannel from "./TextChannel";
+import VoiceChannel from "./VoiceChannel";
 
 export default function ChannelPage({
   appRef,
@@ -12,5 +13,7 @@ export default function ChannelPage({
   switch (appRef.current?.page?.channel.kind) {
     case "text":
       return <TextChannel appRef={appRef} />;
+    case "voice":
+      return <VoiceChannel appRef={appRef} />;
   }
 }

src/components/page/channel/VoiceChannel.tsx

@@ -0,0 +1,19 @@
+import Enclave from "@/app/app";
+import { ChannelPageProps } from "../PageView";
+
+export default function VoiceChannel({
+  appRef,
+}: {
+  appRef: React.RefObject<Enclave<ChannelPageProps> | null>;
+}) {
+  const channel = appRef.current?.page?.channel;
+  if (!channel) return null;
+
+  return (
+    <div className="flex flex-col h-screen gap-2">
+      <header className="px-3 pt-3 pb-3 text-sm text-muted-foreground border-b border-b-border">
+        <h2>{channel.name}</h2>
+      </header>
+    </div>
+  );
+}

src/components/view/Sidebar.tsx

@@ -1,16 +1,18 @@
 import Enclave from "@/app/app";
 import { Channel, ChannelKind } from "@/lib/types";
-import { ChevronDown, ChevronUp, HashIcon } from "lucide-react";
+import { ChevronDown, ChevronUp, HashIcon, Volume2Icon } from "lucide-react";
 import { useState } from "react";
 import AccountCard from "./AccountCard";
 import { cn } from "@/lib/utils";
 
 export function ChannelIcon({ kind }: { kind: ChannelKind["kind"] }) {
   switch (kind) {
+    case "category":
+      return null;
     case "text":
       return <HashIcon className="p-0.5" />;
-    default:
-      return null;
+    case "voice":
+      return <Volume2Icon className="p-0.5" />;
   }
 }
 

src/lib/types.ts

@@ -24,4 +24,6 @@ export interface StoredMessage extends MessageData {
 export type Channel = { id: string; name: string } & ChannelKind;
 
 export type ChannelKind =
-  { kind: "text" } | { kind: "category"; channels: Channel[] };
+  | { kind: "category"; channels: Channel[] }
+  | { kind: "voice"; max_users: number }
+  | { kind: "text" };