♿ keyboard nav

static/js/comic-nav.js

@@ -4,6 +4,7 @@
 
     let totalComics = 0;
     let comicName = '';  // Will be extracted from initial page title
+    let currentComicNumber = 0;
 
     // Fetch and display a comic
     async function loadComic(comicId) {
@@ -29,6 +30,7 @@
     // Update the page with comic data
     function displayComic(comic) {
         const title = comic.title || `#${comic.number}`;
+        currentComicNumber = comic.number;
 
         // Update container class for full-width option
         const container = document.querySelector('.comic-container');
@@ -227,6 +229,45 @@
         }
     }
 
+    // Handle keyboard navigation
+    function handleKeyboardNavigation(event) {
+        // Don't interfere if user is typing in an input field
+        if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') {
+            return;
+        }
+
+        switch(event.key) {
+            case 'ArrowLeft':
+                // Previous comic
+                if (currentComicNumber > 1) {
+                    event.preventDefault();
+                    loadComic(currentComicNumber - 1);
+                }
+                break;
+            case 'ArrowRight':
+                // Next comic
+                if (currentComicNumber < totalComics) {
+                    event.preventDefault();
+                    loadComic(currentComicNumber + 1);
+                }
+                break;
+            case 'Home':
+                // First comic
+                if (currentComicNumber > 1) {
+                    event.preventDefault();
+                    loadComic(1);
+                }
+                break;
+            case 'End':
+                // Latest comic
+                if (currentComicNumber < totalComics) {
+                    event.preventDefault();
+                    loadComic(totalComics);
+                }
+                break;
+        }
+    }
+
     // Initialize on page load
     async function init() {
         // Only run on comic pages
@@ -245,6 +286,7 @@
 
         // Get current comic number
         const currentNumber = parseInt(document.querySelector('.comic-container').dataset.comicNumber || 0);
+        currentComicNumber = currentNumber;
 
         if (currentNumber && totalComics) {
             // Get the formatted date from the DOM (already rendered by server)
@@ -261,6 +303,9 @@
             }
         });
 
+        // Handle keyboard navigation
+        document.addEventListener('keydown', handleKeyboardNavigation);
+
         // Set initial state
         history.replaceState({ comicId: currentNumber }, '', window.location.pathname);
     }