102 lines
3.3 KiB
TypeScript
102 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* The emoji row at the top of a message's long-press menu.
|
|
*
|
|
* Five quick reactions plus a "+" that opens the full set — a drawer on
|
|
* mobile, a modal on desktop, reusing ResponsiveDialog so it behaves like
|
|
* every other chat surface.
|
|
*
|
|
* It sits inside the context menu rather than being its own popover: long
|
|
* press is one gesture, and two surfaces competing for it would mean neither
|
|
* felt reliable.
|
|
*/
|
|
|
|
import { useState } from "react";
|
|
import { Plus } from "lucide-react";
|
|
import { EMOJI_GROUPS } from "@/components/ui/emoji-picker";
|
|
import { ResponsiveDialog } from "@/components/chat/responsive-dialog";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** What a double-tap sends. Matches the server's own default. */
|
|
export const HEART_EMOJI = "❤️";
|
|
|
|
/** The five offered without opening the full set. */
|
|
export const QUICK_REACTIONS = [HEART_EMOJI, "😂", "🙏", "😮", "😢"];
|
|
|
|
export function ReactionRow({
|
|
current,
|
|
onPick,
|
|
}: {
|
|
/** The viewer's existing reaction, so it can be shown as selected. */
|
|
current?: string;
|
|
/** Picking the current emoji again clears it — the caller decides. */
|
|
onPick: (emoji: string) => void;
|
|
}) {
|
|
const [browsing, setBrowsing] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="flex items-center gap-1 border-b border-border px-2 py-2">
|
|
{QUICK_REACTIONS.map((emoji) => (
|
|
<button
|
|
key={emoji}
|
|
type="button"
|
|
onClick={() => onPick(emoji)}
|
|
aria-label={`React ${emoji}`}
|
|
aria-pressed={current === emoji}
|
|
className={cn(
|
|
"inline-flex size-9 items-center justify-center rounded-full text-lg transition-colors",
|
|
current === emoji ? "bg-primary/15" : "hover:bg-muted",
|
|
)}
|
|
>
|
|
{emoji}
|
|
</button>
|
|
))}
|
|
<button
|
|
type="button"
|
|
onClick={() => setBrowsing(true)}
|
|
aria-label="More reactions"
|
|
className="inline-flex size-9 items-center justify-center rounded-full text-muted-foreground hover:bg-muted hover:text-foreground"
|
|
>
|
|
<Plus className="size-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{browsing && (
|
|
<ResponsiveDialog
|
|
title="Pick a reaction"
|
|
description="Choose any emoji to react with."
|
|
onClose={() => setBrowsing(false)}
|
|
>
|
|
<div className="space-y-4 p-4">
|
|
{EMOJI_GROUPS.map((group) => (
|
|
<section key={group.label}>
|
|
<h3 className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
|
|
{group.label}
|
|
</h3>
|
|
<div className="grid grid-cols-8 gap-1">
|
|
{group.emojis.map((emoji) => (
|
|
<button
|
|
key={emoji}
|
|
type="button"
|
|
onClick={() => {
|
|
setBrowsing(false);
|
|
onPick(emoji);
|
|
}}
|
|
aria-label={`React ${emoji}`}
|
|
className="inline-flex size-9 items-center justify-center rounded-md text-lg hover:bg-muted"
|
|
>
|
|
{emoji}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
))}
|
|
</div>
|
|
</ResponsiveDialog>
|
|
)}
|
|
</>
|
|
);
|
|
}
|