Add a search bar for resource detail page on pressing Ctrl+K

scanpipe/templates/scanpipe/modals/resource_search_modal.html

@@ -0,0 +1,53 @@
+<div class="modal" id="resource-search-modal">
+  <div class="modal-background"></div>
+  <div class="modal-card" style="max-width: 600px;">
+    <header class="modal-card-head py-3">
+      <p class="modal-card-title mb-0">
+        <span class="icon-text">
+          <span class="icon">
+            <i class="fa-solid fa-search"></i>
+          </span>
+          <span>Search Resources</span>
+        </span>
+      </p>
+      <div class="is-flex is-align-items-center">
+        <span class="tag is-light mr-2">Esc to close</span>
+        <button class="delete" aria-label="close"></button>
+      </div>
+    </header>
+    <form id="resource-search-form" method="get" action="{% url 'project_resources' project.slug %}">
+      <section class="modal-card-body py-4">
+        <div class="field">
+          <p class="control has-icons-left">
+            <input
+              id="resource-search-input"
+              class="input is-medium"
+              type="search"
+              placeholder="Search resources by path, name, status..."
+              name="search"
+              value="{{ object.path }}"
+              autofocus>
+            <span class="icon is-medium is-left">
+              <i class="fa-solid fa-search"></i>
+            </span>
+          </p>
+        </div>
+        <p class="help">
+          Press <kbd>Enter</kbd> to search or <kbd>Esc</kbd> to close.
+          Use <kbd>Ctrl+K</kbd> or <kbd>/</kbd> to open this search.
+        </p>
+      </section>
+      <footer class="modal-card-foot is-justify-content-flex-end py-3">
+        <div class="buttons">
+          <button class="button" type="button">Cancel</button>
+          <button class="button is-link is-no-close" type="submit">
+            <span class="icon">
+              <i class="fa-solid fa-search"></i>
+            </span>
+            <span>Search</span>
+          </button>
+        </div>
+      </footer>
+    </form>
+  </div>
+</div>

scanpipe/templates/scanpipe/resource_detail.html

@@ -9,6 +9,7 @@
 {% endblock %}
 
 {% block content %}
+  {% include 'scanpipe/modals/resource_search_modal.html' %}
   <div class="container is-max-widescreen">
     {% include 'scanpipe/includes/navbar_header.html' %}
     <div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>
@@ -147,6 +148,31 @@
       let is_full_screen = body.classList.toggle("full-screen");
       editor.resize()
     });
+
+    // Resource search modal keyboard shortcut (Ctrl+K or /)
+    document.addEventListener('keydown', function (event) {
+      // Check if any input or textarea has focus
+      const activeElement = document.activeElement;
+      const isInputFocused = activeElement && (
+        activeElement.tagName === 'INPUT' ||
+        activeElement.tagName === 'TEXTAREA' ||
+        activeElement.isContentEditable
+      );
+
+      // Open search modal on Ctrl+K or / (when no input is focused)
+      if ((event.ctrlKey && event.key === 'k') || (event.key === '/' && !isInputFocused)) {
+        event.preventDefault();
+        openModal('resource-search-modal');
+        // Focus the search input after a short delay to ensure modal is visible
+        setTimeout(function() {
+          const searchInput = document.getElementById('resource-search-input');
+          if (searchInput) {
+            searchInput.focus();
+            searchInput.select();
+          }
+        }, 50);
+      }
+    });
   }
   </script>
 {% endblock %}