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",