Add refresh metadata functionality to context menu and improve item state handling

static/css/components/menu.css

@@ -26,6 +26,16 @@
     color: var(--lora-text);
 }
 
+.context-menu-item.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.context-menu-item.disabled:hover {
+    background: var(--lora-surface);
+    color: var(--text-color);
+}
+
 .context-menu-separator {
     height: 1px;
     background-color: var(--border-color);

static/js/api/loraApi.js

@@ -286,4 +286,33 @@ export async function refreshLoras() {
         state.loadingManager.hide();
         state.loadingManager.restoreProgressBar();
     }
+}
+
+export async function refreshSingleLoraMetadata(filePath) {
+    try {
+        const response = await fetch('/api/fetch-civitai', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ file_path: filePath })
+        });
+
+        if (!response.ok) {
+            throw new Error('Failed to refresh metadata');
+        }
+
+        const data = await response.json();
+        
+        if (data.success) {
+            showToast('Metadata refreshed successfully', 'success');
+            // Reload the current view to show updated data
+            await resetAndReload();
+        } else {
+            throw new Error(data.error || 'Failed to refresh metadata');
+        }
+    } catch (error) {
+        console.error('Error refreshing metadata:', error);
+        showToast(error.message, 'error');
+    }
 }

static/js/components/ContextMenu.js

@@ -1,3 +1,5 @@
+import { refreshSingleLoraMetadata } from '../api/loraApi.js';
+
 export class LoraContextMenu {
     constructor() {
         this.menu = document.getElementById('loraContextMenu');
@@ -18,8 +20,16 @@ export class LoraContextMenu {
         });
 
         this.menu.addEventListener('click', (e) => {
-            const action = e.target.closest('.context-menu-item')?.dataset.action;
-            if (!action || !this.currentCard) return;
+            const menuItem = e.target.closest('.context-menu-item');
+            if (!menuItem || !this.currentCard) return;
+            
+            // Don't process disabled items
+            if (menuItem.classList.contains('disabled')) {
+                return;
+            }
+
+            const action = menuItem.dataset.action;
+            if (!action) return;
             
             switch(action) {
                 case 'detail':
@@ -44,6 +54,9 @@ export class LoraContextMenu {
                 case 'move':
                     moveManager.showMoveModal(this.currentCard.dataset.filepath);
                     break;
+                case 'refresh-metadata':
+                    refreshSingleLoraMetadata(this.currentCard.dataset.filepath);
+                    break;
             }
             
             this.hideMenu();
@@ -54,6 +67,11 @@ export class LoraContextMenu {
         this.currentCard = card;
         this.menu.style.display = 'block';
         
+        // Update civitai menu item state
+        const civitaiItem = this.menu.querySelector('[data-action="civitai"]');
+        const fromCivitai = card.dataset.from_civitai === 'true';
+        civitaiItem.classList.toggle('disabled', !fromCivitai);
+
         // 获取菜单尺寸
         const menuRect = this.menu.getBoundingClientRect();