(feat): add live messages

(feat): update licenses
(feat): update livekit logging
(feat): add basic grid layout
(fix): remove deeplink log message

packages/call/src/components/actions.tsx

@@ -5,14 +5,20 @@ import ScreenshareButton from "./buttons/screenshare";
 import LeaveButton from "./buttons/leave";
 
 export default function Actions() {
+  const sharedClasses = "w-14 h-10";
+  const sharedIconSize = 15;
+
   return (
     <div className="w-full flex justify-center py-3">
       <Card className="p-1.75">
         <CardContent className="p-0! flex gap-1.75">
-          <MuteButton className="w-14 h-10" iconSize={25} />
-          <DeafButton className="w-14 h-10" iconSize={25} />
-          <ScreenshareButton className="w-14 h-10" iconSize={25} />
-          <LeaveButton className="w-14 h-10" iconSize={25} />
+          <MuteButton className={sharedClasses} iconSize={sharedIconSize} />
+          <DeafButton className={sharedClasses} iconSize={sharedIconSize} />
+          <ScreenshareButton
+            className={sharedClasses}
+            iconSize={sharedIconSize}
+          />
+          <LeaveButton className={sharedClasses} iconSize={sharedIconSize} />
         </CardContent>
       </Card>
     </div>

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

@@ -1,6 +1,6 @@
 import { LeaveIcon } from "@livekit/components-react";
 import { Button } from "@tensamin/ui";
-import { disconnect } from "../../store";
+import { disconnect, useCall } from "../../store";
 
 export default function LeaveButton({
   className,
@@ -9,10 +9,13 @@ export default function LeaveButton({
   className?: string;
   iconSize?: number;
 }) {
+  const state = useCall((store) => store.state);
+
   return (
     <Button
       className={className}
       onClick={() => disconnect()}
+      disabled={state === "closing" || state === "closed"}
       variant="destructive"
     >
       <LeaveIcon style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }} />

packages/call/src/components/sidebarBox.tsx

@@ -113,7 +113,7 @@ export function TinyPingGraph() {
       <TooltipTrigger
         render={
           <div
-            className="w-full h-6"
+            className="h-6 w-24 min-w-0 shrink-0"
             style={{
               WebkitMaskImage:
                 "linear-gradient(to right, transparent 0%, var(--primary) 15%, var(--primary) 85%, transparent 100%)",
@@ -122,13 +122,24 @@ export function TinyPingGraph() {
             }}
           >
             {data.length > 1 && (
-              <ResponsiveContainer width="100%" height="100%">
+              <ResponsiveContainer
+                width="100%"
+                height="100%"
+                minWidth={0}
+                minHeight={24}
+              >
                 <AreaChart
                   data={data}
                   margin={{ top: 2, right: 0, bottom: 2, left: 0 }}
                 >
                   <defs>
-                    <linearGradient id="pingGradient" x1="0" y1="0" x2="0" y2="1">
+                    <linearGradient
+                      id="pingGradient"
+                      x1="0"
+                      y1="0"
+                      x2="0"
+                      y2="1"
+                    >
                       <stop
                         offset="0%"
                         stopColor="currentColor"

packages/call/src/components/top.tsx

@@ -17,7 +17,6 @@ export default function TopBar() {
     let active = true;
 
     if (userIds.length === 0) {
-      setUsers([]);
       return () => {
         active = false;
       };
@@ -42,7 +41,7 @@ export default function TopBar() {
     return () => {
       active = false;
     };
-  }, [get, userIdsKey]);
+  }, [get, userIdsKey, userIds]);
 
   return (
     <div className="w-full flex justify-between h-12">