refactor: voice for mobile

src/routes/chat/ChannelChat/index.tsx

@@ -69,7 +69,7 @@ function ChannelChat({ cid = 0, dropFiles = [] }: Props) {
   const memberIds = is_public ? userIds : members.slice(0).sort((n) => (n == owner ? -1 : 0));
   const addVisible = loginUser?.is_admin || owner == loginUser?.uid;
   const pinCount = data?.pinned_messages?.length || 0;
-  const toolClass = `relative cursor-pointer`;
+  const toolClass = `relative cursor-pointer hidden md:block`;
   return <Layout
     to={cid}
     context="channel"

src/routes/chat/Layout/index.tsx

@@ -116,13 +116,15 @@ const Layout: FC<Props> = ({
             </div>
           </div>
         </main>
-        {aside && <div className={clsx("z-50 p-3 absolute right-0 top-0 translate-x-full flex-col hidden md:flex")}>{aside}</div>}
+        {aside && <div className={clsx("flex z-50 p-3 absolute right-0 top-14 md:right-0 md:top-0 md:translate-x-full flex-col")}>
+          {aside}
+        </div>}
         {users && <div className="hidden md:block">{users}</div>}
-        {voice && <div className="hidden md:block">{voice}</div>}
+        {voice && <div className="absolute right-11 top-14 h-fit overflow-y-scroll bg-white dark:!bg-gray-700 md:block">{voice}</div>}
         {!readonly && inputMode == "text" && isActive && (
           <DnDTip context={context} name={name} />
         )}
-      </section>
+      </section >
     </>
   );
 };

src/routes/chat/RTCWidget.tsx

@@ -50,7 +50,7 @@ const RTCWidget = ({ id, context = "channel" }: Props) => {
                         <IconCallOff onClick={leave} role="button" className="fill-red-600" />
                     </Tooltip>
                 </div>
-                <div className={clsx("flex items-center gap-2 mt-3 text-sm font-semibold text-gray-800 dark:text-gray-200")}>
+                <div className={clsx("flex items-center justify-around gap-2 mt-3 text-sm font-semibold text-gray-800 dark:text-gray-200")}>
                     <button onClick={voicingInfo.video ? closeCamera : openCamera} className={clsx('rounded-lg py-2 px-5 flex items-center gap-1', voicingInfo.video ? "bg-green-700 text-gray-200" : "bg-white/50 dark:bg-black/50 ")}>
                         <IconCamera className={clsx("dark:fill-gray-200 w-6 h-6", voicingInfo.video ? "fill-gray-200" : "fill-gray-800")} />
                         <span>Video</span>

src/routes/chat/VoiceChat/Dashboard.tsx

@@ -12,7 +12,7 @@ type Props = {
 
 const Dashboard = ({ context = "channel", id, visible }: Props) => {
   const { voicingInfo, setMute, leave, closeCamera, openCamera, startShareScreen, stopShareScreen } = useVoice({ id, context });
-  return <div className={`h-full flex-col gap-1 w-[226px] overflow-y-scroll overflow-x-hidden p-2 shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${visible ? "flex" : "hidden"}`}>
+  return <div className={`h-full flex-col gap-1 w-[226px] overflow-y-scroll overflow-x-hidden p-2 border border-black/10 md:border-none md:shadow-[inset_1px_0px_0px_rgba(0,_0,_0,_0.1)] ${visible ? "flex" : "hidden"}`}>
     <VoiceManagement id={id} context={context} info={voicingInfo} setMute={setMute} leave={leave} closeCamera={closeCamera} openCamera={openCamera} startShareScreen={startShareScreen} stopShareScreen={stopShareScreen} />
   </div>;
 };