highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-04-08 22:47:02 +02:00
Code Issues Packages Projects Releases Wiki Activity

ux: use popover for reactions

Browse Source
This commit is contained in:
Alejandro Gómez
2026-03-31 18:47:03 +02:00
parent 89ef0e2c5e
commit 32f7d1b531
1 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/chat/MessageReactions.tsx
View File

@@ -6,10 +6,10 @@ import pool from "@/services/relay-pool";
import accountManager from "@/services/accounts";
import { EMOJI_SHORTCODE_REGEX } from "@/lib/emoji-helpers";
import {
Tooltip,
TooltipTrigger,
TooltipContent,
} from "@/components/ui/tooltip";
Popover,
PopoverTrigger,
PopoverContent,
} from "@/components/ui/popover";
import { UserName } from "@/components/nostr/UserName";
interface MessageReactionsProps {
@@ -137,18 +137,18 @@ export function MessageReactions({ messageId, relays }: MessageReactionsProps) {
if (aggregated.length === 0) return null;
return (
<Tooltip>
<TooltipTrigger asChild>
<div className="inline-flex gap-2 max-w-full overflow-x-auto hide-scrollbar">
<Popover>
<PopoverTrigger asChild>
<button className="inline-flex gap-2 max-w-full overflow-x-auto hide-scrollbar cursor-pointer">
{aggregated.map((reaction) => (
<ReactionBadge
key={reaction.customEmoji?.shortcode || reaction.emoji}
reaction={reaction}
/>
))}
</div>
</TooltipTrigger>
<TooltipContent className="text-left" align="start">
</button>
</PopoverTrigger>
<PopoverContent className="text-left w-auto p-2 text-sm" align="start">
<div className="flex flex-col items-start gap-2">
{aggregated.map((reaction) => (
<div
@@ -169,24 +169,19 @@ export function MessageReactions({ messageId, relays }: MessageReactionsProps) {
<Fragment key={pk}>
{i > 0 &&
(i === reaction.pubkeys.length - 1 ? (
<span className="text-tooltip-foreground mx-1">
and
</span>
<span className="text-muted-foreground mx-1">and</span>
) : (
<span className="text-tooltip-foreground mr-1">,</span>
<span className="text-muted-foreground mr-1">,</span>
))}
<UserName
pubkey={pk}
className="text-tooltip-foreground [&>span]:text-tooltip-foreground [&>span]:bg-none"
/>
<UserName pubkey={pk} />
</Fragment>
))}
</span>
</div>
))}
</div>
</TooltipContent>
</Tooltip>
</PopoverContent>
</Popover>
);
}