Implement lazy loading and infinite scroll features in core application

- Added lazy loading for images and initialized infinite scroll in the AppCore class to enhance performance across various pages.
- Updated LoraPageManager and RecipeManager to utilize the new initializePageFeatures method for common UI features.
- Enhanced infinite scroll functionality to dynamically load more content based on the page type, improving user experience.
- Refactored recipes.html to trigger the import modal through the ModalManager for better modal handling.

static/js/utils/infiniteScroll.js

@@ -2,12 +2,32 @@ import { state } from '../state/index.js';
 import { loadMoreLoras } from '../api/loraApi.js';
 import { debounce } from './debounce.js';
 
-export function initializeInfiniteScroll() {
+export function initializeInfiniteScroll(pageType = 'loras') {
     if (state.observer) {
         state.observer.disconnect();
     }
 
-    const debouncedLoadMore = debounce(loadMoreLoras, 200);
+    // Determine the load more function and grid ID based on page type
+    let loadMoreFunction;
+    let gridId;
+    
+    switch (pageType) {
+        case 'recipes':
+            loadMoreFunction = window.recipeManager?.loadMoreRecipes || (() => console.warn('loadMoreRecipes not found'));
+            gridId = 'recipeGrid';
+            break;
+        case 'checkpoints':
+            loadMoreFunction = window.checkpointManager?.loadMoreCheckpoints || (() => console.warn('loadMoreCheckpoints not found'));
+            gridId = 'checkpointGrid';
+            break;
+        case 'loras':
+        default:
+            loadMoreFunction = loadMoreLoras;
+            gridId = 'loraGrid';
+            break;
+    }
+
+    const debouncedLoadMore = debounce(loadMoreFunction, 200);
 
     state.observer = new IntersectionObserver(
         (entries) => {
@@ -19,6 +39,12 @@ export function initializeInfiniteScroll() {
         { threshold: 0.1 }
     );
 
+    const grid = document.getElementById(gridId);
+    if (!grid) {
+        console.warn(`Grid with ID "${gridId}" not found for infinite scroll`);
+        return;
+    }
+
     const existingSentinel = document.getElementById('scroll-sentinel');
     if (existingSentinel) {
         state.observer.observe(existingSentinel);
@@ -26,7 +52,7 @@ export function initializeInfiniteScroll() {
         const sentinel = document.createElement('div');
         sentinel.id = 'scroll-sentinel';
         sentinel.style.height = '10px';
-        document.getElementById('loraGrid').appendChild(sentinel);
+        grid.appendChild(sentinel);
         state.observer.observe(sentinel);
     }
 }