Issue #96: Frontend — Public Gallery Page

[wumibals]

Labels: frontend public gallery
Area: frontend/app/(public)/gallery/page.tsx
Difficulty: Intermediate

Description

The public gallery page displays all visible restaurant photos in a responsive masonry-style grid with optional category filtering. It fetches images from the backend and shows a lightbox when a photo is clicked.

Acceptance Criteria

• Create frontend/app/(public)/gallery/page.tsx as a "use client" component
• Export metadata from a sibling layout.tsx or use Next.js generateMetadata with title: "Gallery | The Lighted" and appropriate description
• Fetch gallery images using useGallery(selectedCategory) hook
• Category filter pills: All, Food, Ambience, Events, Staff, Behind the Scenes, Specials — clicking filters the grid
• Responsive image grid: 1 col on mobile, 2 cols on tablet, 3 cols on desktop using CSS grid
• Each image: Next.js <Image> with fill, object-cover, rounded corners; hover reveals the alt text in an overlay
• Clicking an image opens a simple lightbox modal: dark overlay, full-size image, previous/next arrows, close button
• Lightbox supports keyboard navigation (ArrowLeft, ArrowRight, Escape)
• Show skeleton loader grid while fetching
• Show empty state with illustration when no images match the selected category