Add mobile image display and optimize gallery loading

Update gallery component to conditionally load mobile-optimized images for smaller screens and refactor Dropbox integration to fetch images from separate desktop and mobile folders.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1f7e7e89-a520-4970-9645-37daadc466dc
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 047c052f-7045-4b74-a78d-c75e84aaddd0
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/1f7e7e89-a520-4970-9645-37daadc466dc/5JDNRWP
Replit-Helium-Checkpoint-Created: true

client/src/components/photo-gallery.tsx

@@ -7,6 +7,7 @@ interface GalleryImage {
   fileName: string;
   thumb: string;
   large: string;
+  mobile?: string;
   artist?: string;
 }
 
@@ -28,8 +29,7 @@ function cloudinaryTransform(src: string, transform: string) {
 }
 
 function thumbUrl(src: string) {
-  if (src.includes("res.cloudinary.com")) return src;
-  return `/api/gallery/thumb?src=${encodeURIComponent(src)}`;
+  return src;
 }
 
 function LazyImage({ src, alt, className, onClick }: { src: string; alt: string; className?: string; onClick?: () => void }) {
@@ -289,6 +289,7 @@ export function PhotoGalleryWidget({ reverseOrder = false }: { reverseOrder?: bo
 }
 
 export default function GalleryPage() {
+  const isMobile = useIsMobile();
   const { data: images, isLoading } = useQuery<GalleryImage[]>({
     queryKey: ["/api/gallery"],
   });
@@ -337,9 +338,9 @@ export default function GalleryPage() {
                 className="group relative rounded-lg overflow-hidden bg-card border border-card-border cursor-pointer flex flex-col"
                 data-testid={`button-gallery-image-${i}`}
               >
-                <div className="relative w-full aspect-[3/2] md:aspect-[9/16]">
+                <div className="relative w-full aspect-[16/9] md:aspect-[9/16]">
                   <LazyImage
-                    src={thumbUrl(img.thumb)}
+                    src={isMobile && img.mobile ? img.mobile : thumbUrl(img.thumb)}
                     alt={img.artist || img.fileName}
                     className="absolute inset-0 w-full h-full transition-transform duration-500 group-hover:scale-110"
                   />