Add collapsible sections to member sidebars.

src/components/navigation/right/MemberSidebar.tsx

@@ -19,6 +19,7 @@ import {
     useUsers,
 } from "../../../context/revoltjs/hooks";
 
+import CollapsibleSection from "../../common/CollapsibleSection";
 import Category from "../../ui/Category";
 import Preloader from "../../ui/Preloader";
 import placeholderSVG from "../items/placeholder.svg";
@@ -121,7 +122,11 @@ export function GroupMemberSidebar({
                         )}
                     </Fragment>
                 )*/}
-                {!((members.length === 0) /*&& voiceActive*/) && (
+                <CollapsibleSection
+                    sticky
+                    id="members"
+                    defaultValue
+                    summary={
                         <Category
                             variant="uniform"
                             text={
@@ -131,10 +136,8 @@ export function GroupMemberSidebar({
                                 </span>
                             }
                         />
-                )}
+                    }>
-                {members.length === 0 && (
+                    {members.length === 0 && <img src={placeholderSVG} />}
-                    /*!voiceActive &&*/ <img src={placeholderSVG} />
-                )}
                     {members.map(
                         (user) =>
                             user && (
@@ -151,6 +154,7 @@ export function GroupMemberSidebar({
                                 />
                             ),
                     )}
+                </CollapsibleSection>
             </GenericSidebarList>
         </GenericSidebarBase>
     );
@@ -235,17 +239,22 @@ export function ServerMemberSidebar({
                 <ChannelDebugInfo id={channel._id} />
                 <div>{!members && <Preloader type="ring" />}</div>
                 {members && (
+                    <CollapsibleSection
+                        sticky
+                        id="members"
+                        defaultValue
+                        summary={
                             <Category
                                 variant="uniform"
                                 text={
                                     <span>
-                                <Text id="app.main.categories.members" /> —{" "}
+                                        <Text id="app.main.categories.members" />{" "}
-                                {users.length}
+                                        — {users.length}
                                     </span>
                                 }
                             />
-                )}
+                        }>
-                {members && users.length === 0 && <img src={placeholderSVG} />}
+                        {users.length === 0 && <img src={placeholderSVG} />}
                         {users.map(
                             (user) =>
                                 user && (
@@ -262,6 +271,8 @@ export function ServerMemberSidebar({
                                     />
                                 ),
                         )}
+                    </CollapsibleSection>
+                )}
             </GenericSidebarList>
         </GenericSidebarBase>
     );

src/components/ui/Details.tsx

@@ -30,6 +30,7 @@ export default styled.details<{ sticky?: boolean; large?: boolean }>`
         outline: none;
         cursor: pointer;
         list-style: none;
+        user-select: none;
         align-items: center;
         transition: 0.2s opacity;
 

src/lib/vortex/VoiceClient.ts

@@ -1,14 +1,8 @@
 import EventEmitter from "eventemitter3";
 import * as mediasoupClient from "mediasoup-client";
+import { types } from "mediasoup-client";
 
-import {
+import { Device, Producer, Transport } from "mediasoup-client/lib/types";
-    Device,
-    Producer,
-    Transport,
-} from "mediasoup-client/lib/types";
-
-import { types } from 'mediasoup-client';
-const UnsupportedError = types.UnsupportedError;
 
 import Signaling from "./Signaling";
 import {
@@ -20,6 +14,8 @@ import {
     WSErrorCode,
 } from "./Types";
 
+const UnsupportedError = types.UnsupportedError;
+
 interface VoiceEvents {
     ready: () => void;
     error: (error: Error) => void;

src/pages/channels/Channel.tsx

@@ -6,6 +6,8 @@ import { useState } from "preact/hooks";
 
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 
+import { dispatch, getState } from "../../redux";
+
 import { useChannel, useForceUpdate } from "../../context/revoltjs/hooks";
 
 import MessageBox from "../../components/common/messaging/MessageBox";
@@ -18,7 +20,6 @@ import MemberSidebar from "../../components/navigation/right/MemberSidebar";
 import ChannelHeader from "./ChannelHeader";
 import { MessageArea } from "./messaging/MessageArea";
 import VoiceHeader from "./voice/VoiceHeader";
-import { dispatch, getState } from "../../redux";
 
 const ChannelMain = styled.div`
     flex-grow: 1;
@@ -74,7 +75,7 @@ export function Channel({ id }: { id: string }) {
     }
 }
 
-const MEMBERS_SIDEBAR_KEY = 'sidebar_members';
+const MEMBERS_SIDEBAR_KEY = "sidebar_members";
 function TextChannel({ channel }: { channel: Channels.Channel }) {
     if (
         (channel.channel_type === "TextChannel" ||
@@ -115,7 +116,9 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
         }
     }
 
-    const [showMembers, setMembers] = useState(getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true);
+    const [showMembers, setMembers] = useState(
+        getState().sectionToggle[MEMBERS_SIDEBAR_KEY] ?? true,
+    );
 
     let id = channel._id;
     return (
@@ -127,17 +130,18 @@ function TextChannel({ channel }: { channel: Channels.Channel }) {
 
                     if (showMembers) {
                         dispatch({
-                            type: 'SECTION_TOGGLE_SET',
+                            type: "SECTION_TOGGLE_SET",
                             id: MEMBERS_SIDEBAR_KEY,
-                            state: false
+                            state: false,
                         });
                     } else {
                         dispatch({
-                            type: 'SECTION_TOGGLE_UNSET',
+                            type: "SECTION_TOGGLE_UNSET",
-                            id: MEMBERS_SIDEBAR_KEY
+                            id: MEMBERS_SIDEBAR_KEY,
                         });
                     }
-                }} />
+                }}
+            />
             <ChannelMain>
                 <ChannelContent>
                     <VoiceHeader id={id} />