From 0c6f8121433325fab2be094252fd8792e74e4843 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Wed, 26 Aug 2026 01:45:22 +0200
Subject: [PATCH] Voice chat pre UI

---
 src/components/page/channel/ChannelPage.tsx  |  3 +++
 src/components/page/channel/VoiceChannel.tsx | 19 +++++++++++++++++++
 src/components/view/Sidebar.tsx              |  8 +++++---
 src/lib/types.ts                             |  4 +++-
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 src/components/page/channel/VoiceChannel.tsx

diff --git a/src/components/page/channel/ChannelPage.tsx b/src/components/page/channel/ChannelPage.tsx
index f9b811b..cac049e 100644
--- a/src/components/page/channel/ChannelPage.tsx
+++ b/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} />;
   }
 }
diff --git a/src/components/page/channel/VoiceChannel.tsx b/src/components/page/channel/VoiceChannel.tsx
new file mode 100644
index 0000000..44a066d
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/components/view/Sidebar.tsx b/src/components/view/Sidebar.tsx
index d786dc2..1fe61fa 100644
--- a/src/components/view/Sidebar.tsx
+++ b/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" />;
   }
 }
 
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 647e08e..4aecd18 100644
--- a/src/lib/types.ts
+++ b/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" };