refactor(settings): replace getStorageItem with state.global.settings for default root retrieval

static/js/components/shared/showcase/ShowcaseView.js

@@ -33,6 +33,20 @@ export async function loadExampleImages(images, modelHash) {
             const params = `model_hash=${modelHash}`;
             
             const response = await fetch(`${endpoint}?${params}`);
+            if (!response.ok) {
+                // Try to parse error message from backend
+                let errorMsg = `HTTP error ${response.status}`;
+                try {
+                    const errorData = await response.json();
+                    if (errorData && errorData.error) {
+                        errorMsg = errorData.error;
+                    }
+                } catch (e) {
+                    // Ignore JSON parse error
+                }
+                console.warn("Failed to get example files:", errorMsg);
+                return;
+            }
             const result = await response.json();
             
             if (result.success) {

static/js/managers/DownloadManager.js

@@ -308,7 +308,7 @@ export class DownloadManager {
             // Set default root if available
             const singularType = this.apiClient.modelType.replace(/s$/, '');
             const defaultRootKey = `default_${singularType}_root`;
-            const defaultRoot = getStorageItem('settings', {})[defaultRootKey];
+            const defaultRoot = state.global.settings[defaultRootKey];
             console.log(`Default root for ${this.apiClient.modelType}:`, defaultRoot);
             console.log('Available roots:', rootsData.roots);
             if (defaultRoot && rootsData.roots.includes(defaultRoot)) {

static/js/managers/ImportManager.js

@@ -228,7 +228,7 @@ export class ImportManager {
 
             // Set default root if available
             const defaultRootKey = 'default_lora_root';
-            const defaultRoot = getStorageItem('settings', {})[defaultRootKey];
+            const defaultRoot = state.global.settings[defaultRootKey];
             if (defaultRoot && rootsData.roots.includes(defaultRoot)) {
                 loraRoot.value = defaultRoot;
             }

static/js/managers/MoveManager.js

@@ -2,7 +2,6 @@ import { showToast } from '../utils/uiHelpers.js';
 import { state, getCurrentPageState } from '../state/index.js';
 import { modalManager } from './ModalManager.js';
 import { bulkManager } from './BulkManager.js';
-import { getStorageItem } from '../utils/storageHelpers.js';
 import { getModelApiClient } from '../api/modelApiFactory.js';
 import { FolderTreeManager } from '../components/FolderTreeManager.js';
 import { sidebarManager } from '../components/SidebarManager.js';
@@ -87,7 +86,7 @@ class MoveManager {
 
             // Set default root if available
             const settingsKey = `default_${currentPageType.slice(0, -1)}_root`;
-            const defaultRoot = getStorageItem('settings', {})[settingsKey];
+            const defaultRoot = state.global.settings[settingsKey];
             if (defaultRoot && rootsData.roots.includes(defaultRoot)) {
                 modelRootSelect.value = defaultRoot;
             }

static/js/managers/import/FolderBrowser.js

@@ -1,221 +0,0 @@
-import { showToast } from '../../utils/uiHelpers.js';
-import { translate } from '../../utils/i18nHelpers.js';
-import { getStorageItem } from '../../utils/storageHelpers.js';
-
-export class FolderBrowser {
-    constructor(importManager) {
-        this.importManager = importManager;
-        this.folderClickHandler = null;
-        this.updateTargetPath = this.updateTargetPath.bind(this);
-    }
-
-    async proceedToLocation() {
-        // Show the location step with special handling
-        this.importManager.stepManager.showStep('locationStep');
-        
-        // Double-check after a short delay to ensure the step is visible
-        setTimeout(() => {
-            const locationStep = document.getElementById('locationStep');
-            if (locationStep.style.display !== 'block' || 
-                window.getComputedStyle(locationStep).display !== 'block') {
-                // Force display again
-                locationStep.style.display = 'block';
-                
-                // If still not visible, try with injected style
-                if (window.getComputedStyle(locationStep).display !== 'block') {
-                    this.importManager.stepManager.injectedStyles = document.createElement('style');
-                    this.importManager.stepManager.injectedStyles.innerHTML = `
-                        #locationStep {
-                            display: block !important;
-                            opacity: 1 !important;
-                            visibility: visible !important;
-                        }
-                    `;
-                    document.head.appendChild(this.importManager.stepManager.injectedStyles);
-                }
-            }
-        }, 100);
-        
-        try {
-            // Display missing LoRAs that will be downloaded
-            const missingLorasList = document.getElementById('missingLorasList');
-            if (missingLorasList && this.importManager.downloadableLoRAs.length > 0) {
-                // Calculate total size
-                const totalSize = this.importManager.downloadableLoRAs.reduce((sum, lora) => {
-                    return sum + (lora.size ? parseInt(lora.size) : 0);
-                }, 0);
-                
-                // Update total size display
-                const totalSizeDisplay = document.getElementById('totalDownloadSize');
-                if (totalSizeDisplay) {
-                    totalSizeDisplay.textContent = this.importManager.formatFileSize(totalSize);
-                }
-                
-                // Update header to include count of missing LoRAs
-                const missingLorasHeader = document.querySelector('.summary-header h3');
-                if (missingLorasHeader) {
-                    missingLorasHeader.innerHTML = `Missing LoRAs <span class="lora-count-badge">(${this.importManager.downloadableLoRAs.length})</span> <span id="totalDownloadSize" class="total-size-badge">${this.importManager.formatFileSize(totalSize)}</span>`;
-                }
-                
-                // Generate missing LoRAs list
-                missingLorasList.innerHTML = this.importManager.downloadableLoRAs.map(lora => {
-                    const sizeDisplay = lora.size ? 
-                        this.importManager.formatFileSize(lora.size) : 'Unknown size';
-                    const baseModel = lora.baseModel ? 
-                        `<span class="lora-base-model">${lora.baseModel}</span>` : '';
-                    const isEarlyAccess = lora.isEarlyAccess;
-                    
-                    // Early access badge
-                    let earlyAccessBadge = '';
-                    if (isEarlyAccess) {
-                        earlyAccessBadge = `<span class="early-access-badge">
-                            <i class="fas fa-clock"></i> Early Access
-                        </span>`;
-                    }
-                    
-                    return `
-                        <div class="missing-lora-item ${isEarlyAccess ? 'is-early-access' : ''}">
-                            <div class="missing-lora-info">
-                                <div class="missing-lora-name">${lora.name}</div>
-                                ${baseModel}
-                                ${earlyAccessBadge}
-                            </div>
-                            <div class="missing-lora-size">${sizeDisplay}</div>
-                        </div>
-                    `;
-                }).join('');
-                
-                // Set up toggle for missing LoRAs list
-                const toggleBtn = document.getElementById('toggleMissingLorasList');
-                if (toggleBtn) {
-                    toggleBtn.addEventListener('click', () => {
-                        missingLorasList.classList.toggle('collapsed');
-                        const icon = toggleBtn.querySelector('i');
-                        if (icon) {
-                            icon.classList.toggle('fa-chevron-down');
-                            icon.classList.toggle('fa-chevron-up');
-                        }
-                    });
-                }
-            }
-            
-            // Fetch LoRA roots
-            const rootsResponse = await fetch('/api/lm/loras/roots');
-            if (!rootsResponse.ok) {
-                throw new Error(`Failed to fetch LoRA roots: ${rootsResponse.status}`);
-            }
-            
-            const rootsData = await rootsResponse.json();
-            const loraRoot = document.getElementById('importLoraRoot');
-            if (loraRoot) {
-                loraRoot.innerHTML = rootsData.roots.map(root => 
-                    `<option value="${root}">${root}</option>`
-                ).join('');
-                
-                // Set default lora root if available
-                const defaultRoot = getStorageItem('settings', {}).default_lora_root;
-                if (defaultRoot && rootsData.roots.includes(defaultRoot)) {
-                    loraRoot.value = defaultRoot;
-                }
-            }
-            
-            // Fetch folders
-            const foldersResponse = await fetch('/api/lm/loras/folders');
-            if (!foldersResponse.ok) {
-                throw new Error(`Failed to fetch folders: ${foldersResponse.status}`);
-            }
-            
-            const foldersData = await foldersResponse.json();
-            const folderBrowser = document.getElementById('importFolderBrowser');
-            if (folderBrowser) {
-                folderBrowser.innerHTML = foldersData.folders.map(folder => 
-                    folder ? `<div class="folder-item" data-folder="${folder}">${folder}</div>` : ''
-                ).join('');
-            }
-
-            // Initialize folder browser after loading data
-            this.initializeFolderBrowser();
-        } catch (error) {
-            console.error('Error in API calls:', error);
-            showToast('toast.recipes.folderBrowserError', { message: error.message }, 'error');
-        }
-    }
-
-    initializeFolderBrowser() {
-        const folderBrowser = document.getElementById('importFolderBrowser');
-        if (!folderBrowser) return;
-
-        // Cleanup existing handler if any
-        this.cleanup();
-
-        // Create new handler
-        this.folderClickHandler = (event) => {
-            const folderItem = event.target.closest('.folder-item');
-            if (!folderItem) return;
-
-            if (folderItem.classList.contains('selected')) {
-                folderItem.classList.remove('selected');
-                this.importManager.selectedFolder = '';
-            } else {
-                folderBrowser.querySelectorAll('.folder-item').forEach(f => 
-                    f.classList.remove('selected'));
-                folderItem.classList.add('selected');
-                this.importManager.selectedFolder = folderItem.dataset.folder;
-            }
-            
-            // Update path display after folder selection
-            this.updateTargetPath();
-        };
-
-        // Add the new handler
-        folderBrowser.addEventListener('click', this.folderClickHandler);
-        
-        // Add event listeners for path updates
-        const loraRoot = document.getElementById('importLoraRoot');
-        const newFolder = document.getElementById('importNewFolder');
-        
-        if (loraRoot) loraRoot.addEventListener('change', this.updateTargetPath);
-        if (newFolder) newFolder.addEventListener('input', this.updateTargetPath);
-        
-        // Update initial path
-        this.updateTargetPath();
-    }
-
-    cleanup() {
-        if (this.folderClickHandler) {
-            const folderBrowser = document.getElementById('importFolderBrowser');
-            if (folderBrowser) {
-                folderBrowser.removeEventListener('click', this.folderClickHandler);
-                this.folderClickHandler = null;
-            }
-        }
-        
-        // Remove path update listeners
-        const loraRoot = document.getElementById('importLoraRoot');
-        const newFolder = document.getElementById('importNewFolder');
-        
-        if (loraRoot) loraRoot.removeEventListener('change', this.updateTargetPath);
-        if (newFolder) newFolder.removeEventListener('input', this.updateTargetPath);
-    }
-    
-    updateTargetPath() {
-        const pathDisplay = document.getElementById('importTargetPathDisplay');
-        if (!pathDisplay) return;
-        
-        const loraRoot = document.getElementById('importLoraRoot')?.value || '';
-        const newFolder = document.getElementById('importNewFolder')?.value?.trim() || '';
-        
-        let fullPath = loraRoot || translate('recipes.controls.import.selectLoraRoot', {}, 'Select a LoRA root directory'); 
-        
-        if (loraRoot) {
-            if (this.importManager.selectedFolder) {
-                fullPath += '/' + this.importManager.selectedFolder;
-            }
-            if (newFolder) {
-                fullPath += '/' + newFolder;
-            }
-        }
-    
-        pathDisplay.innerHTML = `<span class="path-text">${fullPath}</span>`;
-    }
-}