Refactor: Implement Cloudflare Image Variants

src/components/upload/EntityImageUploader.tsx

@@ -5,6 +5,7 @@ import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import { Image as ImageIcon, ImagePlus, X } from 'lucide-react';
 import { UppyPhotoUpload } from './UppyPhotoUpload';
+import { getCloudflareImageUrl } from '@/lib/cloudflareImageUtils';
 
 export type ImageType = 'logo' | 'banner' | 'card';
 
@@ -140,7 +141,15 @@ export function EntityImageUploader({
         {hasImage ? (
           <div className="relative aspect-[16/9] bg-muted">
             <img 
-              src={currentImage.url} 
+              src={
+                currentImage.url || (
+                  type === 'logo' 
+                    ? getCloudflareImageUrl(currentImage.id, 'logo')
+                    : type === 'banner'
+                    ? getCloudflareImageUrl(currentImage.id, 'banner')
+                    : getCloudflareImageUrl(currentImage.id, 'card')
+                )
+              }
               alt={`${spec.label} preview`}
               className="w-full h-full object-cover"
             />

src/components/upload/UppyPhotoUpload.tsx

@@ -142,7 +142,8 @@ export function UppyPhotoUpload({
       if (statusResponse.ok) {
         const status: UploadSuccessResponse = await statusResponse.json();
         if (status.uploaded && status.urls) {
-          return status.urls.public;
+          const CLOUDFLARE_ACCOUNT_HASH = import.meta.env.VITE_CLOUDFLARE_ACCOUNT_HASH;
+          return `https://imagedelivery.net/${CLOUDFLARE_ACCOUNT_HASH}/${cloudflareId}/public`;
         }
       }