From 0891be197fdb7d92ade5a293b8db0bed26fa6e3a Mon Sep 17 00:00:00 2001
From: Paul Nothaft <paul@MacStudio-von-Paul.local>
Date: Tue, 17 Feb 2026 15:30:12 +0100
Subject: [PATCH] feat: show original filename in admin UI (#184)

Surface the existing original_filename from the database in the admin
photo grid hover overlay and photo viewer sidebar, so photographers can
correlate uploaded images with their Lightroom/disk originals. Only shown
when it differs from the system-generated filename. Gallery guests remain
unaffected.
---
 backend/src/routes/adminPhotos.js                  | 1 +
 frontend/src/components/admin/AdminPhotoGrid.tsx   | 5 +++++
 frontend/src/components/admin/AdminPhotoViewer.tsx | 6 +++++-
 frontend/src/services/photos.service.ts            | 1 +
 4 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/backend/src/routes/adminPhotos.js b/backend/src/routes/adminPhotos.js
index b19daba6..a3c4d540 100644
--- a/backend/src/routes/adminPhotos.js
+++ b/backend/src/routes/adminPhotos.js
@@ -792,6 +792,7 @@ router.get('/:eventId/photos', adminAuth, requirePermission('photos.view'), asyn
       photos: photos.map(photo => ({
         id: photo.id,
         filename: photo.filename,
+        original_filename: photo.original_filename || null,
         // Use the correct admin photos router base for serving images
         url: `/admin/photos/${eventId}/photo/${photo.id}`,
         // Always expose a thumbnail URL; backend will generate on demand if missing
diff --git a/frontend/src/components/admin/AdminPhotoGrid.tsx b/frontend/src/components/admin/AdminPhotoGrid.tsx
index 4f359765..eab09e00 100644
--- a/frontend/src/components/admin/AdminPhotoGrid.tsx
+++ b/frontend/src/components/admin/AdminPhotoGrid.tsx
@@ -287,6 +287,11 @@ export const AdminPhotoGrid: React.FC<AdminPhotoGridProps> = ({
                 <p className="text-white text-xs font-medium truncate mb-1">
                   {photo.filename}
                 </p>
+                {photo.original_filename && photo.original_filename !== photo.filename && (
+                  <p className="text-white/60 text-[10px] truncate mb-1">
+                    Original: {photo.original_filename}
+                  </p>
+                )}
                 <p className="text-white/80 text-xs mb-2">
                   {photosService.formatBytes(photo.size)}
                 </p>
diff --git a/frontend/src/components/admin/AdminPhotoViewer.tsx b/frontend/src/components/admin/AdminPhotoViewer.tsx
index ed43a222..f6fe6f21 100644
--- a/frontend/src/components/admin/AdminPhotoViewer.tsx
+++ b/frontend/src/components/admin/AdminPhotoViewer.tsx
@@ -230,7 +230,11 @@ export const AdminPhotoViewer: React.FC<AdminPhotoViewerProps> = ({
 
         {/* Sidebar */}
         <div className="lg:w-80 bg-neutral-900 rounded-lg p-6 overflow-y-auto">
-          <h3 className="text-white font-medium text-lg mb-4">{currentPhoto.filename}</h3>
+          <h3 className="text-white font-medium text-lg">{currentPhoto.filename}</h3>
+          {currentPhoto.original_filename && currentPhoto.original_filename !== currentPhoto.filename && (
+            <p className="text-neutral-400 text-sm">Original: {currentPhoto.original_filename}</p>
+          )}
+          <div className="mb-4" />
 
           {/* Actions */}
           <div className="flex gap-2 mb-6">
diff --git a/frontend/src/services/photos.service.ts b/frontend/src/services/photos.service.ts
index 101d67da..e0e070b3 100644
--- a/frontend/src/services/photos.service.ts
+++ b/frontend/src/services/photos.service.ts
@@ -3,6 +3,7 @@ import { api } from '../config/api';
 export interface AdminPhoto {
   id: number;
   filename: string;
+  original_filename?: string;
   path: string;
   url: string;
   thumbnail_url: string | null;