From 16e1c7647b116ab5df99367b6094fd7bd6701feb Mon Sep 17 00:00:00 2001
From: Ralksta <16941050+ralksta@users.noreply.github.com>
Date: Tue, 21 Apr 2026 22:51:31 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement]=20?=
 =?UTF-8?q?Auto-focus=20Close=20button=20in=20Lightbox=20(#104)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: google-labs-jules[bot] <161369871+google-labs-jules[bot]@users.noreply.github.com>
---
 app/api/auth/route.ts   |  9 ++++++---
 components/Lightbox.tsx | 16 +++++++++++++++-
 docs/gallery-config.md  |  6 +++---
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/app/api/auth/route.ts b/app/api/auth/route.ts
index a444bf8..9e0d6a4 100644
--- a/app/api/auth/route.ts
+++ b/app/api/auth/route.ts
@@ -41,9 +41,12 @@ export async function POST(request: NextRequest) {
     }
 
     if (!isProtected(slug, type)) {
-      return NextResponse.json({
-        error: `${type === 'subpage' ? 'Subpage' : 'Album'} is not password-protected`,
-      }, { status: 400 });
+      return NextResponse.json(
+        {
+          error: `${type === 'subpage' ? 'Subpage' : 'Album'} is not password-protected`,
+        },
+        { status: 400 },
+      );
     }
 
     const setCookie = authenticate(slug, password, type);
diff --git a/components/Lightbox.tsx b/components/Lightbox.tsx
index 115e283..090e88e 100644
--- a/components/Lightbox.tsx
+++ b/components/Lightbox.tsx
@@ -31,6 +31,7 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
   const { exifData, exifLoading, fetchExif, clearExif } = useExif();
   const [imageLoaded, setImageLoaded] = useState(false);
   const overlayRef = useRef<HTMLDivElement>(null);
+  const closeBtnRef = useRef<HTMLButtonElement>(null);
 
   const current = assets[currentIndex];
   const [mounted, setMounted] = useState(false);
@@ -40,6 +41,13 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
     setMounted(true);
   }, []);
 
+  // Auto-focus the close button when the modal mounts
+  useEffect(() => {
+    if (mounted) {
+      closeBtnRef.current?.focus();
+    }
+  }, [mounted]);
+
   // Reset EXIF data when switching images; refetch if panel is open
   useEffect(() => {
     clearExif();
@@ -109,7 +117,13 @@ export function Lightbox({ assets, currentIndex, onClose, onNext, onPrev }: Ligh
       aria-label="Image viewer"
     >
       {/* Close button */}
-      <button className={styles.close} onClick={onClose} aria-label="Close" title="Close (Esc)">
+      <button
+        ref={closeBtnRef}
+        className={styles.close}
+        onClick={onClose}
+        aria-label="Close"
+        title="Close (Esc)"
+      >
         <svg
           aria-hidden="true"
           viewBox="0 0 24 24"
diff --git a/docs/gallery-config.md b/docs/gallery-config.md
index 892464d..7452cf3 100644
--- a/docs/gallery-config.md
+++ b/docs/gallery-config.md
@@ -64,8 +64,8 @@ subpages:
     albums:
       - 55555555-5555-5555-5555-555555555555
       - 66666666-6666-6666-6666-666666666666:
-          title: "Private Highlights"
-          password: "album-secret-123" # Optional: album-level protection
+          title: 'Private Highlights'
+          password: 'album-secret-123' # Optional: album-level protection
 ```
 
 Alternatively, you can use the object notation (recommended):
@@ -99,7 +99,7 @@ albums:
   - 'album-uuid': My Title # → displays "My Title" instead
   - 'album-uuid':
       title: My Private Title
-      password: "secure-password" # → adds a password gate to this specific album
+      password: 'secure-password' # → adds a password gate to this specific album
 ```
 
 **Full example:**