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>
+  );
+}

lib/api.ts

@@ -451,6 +451,21 @@ export type GiftableReward = {
 export const rewardGifts = {
   catalog: () => call<GiftableReward[]>("/admin/reward-gifts/catalog").then((r) => r.data),
 
+  /** Presign artwork for a custom gift. Returns the final public URL too,
+   *  since sadhna_rewards.image_url stores an absolute address. */
+  presignImage: (contentType: string) =>
+    call<{ upload_url: string; image_url: string }>(
+      "/admin/reward-gifts/image-presign",
+      { method: "POST", body: JSON.stringify({ content_type: contentType }) },
+    ).then((r) => r.data),
+
+  /** Add a sticker to the catalog. It reaches nobody until it is sent. */
+  create: (input: { name: string; meaning: string; image_url: string }) =>
+    call<GiftableReward>("/admin/reward-gifts/catalog", {
+      method: "POST",
+      body: JSON.stringify(input),
+    }).then((r) => r.data),
+
   /** Hand a reward to every account, unopened. Idempotent — a repeat only
    *  reaches people who don't already have it. */
   send: (rewardKey: string) =>

lib/compress-image.ts

@@ -0,0 +1,178 @@
+/**
+ * Browser-side image compression.
+ *
+ * NOTE: a verbatim copy of knowledgebase/lib/compress-image.ts. The two apps
+ * are separate Next projects with no shared package, and this is dependency-
+ * free browser code — so it is duplicated rather than reached across for. If a
+ * third copy appears, that is the point to extract a shared package.
+ *
+ * Resizes the longest dimension to `maxDimension` (preserving aspect
+ * ratio) and re-encodes as JPEG at `quality`. EXIF is stripped as a
+ * side effect of the canvas round-trip — smaller files plus a tiny
+ * privacy win since location data doesn't ride along to R2.
+ *
+ * Why client-side: every upload path (post images, collection covers,
+ * avatars, post background swaps) presigns directly to R2. Putting
+ * the size cut in the browser keeps that flow intact — no proxy hop,
+ * no queue, no temp storage. The trade-off is that the source bytes
+ * are lossy from the moment they leave the device; for a photo-share
+ * product this is the right call.
+ *
+ * Safe-by-default failure modes — any of these return the ORIGINAL
+ * file unchanged rather than blocking the upload:
+ *
+ *   - The file is not an image (defensive — input is gated by accept= too).
+ *   - The file is a GIF (canvas re-encode would flatten the animation).
+ *   - The decoder fails (e.g. an old browser meeting a HEIC).
+ *   - Compression actually grew the file (rare; tiny already-compressed inputs).
+ *
+ * Callers can therefore wrap their existing upload calls without
+ * adding new error paths.
+ */
+
+export type CompressOptions = {
+  /** Longest edge in px after resize. Default 1920. */
+  maxDimension?: number;
+  /** JPEG quality 0–1. Default 0.85 (visually lossless for photos). */
+  quality?: number;
+  /** Output MIME type. Default "image/jpeg". */
+  mimeType?: string;
+};
+
+const DEFAULT_MAX = 1920;
+const DEFAULT_QUALITY = 0.85;
+const DEFAULT_MIME = "image/jpeg";
+
+export async function compressImage(
+  file: File,
+  opts: CompressOptions = {},
+): Promise<File> {
+  const maxDimension = opts.maxDimension ?? DEFAULT_MAX;
+  const quality = opts.quality ?? DEFAULT_QUALITY;
+  const mimeType = opts.mimeType ?? DEFAULT_MIME;
+
+  // Bail-outs that should return the original untouched.
+  if (typeof window === "undefined") return file;
+  if (!file.type.startsWith("image/")) return file;
+  if (file.type === "image/gif") return file;
+
+  let drawable: ImageBitmap | HTMLImageElement;
+  try {
+    drawable = await loadDrawable(file);
+  } catch {
+    // Decoder couldn't read this image (e.g. corrupt, or HEIC on a
+    // browser that doesn't decode HEIC). Send the original up — R2
+    // will accept it; the share-image proxy + Cloudflare will sort
+    // out display sizing downstream.
+    return file;
+  }
+
+  const { width: srcW, height: srcH } = drawableDimensions(drawable);
+  const { width, height } = scaleToFit(srcW, srcH, maxDimension);
+
+  // No-op fast path: already within the cap AND a reasonable size.
+  // Skip the canvas dance because re-encoding a 200 KB image as JPEG
+  // q=85 might actually grow it.
+  if (width === srcW && height === srcH && file.size < 500_000) {
+    closeBitmap(drawable);
+    return file;
+  }
+
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    closeBitmap(drawable);
+    return file;
+  }
+  // White backdrop so PNG/HEIC transparency doesn't become black
+  // pixels in the JPEG output.
+  if (mimeType === "image/jpeg") {
+    ctx.fillStyle = "#ffffff";
+    ctx.fillRect(0, 0, width, height);
+  }
+  ctx.drawImage(drawable, 0, 0, width, height);
+  closeBitmap(drawable);
+
+  const blob = await canvasToBlob(canvas, mimeType, quality);
+  if (!blob) return file;
+  // If the "compressed" version ended up larger (small already, or a
+  // weird input), keep the original.
+  if (blob.size >= file.size) return file;
+
+  const ext =
+    mimeType === "image/jpeg"
+      ? "jpg"
+      : mimeType.split("/")[1]?.toLowerCase() || "bin";
+  const newName = file.name.replace(/\.[^.]+$/, "") + `.${ext}`;
+  return new File([blob], newName, {
+    type: mimeType,
+    lastModified: Date.now(),
+  });
+}
+
+// ---------------------------------------------------------------------------
+// Internals
+// ---------------------------------------------------------------------------
+
+async function loadDrawable(
+  file: File,
+): Promise<ImageBitmap | HTMLImageElement> {
+  // createImageBitmap is the fast path on modern browsers — it decodes
+  // off the main thread when supported.
+  if (typeof createImageBitmap === "function") {
+    try {
+      return await createImageBitmap(file);
+    } catch {
+      // Fall through to the HTMLImageElement path.
+    }
+  }
+  const url = URL.createObjectURL(file);
+  const img = new Image();
+  await new Promise<void>((resolve, reject) => {
+    img.onload = () => resolve();
+    img.onerror = () => reject(new Error("image decode failed"));
+    img.src = url;
+  });
+  // Defer revoke so the image stays valid through the next canvas
+  // draw — we revoke a tick later when it's safe.
+  setTimeout(() => URL.revokeObjectURL(url), 0);
+  return img;
+}
+
+function drawableDimensions(
+  d: ImageBitmap | HTMLImageElement,
+): { width: number; height: number } {
+  if ("naturalWidth" in d) {
+    return { width: d.naturalWidth, height: d.naturalHeight };
+  }
+  return { width: d.width, height: d.height };
+}
+
+function scaleToFit(
+  width: number,
+  height: number,
+  max: number,
+): { width: number; height: number } {
+  if (width <= max && height <= max) return { width, height };
+  const ratio = width > height ? max / width : max / height;
+  return {
+    width: Math.round(width * ratio),
+    height: Math.round(height * ratio),
+  };
+}
+
+function canvasToBlob(
+  canvas: HTMLCanvasElement,
+  type: string,
+  quality: number,
+): Promise<Blob | null> {
+  return new Promise((resolve) => {
+    canvas.toBlob((b) => resolve(b), type, quality);
+  });
+}
+
+function closeBitmap(d: ImageBitmap | HTMLImageElement) {
+  if ("close" in d && typeof d.close === "function") d.close();
+}