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/utils/infiniteScroll.js

@@ -1,4 +1,4 @@
-import { state } from '../state/index.js';
+import { state, getCurrentPageState } from '../state/index.js';
 import { loadMoreLoras } from '../api/loraApi.js';
 import { debounce } from './debounce.js';
 
@@ -7,6 +7,12 @@ export function initializeInfiniteScroll(pageType = 'loras') {
         state.observer.disconnect();
     }
 
+    // Set the current page type
+    state.currentPageType = pageType;
+    
+    // Get the current page state
+    const pageState = getCurrentPageState();
+
     // Determine the load more function and grid ID based on page type
     let loadMoreFunction;
     let gridId;
@@ -32,7 +38,7 @@ export function initializeInfiniteScroll(pageType = 'loras') {
     state.observer = new IntersectionObserver(
         (entries) => {
             const target = entries[0];
-            if (target.isIntersecting && !state.isLoading && state.hasMore) {
+            if (target.isIntersecting && !pageState.isLoading && pageState.hasMore) {
                 debouncedLoadMore();
             }
         },