Refactor state management to support hierarchical structure and page-specific states

- Introduced a new hierarchical state structure to manage global and page-specific states, enhancing organization and maintainability.
- Updated various managers and components to utilize the new state structure, ensuring consistent access to page-specific data.
- Removed the initSettings function and replaced it with initPageState for better initialization of page-specific states.
- Adjusted imports across multiple files to accommodate the new state management approach, improving code clarity.

static/js/state/index.js

@@ -1,53 +1,148 @@
+// Create the new hierarchical state structure
 export const state = {
-    currentPage: 1,
-    isLoading: false,
-    hasMore: true,
-    sortBy: 'name',
-    activeFolder: null,
-    loadingManager: null,
-    observer: null,
-    previewVersions: new Map(),
-    searchManager: null,
-    searchOptions: {
-        filename: true,
-        modelname: true,
-        tags: false,
-        recursive: false
+    // Global state
+    global: {
+        settings: {
+            blurMatureContent: true,
+            show_only_sfw: false
+        },
+        loadingManager: null,
+        observer: null,
     },
-    filters: {
-        baseModel: [],
-        tags: []
+    
+    // Page-specific states
+    pages: {
+        loras: {
+            currentPage: 1,
+            isLoading: false,
+            hasMore: true,
+            sortBy: 'name',
+            activeFolder: null,
+            previewVersions: new Map(),
+            searchManager: null,
+            searchOptions: {
+                filename: true,
+                modelname: true,
+                tags: false,
+                recursive: false
+            },
+            filters: {
+                baseModel: [],
+                tags: []
+            },
+            bulkMode: false,
+            selectedLoras: new Set(),
+            loraMetadataCache: new Map(),
+        },
+        
+        recipes: {
+            currentPage: 1,
+            isLoading: false,
+            hasMore: true,
+            sortBy: 'date',
+            searchManager: null,
+            searchOptions: {
+                filename: true,
+                modelname: true,
+                tags: true,
+                loras: true,
+                recursive: false
+            },
+            filters: {
+                baseModel: [],
+                tags: []
+            }
+        },
+        
+        checkpoints: {
+            currentPage: 1,
+            isLoading: false,
+            hasMore: true,
+            sortBy: 'name',
+            activeFolder: null,
+            searchManager: null,
+            searchOptions: {
+                filename: true,
+                modelname: true,
+                recursive: false
+            },
+            filters: {
+                baseModel: [],
+                tags: []
+            }
+        }
     },
-    bulkMode: false,
-    selectedLoras: new Set(),
-    loraMetadataCache: new Map(),
-    settings: {
-        blurMatureContent: true,
-        show_only_sfw: false
-    }
+    
+    // Current active page
+    currentPageType: 'loras',
+    
+    // Backward compatibility - proxy properties
+    get currentPage() { return this.pages[this.currentPageType].currentPage; },
+    set currentPage(value) { this.pages[this.currentPageType].currentPage = value; },
+    
+    get isLoading() { return this.pages[this.currentPageType].isLoading; },
+    set isLoading(value) { this.pages[this.currentPageType].isLoading = value; },
+    
+    get hasMore() { return this.pages[this.currentPageType].hasMore; },
+    set hasMore(value) { this.pages[this.currentPageType].hasMore = value; },
+    
+    get sortBy() { return this.pages[this.currentPageType].sortBy; },
+    set sortBy(value) { this.pages[this.currentPageType].sortBy = value; },
+    
+    get activeFolder() { return this.pages[this.currentPageType].activeFolder; },
+    set activeFolder(value) { this.pages[this.currentPageType].activeFolder = value; },
+    
+    get loadingManager() { return this.global.loadingManager; },
+    set loadingManager(value) { this.global.loadingManager = value; },
+    
+    get observer() { return this.global.observer; },
+    set observer(value) { this.global.observer = value; },
+    
+    get previewVersions() { return this.pages.loras.previewVersions; },
+    set previewVersions(value) { this.pages.loras.previewVersions = value; },
+    
+    get searchManager() { return this.pages[this.currentPageType].searchManager; },
+    set searchManager(value) { this.pages[this.currentPageType].searchManager = value; },
+    
+    get searchOptions() { return this.pages[this.currentPageType].searchOptions; },
+    set searchOptions(value) { this.pages[this.currentPageType].searchOptions = value; },
+    
+    get filters() { return this.pages[this.currentPageType].filters; },
+    set filters(value) { this.pages[this.currentPageType].filters = value; },
+    
+    get bulkMode() { return this.pages.loras.bulkMode; },
+    set bulkMode(value) { this.pages.loras.bulkMode = value; },
+    
+    get selectedLoras() { return this.pages.loras.selectedLoras; },
+    set selectedLoras(value) { this.pages.loras.selectedLoras = value; },
+    
+    get loraMetadataCache() { return this.pages.loras.loraMetadataCache; },
+    set loraMetadataCache(value) { this.pages.loras.loraMetadataCache = value; },
+    
+    get settings() { return this.global.settings; },
+    set settings(value) { this.global.settings = value; }
 };
 
-// Initialize settings from localStorage if available
-export function initSettings() {
-    try {
-        const savedSettings = localStorage.getItem('loraManagerSettings');
-        if (savedSettings) {
-            const parsedSettings = JSON.parse(savedSettings);
-            state.settings = { ...state.settings, ...parsedSettings };
-        }
-    } catch (error) {
-        console.error('Error loading settings from localStorage:', error);
-    }
+// Get the current page state
+export function getCurrentPageState() {
+    return state.pages[state.currentPageType];
 }
 
-// Save settings to localStorage
-export function saveSettings() {
-    try {
-        localStorage.setItem('loraManagerSettings', JSON.stringify(state.settings));
-    } catch (error) {
-        console.error('Error saving settings to localStorage:', error);
+// Set the current page type
+export function setCurrentPageType(pageType) {
+    if (state.pages[pageType]) {
+        state.currentPageType = pageType;
+        return true;
     }
+    console.warn(`Unknown page type: ${pageType}`);
+    return false;
 }
 
-// Initialize settings on load
-initSettings();
+// Initialize page state when a page loads
+export function initPageState(pageType) {
+    if (setCurrentPageType(pageType)) {
+        console.log(`Initialized state for page: ${pageType}`);
+        return getCurrentPageState();
+    }
+    return null;
+}