feat(context-menu): refactor context menu initialization and coordination for improved bulk operations

static/js/components/ContextMenu/BaseContextMenu.js

@@ -15,17 +15,6 @@ export class BaseContextMenu {
     init() {
         // Hide menu on regular clicks
         document.addEventListener('click', () => this.hideMenu());
-        
-        // Show menu on right-click on cards
-        document.addEventListener('contextmenu', (e) => {
-            const card = e.target.closest(this.cardSelector);
-            if (!card) {
-                this.hideMenu();
-                return;
-            }
-            e.preventDefault();
-            this.showMenu(e.clientX, e.clientY, card);
-        });
 
         // Handle menu item clicks
         this.menu.addEventListener('click', (e) => {

static/js/components/ContextMenu/BulkContextMenu.js

@@ -1,8 +1,7 @@
 import { BaseContextMenu } from './BaseContextMenu.js';
 import { state } from '../../state/index.js';
 import { bulkManager } from '../../managers/BulkManager.js';
-import { translate, updateElementText } from '../../utils/i18nHelpers.js';
-import { MODEL_TYPES } from '../../api/apiConfig.js';
+import { updateElementText } from '../../utils/i18nHelpers.js';
 
 export class BulkContextMenu extends BaseContextMenu {
     constructor() {
@@ -10,39 +9,6 @@ export class BulkContextMenu extends BaseContextMenu {
         this.setupBulkMenuItems();
     }
 
-    init() {
-        // Override parent init to handle bulk-specific context menu logic
-        document.addEventListener('click', () => this.hideMenu());
-        
-        document.addEventListener('contextmenu', (e) => {
-            const card = e.target.closest('.model-card');
-            if (!card || !state.bulkMode) {
-                this.hideMenu();
-                return;
-            }
-            
-            // Show bulk menu only if right-clicking on a selected card
-            if (card.classList.contains('selected')) {
-                e.preventDefault();
-                this.showMenu(e.clientX, e.clientY, card);
-            } else {
-                this.hideMenu();
-            }
-        });
-
-        // Handle menu item clicks
-        this.menu.addEventListener('click', (e) => {
-            const menuItem = e.target.closest('.context-menu-item');
-            if (!menuItem || !this.currentCard) return;
-
-            const action = menuItem.dataset.action;
-            if (!action) return;
-            
-            this.handleMenuAction(action, menuItem);
-            this.hideMenu();
-        });
-    }
-
     setupBulkMenuItems() {
         if (!this.menu) return;
 

static/js/components/ContextMenu/index.js

@@ -2,4 +2,56 @@ export { LoraContextMenu } from './LoraContextMenu.js';
 export { RecipeContextMenu } from './RecipeContextMenu.js';
 export { CheckpointContextMenu } from './CheckpointContextMenu.js';
 export { EmbeddingContextMenu } from './EmbeddingContextMenu.js';
-export { ModelContextMenuMixin } from './ModelContextMenuMixin.js';
+export { ModelContextMenuMixin } from './ModelContextMenuMixin.js';
+
+import { LoraContextMenu } from './LoraContextMenu.js';
+import { RecipeContextMenu } from './RecipeContextMenu.js';
+import { CheckpointContextMenu } from './CheckpointContextMenu.js';
+import { EmbeddingContextMenu } from './EmbeddingContextMenu.js';
+import { state } from '../../state/index.js';
+
+// Factory method to create page-specific context menu instances
+export function createPageContextMenu(pageType) {
+    switch (pageType) {
+        case 'loras':
+            return new LoraContextMenu();
+        case 'recipes':
+            return new RecipeContextMenu();
+        case 'checkpoints':
+            return new CheckpointContextMenu();
+        case 'embeddings':
+            return new EmbeddingContextMenu();
+        default:
+            return null;
+    }
+}
+
+// Initialize context menu coordination for pages that support it
+export function initializeContextMenuCoordination(pageContextMenu, bulkContextMenu) {
+    // Centralized context menu event handler
+    document.addEventListener('contextmenu', (e) => {
+        const card = e.target.closest('.model-card');
+        if (!card) {
+            // Hide all menus if not right-clicking on a card
+            pageContextMenu?.hideMenu();
+            bulkContextMenu?.hideMenu();
+            return;
+        }
+        
+        e.preventDefault();
+        
+        // Hide all menus first
+        pageContextMenu?.hideMenu();
+        bulkContextMenu?.hideMenu();
+        
+        // Determine which menu to show based on bulk mode and selection state
+        if (state.bulkMode && card.classList.contains('selected')) {
+            // Show bulk menu for selected cards in bulk mode
+            bulkContextMenu?.showMenu(e.clientX, e.clientY, card);
+        } else if (!state.bulkMode) {
+            // Show regular menu when not in bulk mode
+            pageContextMenu?.showMenu(e.clientX, e.clientY, card);
+        }
+        // Don't show any menu for unselected cards in bulk mode
+    });
+}