(feat): add basic voice buttons

packages/call/src/components/buttons/screenshare.tsx

@@ -0,0 +1,44 @@
+import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
+import { MonitorDot, ScreenShare } from "lucide-react";
+import { useCall } from "../../context";
+
+export default function ScreenshareButton({
+  className,
+}: {
+  className?: string;
+}) {
+  const { room } = useCall();
+
+  const isScreensharing = room.localParticipant.isScreenShareEnabled;
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <Button
+            variant={isScreensharing ? "secondary" : "default"}
+            className={className}
+          >
+            {isScreensharing ? <MonitorDot /> : <ScreenShare />}
+          </Button>
+        }
+      />
+      <PopoverContent className="w-auto flex flex-col gap-2">
+        <Button
+          disabled={isScreensharing}
+          onClick={() => room.localParticipant.setScreenShareEnabled(true)}
+        >
+          Start
+        </Button>
+        <Button
+          variant="destructive"
+          disabled={!isScreensharing}
+          onClick={() => room.localParticipant.setScreenShareEnabled(false)}
+        >
+          Stop
+        </Button>
+        <Button>idk</Button>
+      </PopoverContent>
+    </Popover>
+  );
+}

packages/call/src/components/sidebarBox.tsx

@@ -1,4 +1,4 @@
-import { Lock, LockOpen } from "lucide-react";
+import { Expand, Lock, LockOpen } from "lucide-react";
 import { useCall } from "../context";
 import {
   Button,
@@ -11,14 +11,17 @@ import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  useIsMobile,
 } from "@tensamin/ui";
 import { LeaveIcon } from "@livekit/components-react";
+import ScreenshareButton from "./buttons/screenshare";
 
 export default function SidebarBox() {
-  const { state, room, disconnect } = useCall();
+  const { state, room, disconnect, openCallPage, callId } = useCall();
+  const isMobile = useIsMobile();
 
   return state === "closed" ? null : (
-    <Card className="p-1.5 gap-1">
+    <Card className="p-1.5 gap-1" hidden={isMobile}>
       <CardHeader className="p-0!">
         <ConnectionBar
           state={state}
@@ -28,7 +31,11 @@ export default function SidebarBox() {
           }
         />
       </CardHeader>
-      <CardContent className="p-0! flex justify-end">
+      <CardContent className="p-0! flex justify-end gap-1">
+        <Button className="w-9 h-9" onClick={() => openCallPage(callId || "")}>
+          <Expand />
+        </Button>
+        <ScreenshareButton className="w-9 h-9" />
         <Button
           size="lg"
           className="w-9 h-9"
@@ -56,18 +63,11 @@ function ConnectionBar({
           <Button
             size="lg"
             variant={
-              state === "open"
-                ? encrypted
-                  ? "subtleDefault"
-                  : "destructive"
-                : state === "closed" ||
-                    state === "closing" ||
-                    state === "connecting"
-                  ? "outline"
-                  : "outline"
+              state === "open" && encrypted ? "subtleDefault" : "destructive"
             }
             className="flex justify-between items-center"
           >
+            {state === "encrypting" && "Encrypting..."}
             {state === "connecting" && "Connecting..."}
             {state === "open" && "Connected"}
             {state === "closed" && "Closed"}
@@ -77,7 +77,7 @@ function ConnectionBar({
               <TooltipTrigger
                 render={
                   encrypted ? (
-                    <Lock color="var(--primary-foreground)" />
+                    <Lock color="var(--primary-foreground-alt)" />
                   ) : (
                     <LockOpen color="var(--destructive)" />
                   )