feat: add custom stickers

app/(dashboard)/broadcasts/page.tsx

@@ -15,6 +15,7 @@
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { broadcasts, type Broadcast } from "@/lib/api";
+import { compressImage } from "@/lib/compress-image";
 
 export default function BroadcastsPage() {
   const [items, setItems] = useState<Broadcast[]>([]);
@@ -72,9 +73,17 @@ function Composer({ onDone }: { onDone: () => void }) {
   const [uploading, setUploading] = useState(false);
   const [busy, setBusy] = useState(false);
 
-  const uploadBanner = async (file: File) => {
+  const uploadBanner = async (original: File) => {
     setUploading(true);
     try {
+      // Compress before the presigned PUT. A banner renders at roughly 2:1 in
+      // a ~448px modal, so a phone-camera original is orders of magnitude
+      // larger than anything that reaches a screen — and every devotee
+      // downloads it. Falls back to the original on any decode failure, and
+      // leaves GIFs alone so an animation isn't flattened.
+      const file = await compressImage(original, { maxDimension: 1280 }).catch(
+        () => original,
+      );
       const { upload_url, key } = await broadcasts.presignBanner(file.type);
       const res = await fetch(upload_url, {
         method: "PUT",

app/(dashboard)/reward-gifts/page.tsx

@@ -15,6 +15,7 @@ import { useEffect, useState } from "react";
 import Image from "next/image";
 import { toast } from "sonner";
 import { rewardGifts, type GiftableReward } from "@/lib/api";
+import { compressImage } from "@/lib/compress-image";
 
 export default function RewardGiftsPage() {
   const [catalog, setCatalog] = useState<GiftableReward[] | null>(null);
@@ -65,6 +66,12 @@ export default function RewardGiftsPage() {
         </p>
       </header>
 
+      <CustomGift
+        onCreated={(reward) =>
+          setCatalog((prev) => (prev ? [...prev, reward] : [reward]))
+        }
+      />
+
       {catalog === null ? (
         <p className="text-sm text-muted-foreground">Loading…</p>
       ) : catalog.length === 0 ? (
@@ -76,7 +83,10 @@ export default function RewardGiftsPage() {
           {catalog.map((r) => (
             <li
               key={r.key}
-              className="flex flex-col items-center gap-2 rounded-xl border border-border p-3 text-center"
+              // h-full + mt-auto on the button: grid rows stretch to their
+              // tallest tile, but without this the contents stay top-packed
+              // and a two-line name pushes its button below the others.
+              className="flex h-full flex-col items-center gap-2 rounded-xl border border-border p-3 text-center"
             >
               <div className="relative aspect-square w-full">
                 <Image
@@ -95,7 +105,7 @@ export default function RewardGiftsPage() {
                 type="button"
                 disabled={sending !== null}
                 onClick={() => send(r)}
-                className="w-full rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+                className="mt-auto w-full rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
               >
                 {sending === r.key ? "Sending…" : "Send to everyone"}
               </button>
@@ -106,3 +116,137 @@ export default function RewardGiftsPage() {
     </div>
   );
 }
+
+/**
+ * Upload artwork and add it to the catalog.
+ *
+ * Creating and sending are deliberately separate steps: a new sticker lands
+ * in the grid below, where it is sent with the same confirmation as any
+ * other — so a mistyped name is caught before it reaches everyone.
+ */
+function CustomGift({
+  onCreated,
+}: {
+  onCreated: (reward: GiftableReward) => void;
+}) {
+  const [name, setName] = useState("");
+  const [meaning, setMeaning] = useState("");
+  const [imageUrl, setImageUrl] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  const upload = async (original: File) => {
+    setUploading(true);
+    try {
+      // Same compression as the banner: artwork renders at ~120px in the
+      // gallery and small again in a chat bubble, so a full-size original is
+      // wasted bytes on every devotee's device.
+      const file = await compressImage(original, { maxDimension: 512 }).catch(
+        () => original,
+      );
+      const { upload_url, image_url } = await rewardGifts.presignImage(
+        file.type,
+      );
+      const res = await fetch(upload_url, {
+        method: "PUT",
+        headers: { "Content-Type": file.type },
+        body: file,
+      });
+      if (!res.ok) throw new Error(String(res.status));
+      setImageUrl(image_url);
+      toast.success("Artwork uploaded");
+    } catch {
+      toast.error("Could not upload that image");
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const save = async () => {
+    if (!name.trim() || !imageUrl) return;
+    setSaving(true);
+    try {
+      const reward = await rewardGifts.create({
+        name: name.trim(),
+        meaning: meaning.trim(),
+        image_url: imageUrl,
+      });
+      onCreated(reward);
+      toast.success("Added to the catalog — send it when you're ready");
+      setName("");
+      setMeaning("");
+      setImageUrl(null);
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Could not save");
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const field =
+    "w-full rounded-md border border-border bg-background px-3 py-2 text-sm outline-none focus:ring-1 focus:ring-primary/40";
+
+  return (
+    <section className="space-y-3 rounded-xl border border-border p-4">
+      <div>
+        <h2 className="text-sm font-medium text-foreground">
+          Add a custom gift
+        </h2>
+        <p className="mt-0.5 text-xs text-muted-foreground">
+          It joins the catalog below. Nobody receives it until you send it.
+        </p>
+      </div>
+
+      <div className="grid gap-3 sm:grid-cols-2">
+        <input
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          maxLength={80}
+          placeholder="Name — e.g. Tulasī Leaf"
+          className={field}
+        />
+        <input
+          value={meaning}
+          onChange={(e) => setMeaning(e.target.value)}
+          maxLength={200}
+          placeholder="Meaning (optional)"
+          className={field}
+        />
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <input
+          type="file"
+          accept="image/png,image/jpeg,image/webp"
+          disabled={uploading}
+          onChange={(e) => {
+            const f = e.target.files?.[0];
+            if (f) void upload(f);
+            e.target.value = "";
+          }}
+          className={`${field} sm:w-auto`}
+        />
+        {imageUrl && (
+          <span className="relative size-12 shrink-0">
+            <Image
+              src={imageUrl}
+              alt=""
+              fill
+              sizes="48px"
+              className="object-contain"
+              unoptimized
+            />
+          </span>
+        )}
+        <button
+          type="button"
+          disabled={saving || uploading || !name.trim() || !imageUrl}
+          onClick={save}
+          className="ml-auto rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+        >
+          {saving ? "Adding…" : "Add to catalog"}
+        </button>
+      </div>
+    </section>
+  );
+}