Update

src/shared/lib/emojis.json

@@ -462,6 +462,10 @@
       "value": "👍",
       "name": "thumbs up :thumbsup:"
     },
+    {
+      "value": "🤝",
+      "name": "handshake :handshake:"
+    },
     {
       "value": "🙏",
       "name": "folded hands :pray:"

src/widgets/voice-chat-section/ui/VoiceChat.tsx

@@ -1,7 +1,6 @@
 import { Button } from "@/shared/ui/Button";
 import { Collapsible, CollapsibleContent } from "@/shared/ui/Collapsible";
 import { ChevronUpIcon, Plug2Icon, UnplugIcon, Volume2Icon } from "lucide-react";
-import { useState } from "react";
 import { VoiceChatConnection } from "../model/VoiceChatConnection";
 import { cn } from "@/shared/lib/utils";
 import { useContextSelector } from "use-context-selector";
@@ -16,14 +15,15 @@ interface VoiceChatProps {
   joinVoiceChat: (voiceChatConnection: VoiceChatConnection) => void;
   leaveVoiceChat: (voiceChatConnection: VoiceChatConnection) => void;
   currentlyTalkingUsers?: CurrentlyTalkingUser[];
+  isCollapsed: boolean;
+  toggleCollapse: () => void;
 }
 
 function VoiceChat(props: VoiceChatProps) {
-  const [isCollapsed, setIsCollapsed] = useState(false);
   const users = useContextSelector(UsersContext, (c) => c.users);
 
   function toggleCollapse() {
-    setIsCollapsed(!isCollapsed);
+    props.toggleCollapse();
   }
 
   function joinVoiceChat() {
@@ -51,10 +51,10 @@ function VoiceChat(props: VoiceChatProps) {
           </span>
         </Button>
         <Button onClick={toggleCollapse} className="w-8 h-8 flex-shrink-0 ml-1" variant="ghost" size="icon">
-          <ChevronUpIcon className={cn("w-5 h-5 text-slate-400 transition-transform duration-100", isCollapsed && "rotate-180")} />
+          <ChevronUpIcon className={cn("w-5 h-5 text-slate-400 transition-transform duration-100", props.isCollapsed && "rotate-180")} />
         </Button>
       </div>
-      <Collapsible open={!isCollapsed} onOpenChange={setIsCollapsed}>
+      <Collapsible open={!props.isCollapsed}>
         <CollapsibleContent asChild>
           <div className="flex flex-col pt-1">
             {props.voiceChatConnection.joinedUsers.map((user) => (

src/widgets/voice-chat-section/ui/VoiceChatSection.tsx

@@ -353,6 +353,14 @@ function VoiceChatSection() {
     }
   }, [voiceInputDevice]);
 
+  // Collapsed voice channels (id is the room guid)
+  let [collapsedVoiceChannels, setCollapsedVoiceChannels] = useState<string[]>([]);
+
+  let toggleCollapseVoiceChannel = (roomGuid: string) => {
+    if (collapsedVoiceChannels.includes(roomGuid)) setCollapsedVoiceChannels(collapsedVoiceChannels.filter((id) => id != roomGuid));
+    else setCollapsedVoiceChannels([...collapsedVoiceChannels, roomGuid]);
+  };
+
   return (
     <div className="flex flex-col h-full gap-2 pt-1.5">
       {joinedVoiceConnection && (
@@ -363,6 +371,8 @@ function VoiceChatSection() {
           leaveVoiceChat={leaveVoiceChat}
           currentlyTalkingUsers={currentlyTalkingUsers}
           roomName={joinedRooms.find((r) => r.guid == joinedVoiceConnection.roomGuid)?.name!}
+          isCollapsed={collapsedVoiceChannels.includes(joinedVoiceConnection.roomGuid)}
+          toggleCollapse={() => toggleCollapseVoiceChannel(joinedVoiceConnection.roomGuid)}
         />
       )}
 
@@ -373,6 +383,8 @@ function VoiceChatSection() {
           joinVoiceChat={joinVoiceChat}
           leaveVoiceChat={leaveVoiceChat}
           roomName={selectedRoom.name}
+          isCollapsed={collapsedVoiceChannels.includes(selectedRoomVoiceChat.roomGuid)}
+          toggleCollapse={() => toggleCollapseVoiceChannel(selectedRoomVoiceChat.roomGuid)}
         />
       )}