feat: ✨ search modal

static/js/header.js

@@ -1,12 +1,96 @@
 document.addEventListener('DOMContentLoaded', function() {
     const navToggle = document.getElementById('nav-toggle');
     const mobileNav = document.getElementById('mobile-nav');
-    navToggle.addEventListener('click', function() {
-        mobileNav.classList.toggle('hidden');
-    });
+    const searchModal = document.getElementById('search-modal');
+    const searchModalOpen = document.getElementById('search-modal-open');
+    const searchModalOpenMobile = document.getElementById('search-modal-open-mobile');
+    const searchModalClose = document.getElementById('search-modal-close');
+    const searchModalBackdrop = document.getElementById('search-modal-backdrop');
+    const searchModalInput = document.getElementById('search-modal-input');
+
+    if (navToggle && mobileNav) {
+        navToggle.addEventListener('click', function() {
+            mobileNav.classList.toggle('hidden');
+        });
+    }
+
+    function openSearchModal() {
+        if (!searchModal) {
+            return;
+        }
+
+        searchModal.classList.remove('hidden');
+        searchModal.classList.add('flex');
+        document.body.classList.add('overflow-hidden');
+
+        if (mobileNav) {
+            mobileNav.classList.add('hidden');
+        }
+
+        setTimeout(function() {
+            if (searchModalInput) {
+                searchModalInput.focus();
+                searchModalInput.select();
+            }
+        }, 0);
+    }
+
+    function closeSearchModal() {
+        if (!searchModal) {
+            return;
+        }
+
+        searchModal.classList.add('hidden');
+        searchModal.classList.remove('flex');
+        document.body.classList.remove('overflow-hidden');
+    }
+
+    if (searchModalOpen) {
+        searchModalOpen.addEventListener('click', openSearchModal);
+    }
+
+    if (searchModalOpenMobile) {
+        searchModalOpenMobile.addEventListener('click', openSearchModal);
+    }
+
+    if (searchModalClose) {
+        searchModalClose.addEventListener('click', closeSearchModal);
+    }
+
+    if (searchModalBackdrop) {
+        searchModalBackdrop.addEventListener('click', closeSearchModal);
+    }
+
     document.addEventListener('click', function(e) {
-        if (!mobileNav.contains(e.target) && !navToggle.contains(e.target)) {
+        if (mobileNav && navToggle && !mobileNav.contains(e.target) && !navToggle.contains(e.target)) {
             mobileNav.classList.add('hidden');
         }
     });
+
+    document.addEventListener('keydown', function(e) {
+        const target = e.target;
+        const isEditableTarget = target && (
+            target.tagName === 'INPUT' ||
+            target.tagName === 'TEXTAREA' ||
+            target.tagName === 'SELECT' ||
+            target.isContentEditable
+        );
+
+        if (
+            e.key === '/' &&
+            !e.ctrlKey &&
+            !e.metaKey &&
+            !e.altKey &&
+            searchModal &&
+            !isEditableTarget
+        ) {
+            e.preventDefault();
+            openSearchModal();
+            return;
+        }
+
+        if (e.key === 'Escape') {
+            closeSearchModal();
+        }
+    });
 });

static/js/header.min.js

@@ -1 +1 @@
-document.addEventListener("DOMContentLoaded",function(){let t=document.getElementById("nav-toggle"),e=document.getElementById("mobile-nav");t.addEventListener("click",function(){e.classList.toggle("hidden")}),document.addEventListener("click",function(n){e.contains(n.target)||t.contains(n.target)||e.classList.add("hidden")})});
+document.addEventListener("DOMContentLoaded",function(){let e=document.getElementById("nav-toggle"),t=document.getElementById("mobile-nav"),o=document.getElementById("search-modal"),n=document.getElementById("search-modal-open"),d=document.getElementById("search-modal-open-mobile"),c=document.getElementById("search-modal-close"),l=document.getElementById("search-modal-backdrop"),a=document.getElementById("search-modal-input");function s(){o&&(o.classList.remove("hidden"),o.classList.add("flex"),document.body.classList.add("overflow-hidden"),t&&t.classList.add("hidden"),setTimeout(function(){a&&(a.focus(),a.select())},0))}function i(){o&&(o.classList.add("hidden"),o.classList.remove("flex"),document.body.classList.remove("overflow-hidden"))}e&&t&&e.addEventListener("click",function(){t.classList.toggle("hidden")}),n&&n.addEventListener("click",s),d&&d.addEventListener("click",s),c&&c.addEventListener("click",i),l&&l.addEventListener("click",i),document.addEventListener("click",function(o){t&&e&&!t.contains(o.target)&&!e.contains(o.target)&&t.classList.add("hidden")}),document.addEventListener("keydown",function(e){let t=e.target,n=t&&("INPUT"===t.tagName||"TEXTAREA"===t.tagName||"SELECT"===t.tagName||t.isContentEditable);if("/"===e.key&&!e.ctrlKey&&!e.metaKey&&!e.altKey&&o&&!n)return e.preventDefault(),void s();"Escape"===e.key&&i()})});