Both ui and join leave improvements

src/components/channel/VoiceBox.tsx

@@ -8,6 +8,7 @@ import { startMic } from "@/lib/audio";
 import { Button } from "../ui/button";
 import {
   ChevronLeftIcon,
+  Phone,
   PhoneCall,
   PhoneOff,
   Volume2Icon,
@@ -17,6 +18,7 @@ export default function VoiceBox({
   sendVoice,
   app,
   channelName,
+  sendRequest,
 }: {
   app: App;
   sendRequest: (req: ClientMessage) => void;
@@ -51,26 +53,40 @@ export default function VoiceBox({
           </span>
         </header>
       )}
-      {voiceConn ? (
+      <div className="h-full overflow-y-scroll"></div>
-        <div className="h-full w-full">
+      <footer className="mt-auto h-max w-max mx-auto">
-          <footer className="mt-auto h-max">
+        {voiceConn ? (
-            <Button
+          <Button
-              variant="ghost"
+            className="mx-auto my-auto h-max bg-transparent text-destructive border border-destructive hover:bg-destructive/20 rounded-full aspect-square w-12"
-              className="text-destructive hover:bg-destructive/20 hover:text-destructive"
+            onClick={() => {
-              onClick={() => setVoiceConn(false)}
+              if (!app.currentChannel) return;
-            >
+
-              <PhoneOff />
+              setVoiceConn(false);
-            </Button>
+              sendRequest({
-          </footer>
+                type: "leave_voice",
-        </div>
+                params: { channel_id: app.currentChannel.id },
-      ) : (
+              });
-        <Button
+            }}
-          className="w-max mx-auto my-auto h-max bg-transparent text-chart-2 border border-chart-2 hover:bg-chart-2/20"
+          >
-          onClick={() => setVoiceConn(true)}
+            <Phone className="rotate-135" />
-        >
+          </Button>
-          Join <PhoneCall />
+        ) : (
-        </Button>
+          <Button
-      )}
+            className="mx-auto my-auto h-max bg-transparent text-chart-2 border border-chart-2 hover:bg-chart-2/20 rounded-full aspect-square w-12"
+            onClick={() => {
+              if (!app.currentChannel) return;
+
+              setVoiceConn(true);
+              sendRequest({
+                type: "join_voice",
+                params: { channel_id: app.currentChannel.id },
+              });
+            }}
+          >
+            <Phone />
+          </Button>
+        )}
+      </footer>
     </div>
   );
 }