added search bar feature, refactored the dashboard

src/templates/jinja2/dashboard/index.html

@@ -31,6 +31,27 @@
     {# Stats cards - server-rendered #}
     {% include "dashboard/partials/stats_cards.html" %}
 
+    {# Search bar #}
+    <div class="search-bar-container">
+        <div class="search-bar">
+            <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd"/>
+            </svg>
+            <input id="search-input"
+                   type="search"
+                   name="q"
+                   placeholder="Search attacks, IPs, patterns, locations..."
+                   autocomplete="off"
+                   hx-get="{{ dashboard_path }}/htmx/search"
+                   hx-trigger="input changed delay:300ms, search"
+                   hx-target="#search-results-container"
+                   hx-swap="innerHTML"
+                   hx-indicator="#search-spinner" />
+            <span id="search-spinner" class="htmx-indicator search-spinner">&#8635;</span>
+        </div>
+        <div id="search-results-container"></div>
+    </div>
+
     {# Tab navigation - Alpine.js #}
     <div class="tabs-container">
         <a class="tab-button" :class="{ active: tab === 'overview' }" @click.prevent="switchToOverview()" href="#overview">Overview</a>