Fix: Sidebar visible, track route displyas and recently viewed section updates properly

Author: Alvi24-hub

web-app/generate_banners.py

@@ -453,7 +453,6 @@ def draw_o(ox, oy):
         v_draw.text((400,225), "⇄",
                     fill=color_accent,
                     anchor="mm")
-    
     elif "pet" in n_lower or "productivity" in n_lower:
         # Cute paw print
         cx, cy = 400, 225
@@ -534,6 +533,7 @@ def draw_o(ox, oy):
     ("Productive Pet", "utilities", "productive-pet.webp"),
     ("Progress Tracker", "utilities", "progress-tracker.webp"),
     ("Reverse Hangman", "games", "reverse-hangman.webp"),
+    ("Chess Game", "games", "chess.webp"),
 
     # MATH
     ("AP/GP/AGP/HP Recognizer", "math", "progression-recognizer.webp"),

web-app/index.html

@@ -1526,6 +1526,34 @@ <h2>${projectName.replace(/-/g, " ").toUpperCase()}</h2>
         console.log('✅ Modal fix loaded');
       })();
     </script>
+    
+    <script>
+      // FIX 1: Add missing toPascalCase function
+      if (typeof window.toPascalCase !== 'function') {
+        window.toPascalCase = function(str) {
+          return str.split('-').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+        };
+        console.log('✅ toPascalCase function added');
+      }
+
+      // FIX 2: Fix modal focus error
+      setTimeout(function() {
+      const modal = document.getElementById('projectModal');
+      if (modal) {
+        // Remove any broken focus code
+        modal.removeAttribute('tabindex');
+      }
+    
+      // Fix any focus-related errors
+      const activeElement = document.activeElement;
+      if (!activeElement || activeElement === document.body) {
+        document.body.setAttribute('tabindex', '-1');
+        document.body.style.outline = 'none';
+      }
+    
+      console.log('✅ Focus error fixed');
+    }, 100);
+  </script>
 
     <!-- Info Modal Popup -->
     <div id="infoModalOverlay" class="info-modal-overlay">

web-app/js/main.js

@@ -1277,7 +1277,8 @@ document.addEventListener("DOMContentLoaded", function () {
                 renderRecentSearches();
             });
         }
-
+    });
+    
     // Clear content
     if (modalBody) {
       modalBody.innerHTML = "";