Update dependencies for socket.io and uuid in both client and server configurations. Enhance UI components by adding drag elasticity in PopupContainer and integrating warning indicators in ControlButton and FloatingActionButton. Refactor UserCamera and UserDevicesControls to improve audio/video toggle handling and user feedback. Adjust user session schema to ensure userId is nullable for unauthenticated users.

client/src/components/ui/ControlButton.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import Warning from "../indicators/Warning";
 
 interface ControlButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -10,18 +11,20 @@ function ControlButton({
   size,
   icon,
   className,
+  disabled,
   onClick,
   ...props
 }: ControlButtonProps) {
   return (
     <button
       onClick={onClick}
+      disabled={disabled}
       {...props}
       className={clsx(
-        "backdrop-blur-[10px] rounded-full transition-colors cursor-pointer disabled:!cursor-default outline-none disabled:bg-[#FF4517] disabled:hover:bg-[#FF4517]/85",
+        "backdrop-blur-[10px] rounded-full transition-colors cursor-pointer outline-none disabled:!cursor-default",
         size === "large"
-          ? "2xl:p-[0.833vw] p-3 enabled:bg-[#FFFFFF]/15 enabled:hover:bg-[#FFFFFF]/25"
-          : "2xl:p-[0.417vw] p-[6px] enabled:bg-[#141414]/15 enabled:hover:bg-[#141414]/25",
+          ? "2xl:p-[0.833vw] p-3 bg-[#FFFFFF]/15 hover:bg-[#FFFFFF]/25"
+          : "2xl:p-[0.417vw] p-[6px] bg-[#141414]/15 hover:bg-[#141414]/25",
         className
       )}
     >
@@ -35,6 +38,11 @@ function ControlButton({
       >
         {icon}
       </div>
+      {disabled && size === "large" && (
+        <div className="absolute 2xl:-top-[0.139vw] 2xl:-right-[0.139vw] -top-0.5 -right-0.5">
+          <Warning type="critical" className="text-white" />
+        </div>
+      )}
     </button>
   );
 }