113 lines
3.6 KiB
TypeScript
113 lines
3.6 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* Stickers on a message, rendered without a chat bubble.
|
|
*
|
|
* Laid out as rows of at most two, NOT a fixed 2-column grid: a grid reserves
|
|
* the second cell whether or not anything fills it, so a single sticker sat
|
|
* beside a gap the width of another sticker. Rows size themselves — a lone
|
|
* sticker takes the row and is drawn larger, a pair shares it and both shrink.
|
|
* An odd count therefore ends on one big sticker rather than a hole.
|
|
*
|
|
* Unlike the media grid, this never collapses into "+N more" — every sticker
|
|
* sent is drawn. They are small and deliberately playful, and hiding some
|
|
* behind a counter would make a wall of them read as an attachment list
|
|
* rather than what it is.
|
|
*
|
|
* Long-pressing or right-clicking one offers to keep it, which is the only
|
|
* way a sticker spreads beyond the person who earned it.
|
|
*/
|
|
|
|
import { useState } from "react";
|
|
import Image from "next/image";
|
|
import { toast } from "sonner";
|
|
import { chat, type Attachment } from "@/lib/chat";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** At most two per row, as WhatsApp and Telegram do. */
|
|
const STICKERS_PER_ROW = 2;
|
|
|
|
export function StickerGrid({
|
|
conversationId,
|
|
messageId,
|
|
stickers,
|
|
/** Own stickers are already in your collection — no point offering to save. */
|
|
mine,
|
|
}: {
|
|
conversationId: string;
|
|
messageId: string;
|
|
stickers: Attachment[];
|
|
mine: boolean;
|
|
}) {
|
|
const [saving, setSaving] = useState<string | null>(null);
|
|
|
|
if (stickers.length === 0) return null;
|
|
|
|
const save = async (a: Attachment) => {
|
|
const key = a.entity_id;
|
|
if (!key || mine || saving) return;
|
|
setSaving(key);
|
|
try {
|
|
await chat.saveSticker(conversationId, messageId, key);
|
|
toast.success(`Saved ${a.title ?? "sticker"} to your collection`);
|
|
} catch {
|
|
toast.error("Could not save that sticker");
|
|
} finally {
|
|
setSaving(null);
|
|
}
|
|
};
|
|
|
|
// Chunk into rows of at most two. Doing this in JS rather than CSS is what
|
|
// lets a row know how many it holds, which is what sets the size.
|
|
const rows: Attachment[][] = [];
|
|
for (let i = 0; i < stickers.length; i += STICKERS_PER_ROW) {
|
|
rows.push(stickers.slice(i, i + STICKERS_PER_ROW));
|
|
}
|
|
|
|
return (
|
|
// w-fit so the block hugs its rows: any fixed width would reintroduce the
|
|
// empty space this layout exists to remove.
|
|
<div className="flex w-fit flex-col gap-1">
|
|
{rows.map((row, i) => (
|
|
<div key={i} className="flex gap-1">
|
|
{row.map((a) => {
|
|
const alone = row.length === 1;
|
|
return (
|
|
<button
|
|
key={a.id}
|
|
type="button"
|
|
disabled={mine}
|
|
onContextMenu={(e) => {
|
|
if (mine) return;
|
|
e.preventDefault();
|
|
void save(a);
|
|
}}
|
|
title={
|
|
mine
|
|
? (a.title ?? "")
|
|
: `${a.title ?? "Sticker"} — hold to save`
|
|
}
|
|
aria-label={a.title ?? "Sticker"}
|
|
className={cn(
|
|
"relative disabled:cursor-default",
|
|
alone ? "size-32 sm:size-36" : "size-24 sm:size-28",
|
|
)}
|
|
>
|
|
{a.image_url && (
|
|
<Image
|
|
src={a.image_url}
|
|
alt={a.title ?? ""}
|
|
fill
|
|
sizes={alone ? "144px" : "112px"}
|
|
className="object-contain"
|
|
/>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|