keyboard support in the lightbox

routes/gallery_routes.py

@@ -31,28 +31,20 @@ def gallery():
 def get_favourites_route():
     return jsonify(get_favourites())
 
-@bp.route("/favourites/add", methods=["POST"])
+@bp.route("/favourites/toggle", methods=["POST"])
-def add_favourite():
+def toggle_favourite():
-    data = request.get_json()
-    filename = data.get("filename")
-    if not filename:
-        return jsonify({"status": "error", "message": "Filename missing"}), 400
-    
-    favourites = get_favourites()
-    if filename not in favourites:
-        favourites.append(filename)
-        save_favourites(favourites)
-    return jsonify({"status": "success"})
-
-@bp.route("/favourites/remove", methods=["POST"])
-def remove_favourite():
     data = request.get_json()
     filename = data.get("filename")
     if not filename:
         return jsonify({"status": "error", "message": "Filename missing"}), 400
         
     favourites = get_favourites()
+    is_favourited = False
     if filename in favourites:
         favourites.remove(filename)
-        save_favourites(favourites)
+    else:
-    return jsonify({"status": "success"})
+        favourites.append(filename)
+        is_favourited = True
+        
+    save_favourites(favourites)
+    return jsonify({"status": "success", "favourited": is_favourited})

templates/gallery.html

@@ -204,7 +204,7 @@
     <div class="gallery" id="gallery"></div>
 
     <!-- Lightbox -->
-    <div class="lightbox" id="lightbox">
+    <div class="lightbox" id="lightbox" tabindex="-1" onkeyup="handleLightboxKeys(event)">
         <span class="close" onclick="closeLightbox()">&times;</span>
         <span class="favourite-heart" id="favourite-heart" onclick="toggleFavourite()">&#9825;</span>
         <span class="arrow left" onclick="prevImage()">&#10094;</span>
@@ -297,7 +297,9 @@
             const images = getGalleryImages();
             currentIndex = images.indexOf(imgEl);
             showImageAndLoadDetails(currentIndex);
-            document.getElementById("lightbox").style.display = "flex";
+            const lightbox = document.getElementById("lightbox");
+            lightbox.style.display = "flex";
+            lightbox.focus();
         }
 
         function updateFavouriteHeart(isFavourited) {
@@ -310,10 +312,8 @@
             const images = getGalleryImages();
             const imgEl = images[currentIndex];
             const filename = imgEl.dataset.filename;
-            let isFavourited = imgEl.dataset.favourited === 'true';
 
-            const url = isFavourited ? '/favourites/remove' : '/favourites/add';
+            fetch('/favourites/toggle', {
-            fetch(url, {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ filename: filename })
@@ -321,17 +321,22 @@
             .then(response => response.json())
             .then(data => {
                 if (data.status === 'success') {
-                    isFavourited = !isFavourited;
+                    const isFavourited = data.favourited;
                     imgEl.dataset.favourited = isFavourited;
                     updateFavouriteHeart(isFavourited);
-                    // Update the main image list
+                    
                     const originalImage = allImages.find(img => img.filename === filename);
                     if (originalImage) {
                         originalImage.favourited = isFavourited;
-                   }
+                    }
-               }
+                    
-           });
+                    if (showingFavourites) {
-       }
+                        filteredImages = allImages.filter(img => img.favourited);
+                        renderGallery();
+                    }
+                }
+            });
+        }
 
         function showImageAndLoadDetails(index) {
             const images = getGalleryImages();
@@ -404,6 +409,18 @@
                 }
             }
         }
+
+        function handleLightboxKeys(e) {
+            if (e.key === 'f') {
+                toggleFavourite();
+            } else if (e.key === 'Escape') {
+                closeLightbox();
+            } else if (e.key === 'ArrowLeft') {
+                prevImage();
+            } else if (e.key === 'ArrowRight') {
+                nextImage();
+            }
+        }
     </script>
 </body>