Update gallery to display landscape images and use original file names

Modify the gallery component to use 16:9 aspect ratio for images on all devices, and update the server-side logic to fetch original file names from Dropbox, including handling special characters for accurate artist extraction.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 1f7e7e89-a520-4970-9645-37daadc466dc
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: af9e6e2b-bfc5-48ee-8177-e2ffdffe6967
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/1f7e7e89-a520-4970-9645-37daadc466dc/ZApZ5Qi
Replit-Helium-Checkpoint-Created: true

client/src/components/photo-gallery.tsx

@@ -338,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-[16/9] md:aspect-[9/16]">
+                <div className="relative w-full aspect-[16/9]">
                   <LazyImage
-                    src={isMobile && img.mobile ? img.mobile : thumbUrl(img.thumb)}
+                    src={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"
                   />

server/dropbox.ts

@@ -219,6 +219,14 @@ const CACHE_DURATION = 30 * 60 * 1000;
 const THUMB_FOLDER = GALLERY_ROOT + "/Foto 1x1";
 const LARGE_FOLDER = GALLERY_ROOT + "/Foto 9x16";
 const MOBILE_FOLDER = GALLERY_ROOT + "/Foto 16x9";
+const ORIGINAL_FOLDER = GALLERY_ROOT + "/Foto All";
+
+function normalizeForMatch(name: string): string {
+  return name
+    .toLowerCase()
+    .replace(/\.\w+$/, "")
+    .replace(/[^a-z0-9]/g, "");
+}
 
 export async function fetchGalleryFromDropbox(): Promise<GalleryImage[]> {
   if (galleryCache.data.length > 0 && Date.now() - galleryCache.timestamp < CACHE_DURATION) {
@@ -229,16 +237,23 @@ export async function fetchGalleryFromDropbox(): Promise<GalleryImage[]> {
   if (!accessToken) return [];
 
   try {
-    const [thumbEntries, largeEntries, mobileEntries] = await Promise.all([
+    const [thumbEntries, largeEntries, mobileEntries, originalEntries] = await Promise.all([
       listFolder(accessToken, THUMB_FOLDER.toLowerCase()),
       listFolder(accessToken, LARGE_FOLDER.toLowerCase()),
       listFolder(accessToken, MOBILE_FOLDER.toLowerCase()),
+      listFolder(accessToken, ORIGINAL_FOLDER.toLowerCase()),
     ]);
 
     const imgFilter = (e: any) => e[".tag"] === "file" && /\.(jpg|jpeg|png|webp|gif)$/i.test(e.name);
     const thumbFiles = thumbEntries.filter(imgFilter);
     const largeFiles = largeEntries.filter(imgFilter);
     const mobileFiles = mobileEntries.filter(imgFilter);
+    const originalFiles = originalEntries.filter(imgFilter);
+
+    const originalNameMap = new Map<string, string>();
+    for (const file of originalFiles) {
+      originalNameMap.set(normalizeForMatch(file.name), file.name);
+    }
 
     const [thumbLinks, largeLinks, mobileLinks] = await Promise.all([
       getTemporaryLinks(accessToken, thumbFiles.map((f: any) => f.path_lower)),
@@ -264,14 +279,15 @@ export async function fetchGalleryFromDropbox(): Promise<GalleryImage[]> {
       if (!thumbLink) continue;
       const largeLink = largeMap.get(file.name.toLowerCase()) || thumbLink;
       const mobileLink = mobileMap.get(file.name.toLowerCase()) || thumbLink;
+      const originalName = originalNameMap.get(normalizeForMatch(file.name)) || file.name;
       images.push({
         folder: "Foto All",
-        fileName: file.name,
+        fileName: originalName,
         thumb: thumbLink,
         large: largeLink,
         mobile: mobileLink,
         full: largeLink,
-        artist: extractArtistFromFileName(file.name),
+        artist: extractArtistFromFileName(originalName),
       });
     }