From e5869648fb798e7812af5dec74ab836216b413da Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Wed, 24 Dec 2025 20:46:14 +0800
Subject: [PATCH] feat: Add keyboard navigation hints and a breadcrumb
 container to the recipes page, and refactor control layout.

---
 templates/recipes.html | 135 ++++++++++++++++++++++++++---------------
 1 file changed, 86 insertions(+), 49 deletions(-)

diff --git a/templates/recipes.html b/templates/recipes.html
index 2820a6a1..7f930874 100644
--- a/templates/recipes.html
+++ b/templates/recipes.html
@@ -48,57 +48,94 @@
 {% block content %}
 <!-- Recipe controls -->
 <div class="controls">
-    <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">
-            <button onclick="recipeManager.refreshRecipes()"><i class="fas fa-sync"></i> {{ t('common.actions.refresh')
-                }}</button>
-        </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 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 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">
+                <button onclick="recipeManager.refreshRecipes()"><i class="fas fa-sync"></i> {{
+                    t('common.actions.refresh')
+                    }}</button>
+            </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 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="keyboard-nav-hint tooltip">
+                <i class="fas fa-keyboard"></i>
+                <span class="tooltiptext">
+                    <span>{{ t('keyboard.navigation') }}</span>
+                    <table class="keyboard-shortcuts">
+                        <tr>
+                            <td><span class="key">Page Up</span></td>
+                            <td>{{ t('keyboard.shortcuts.pageUp') }}</td>
+                        </tr>
+                        <tr>
+                            <td><span class="key">Page Down</span></td>
+                            <td>{{ t('keyboard.shortcuts.pageDown') }}</td>
+                        </tr>
+                        <tr>
+                            <td><span class="key">Home</span></td>
+                            <td>{{ t('keyboard.shortcuts.home') }}</td>
+                        </tr>
+                        <tr>
+                            <td><span class="key">End</span></td>
+                            <td>{{ t('keyboard.shortcuts.end') }}</td>
+                        </tr>
+                    </table>
+                </span>
+            </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>