Improved vc ui and possibly fixed #41

src/components/app/AppLayout.tsx

@@ -66,6 +66,8 @@ export default function AppLayout({
     [undefined, undefined]
   );
 
+  useEffect(() => app.setSidebarOpen(!isMobile), [isMobile]);
+
   return (
     <div className="flex h-svh md:h-screen">
       <div

src/components/channel/MessageBox.tsx

@@ -392,9 +392,9 @@ export default function MessageBox({
       )}
       <div className="mt-auto flex flex-col-reverse overflow-y-scroll">
         <AnimatePresence>
-          {messages.toReversed().map((msg) => (
+          {messages.toReversed().map((msg, i) => (
             <motion.div
-              key={msg.id}
+              key={i}
               initial={{ opacity: 0, scale: 0.95 }}
               animate={{ opacity: 1, scale: 1 }}
               exit={{

src/components/channel/voice/VoiceBox.tsx

@@ -31,7 +31,7 @@ export default function VoiceBox({
     if (!app.profile) return;
 
     const stop = startMic((data) => {
-      if (rms(data) > 0.02) {
+      if (rms(data) > 0.005) {
         sendVoice(data);
 
         if (!app.profile) return;
@@ -54,14 +54,14 @@ export default function VoiceBox({
   useEffect(() => {
     const inv = setInterval(() => {
       const now = Date.now();
-      const TIMEOUT = 500;
+      const TIMEOUT = 800;
 
       app.setSpeaking((prev) =>
         Object.fromEntries(
           Object.entries(prev).filter(([_, ts]) => now - ts < TIMEOUT)
         )
       );
-    }, 250);
+    }, 200);
 
     return () => clearInterval(inv);
   }, []);

src/components/channel/voice/VoiceGrid.tsx

@@ -1,5 +1,6 @@
 import App from "@/types/app";
 import { VoiceTile, VoiceUser } from "./VoiceTile";
+import { cn } from "@/lib/utils";
 
 export default function VoiceGrid({
   app,
@@ -11,13 +12,12 @@ export default function VoiceGrid({
   return (
     <div className="h-full overflow-y-auto p-4">
       <div
-        className="
-          grid gap-4
-          grid-cols-1
-          sm:grid-cols-2
-          md:grid-cols-3
-          lg:grid-cols-4
-        "
+        className={cn(
+          "grid gap-4 grid-cols-1",
+          app.sidebarOpen
+            ? "min-[930px]:grid-cols-2 min-[1200px]:grid-cols-3 min-[1600px]:grid-cols-4"
+            : "min-[560px]:grid-cols-2 min-[1200px]:grid-cols-3 min-[1600px]:grid-cols-4"
+        )}
       >
         {users.map((user) => (
           <VoiceTile key={user.id} user={user} app={app} />

src/components/channel/voice/VoiceTile.tsx

@@ -12,13 +12,11 @@ export function VoiceTile({ user, app }: { app: App; user: VoiceUser }) {
     <div
       className={`
         relative flex flex-col items-center justify-center
-        aspect-square rounded-xl
+        aspect-[16/9] rounded-xl
         bg-muted/40
         transition-all
         ${
-          user.speaking
-            ? "ring-4 ring-green-500 animate-pulse"
-            : "ring-1 ring-border"
+          user.speaking ? "border-4 border-green-500" : "border-1 border-border"
         }
         ${user.muted ? "opacity-50" : ""}
       `}
@@ -40,11 +38,6 @@ export function VoiceTile({ user, app }: { app: App; user: VoiceUser }) {
           </>
         )}
       />
-
-      {/* Speaking indicator */}
-      {user.speaking && (
-        <div className="absolute bottom-3 text-xs text-green-400">Speaking</div>
-      )}
     </div>
   );
 }