(feat): add reply box to messages

(feat): update methanium ui
(fix): user data caching
(fix): other random stuff
(qol): update todo

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

@@ -1,7 +1,11 @@
-import { Button, withTooltip } from "@methanium/ui";
+import { Button } from "@methanium/ui";
 import { toggleDeaf, useCall } from "../../store";
 import { HeadphoneOff, Headphones } from "lucide-react";
-import { type CallButtonProps, iconScale } from "./tooltipButton";
+import {
+  type CallButtonProps,
+  iconScale,
+  withButtonTooltip,
+} from "./tooltipButton";
 
 export default function DeafButton({
   className,
@@ -25,5 +29,5 @@ export default function DeafButton({
     </Button>
   );
 
-  return withTooltip(button, tooltip, portalContainer);
+  return withButtonTooltip(button, tooltip, portalContainer);
 }

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

@@ -38,13 +38,13 @@ export default function InviteButton({
           render={
             tooltip ? (
               <TooltipTrigger
-                render={
-                  <Button className={className}>
+                render={({ ref, onClick }) => (
+                  <Button ref={ref} onClick={onClick} className={className}>
                     <Mail
                       style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
                     />
                   </Button>
-                }
+                )}
               />
             ) : (
               <Button className={className}>

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

@@ -1,7 +1,11 @@
 import { LeaveIcon } from "@livekit/components-react";
-import { Button, withTooltip } from "@methanium/ui";
+import { Button } from "@methanium/ui";
 import { disconnect, useCall } from "../../store";
-import { type CallButtonProps, iconScale } from "./tooltipButton";
+import {
+  type CallButtonProps,
+  iconScale,
+  withButtonTooltip,
+} from "./tooltipButton";
 
 export default function LeaveButton({
   className,
@@ -22,5 +26,5 @@ export default function LeaveButton({
     </Button>
   );
 
-  return withTooltip(button, tooltip, portalContainer);
+  return withButtonTooltip(button, tooltip, portalContainer);
 }

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

@@ -1,7 +1,11 @@
-import { Button, withTooltip } from "@methanium/ui";
+import { Button } from "@methanium/ui";
 import { toggleMute, useCall } from "../../store";
 import { Mic, MicOff } from "lucide-react";
-import { type CallButtonProps, iconScale } from "./tooltipButton";
+import {
+  type CallButtonProps,
+  iconScale,
+  withButtonTooltip,
+} from "./tooltipButton";
 
 export default function MuteButton({
   className,
@@ -25,5 +29,5 @@ export default function MuteButton({
     </Button>
   );
 
-  return withTooltip(button, tooltip, portalContainer);
+  return withButtonTooltip(button, tooltip, portalContainer);
 }

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

@@ -69,11 +69,16 @@ export default function ScreenshareButton({
       <Tooltip>
         <Popover onOpenChange={setMenuOpen} open={menuOpen}>
           <PopoverTrigger
-            render={
+            render={({ onClick: popoverClick }) =>
               tooltip ? (
                 <TooltipTrigger
-                  render={
+                  render={({ ref, onClick: tooltipClick }) => (
                     <Button
+                      ref={ref as React.Ref<HTMLButtonElement>}
+                      onClick={(event) => {
+                        popoverClick?.(event);
+                        tooltipClick?.(event);
+                      }}
                       variant={isScreensharing ? "subtleDefault" : "default"}
                       className={className}
                     >
@@ -91,12 +96,13 @@ export default function ScreenshareButton({
                         />
                       )}
                     </Button>
-                  }
+                  )}
                 />
               ) : (
                 <Button
                   variant={isScreensharing ? "subtleDefault" : "default"}
                   className={className}
+                  onClick={popoverClick}
                 >
                   {isScreensharing ? (
                     <MonitorDot

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

@@ -1,3 +1,7 @@
+import { cloneElement } from "react";
+import type { MouseEvent as ReactMouseEvent, ReactElement, Ref } from "react";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@methanium/ui";
+
 export type CallButtonProps = {
   className?: string;
   iconSize?: number;
@@ -8,3 +12,33 @@ export type CallButtonProps = {
 export function iconScale(iconSize?: number) {
   return { scale: (iconSize ? iconSize + 100 : 100) + "%" };
 }
+
+export function withButtonTooltip(
+  trigger: ReactElement<{
+    onClick?: (event: ReactMouseEvent<HTMLElement>) => void;
+    ref?: Ref<HTMLElement>;
+  }>,
+  content?: string,
+  portalContainer?: HTMLElement,
+) {
+  if (!content) return trigger;
+
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={({ ref, onClick }) =>
+          cloneElement(trigger, {
+            ref,
+            onClick: (event) => {
+              onClick?.(event);
+              trigger.props.onClick?.(event);
+            },
+          })
+        }
+      />
+      <TooltipContent portalProps={{ container: portalContainer }}>
+        {content}
+      </TooltipContent>
+    </Tooltip>
+  );
+}