(UX) File Gallery: Lightbox Preview & Keyboard Navigation

[n2ojim]

Scope & Context

To make the new File Gallery truly powerful for industries like Real Estate, users need to be able to preview images in full size quickly without having to download them. This ticket focuses purely on the viewing experience within the edit mode. This ticket follows the #21726

Current behavior

Users must download an image to view it in full resolution because the in-app thumbnails are too small to check for details (e.g., photo quality, specific elements in a room). There is no native fullscreen preview capability.

Expected behavior

1. Lightbox / Fullscreen Preview: Clicking the thumbnail image itself (not the name or the action icons) should open a full-screen lightbox preview overlay.
2. Keyboard Navigation: While the lightbox is open, users should be able to navigate between all the files present in the gallery using the ArrowLeft and ArrowRight keyboard keys. Pressing Escape or clicking a close button should close the lightbox.

Technical inputs

• Add a local state lightboxActiveIndex (integer or null) to track which image is currently being previewed.
• Build or integrate a Lightbox UI component that renders the full-resolution file over the UI.
• Add event listeners for keyboard navigation (ArrowLeft, ArrowRight, Escape) bounded to the lightbox component's lifecycle.