Add search and filter functionality to header; adjust styles for responsiveness

templates/components/header.html

@@ -17,6 +17,22 @@
         <i class="fas fa-check-circle"></i> Checkpoints
       </a>
     </nav>
+    
+    <!-- Add search container to header -->
+    <div class="header-search">
+      <div class="search-container">
+        <input type="text" id="searchInput" placeholder="Search models..." />
+        <i class="fas fa-search search-icon"></i>
+        <button class="search-options-toggle" id="searchOptionsToggle" title="Search Options">
+          <i class="fas fa-sliders-h"></i>
+        </button>
+        <button class="search-filter-toggle" id="filterButton" onclick="filterManager.toggleFilterPanel()" title="Filter models">
+          <i class="fas fa-filter"></i>
+          <span class="filter-badge" id="activeFiltersCount" style="display: none">0</span>
+        </button>
+      </div>
+    </div>
+    
     <div class="header-actions">
       <!-- Integrated corner controls -->
       <div class="header-controls">
@@ -37,4 +53,59 @@
       </div>
     </div>
   </div>
-</header>
+</header>
+
+<!-- Add search options panel -->
+<div id="searchOptionsPanel" class="search-options-panel hidden">
+  <div class="options-header">
+    <h3>Search Options</h3>
+    <button class="close-options-btn" id="closeSearchOptions">
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+  <div class="options-section">
+    <h4>Search In:</h4>
+    <div class="search-option-tags">
+      <div class="search-option-tag active" data-option="filename">Filename</div>
+      <div class="search-option-tag active" data-option="tags">Tags</div>
+      <div class="search-option-tag active" data-option="modelname">Model Name</div>
+    </div>
+  </div>
+  <div class="options-section">
+    <div class="search-option-switch">
+      <span>Include Subfolders</span>
+      <label class="switch">
+        <input type="checkbox" id="recursiveSearchToggle">
+        <span class="slider round"></span>
+      </label>
+    </div>
+  </div>
+</div>
+
+<!-- Add filter panel -->
+<div id="filterPanel" class="filter-panel hidden">
+  <div class="filter-header">
+    <h3>Filter Models</h3>
+    <button class="close-filter-btn" onclick="filterManager.closeFilterPanel()">
+      <i class="fas fa-times"></i>
+    </button>
+  </div>
+  <div class="filter-section">
+    <h4>Base Model</h4>
+    <div class="filter-tags" id="baseModelTags">
+      <!-- Tags will be dynamically inserted here -->
+    </div>
+  </div>
+  <div class="filter-section">
+    <h4>Tags (Top 20)</h4>
+    <div class="filter-tags" id="modelTagsFilter">
+      <!-- Top tags will be dynamically inserted here -->
+      <div class="tags-loading">Loading tags...</div>
+    </div>
+  </div>
+  <div class="filter-actions">
+    <button class="clear-filters-btn" onclick="filterManager.clearFilters()">
+      Clear All Filters
+    </button>
+  </div>
+</div>