feat: sticker preview

components/chat/sticker-grid.tsx

@@ -1,7 +1,13 @@
 "use client";
 
 /**
- * Stickers on a message: a 2-column grid, rendered without a chat bubble.
+ * 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
@@ -16,6 +22,10 @@ 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,
@@ -47,9 +57,22 @@ export function StickerGrid({
     }
   };
 
+  // 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 (
-    <div className="grid w-fit grid-cols-2 gap-1">
-      {stickers.map((a) => (
               <button
                 key={a.id}
                 type="button"
@@ -59,20 +82,30 @@ export function StickerGrid({
                   e.preventDefault();
                   void save(a);
                 }}
-          title={mine ? (a.title ?? "") : `${a.title ?? "Sticker"} — hold to save`}
+                title={
+                  mine
+                    ? (a.title ?? "")
+                    : `${a.title ?? "Sticker"} — hold to save`
+                }
                 aria-label={a.title ?? "Sticker"}
-          className="relative size-20 disabled:cursor-default sm:size-24"
+                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="96px"
+                    sizes={alone ? "144px" : "112px"}
                     className="object-contain"
                   />
                 )}
               </button>
+            );
+          })}
+        </div>
       ))}
     </div>
   );