From 6816d759339243f2c416483bf1684a980f1e0199 Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Fri, 19 Jun 2026 22:41:50 +0800
Subject: [PATCH] refactor(recipes): unify controls and breadcrumb UI with
 model pages

- Replace inline controls+breadcrumb in recipes.html with shared includes
- Add page_id conditionals in controls.html to adapt buttons per page type
- Unify customFilterText selector to class-based in recipes.js
- Add [data-action="find-duplicates"] event listener for unified button
- Fix i18n keys to use recipes-specific translations on recipes page
---
 static/js/recipes.js               | 10 +++-
 templates/components/controls.html | 34 ++++++++++--
 templates/recipes.html             | 88 +-----------------------------
 3 files changed, 39 insertions(+), 93 deletions(-)

diff --git a/static/js/recipes.js b/static/js/recipes.js
index 67a5a43c..73accc93 100644
--- a/static/js/recipes.js
+++ b/static/js/recipes.js
@@ -149,9 +149,10 @@ class RecipeManager {
 
     _showCustomFilterIndicator() {
         const indicator = document.getElementById('customFilterIndicator');
-        const textElement = document.getElementById('customFilterText');
+        if (!indicator) return;
+        const textElement = indicator.querySelector('.customFilterText');
 
-        if (!indicator || !textElement) return;
+        if (!textElement) return;
 
         // Update text based on filter type
         let filterText = '';
@@ -250,6 +251,11 @@ class RecipeManager {
             bulkButton.addEventListener('click', () => window.bulkManager?.toggleBulkMode());
         }
 
+        const duplicatesButton = document.querySelector('[data-action="find-duplicates"]');
+        if (duplicatesButton) {
+            duplicatesButton.addEventListener('click', () => this.findDuplicateRecipes());
+        }
+
         const favoriteFilterBtn = document.getElementById('favoriteFilterBtn');
         if (favoriteFilterBtn) {
             favoriteFilterBtn.addEventListener('click', () => {
diff --git a/templates/components/controls.html b/templates/components/controls.html
index 8b9b98ca..fb22f016 100644
--- a/templates/components/controls.html
+++ b/templates/components/controls.html
@@ -1,4 +1,5 @@
 <div class="controls">
+    {% if page_id != 'recipes' %}
     <div id="excludedViewBanner" class="excluded-view-banner hidden">
         <div class="excluded-view-banner__content">
             <div class="excluded-view-banner__title">
@@ -11,42 +12,52 @@
             </button>
         </div>
     </div>
+    {% endif %}
     <div class="actions">
         <div class="action-buttons">
-            <div title="{{ t('loras.controls.sort.title') }}" class="control-group">
+            <div title="{% if page_id == 'recipes' %}{{ t('recipes.controls.sort.title') }}{% else %}{{ t('loras.controls.sort.title') }}{% endif %}" class="control-group">
                 <select id="sortSelect">
                     <optgroup label="{{ t('loras.controls.sort.name') }}">
                         <option value="name:asc">{{ t('loras.controls.sort.nameAsc') }}</option>
                         <option value="name:desc">{{ t('loras.controls.sort.nameDesc') }}</option>
                     </optgroup>
-                    <optgroup label="{{ t('loras.controls.sort.date') }}">
+                    <optgroup label="{% if page_id == 'recipes' %}{{ t('recipes.controls.sort.date') }}{% else %}{{ t('loras.controls.sort.date') }}{% endif %}">
                         <option value="date:desc">{{ t('loras.controls.sort.dateDesc') }}</option>
                         <option value="date:asc">{{ t('loras.controls.sort.dateAsc') }}</option>
                     </optgroup>
+                    {% if page_id != 'recipes' %}
                     <optgroup label="{{ t('loras.controls.sort.size') }}">
                         <option value="size:desc">{{ t('loras.controls.sort.sizeDesc') }}</option>
                         <option value="size:asc">{{ t('loras.controls.sort.sizeAsc') }}</option>
                     </optgroup>
-                    {% if page_id != 'embeddings' %}
+                    {% endif %}
+                    {% if page_id != 'embeddings' and page_id != 'recipes' %}
                         <optgroup label="{{ t('loras.controls.sort.usage', default='Usage') }}">
                             <option value="usage:desc">{{ t('loras.controls.sort.usageDesc', default='Times used (high to low)') }}</option>
                             <option value="usage:asc">{{ t('loras.controls.sort.usageAsc', default='Times used (low to high)') }}</option>
                         </optgroup>
                     {% endif %}
+                    {% if page_id == 'recipes' %}
+                        <optgroup label="{{ t('recipes.controls.sort.lorasCount') }}">
+                            <option value="loras_count:desc">{{ t('recipes.controls.sort.lorasCountDesc') }}</option>
+                            <option value="loras_count:asc">{{ t('recipes.controls.sort.lorasCountAsc') }}</option>
+                        </optgroup>
+                    {% endif %}
                 </select>
             </div>
-            <div title="{{ t('loras.controls.refresh.title') }}" class="control-group dropdown-group">
+            <div title="{% if page_id == 'recipes' %}{{ t('recipes.controls.refresh.title') }}{% else %}{{ t('loras.controls.refresh.title') }}{% endif %}" class="control-group dropdown-group">
                 <button data-action="refresh" class="dropdown-main"><i class="fas fa-sync"></i> <span>{{ t('common.actions.refresh') }}</span></button>
                 <button class="dropdown-toggle" aria-label="Show refresh options">
                     <i class="fas fa-caret-down"></i>
                 </button>
                 <div class="dropdown-menu">
-                    <div class="dropdown-item" data-action="full-rebuild" title="{{ t('loras.controls.refresh.fullTooltip') }}">
-                        <i class="fas fa-tools"></i> <span>{{ t('loras.controls.refresh.full') }}</span>
+                    <div class="dropdown-item" data-action="full-rebuild" title="{% if page_id == 'recipes' %}{{ t('recipes.controls.refresh.fullTooltip', default='Rebuild cache - full rescan of all recipe files') }}{% else %}{{ t('loras.controls.refresh.fullTooltip') }}{% endif %}">
+                        <i class="fas fa-tools"></i> <span>{% if page_id == 'recipes' %}{{ t('loras.controls.refresh.full', default='Rebuild Cache') }}{% else %}{{ t('loras.controls.refresh.full') }}{% endif %}</span>
                     </div>
                 </div>
             </div>
             
+            {% if page_id != 'recipes' %}
             <div class="control-group">
                 <button data-action="fetch" title="{{ t('loras.controls.fetch.title') }}"><i class="fas fa-download"></i> <span>{{ t('loras.controls.fetch.action') }}</span></button>
             </div>
@@ -55,6 +66,15 @@
                     <i class="fas fa-cloud-download-alt"></i> <span>{{ t('loras.controls.download.action') }}</span>
                 </button>
             </div>
+            {% endif %}
+            {% if page_id == 'recipes' %}
+            <div title="{{ t('recipes.controls.import.title') }}" class="control-group">
+                <button onclick="importManager.showImportModal()"><i class="fas fa-file-import"></i> {{ t('recipes.controls.import.action') }}</button>
+            </div>
+            <div title="{{ t('recipes.batchImport.title') }}" class="control-group">
+                <button onclick="batchImportManager.showModal()"><i class="fas fa-layer-group"></i> {{ t('recipes.batchImport.action') }}</button>
+            </div>
+            {% endif %}
             <div class="control-group">
                 <button id="bulkOperationsBtn" data-action="bulk" title="{{ t('loras.controls.bulk.title') }}">
                     <i class="fas fa-th-large"></i> <span><span>{{ t('loras.controls.bulk.action') }}</span> <div class="shortcut-key">B</div></span>
@@ -71,6 +91,7 @@
                     <i class="fas fa-star"></i> <span>{{ t('loras.controls.favorites.action') }}</span>
                 </button>
             </div>
+            {% if page_id != 'recipes' %}
             <div class="control-group dropdown-group update-filter-group">
                 <button id="updateFilterBtn" data-action="toggle-updates" class="dropdown-main update-filter" title="{{ t('loras.controls.updates.title') }}">
                     <i class="fas fa-exclamation-circle"></i> <span>{{ t('loras.controls.updates.action') }}</span>
@@ -84,6 +105,7 @@
                     </div>
                 </div>
             </div>
+            {% endif %}
             <div id="customFilterIndicator" class="control-group hidden">
                 <div class="filter-active">
                     <i class="fas fa-filter"></i> <span class="customFilterText" title=""></span>
diff --git a/templates/recipes.html b/templates/recipes.html
index cc61ec2d..26d6b485 100644
--- a/templates/recipes.html
+++ b/templates/recipes.html
@@ -62,91 +62,9 @@
 
 {% block content %}
 <!-- Recipe controls -->
-<div class="controls">
-    <div class="actions">
-        <div class="action-buttons">
-            <div class="control-group">
-                <select id="sortSelect" title="{{ t('recipes.controls.sort.title') }}">
-                    <optgroup label="{{ t('recipes.controls.sort.name') }}">
-                        <option value="name:asc">{{ t('recipes.controls.sort.nameAsc') }}</option>
-                        <option value="name:desc">{{ t('recipes.controls.sort.nameDesc') }}</option>
-                    </optgroup>
-                    <optgroup label="{{ t('recipes.controls.sort.date') }}">
-                        <option value="date:desc">{{ t('recipes.controls.sort.dateDesc') }}</option>
-                        <option value="date:asc">{{ t('recipes.controls.sort.dateAsc') }}</option>
-                    </optgroup>
-                    <optgroup label="{{ t('recipes.controls.sort.lorasCount') }}">
-                        <option value="loras_count:desc">{{ t('recipes.controls.sort.lorasCountDesc') }}</option>
-                        <option value="loras_count:asc">{{ t('recipes.controls.sort.lorasCountAsc') }}</option>
-                    </optgroup>
-                </select>
-            </div>
-            <div title="{{ t('recipes.controls.refresh.title') }}" class="control-group dropdown-group">
-                <button data-action="refresh" class="dropdown-main"><i class="fas fa-sync"></i> <span>{{
-                    t('common.actions.refresh') }}</span></button>
-                <button class="dropdown-toggle" aria-label="Show refresh options">
-                    <i class="fas fa-caret-down"></i>
-                </button>
-                <div class="dropdown-menu">
-                    <div class="dropdown-item" data-action="full-rebuild" title="{{ t('recipes.controls.refresh.fullTooltip', default='Rebuild cache - full rescan of all recipe files') }}">
-                        <i class="fas fa-tools"></i> <span>{{ t('loras.controls.refresh.full', default='Rebuild Cache') }}</span>
-                    </div>
-                </div>
-            </div>
-            <div title="{{ t('recipes.controls.import.title') }}" class="control-group">
-                <button onclick="importManager.showImportModal()"><i class="fas fa-file-import"></i> {{
-                    t('recipes.controls.import.action') }}</button>
-            </div>
-            <div title="{{ t('recipes.batchImport.title') }}" class="control-group">
-                <button onclick="batchImportManager.showModal()"><i class="fas fa-layer-group"></i> {{
-                    t('recipes.batchImport.action') }}</button>
-            </div>
-            <div class="control-group" title="{{ t('loras.controls.bulk.title') }}">
-                <button id="bulkOperationsBtn" data-action="bulk" title="{{ t('loras.controls.bulk.title') }}">
-                    <i class="fas fa-th-large"></i> <span><span>{{ t('loras.controls.bulk.action') }}</span>
-                        <div class="shortcut-key">B</div>
-                    </span>
-                </button>
-            </div>
-            <!-- Add duplicate detection button -->
-            <div title="{{ t('loras.controls.duplicates.title') }}" class="control-group">
-                <button onclick="recipeManager.findDuplicateRecipes()"><i class="fas fa-clone"></i> {{
-                    t('loras.controls.duplicates.action') }}</button>
-            </div>
-            <div class="control-group">
-                <button id="favoriteFilterBtn" data-action="toggle-favorites" class="favorite-filter"
-                    title="{{ t('recipes.controls.favorites.title') }}">
-                    <i class="fas fa-star"></i> <span>{{ t('recipes.controls.favorites.action') }}</span>
-                </button>
-            </div>
-            <!-- Custom filter indicator button (hidden by default) -->
-            <div id="customFilterIndicator" class="control-group hidden">
-                <div class="filter-active">
-                    <i class="fas fa-filter"></i> <span id="customFilterText">{{ t('recipes.controls.filteredByLora')
-                        }}</span>
-                    <i class="fas fa-times-circle clear-filter"></i>
-                </div>
-            </div>
-        </div>
-
-        <div class="controls-right">
-            <div class="control-group doctor-control-group">
-                <button id="doctorTriggerBtn" class="doctor-trigger" title="{{ t('doctor.buttonTitle', default='Run diagnostics and common fixes') }}">
-                    <i class="fas fa-stethoscope"></i>
-                    <span>{{ t('doctor.title', default='Doctor') }}</span>
-                    <span id="doctorStatusBadge" class="doctor-status-badge hidden" aria-hidden="true"></span>
-                </button>
-            </div>
-        </div>
-    </div>
-
-    <!-- Breadcrumb Navigation -->
-    <div id="breadcrumbContainer" class="sidebar-breadcrumb-container">
-        <nav class="sidebar-breadcrumb-nav" id="sidebarBreadcrumbNav">
-            <!-- Breadcrumbs will be populated by JavaScript -->
-        </nav>
-    </div>
-</div>
+{% include 'components/controls.html' %}
+<!-- Breadcrumb Navigation -->
+{% include 'components/breadcrumb.html' %}
 
 <!-- Duplicates banner (hidden by default) -->
 <div id="duplicatesBanner" class="duplicates-banner" style="display: none;">