Enhance LoRA and Recipe templates by adding request context to template rendering. Update JavaScript to initialize search managers with context-specific options and improve header navigation with dynamic search placeholders. Refactor header component for better context awareness in search functionality.

templates/components/header.html

@@ -7,21 +7,21 @@
       </a>
     </div>
     <nav class="main-nav">
-      <a href="/loras" class="nav-item {% if current_page == 'loras' %}active{% endif %}">
+      <a href="/loras" class="nav-item" id="lorasNavItem">
         <i class="fas fa-layer-group"></i> LoRAs
       </a>
-      <a href="/loras/recipes" class="nav-item {% if current_page == 'recipes' %}active{% endif %}">
+      <a href="/loras/recipes" class="nav-item" id="recipesNavItem">
         <i class="fas fa-book-open"></i> Recipes
       </a>
-      <a href="/checkpoints" class="nav-item {% if current_page == 'checkpoints' %}active{% endif %}">
+      <a href="/checkpoints" class="nav-item" id="checkpointsNavItem">
         <i class="fas fa-check-circle"></i> Checkpoints
       </a>
     </nav>
     
-    <!-- Add search container to header -->
+    <!-- Context-aware search container -->
     <div class="header-search">
       <div class="search-container">
-        <input type="text" id="searchInput" placeholder="Search models..." />
+        <input type="text" id="searchInput" placeholder="Search..." />
         <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>
@@ -55,7 +55,7 @@
   </div>
 </header>
 
-<!-- Add search options panel -->
+<!-- Add search options panel with context-aware options -->
 <div id="searchOptionsPanel" class="search-options-panel hidden">
   <div class="options-header">
     <h3>Search Options</h3>
@@ -67,8 +67,15 @@
     <h4>Search In:</h4>
     <div class="search-option-tags">
       <div class="search-option-tag active" data-option="filename">Filename</div>
+      {% if request.path == '/loras' or request.path == '/loras/recipes' %}
       <div class="search-option-tag active" data-option="tags">Tags</div>
-      <div class="search-option-tag active" data-option="modelname">Model Name</div>
+      {% endif %}
+      <div class="search-option-tag active" data-option="modelname">
+        {% if request.path == '/loras/recipes' %}Recipe Name{% elif request.path == '/checkpoints' %}Checkpoint Name{% else %}Model Name{% endif %}
+      </div>
+      {% if request.path == '/loras/recipes' %}
+      <div class="search-option-tag active" data-option="loras">Included LoRAs</div>
+      {% endif %}
     </div>
   </div>
   <div class="options-section">
@@ -108,4 +115,46 @@
       Clear All Filters
     </button>
   </div>
-</div>
+</div>
+
+<!-- Add this script at the end of the header component -->
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    // Get the current path from the URL
+    const currentPath = window.location.pathname;
+    
+    // Update search placeholder based on current path
+    const searchInput = document.getElementById('searchInput');
+    if (searchInput) {
+      if (currentPath === '/loras') {
+        searchInput.placeholder = 'Search LoRAs...';
+      } else if (currentPath === '/loras/recipes') {
+        searchInput.placeholder = 'Search recipes...';
+      } else if (currentPath === '/checkpoints') {
+        searchInput.placeholder = 'Search checkpoints...';
+      } else {
+        searchInput.placeholder = 'Search...';
+      }
+    }
+    
+    // Update active nav item
+    const lorasNavItem = document.getElementById('lorasNavItem');
+    const recipesNavItem = document.getElementById('recipesNavItem');
+    const checkpointsNavItem = document.getElementById('checkpointsNavItem');
+    
+    const lorasIndicator = document.getElementById('lorasIndicator');
+    const recipesIndicator = document.getElementById('recipesIndicator');
+    const checkpointsIndicator = document.getElementById('checkpointsIndicator');
+    
+    if (currentPath === '/loras') {
+      lorasNavItem.classList.add('active');
+      lorasIndicator.style.display = 'block';
+    } else if (currentPath === '/loras/recipes') {
+      recipesNavItem.classList.add('active');
+      recipesIndicator.style.display = 'block';
+    } else if (currentPath === '/checkpoints') {
+      checkpointsNavItem.classList.add('active');
+      checkpointsIndicator.style.display = 'block';
+    }
+  });
+</script>

templates/loras.html

@@ -45,7 +45,7 @@
         });
     </script>
 </head>
-<body>
+<body data-page="loras">
     {% include 'components/header.html' %}
 
     <div class="page-content">

templates/recipes.html

@@ -35,7 +35,7 @@
     <!-- Resource loading strategy -->
     <link rel="preconnect" href="https://cdnjs.cloudflare.com">
 </head>
-<body>
+<body data-page="recipes">
     {% include 'components/header.html' %}
 
     <div class="page-content">
@@ -134,6 +134,16 @@
     {% endif %}
     
     <!-- Recipe page specific scripts -->
+    <script type="module">
+        import { RecipeFilterManager } from '/loras_static/js/managers/RecipeFilterManager.js';
+        
+        // Initialize the recipe filter manager
+        window.recipeFilterManager = new RecipeFilterManager();
+        
+        // Make it globally available
+        window.filterManager = window.recipeFilterManager; // For compatibility with existing code
+    </script>
+
     <script>
         // Refresh recipes
         function refreshRecipes() {
@@ -141,29 +151,14 @@
             window.location.reload();
         }
         
-        // Placeholder for recipe filter manager
-        const recipeFilterManager = {
-            toggleFilterPanel() {
-                const panel = document.getElementById('filterPanel');
-                panel.classList.toggle('hidden');
-            },
-            
-            closeFilterPanel() {
-                document.getElementById('filterPanel').classList.add('hidden');
-            },
-            
-            clearFilters() {
-                // Clear filters and reset UI
-                document.querySelectorAll('.filter-tags .tag.active').forEach(tag => {
-                    tag.classList.remove('active');
-                });
-                
-                document.getElementById('activeFiltersCount').style.display = 'none';
-                
-                // Reapply default view
-                refreshRecipes();
+        // Import recipes
+        function importRecipes() {
+            // Show import modal
+            const importModal = document.getElementById('importModal');
+            if (importModal) {
+                importModal.classList.remove('hidden');
             }
-        };
+        }
     </script>
 </body>
 </html>