tensamin/client
Watch
6
0
Fork
You've already forked client
 0
Code Issues Pull requests 3 Projects Releases 2 Packages Wiki Activity Actions

(feat): add tooltips
All checks were successful
/ deploy (push) Successful in 14m56s
Details

Browse source 
(fix): small ui and layout bug
This commit is contained in:
Alois 2026-05-09 21:12:24 +02:00
commit dd09ca943d
10 changed files with 279 additions and 171 deletions
Download patch file Download diff file Expand all files Collapse all files

107
packages/call/src/components/buttons/invite.tsx
View file

@ -1,5 +1,13 @@
import { useEffect, useState } from "react";
import { Button, Popover, PopoverContent, PopoverTrigger } from "@tensamin/ui";
import {
Button,
Popover,
PopoverContent,
PopoverTrigger,
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@tensamin/ui";
import Wrapper from "@tensamin/user/wrapper";
import { Mail } from "lucide-react";
import { sendCallInvite, useCall } from "../../store";
@ -9,9 +17,11 @@ import { useSession } from "@tensamin/storage/session";
export default function InviteButton({
className,
iconSize,
tooltip,
}: {
className?: string;
iconSize?: number;
tooltip?: string;
}) {
const { contacts } = useSession();
const screenRef = useCall((state) => state.screenRef);
@ -22,43 +32,64 @@ export default function InviteButton({
}, [screenRef]);
return (
<Popover>
<PopoverTrigger
render={
<Button className={className}>
<Mail style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }} />
</Button>
}
/>
<PopoverContent
className="flex w-40 flex-col gap-0.5 p-1!"
portalProps={{ container: portalContainer }}
>
{contacts.map((contact) => (
<Wrapper
key={contact.user_id}
userId={contact.user_id}
loading={<div>Loading...</div>}
component={(user) => (
<Button
className="w-full justify-start"
variant="ghost"
onClick={() => {
void sendCallInvite(contact.user_id).catch((err) => {
toast(
"error",
"Failed to send call invite. Check console for details.",
);
log(1, "call", "red", "Failed to send call invite", err);
});
}}
>
{user.display}
<Tooltip>
<Popover>
<PopoverTrigger
render={
tooltip ? (
<TooltipTrigger
render={
<Button className={className}>
<Mail
style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
/>
</Button>
}
/>
) : (
<Button className={className}>
<Mail
style={{ scale: (iconSize ? iconSize + 100 : 100) + "%" }}
/>
</Button>
)}
/>
))}
</PopoverContent>
</Popover>
)
}
/>
<PopoverContent
className="flex w-40 flex-col gap-0.5 p-1!"
portalProps={{ container: portalContainer }}
>
{contacts.map((contact) => (
<Wrapper
key={contact.user_id}
userId={contact.user_id}
loading={<div>Loading...</div>}
component={(user) => (
<Button
className="w-full justify-start"
variant="ghost"
onClick={() => {
void sendCallInvite(contact.user_id).catch((err) => {
toast(
"error",
"Failed to send call invite. Check console for details.",
);
log(1, "call", "red", "Failed to send call invite", err);
});
}}
>
{user.display}
</Button>
)}
/>
))}
</PopoverContent>
</Popover>
{tooltip && (
<TooltipContent portalProps={{ container: portalContainer }}>
{tooltip}
</TooltipContent>
)}
</Tooltip>
);
}