perf(frontend): compress wardrobe images before Supabase upload

Full-resolution camera blobs (1-2 MB at quality 0.92) were being uploaded
directly, making save noticeably slow on mobile. compressForStorage() resizes
to a max 800px longest edge at JPEG quality 0.75, typically producing 50-150 KB.
The full-res blob is still sent to the ML backend for inference — only the
storage copy is compressed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 28nitin07

frontend/src/utils/storage.js

@@ -36,15 +36,37 @@ export async function deleteWardrobeItem(id) {
   if (error) throw error
 }
 
+// Resize + compress a blob to a thumbnail suitable for wardrobe card display.
+// Keeps the longest edge at maxPx, JPEG quality 0.75 — typically 50–150 KB.
+async function compressForStorage(blob, maxPx = 800) {
+  return new Promise((resolve) => {
+    const img = new Image()
+    const url = URL.createObjectURL(blob)
+    img.onload = () => {
+      URL.revokeObjectURL(url)
+      const { naturalWidth: w, naturalHeight: h } = img
+      const scale = Math.min(1, maxPx / Math.max(w, h))
+      const canvas = document.createElement('canvas')
+      canvas.width  = Math.round(w * scale)
+      canvas.height = Math.round(h * scale)
+      canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height)
+      canvas.toBlob((compressed) => resolve(compressed || blob), 'image/jpeg', 0.75)
+    }
+    img.onerror = () => { URL.revokeObjectURL(url); resolve(blob) }
+    img.src = url
+  })
+}
+
 // Upload image blob to the 'wardrobe-images' storage bucket.
+// Compresses to a thumbnail first to keep uploads fast on mobile.
 // Returns public URL on success, null if bucket doesn't exist or upload fails.
 export async function uploadWardrobeImage(userId, blob) {
   try {
-    const ext = blob.type === 'image/png' ? 'png' : 'jpg'
-    const path = `${userId}/${Date.now()}.${ext}`
+    const compressed = await compressForStorage(blob)
+    const path = `${userId}/${Date.now()}.jpg`
     const { error: uploadError } = await supabase.storage
       .from('wardrobe-images')
-      .upload(path, blob, { contentType: blob.type || 'image/jpeg', upsert: false })
+      .upload(path, compressed, { contentType: 'image/jpeg', upsert: false })
     if (uploadError) throw uploadError
     const { data } = supabase.storage.from('wardrobe-images').getPublicUrl(path)
     return data.publicUrl