fix(ui): unify context menu ordering and add visual section separators across all menus

static/css/components/menu.css

@@ -34,6 +34,12 @@
     margin: 4px 0;
 }
 
+/* Lighter separator between category groups (vs the full separator before destructive) */
+.context-menu-separator.menu-section-break {
+    opacity: 0.4;
+    margin: 3px 0;
+}
+
 .context-menu-item.delete-item {
     color: var(--danger-color);
 }

templates/checkpoints.html

@@ -10,17 +10,27 @@
 {% block additional_components %}
 
 <div id="checkpointContextMenu" class="context-menu" style="display: none;">
+    <!-- Metadata -->
     <div class="context-menu-item" data-action="refresh-metadata"><i class="fas fa-sync"></i> {{ t('loras.contextMenu.refreshMetadata') }}</div>
     <div class="context-menu-item" data-action="relink-civitai"><i class="fas fa-link"></i> {{ t('loras.contextMenu.relinkCivitai') }}</div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Workflow -->
     <div class="context-menu-item" data-action="copyname"><i class="fas fa-copy"></i> {{ t('loras.contextMenu.copyFilename') }}</div>
     <div class="context-menu-item" data-action="sendworkflow"><i class="fas fa-paper-plane"></i> {{ t('checkpoints.contextMenu.sendToWorkflow') }}</div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Media / Preview -->
     <div class="context-menu-item" data-action="preview"><i class="fas fa-folder-open"></i> {{ t('loras.contextMenu.openExamples') }}</div>
     <div class="context-menu-item" data-action="download-examples"><i class="fas fa-download"></i> {{ t('loras.contextMenu.downloadExamples') }}</div>
     <div class="context-menu-item" data-action="replace-preview"><i class="fas fa-image"></i> {{ t('loras.contextMenu.replacePreview') }}</div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Attributes -->
     <div class="context-menu-item" data-action="set-nsfw"><i class="fas fa-exclamation-triangle"></i> {{ t('loras.contextMenu.setContentRating') }}</div>
-    <div class="context-menu-separator"></div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Organization -->
     <div class="context-menu-item" data-action="move"><i class="fas fa-folder-open"></i> {{ t('loras.contextMenu.moveToFolder') }}</div>
     <div class="context-menu-item" data-action="move-other"><i class="fas fa-exchange-alt"></i> {{ t('checkpoints.contextMenu.moveToOtherTypeFolder', {otherType: '...'}) }}</div>
+    <div class="context-menu-separator"></div>
+    <!-- Destructive -->
     <div class="context-menu-item" data-action="exclude"><i class="fas fa-eye-slash"></i> {{ t('loras.contextMenu.excludeModel') }}</div>
     <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> {{ t('loras.contextMenu.deleteModel') }}</div>
 </div>

templates/components/context_menu.html

@@ -5,6 +5,7 @@
     <!-- <div class="context-menu-item" data-action="civitai">
         <i class="fas fa-external-link-alt"></i> View on Civitai
     </div> -->
+    <!-- Metadata -->
     <div class="context-menu-item" data-action="refresh-metadata">
         <i class="fas fa-sync"></i> <span>{{ t('loras.contextMenu.refreshMetadata') }}</span>
     </div>
@@ -14,6 +15,8 @@
     <div class="context-menu-item" data-action="relink-civitai">
         <i class="fas fa-link"></i> <span>{{ t('loras.contextMenu.relinkCivitai') }}</span>
     </div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Workflow -->
     <div class="context-menu-item" data-action="copyname">
         <i class="fas fa-copy"></i> <span>{{ t('loras.contextMenu.copySyntax') }}</span>
     </div>
@@ -23,6 +26,8 @@
     <div class="context-menu-item" data-action="sendreplace">
         <i class="fas fa-exchange-alt"></i> <span>{{ t('loras.contextMenu.sendToWorkflowReplace') }}</span>
     </div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Media / Preview -->
     <div class="context-menu-item" data-action="preview">
         <i class="fas fa-folder-open"></i> <span>{{ t('loras.contextMenu.openExamples') }}</span>
     </div>
@@ -32,13 +37,18 @@
     <div class="context-menu-item" data-action="replace-preview">
         <i class="fas fa-image"></i> <span>{{ t('loras.contextMenu.replacePreview') }}</span>
     </div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Attributes -->
     <div class="context-menu-item" data-action="set-nsfw">
         <i class="fas fa-exclamation-triangle"></i> <span>{{ t('loras.contextMenu.setContentRating') }}</span>
     </div>
-    <div class="context-menu-separator"></div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Organization -->
     <div class="context-menu-item" data-action="move">
         <i class="fas fa-folder-open"></i> <span>{{ t('loras.contextMenu.moveToFolder') }}</span>
     </div>
+    <div class="context-menu-separator"></div>
+    <!-- Destructive -->
     <div class="context-menu-item" data-action="exclude">
         <i class="fas fa-eye-slash"></i> <span>{{ t('loras.contextMenu.excludeModel') }}</span>
     </div>
@@ -53,25 +63,6 @@
         <span>{{ t('loras.bulkOperations.selected', {'count': 0}) }}</span>
     </div>
     <div class="context-menu-separator"></div>
-    <div class="context-menu-section" data-section="workflow">
-        <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.workflow') }}</div>
-        <div class="context-menu-item has-submenu" data-has-submenu="send-to-workflow">
-            <i class="fas fa-paper-plane"></i>
-            <span>{{ t('loras.bulkOperations.sendToWorkflow') }}</span>
-            <i class="fas fa-chevron-right submenu-arrow"></i>
-            <div class="context-submenu">
-                <div class="context-menu-item" data-action="send-to-workflow-append">
-                    <i class="fas fa-paper-plane"></i> <span>{{ t('loras.contextMenu.sendToWorkflowAppend') }}</span>
-                </div>
-                <div class="context-menu-item" data-action="send-to-workflow-replace">
-                    <i class="fas fa-exchange-alt"></i> <span>{{ t('loras.contextMenu.sendToWorkflowReplace') }}</span>
-                </div>
-                <div class="context-menu-item" data-action="copy-all">
-                    <i class="fas fa-copy"></i> <span>{{ t('loras.bulkOperations.copyAll') }}</span>
-                </div>
-            </div>
-        </div>
-    </div>
     <div class="context-menu-section" data-section="metadata">
         <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.metadata') }}</div>
         <div class="context-menu-item" data-action="refresh-all">
@@ -93,6 +84,25 @@
             <i class="fas fa-redo"></i> <span>{{ t('loras.bulkOperations.resumeMetadataRefresh') }}</span>
         </div>
     </div>
+    <div class="context-menu-section" data-section="workflow">
+        <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.workflow') }}</div>
+        <div class="context-menu-item has-submenu" data-has-submenu="send-to-workflow">
+            <i class="fas fa-paper-plane"></i>
+            <span>{{ t('loras.bulkOperations.sendToWorkflow') }}</span>
+            <i class="fas fa-chevron-right submenu-arrow"></i>
+            <div class="context-submenu">
+                <div class="context-menu-item" data-action="send-to-workflow-append">
+                    <i class="fas fa-paper-plane"></i> <span>{{ t('loras.contextMenu.sendToWorkflowAppend') }}</span>
+                </div>
+                <div class="context-menu-item" data-action="send-to-workflow-replace">
+                    <i class="fas fa-exchange-alt"></i> <span>{{ t('loras.contextMenu.sendToWorkflowReplace') }}</span>
+                </div>
+                <div class="context-menu-item" data-action="copy-all">
+                    <i class="fas fa-copy"></i> <span>{{ t('loras.bulkOperations.copyAll') }}</span>
+                </div>
+            </div>
+        </div>
+    </div>
     <div class="context-menu-section" data-section="attributes">
         <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.attributes') }}</div>
         <div class="context-menu-item" data-action="add-tags">
@@ -108,15 +118,6 @@
             <i class="fas fa-exclamation-triangle"></i> <span>{{ t('loras.bulkOperations.setContentRating') }}</span>
         </div>
     </div>
-    <div class="context-menu-section" data-section="organize">
-        <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.organize') }}</div>
-        <div class="context-menu-item" data-action="auto-organize">
-            <i class="fas fa-magic"></i> <span>{{ t('loras.bulkOperations.autoOrganize') }}</span>
-        </div>
-        <div class="context-menu-item" data-action="move-all">
-            <i class="fas fa-folder-open"></i> <span>{{ t('loras.bulkOperations.moveAll') }}</span>
-        </div>
-    </div>
     <div class="context-menu-section" data-section="download">
         <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.download') }}</div>
         <div class="context-menu-item" data-action="download-example-images">
@@ -126,6 +127,15 @@
             <i class="fas fa-download"></i> <span>{{ t('loras.bulkOperations.downloadMissingLoras') }}</span>
         </div>
     </div>
+    <div class="context-menu-section" data-section="organize">
+        <div class="context-menu-section-header">{{ t('loras.bulkOperations.sections.organize') }}</div>
+        <div class="context-menu-item" data-action="auto-organize">
+            <i class="fas fa-magic"></i> <span>{{ t('loras.bulkOperations.autoOrganize') }}</span>
+        </div>
+        <div class="context-menu-item" data-action="move-all">
+            <i class="fas fa-folder-open"></i> <span>{{ t('loras.bulkOperations.moveAll') }}</span>
+        </div>
+    </div>
     <div class="context-menu-separator"></div>
     <div class="context-menu-item delete-item" data-action="delete-all">
         <i class="fas fa-trash"></i> <span>{{ t('loras.bulkOperations.deleteAll') }}</span>

templates/embeddings.html

@@ -10,15 +10,25 @@
 {% block additional_components %}
 
 <div id="embeddingContextMenu" class="context-menu" style="display: none;">
+    <!-- Metadata -->
     <div class="context-menu-item" data-action="refresh-metadata"><i class="fas fa-sync"></i> {{ t('loras.contextMenu.refreshMetadata') }}</div>
     <div class="context-menu-item" data-action="relink-civitai"><i class="fas fa-link"></i> {{ t('loras.contextMenu.relinkCivitai') }}</div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Workflow -->
     <div class="context-menu-item" data-action="copyname"><i class="fas fa-copy"></i> {{ t('loras.contextMenu.copyFilename') }}</div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Media / Preview -->
     <div class="context-menu-item" data-action="preview"><i class="fas fa-folder-open"></i> {{ t('loras.contextMenu.openExamples') }}</div>
     <div class="context-menu-item" data-action="download-examples"><i class="fas fa-download"></i> {{ t('loras.contextMenu.downloadExamples') }}</div>
     <div class="context-menu-item" data-action="replace-preview"><i class="fas fa-image"></i> {{ t('loras.contextMenu.replacePreview') }}</div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Attributes -->
     <div class="context-menu-item" data-action="set-nsfw"><i class="fas fa-exclamation-triangle"></i> {{ t('loras.contextMenu.setContentRating') }}</div>
-    <div class="context-menu-separator"></div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Organization -->
     <div class="context-menu-item" data-action="move"><i class="fas fa-folder-open"></i> {{ t('loras.contextMenu.moveToFolder') }}</div>
+    <div class="context-menu-separator"></div>
+    <!-- Destructive -->
     <div class="context-menu-item" data-action="exclude"><i class="fas fa-eye-slash"></i> {{ t('loras.contextMenu.excludeModel') }}</div>
     <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> {{ t('loras.contextMenu.deleteModel') }}</div>
 </div>

templates/recipes.html

@@ -17,6 +17,15 @@
 
 <div id="recipeContextMenu" class="context-menu" style="display: none;">
     <!-- <div class="context-menu-item" data-action="details"><i class="fas fa-info-circle"></i> View Details</div> -->
+    <!-- Metadata -->
+    <div class="context-menu-item" data-action="repair">
+        <i class="fas fa-tools"></i> {{ t('loras.contextMenu.repairMetadata') }}
+    </div>
+    <div class="context-menu-item" data-action="reimport">
+        <i class="fas fa-undo-alt"></i> {{ t('loras.contextMenu.reimportMetadata') }}
+    </div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Workflow / Share -->
     <div class="context-menu-item" data-action="share"><i class="fas fa-share-alt"></i> {{
         t('loras.contextMenu.shareRecipe') }}</div>
     <div class="context-menu-item" data-action="copy"><i class="fas fa-copy"></i> {{
@@ -25,22 +34,23 @@
         t('loras.contextMenu.sendToWorkflowAppend') }}</div>
     <div class="context-menu-item" data-action="sendreplace"><i class="fas fa-exchange-alt"></i> {{
         t('loras.contextMenu.sendToWorkflowReplace') }}</div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Recipe-specific -->
     <div class="context-menu-item" data-action="viewloras"><i class="fas fa-layer-group"></i> {{
         t('loras.contextMenu.viewAllLoras') }}</div>
     <div class="context-menu-item download-missing-item" data-action="download-missing"><i class="fas fa-download"></i>
         {{ t('loras.contextMenu.downloadMissingLoras') }}</div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Attributes -->
     <div class="context-menu-item" data-action="set-nsfw">
         <i class="fas fa-exclamation-triangle"></i> {{ t('loras.contextMenu.setContentRating') }}
     </div>
-    <div class="context-menu-item" data-action="repair">
-        <i class="fas fa-tools"></i> {{ t('loras.contextMenu.repairMetadata') }}
-    </div>
-    <div class="context-menu-item" data-action="reimport">
-        <i class="fas fa-undo-alt"></i> {{ t('loras.contextMenu.reimportMetadata') }}
-    </div>
-    <div class="context-menu-separator"></div>
+    <div class="context-menu-separator menu-section-break"></div>
+    <!-- Organization -->
     <div class="context-menu-item" data-action="move"><i class="fas fa-folder-open"></i> {{
         t('loras.contextMenu.moveToFolder') }}</div>
+    <div class="context-menu-separator"></div>
+    <!-- Destructive -->
     <div class="context-menu-item delete-item" data-action="delete"><i class="fas fa-trash"></i> {{
         t('loras.contextMenu.deleteRecipe') }}</div>
 </div>