+
@@ -140,6 +142,67 @@ class RecipeCard {
return `${missingCount} of ${totalCount} LoRAs missing`;
}
+ async toggleFavorite(card) {
+ // Find the latest star icon in case the card was re-rendered
+ const getStarIcon = (c) => c.querySelector('.fa-star');
+ let starIcon = getStarIcon(card);
+
+ const isFavorite = this.recipe.favorite || false;
+ const newFavoriteState = !isFavorite;
+
+ // Update early to provide instant feedback and avoid race conditions with re-renders
+ this.recipe.favorite = newFavoriteState;
+
+ // Function to update icon state
+ const updateIconUI = (icon, state) => {
+ if (!icon) return;
+ if (state) {
+ icon.classList.remove('far');
+ icon.classList.add('fas', 'favorite-active');
+ icon.title = 'Remove from Favorites';
+ } else {
+ icon.classList.remove('fas', 'favorite-active');
+ icon.classList.add('far');
+ icon.title = 'Add to Favorites';
+ }
+ };
+
+ // Update current icon immediately
+ updateIconUI(starIcon, newFavoriteState);
+
+ try {
+ await updateRecipeMetadata(this.recipe.file_path, {
+ favorite: newFavoriteState
+ });
+
+ // Status already updated, just show toast
+ if (newFavoriteState) {
+ showToast('modelCard.favorites.added', {}, 'success');
+ } else {
+ showToast('modelCard.favorites.removed', {}, 'success');
+ }
+
+ // Re-find star icon after API call as VirtualScroller might have replaced the element
+ // During updateRecipeMetadata, VirtualScroller.updateSingleItem might have re-rendered the card
+ // We need to find the NEW element in the DOM to ensure we don't have a stale reference
+ // Though typically VirtualScroller handles the re-render with the NEW this.recipe.favorite
+ // we will check the DOM just to be sure if this instance's internal card is still what's in DOM
+ } catch (error) {
+ console.error('Failed to update favorite status:', error);
+ // Revert local state on error
+ this.recipe.favorite = isFavorite;
+
+ // Re-find star icon in case of re-render during fault
+ const currentCard = card.ownerDocument.evaluate(
+ `.//*[@data-filepath="${this.recipe.file_path}"]`,
+ card.ownerDocument, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null
+ ).singleNodeValue || card;
+
+ updateIconUI(getStarIcon(currentCard), isFavorite);
+ showToast('modelCard.favorites.updateFailed', {}, 'error');
+ }
+ }
+
attachEventListeners(card, isDuplicatesMode, shouldBlur) {
// Add blur toggle functionality if content should be blurred
if (shouldBlur) {
@@ -164,9 +227,19 @@ class RecipeCard {
// Recipe card click event - only attach if not in duplicates mode
if (!isDuplicatesMode) {
card.addEventListener('click', () => {
+ if (state.bulkMode) {
+ bulkManager.toggleCardSelection(card);
+ return;
+ }
this.clickHandler(this.recipe);
});
+ // Favorite button click event - prevent propagation to card
+ card.querySelector('.fa-star')?.addEventListener('click', (e) => {
+ e.stopPropagation();
+ this.toggleFavorite(card);
+ });
+
// Share button click event - prevent propagation to card
card.querySelector('.fa-share-alt')?.addEventListener('click', (e) => {
e.stopPropagation();
diff --git a/static/js/components/SidebarManager.js b/static/js/components/SidebarManager.js
index f4ed13bb..8c21643a 100644
--- a/static/js/components/SidebarManager.js
+++ b/static/js/components/SidebarManager.js
@@ -77,7 +77,9 @@ export class SidebarManager {
this.pageControls = pageControls;
this.pageType = pageControls.pageType;
this.lastPageControls = pageControls;
- this.apiClient = getModelApiClient();
+ this.apiClient = pageControls?.getSidebarApiClient?.()
+ || pageControls?.sidebarApiClient
+ || getModelApiClient();
// Set initial sidebar state immediately (hidden by default)
this.setInitialSidebarState();
@@ -205,6 +207,10 @@ export class SidebarManager {
}
initializeDragAndDrop() {
+ if (this.apiClient?.apiConfig?.config?.supportsMove === false) {
+ return;
+ }
+
if (!this.dragHandlersInitialized) {
document.addEventListener('dragstart', this.handleCardDragStart);
document.addEventListener('dragend', this.handleCardDragEnd);
@@ -416,7 +422,14 @@ export class SidebarManager {
}
if (!this.apiClient) {
- this.apiClient = getModelApiClient();
+ this.apiClient = this.pageControls?.getSidebarApiClient?.()
+ || this.pageControls?.sidebarApiClient
+ || getModelApiClient();
+ }
+
+ if (this.apiClient?.apiConfig?.config?.supportsMove === false) {
+ showToast('toast.models.moveFailed', { message: translate('sidebar.dragDrop.moveUnsupported', {}, 'Move not supported for this page') }, 'error');
+ return false;
}
const rootPath = this.draggedRootPath ? this.draggedRootPath.replace(/\\/g, '/') : '';
@@ -470,7 +483,9 @@ export class SidebarManager {
}
async init() {
- this.apiClient = getModelApiClient();
+ this.apiClient = this.pageControls?.getSidebarApiClient?.()
+ || this.pageControls?.sidebarApiClient
+ || getModelApiClient();
// Set initial sidebar state immediately (hidden by default)
this.setInitialSidebarState();
diff --git a/static/js/core.js b/static/js/core.js
index 11c09a1a..b78c07bf 100644
--- a/static/js/core.js
+++ b/static/js/core.js
@@ -60,14 +60,12 @@ export class AppCore {
initTheme();
initBackToTop();
- // Initialize the bulk manager and context menu only if not on recipes page
- if (state.currentPageType !== 'recipes') {
- bulkManager.initialize();
+ // Initialize the bulk manager and context menu
+ bulkManager.initialize();
- // Initialize bulk context menu
- const bulkContextMenu = new BulkContextMenu();
- bulkManager.setBulkContextMenu(bulkContextMenu);
- }
+ // Initialize bulk context menu
+ const bulkContextMenu = new BulkContextMenu();
+ bulkManager.setBulkContextMenu(bulkContextMenu);
// Initialize the example images manager
exampleImagesManager.initialize();
@@ -121,4 +119,4 @@ export class AppCore {
}
// Create and export a singleton instance
-export const appCore = new AppCore();
\ No newline at end of file
+export const appCore = new AppCore();
diff --git a/static/js/managers/BulkManager.js b/static/js/managers/BulkManager.js
index 10eda62a..8b32adca 100644
--- a/static/js/managers/BulkManager.js
+++ b/static/js/managers/BulkManager.js
@@ -3,6 +3,7 @@ import { showToast, copyToClipboard, sendLoraToWorkflow, buildLoraSyntax, getNSF
import { updateCardsForBulkMode } from '../components/shared/ModelCard.js';
import { modalManager } from './ModalManager.js';
import { getModelApiClient, resetAndReload } from '../api/modelApiFactory.js';
+import { RecipeSidebarApiClient } from '../api/recipeApi.js';
import { MODEL_TYPES, MODEL_CONFIG } from '../api/apiConfig.js';
import { BASE_MODEL_CATEGORIES } from '../utils/constants.js';
import { getPriorityTagSuggestions } from '../utils/priorityTagHelpers.js';
@@ -62,9 +63,22 @@ export class BulkManager {
autoOrganize: true,
deleteAll: true,
setContentRating: true
+ },
+ recipes: {
+ addTags: false,
+ sendToWorkflow: false,
+ copyAll: false,
+ refreshAll: false,
+ checkUpdates: false,
+ moveAll: true,
+ autoOrganize: false,
+ deleteAll: true,
+ setContentRating: false
}
};
+ this.recipeApiClient = null;
+
window.addEventListener('lm:priority-tags-updated', () => {
const container = document.querySelector('#bulkAddTagsModal .metadata-suggestions-container');
if (!container) {
@@ -87,9 +101,6 @@ export class BulkManager {
}
initialize() {
- // Do not initialize on recipes page
- if (state.currentPageType === 'recipes') return;
-
// Register with event manager for coordinated event handling
this.registerEventHandlers();
@@ -97,6 +108,23 @@ export class BulkManager {
eventManager.setState('bulkMode', state.bulkMode || false);
}
+ getActiveApiClient() {
+ if (state.currentPageType === 'recipes') {
+ if (!this.recipeApiClient) {
+ this.recipeApiClient = new RecipeSidebarApiClient();
+ }
+ return this.recipeApiClient;
+ }
+ return getModelApiClient();
+ }
+
+ getCurrentDisplayConfig() {
+ if (state.currentPageType === 'recipes') {
+ return { displayName: 'Recipe' };
+ }
+ return MODEL_CONFIG[state.currentPageType] || { displayName: 'Model' };
+ }
+
setBulkContextMenu(bulkContextMenu) {
this.bulkContextMenu = bulkContextMenu;
}
@@ -240,7 +268,9 @@ export class BulkManager {
// Update event manager state
eventManager.setState('bulkMode', state.bulkMode);
- this.bulkBtn.classList.toggle('active', state.bulkMode);
+ if (this.bulkBtn) {
+ this.bulkBtn.classList.toggle('active', state.bulkMode);
+ }
updateCardsForBulkMode(state.bulkMode);
@@ -504,13 +534,13 @@ export class BulkManager {
modalManager.closeModal('bulkDeleteModal');
try {
- const apiClient = getModelApiClient();
+ const apiClient = this.getActiveApiClient();
const filePaths = Array.from(state.selectedModels);
const result = await apiClient.bulkDeleteModels(filePaths);
if (result.success) {
- const currentConfig = MODEL_CONFIG[state.currentPageType];
+ const currentConfig = this.getCurrentDisplayConfig();
showToast('toast.models.deletedSuccessfully', {
count: result.deleted_count,
type: currentConfig.displayName.toLowerCase()
@@ -570,7 +600,7 @@ export class BulkManager {
this.applySelectionState();
const newlySelected = state.selectedModels.size - oldCount;
- const currentConfig = MODEL_CONFIG[state.currentPageType];
+ const currentConfig = this.getCurrentDisplayConfig();
showToast('toast.models.selectedAdditional', {
count: newlySelected,
type: currentConfig.displayName.toLowerCase()
@@ -622,8 +652,7 @@ export class BulkManager {
return;
}
- const currentType = state.currentPageType;
- const currentConfig = MODEL_CONFIG[currentType] || MODEL_CONFIG[MODEL_TYPES.LORA];
+ const currentConfig = this.getCurrentDisplayConfig();
const typeLabel = (currentConfig?.displayName || 'Model').toLowerCase();
const { ids: modelIds, missingCount } = this.collectSelectedModelIds();
@@ -969,7 +998,7 @@ export class BulkManager {
modalManager.closeModal('bulkAddTagsModal');
if (successCount > 0) {
- const currentConfig = MODEL_CONFIG[state.currentPageType];
+ const currentConfig = this.getCurrentDisplayConfig();
const toastKey = mode === 'replace' ? 'toast.models.tagsReplacedSuccessfully' : 'toast.models.tagsAddedSuccessfully';
showToast(toastKey, {
count: successCount,
diff --git a/static/js/managers/MoveManager.js b/static/js/managers/MoveManager.js
index 1b23a827..88f62839 100644
--- a/static/js/managers/MoveManager.js
+++ b/static/js/managers/MoveManager.js
@@ -3,6 +3,7 @@ import { state, getCurrentPageState } from '../state/index.js';
import { modalManager } from './ModalManager.js';
import { bulkManager } from './BulkManager.js';
import { getModelApiClient } from '../api/modelApiFactory.js';
+import { RecipeSidebarApiClient } from '../api/recipeApi.js';
import { FolderTreeManager } from '../components/FolderTreeManager.js';
import { sidebarManager } from '../components/SidebarManager.js';
@@ -12,11 +13,22 @@ class MoveManager {
this.bulkFilePaths = null;
this.folderTreeManager = new FolderTreeManager();
this.initialized = false;
+ this.recipeApiClient = null;
// Bind methods
this.updateTargetPath = this.updateTargetPath.bind(this);
}
+ _getApiClient(modelType = null) {
+ if (state.currentPageType === 'recipes') {
+ if (!this.recipeApiClient) {
+ this.recipeApiClient = new RecipeSidebarApiClient();
+ }
+ return this.recipeApiClient;
+ }
+ return getModelApiClient(modelType);
+ }
+
initializeEventListeners() {
if (this.initialized) return;
@@ -36,7 +48,7 @@ class MoveManager {
this.currentFilePath = null;
this.bulkFilePaths = null;
- const apiClient = getModelApiClient();
+ const apiClient = this._getApiClient(modelType);
const currentPageType = state.currentPageType;
const modelConfig = apiClient.apiConfig.config;
@@ -121,7 +133,7 @@ class MoveManager {
async initializeFolderTree() {
try {
- const apiClient = getModelApiClient();
+ const apiClient = this._getApiClient();
// Fetch unified folder tree
const treeData = await apiClient.fetchUnifiedFolderTree();
@@ -141,7 +153,7 @@ class MoveManager {
updateTargetPath() {
const pathDisplay = document.getElementById('moveTargetPathDisplay');
const modelRoot = document.getElementById('moveModelRoot').value;
- const apiClient = getModelApiClient();
+ const apiClient = this._getApiClient();
const config = apiClient.apiConfig.config;
let fullPath = modelRoot || `Select a ${config.displayName.toLowerCase()} root directory`;
@@ -158,7 +170,7 @@ class MoveManager {
async moveModel() {
const selectedRoot = document.getElementById('moveModelRoot').value;
- const apiClient = getModelApiClient();
+ const apiClient = this._getApiClient();
const config = apiClient.apiConfig.config;
if (!selectedRoot) {
diff --git a/static/js/recipes.js b/static/js/recipes.js
index 293bb8d9..94f158f7 100644
--- a/static/js/recipes.js
+++ b/static/js/recipes.js
@@ -2,31 +2,60 @@
import { appCore } from './core.js';
import { ImportManager } from './managers/ImportManager.js';
import { RecipeModal } from './components/RecipeModal.js';
-import { getCurrentPageState } from './state/index.js';
+import { state, getCurrentPageState } from './state/index.js';
import { getSessionItem, removeSessionItem } from './utils/storageHelpers.js';
import { RecipeContextMenu } from './components/ContextMenu/index.js';
import { DuplicatesManager } from './components/DuplicatesManager.js';
import { refreshVirtualScroll } from './utils/infiniteScroll.js';
-import { refreshRecipes } from './api/recipeApi.js';
+import { refreshRecipes, RecipeSidebarApiClient } from './api/recipeApi.js';
+import { sidebarManager } from './components/SidebarManager.js';
+
+class RecipePageControls {
+ constructor() {
+ this.pageType = 'recipes';
+ this.pageState = getCurrentPageState();
+ this.sidebarApiClient = new RecipeSidebarApiClient();
+ }
+
+ async resetAndReload() {
+ refreshVirtualScroll();
+ }
+
+ async refreshModels(fullRebuild = false) {
+ if (fullRebuild) {
+ await refreshRecipes();
+ return;
+ }
+
+ refreshVirtualScroll();
+ }
+
+ getSidebarApiClient() {
+ return this.sidebarApiClient;
+ }
+}
class RecipeManager {
constructor() {
// Get page state
this.pageState = getCurrentPageState();
-
+
+ // Page controls for shared sidebar behaviors
+ this.pageControls = new RecipePageControls();
+
// Initialize ImportManager
this.importManager = new ImportManager();
-
+
// Initialize RecipeModal
this.recipeModal = new RecipeModal();
-
+
// Initialize DuplicatesManager
this.duplicatesManager = new DuplicatesManager(this);
-
+
// Add state tracking for infinite scroll
this.pageState.isLoading = false;
this.pageState.hasMore = true;
-
+
// Custom filter state - move to pageState for compatibility with virtual scrolling
this.pageState.customFilter = {
active: false,
@@ -35,27 +64,40 @@ class RecipeManager {
recipeId: null
};
}
-
+
async initialize() {
// Initialize event listeners
this.initEventListeners();
-
+
// Set default search options if not already defined
this._initSearchOptions();
-
+
// Initialize context menu
new RecipeContextMenu();
-
+
// Check for custom filter parameters in session storage
this._checkCustomFilter();
-
+
// Expose necessary functions to the page
this._exposeGlobalFunctions();
-
+
+ // Initialize sidebar navigation
+ await this._initSidebar();
+
// Initialize common page features
appCore.initializePageFeatures();
}
-
+
+ async _initSidebar() {
+ try {
+ sidebarManager.setHostPageControls(this.pageControls);
+ const shouldShowSidebar = state?.global?.settings?.show_folder_sidebar !== false;
+ await sidebarManager.setSidebarEnabled(shouldShowSidebar);
+ } catch (error) {
+ console.error('Failed to initialize recipe sidebar:', error);
+ }
+ }
+
_initSearchOptions() {
// Ensure recipes search options are properly initialized
if (!this.pageState.searchOptions) {
@@ -63,25 +105,27 @@ class RecipeManager {
title: true, // Recipe title
tags: true, // Recipe tags
loraName: true, // LoRA file name
- loraModel: true // LoRA model name
+ loraModel: true, // LoRA model name
+ prompt: true, // Prompt search
+ recursive: true
};
}
}
-
+
_exposeGlobalFunctions() {
// Only expose what's needed for the page
window.recipeManager = this;
window.importManager = this.importManager;
}
-
+
_checkCustomFilter() {
// Check for Lora filter
const filterLoraName = getSessionItem('lora_to_recipe_filterLoraName');
const filterLoraHash = getSessionItem('lora_to_recipe_filterLoraHash');
-
+
// Check for specific recipe ID
const viewRecipeId = getSessionItem('viewRecipeId');
-
+
// Set custom filter if any parameter is present
if (filterLoraName || filterLoraHash || viewRecipeId) {
this.pageState.customFilter = {
@@ -90,35 +134,35 @@ class RecipeManager {
loraHash: filterLoraHash,
recipeId: viewRecipeId
};
-
+
// Show custom filter indicator
this._showCustomFilterIndicator();
}
}
-
+
_showCustomFilterIndicator() {
const indicator = document.getElementById('customFilterIndicator');
const textElement = document.getElementById('customFilterText');
-
+
if (!indicator || !textElement) return;
-
+
// Update text based on filter type
let filterText = '';
-
+
if (this.pageState.customFilter.recipeId) {
filterText = 'Viewing specific recipe';
} else if (this.pageState.customFilter.loraName) {
// Format with Lora name
const loraName = this.pageState.customFilter.loraName;
- const displayName = loraName.length > 25 ?
- loraName.substring(0, 22) + '...' :
+ const displayName = loraName.length > 25 ?
+ loraName.substring(0, 22) + '...' :
loraName;
-
+
filterText = `
Recipes using: ${displayName}`;
} else {
filterText = 'Filtered recipes';
}
-
+
// Update indicator text and show it
textElement.innerHTML = filterText;
// Add title attribute to show the lora name as a tooltip
@@ -126,14 +170,14 @@ class RecipeManager {
textElement.setAttribute('title', this.pageState.customFilter.loraName);
}
indicator.classList.remove('hidden');
-
+
// Add pulse animation
const filterElement = indicator.querySelector('.filter-active');
if (filterElement) {
filterElement.classList.add('animate');
setTimeout(() => filterElement.classList.remove('animate'), 600);
}
-
+
// Add click handler for clear filter button
const clearFilterBtn = indicator.querySelector('.clear-filter');
if (clearFilterBtn) {
@@ -143,7 +187,7 @@ class RecipeManager {
});
}
}
-
+
_clearCustomFilter() {
// Reset custom filter
this.pageState.customFilter = {
@@ -152,33 +196,48 @@ class RecipeManager {
loraHash: null,
recipeId: null
};
-
+
// Hide indicator
const indicator = document.getElementById('customFilterIndicator');
if (indicator) {
indicator.classList.add('hidden');
}
-
+
// Clear any session storage items
removeSessionItem('lora_to_recipe_filterLoraName');
removeSessionItem('lora_to_recipe_filterLoraHash');
removeSessionItem('viewRecipeId');
-
+
// Reset and refresh the virtual scroller
refreshVirtualScroll();
}
-
+
initEventListeners() {
// Sort select
const sortSelect = document.getElementById('sortSelect');
if (sortSelect) {
+ sortSelect.value = this.pageState.sortBy || 'date:desc';
sortSelect.addEventListener('change', () => {
this.pageState.sortBy = sortSelect.value;
refreshVirtualScroll();
});
}
+
+ const bulkButton = document.querySelector('[data-action="bulk"]');
+ if (bulkButton) {
+ bulkButton.addEventListener('click', () => window.bulkManager?.toggleBulkMode());
+ }
+
+ const favoriteFilterBtn = document.getElementById('favoriteFilterBtn');
+ if (favoriteFilterBtn) {
+ favoriteFilterBtn.addEventListener('click', () => {
+ this.pageState.showFavoritesOnly = !this.pageState.showFavoritesOnly;
+ favoriteFilterBtn.classList.toggle('active', this.pageState.showFavoritesOnly);
+ refreshVirtualScroll();
+ });
+ }
}
-
+
// This method is kept for compatibility but now uses virtual scrolling
async loadRecipes(resetPage = true) {
// Skip loading if in duplicates mode
@@ -186,32 +245,32 @@ class RecipeManager {
if (pageState.duplicatesMode) {
return;
}
-
+
if (resetPage) {
refreshVirtualScroll();
}
}
-
+
/**
* Refreshes the recipe list by first rebuilding the cache and then loading recipes
*/
async refreshRecipes() {
return refreshRecipes();
}
-
+
showRecipeDetails(recipe) {
this.recipeModal.showRecipeDetails(recipe);
}
-
+
// Duplicate detection and management methods
async findDuplicateRecipes() {
return await this.duplicatesManager.findDuplicates();
}
-
+
selectLatestDuplicates() {
this.duplicatesManager.selectLatestDuplicates();
}
-
+
deleteSelectedDuplicates() {
this.duplicatesManager.deleteSelectedDuplicates();
}
@@ -219,14 +278,14 @@ class RecipeManager {
confirmDeleteDuplicates() {
this.duplicatesManager.confirmDeleteDuplicates();
}
-
+
exitDuplicateMode() {
// Clear the grid first to prevent showing old content temporarily
const recipeGrid = document.getElementById('recipeGrid');
if (recipeGrid) {
recipeGrid.innerHTML = '';
}
-
+
this.duplicatesManager.exitDuplicateMode();
}
}
@@ -235,11 +294,11 @@ class RecipeManager {
document.addEventListener('DOMContentLoaded', async () => {
// Initialize core application
await appCore.initialize();
-
+
// Initialize recipe manager
const recipeManager = new RecipeManager();
await recipeManager.initialize();
});
// Export for use in other modules
-export { RecipeManager };
\ No newline at end of file
+export { RecipeManager };
diff --git a/static/js/state/index.js b/static/js/state/index.js
index 4ee59b55..1dfbf568 100644
--- a/static/js/state/index.js
+++ b/static/js/state/index.js
@@ -58,7 +58,7 @@ export const state = {
loadingManager: null,
observer: null,
},
-
+
// Page-specific states
pages: {
[MODEL_TYPES.LORA]: {
@@ -69,20 +69,20 @@ export const state = {
activeFolder: getStorageItem(`${MODEL_TYPES.LORA}_activeFolder`),
activeLetterFilter: null,
previewVersions: loraPreviewVersions,
- searchManager: null,
- searchOptions: {
- filename: true,
- modelname: true,
- tags: false,
- creator: false,
- recursive: getStorageItem(`${MODEL_TYPES.LORA}_recursiveSearch`, true),
- },
- filters: {
- baseModel: [],
- tags: {},
- license: {},
- modelTypes: []
- },
+ searchManager: null,
+ searchOptions: {
+ filename: true,
+ modelname: true,
+ tags: false,
+ creator: false,
+ recursive: getStorageItem(`${MODEL_TYPES.LORA}_recursiveSearch`, true),
+ },
+ filters: {
+ baseModel: [],
+ tags: {},
+ license: {},
+ modelTypes: []
+ },
bulkMode: false,
selectedLoras: new Set(),
loraMetadataCache: new Map(),
@@ -90,33 +90,35 @@ export const state = {
showUpdateAvailableOnly: false,
duplicatesMode: false,
},
-
+
recipes: {
currentPage: 1,
isLoading: false,
hasMore: true,
- sortBy: 'date',
- searchManager: null,
- searchOptions: {
- title: true,
- tags: true,
- loraName: true,
- loraModel: true
- },
- filters: {
- baseModel: [],
- tags: {},
- license: {},
- modelTypes: [],
- search: ''
- },
+ sortBy: 'date:desc',
+ activeFolder: getStorageItem('recipes_activeFolder'),
+ searchManager: null,
+ searchOptions: {
+ title: true,
+ tags: true,
+ loraName: true,
+ loraModel: true,
+ recursive: getStorageItem('recipes_recursiveSearch', true),
+ },
+ filters: {
+ baseModel: [],
+ tags: {},
+ license: {},
+ modelTypes: [],
+ search: ''
+ },
pageSize: 20,
showFavoritesOnly: false,
duplicatesMode: false,
bulkMode: false,
selectedModels: new Set(),
},
-
+
[MODEL_TYPES.CHECKPOINT]: {
currentPage: 1,
isLoading: false,
@@ -124,19 +126,19 @@ export const state = {
sortBy: 'name',
activeFolder: getStorageItem(`${MODEL_TYPES.CHECKPOINT}_activeFolder`),
previewVersions: checkpointPreviewVersions,
- searchManager: null,
- searchOptions: {
- filename: true,
- modelname: true,
- creator: false,
- recursive: getStorageItem(`${MODEL_TYPES.CHECKPOINT}_recursiveSearch`, true),
- },
- filters: {
- baseModel: [],
- tags: {},
- license: {},
- modelTypes: []
- },
+ searchManager: null,
+ searchOptions: {
+ filename: true,
+ modelname: true,
+ creator: false,
+ recursive: getStorageItem(`${MODEL_TYPES.CHECKPOINT}_recursiveSearch`, true),
+ },
+ filters: {
+ baseModel: [],
+ tags: {},
+ license: {},
+ modelTypes: []
+ },
modelType: 'checkpoint', // 'checkpoint' or 'diffusion_model'
bulkMode: false,
selectedModels: new Set(),
@@ -145,7 +147,7 @@ export const state = {
showUpdateAvailableOnly: false,
duplicatesMode: false,
},
-
+
[MODEL_TYPES.EMBEDDING]: {
currentPage: 1,
isLoading: false,
@@ -154,20 +156,20 @@ export const state = {
activeFolder: getStorageItem(`${MODEL_TYPES.EMBEDDING}_activeFolder`),
activeLetterFilter: null,
previewVersions: embeddingPreviewVersions,
- searchManager: null,
- searchOptions: {
- filename: true,
- modelname: true,
- tags: false,
- creator: false,
- recursive: getStorageItem(`${MODEL_TYPES.EMBEDDING}_recursiveSearch`, true),
- },
- filters: {
- baseModel: [],
- tags: {},
- license: {},
- modelTypes: []
- },
+ searchManager: null,
+ searchOptions: {
+ filename: true,
+ modelname: true,
+ tags: false,
+ creator: false,
+ recursive: getStorageItem(`${MODEL_TYPES.EMBEDDING}_recursiveSearch`, true),
+ },
+ filters: {
+ baseModel: [],
+ tags: {},
+ license: {},
+ modelTypes: []
+ },
bulkMode: false,
selectedModels: new Set(),
metadataCache: new Map(),
@@ -176,45 +178,45 @@ export const state = {
duplicatesMode: false,
}
},
-
+
// Current active page - use MODEL_TYPES constants
currentPageType: MODEL_TYPES.LORA,
-
+
// 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() {
+
+ get bulkMode() {
const currentType = this.currentPageType;
if (currentType === MODEL_TYPES.LORA) {
return this.pages.loras.bulkMode;
@@ -222,7 +224,7 @@ export const state = {
return this.pages[currentType].bulkMode;
}
},
- set bulkMode(value) {
+ set bulkMode(value) {
const currentType = this.currentPageType;
if (currentType === MODEL_TYPES.LORA) {
this.pages.loras.bulkMode = value;
@@ -230,11 +232,11 @@ export const state = {
this.pages[currentType].bulkMode = value;
}
},
-
+
get selectedLoras() { return this.pages.loras.selectedLoras; },
set selectedLoras(value) { this.pages.loras.selectedLoras = value; },
-
- get selectedModels() {
+
+ get selectedModels() {
const currentType = this.currentPageType;
if (currentType === MODEL_TYPES.LORA) {
return this.pages.loras.selectedLoras;
@@ -242,7 +244,7 @@ export const state = {
return this.pages[currentType].selectedModels;
}
},
- set selectedModels(value) {
+ set selectedModels(value) {
const currentType = this.currentPageType;
if (currentType === MODEL_TYPES.LORA) {
this.pages.loras.selectedLoras = value;
@@ -250,10 +252,10 @@ export const state = {
this.pages[currentType].selectedModels = 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; }
};
diff --git a/static/js/utils/VirtualScroller.js b/static/js/utils/VirtualScroller.js
index 9fd37bfe..59630f57 100644
--- a/static/js/utils/VirtualScroller.js
+++ b/static/js/utils/VirtualScroller.js
@@ -12,13 +12,13 @@ export class VirtualScroller {
this.scrollContainer = options.scrollContainer || this.containerElement;
this.batchSize = options.batchSize || 50;
this.pageSize = options.pageSize || 100;
- this.itemAspectRatio = 896/1152; // Aspect ratio of cards
+ this.itemAspectRatio = 896 / 1152; // Aspect ratio of cards
this.rowGap = options.rowGap || 20; // Add vertical gap between rows (default 20px)
-
+
// Add container padding properties
this.containerPaddingTop = options.containerPaddingTop || 4; // Default top padding from CSS
this.containerPaddingBottom = options.containerPaddingBottom || 4; // Default bottom padding from CSS
-
+
// Add data windowing enable/disable flag
this.enableDataWindowing = options.enableDataWindowing !== undefined ? options.enableDataWindowing : false;
@@ -73,15 +73,15 @@ export class VirtualScroller {
this.spacerElement.style.width = '100%';
this.spacerElement.style.height = '0px'; // Will be updated as items are loaded
this.spacerElement.style.pointerEvents = 'none';
-
+
// The grid will be used for the actual visible items
this.gridElement.style.position = 'relative';
this.gridElement.style.minHeight = '0';
-
+
// Apply padding directly to ensure consistency
this.gridElement.style.paddingTop = `${this.containerPaddingTop}px`;
this.gridElement.style.paddingBottom = `${this.containerPaddingBottom}px`;
-
+
// Place the spacer inside the grid container
this.gridElement.appendChild(this.spacerElement);
}
@@ -97,16 +97,16 @@ export class VirtualScroller {
const containerStyle = getComputedStyle(this.containerElement);
const paddingLeft = parseInt(containerStyle.paddingLeft, 10) || 0;
const paddingRight = parseInt(containerStyle.paddingRight, 10) || 0;
-
+
// Calculate available content width (excluding padding)
const availableContentWidth = containerWidth - paddingLeft - paddingRight;
-
+
// Get display density setting
const displayDensity = state.global.settings?.display_density || 'default';
-
+
// Set exact column counts and grid widths to match CSS container widths
let maxColumns, maxGridWidth;
-
+
// Match exact column counts and CSS container width values based on density
if (window.innerWidth >= 3000) { // 4K
if (displayDensity === 'default') {
@@ -137,17 +137,17 @@ export class VirtualScroller {
}
maxGridWidth = 1400; // Match exact CSS container width for 1080p
}
-
+
// Calculate baseCardWidth based on desired column count and available space
// Formula: (maxGridWidth - (columns-1)*gap) / columns
const baseCardWidth = (maxGridWidth - ((maxColumns - 1) * this.columnGap)) / maxColumns;
-
+
// Use the smaller of available content width or max grid width
const actualGridWidth = Math.min(availableContentWidth, maxGridWidth);
-
+
// Set exact column count based on screen size and mode
this.columnsCount = maxColumns;
-
+
// When available width is smaller than maxGridWidth, recalculate columns
if (availableContentWidth < maxGridWidth) {
// Calculate how many columns can fit in the available space
@@ -155,30 +155,30 @@ export class VirtualScroller {
(availableContentWidth + this.columnGap) / (baseCardWidth + this.columnGap)
));
}
-
+
// Calculate actual item width
this.itemWidth = (actualGridWidth - (this.columnsCount - 1) * this.columnGap) / this.columnsCount;
-
+
// Calculate height based on aspect ratio
this.itemHeight = this.itemWidth / this.itemAspectRatio;
-
+
// Calculate the left offset to center the grid within the content area
this.leftOffset = Math.max(0, (availableContentWidth - actualGridWidth) / 2);
// Update grid element max-width to match available width
this.gridElement.style.maxWidth = `${actualGridWidth}px`;
-
+
// Add or remove density classes for style adjustments
this.gridElement.classList.remove('default-density', 'medium-density', 'compact-density');
this.gridElement.classList.add(`${displayDensity}-density`);
-
+
// Update spacer height
this.updateSpacerHeight();
-
+
// Re-render with new layout
this.clearRenderedItems();
this.scheduleRender();
-
+
return true;
}
@@ -186,20 +186,20 @@ export class VirtualScroller {
// Debounced scroll handler
this.scrollHandler = this.debounce(() => this.handleScroll(), 10);
this.scrollContainer.addEventListener('scroll', this.scrollHandler);
-
+
// Window resize handler for layout recalculation
this.resizeHandler = this.debounce(() => {
this.calculateLayout();
}, 150);
-
+
window.addEventListener('resize', this.resizeHandler);
-
+
// Use ResizeObserver for more accurate container size detection
if (typeof ResizeObserver !== 'undefined') {
this.resizeObserver = new ResizeObserver(this.debounce(() => {
this.calculateLayout();
}, 150));
-
+
this.resizeObserver.observe(this.containerElement);
}
}
@@ -217,35 +217,35 @@ export class VirtualScroller {
async loadInitialBatch() {
const pageState = getCurrentPageState();
if (this.isLoading) return;
-
+
this.isLoading = true;
this.setLoadingTimeout(); // Add loading timeout safety
-
+
try {
const { items, totalItems, hasMore } = await this.fetchItemsFn(1, this.pageSize);
-
+
// Initialize the data window with the first batch of items
this.items = items || [];
this.totalItems = totalItems || 0;
this.hasMore = hasMore;
this.dataWindow = { start: 0, end: this.items.length };
this.absoluteWindowStart = 0;
-
+
// Update the spacer height based on the total number of items
this.updateSpacerHeight();
-
+
// Check if there are no items and show placeholder if needed
if (this.items.length === 0) {
this.showNoItemsPlaceholder();
} else {
this.removeNoItemsPlaceholder();
}
-
+
// Reset page state to sync with our virtual scroller
pageState.currentPage = 2; // Next page to load would be 2
pageState.hasMore = this.hasMore;
pageState.isLoading = false;
-
+
return { items, totalItems, hasMore };
} catch (err) {
console.error('Failed to load initial batch:', err);
@@ -260,36 +260,36 @@ export class VirtualScroller {
async loadMoreItems() {
const pageState = getCurrentPageState();
if (this.isLoading || !this.hasMore) return;
-
+
this.isLoading = true;
pageState.isLoading = true;
this.setLoadingTimeout(); // Add loading timeout safety
-
+
try {
console.log('Loading more items, page:', pageState.currentPage);
const { items, hasMore } = await this.fetchItemsFn(pageState.currentPage, this.pageSize);
-
+
if (items && items.length > 0) {
this.items = [...this.items, ...items];
this.hasMore = hasMore;
pageState.hasMore = hasMore;
-
+
// Update page for next request
pageState.currentPage++;
-
+
// Update the spacer height
this.updateSpacerHeight();
-
+
// Render the newly loaded items if they're in view
this.scheduleRender();
-
+
console.log(`Loaded ${items.length} more items, total now: ${this.items.length}`);
} else {
this.hasMore = false;
pageState.hasMore = false;
console.log('No more items to load');
}
-
+
return items;
} catch (err) {
console.error('Failed to load more items:', err);
@@ -305,7 +305,7 @@ export class VirtualScroller {
setLoadingTimeout() {
// Clear any existing timeout first
this.clearLoadingTimeout();
-
+
// Set a new timeout to prevent loading state from getting stuck
this.loadingTimeout = setTimeout(() => {
if (this.isLoading) {
@@ -326,15 +326,15 @@ export class VirtualScroller {
updateSpacerHeight() {
if (this.columnsCount === 0) return;
-
+
// Calculate total rows needed based on total items and columns
const totalRows = Math.ceil(this.totalItems / this.columnsCount);
// Add row gaps to the total height calculation
const totalHeight = totalRows * this.itemHeight + (totalRows - 1) * this.rowGap;
-
+
// Include container padding in the total height
const spacerHeight = totalHeight + this.containerPaddingTop + this.containerPaddingBottom;
-
+
// Update spacer height to represent all items
this.spacerElement.style.height = `${spacerHeight}px`;
}
@@ -342,28 +342,28 @@ export class VirtualScroller {
getVisibleRange() {
const scrollTop = this.scrollContainer.scrollTop;
const viewportHeight = this.scrollContainer.clientHeight;
-
+
// Calculate the visible row range, accounting for row gaps
const rowHeight = this.itemHeight + this.rowGap;
const startRow = Math.floor(scrollTop / rowHeight);
const endRow = Math.ceil((scrollTop + viewportHeight) / rowHeight);
-
+
// Add overscan for smoother scrolling
const overscanRows = this.overscan;
const firstRow = Math.max(0, startRow - overscanRows);
const lastRow = Math.min(Math.ceil(this.totalItems / this.columnsCount), endRow + overscanRows);
-
+
// Calculate item indices
const firstIndex = firstRow * this.columnsCount;
const lastIndex = Math.min(this.totalItems, lastRow * this.columnsCount);
-
+
return { start: firstIndex, end: lastIndex };
}
// Update the scheduleRender method to check for disabled state
scheduleRender() {
if (this.disabled || this.renderScheduled) return;
-
+
this.renderScheduled = true;
requestAnimationFrame(() => {
this.renderItems();
@@ -374,25 +374,25 @@ export class VirtualScroller {
// Update the renderItems method to check for disabled state
renderItems() {
if (this.disabled || this.items.length === 0 || this.columnsCount === 0) return;
-
+
const { start, end } = this.getVisibleRange();
-
+
// Check if render range has significantly changed
- const isSameRange =
- start >= this.lastRenderRange.start &&
+ const isSameRange =
+ start >= this.lastRenderRange.start &&
end <= this.lastRenderRange.end &&
Math.abs(start - this.lastRenderRange.start) < 10;
-
+
if (isSameRange) return;
-
+
this.lastRenderRange = { start, end };
-
+
// Determine which items need to be added and removed
const currentIndices = new Set();
for (let i = start; i < end && i < this.items.length; i++) {
currentIndices.add(i);
}
-
+
// Remove items that are no longer visible
for (const [index, element] of this.renderedItems.entries()) {
if (!currentIndices.has(index)) {
@@ -400,10 +400,10 @@ export class VirtualScroller {
this.renderedItems.delete(index);
}
}
-
+
// Use DocumentFragment for batch DOM operations
const fragment = document.createDocumentFragment();
-
+
// Add new visible items to the fragment
for (let i = start; i < end && i < this.items.length; i++) {
if (!this.renderedItems.has(i)) {
@@ -413,17 +413,17 @@ export class VirtualScroller {
this.renderedItems.set(i, element);
}
}
-
+
// Add the fragment to the grid (single DOM operation)
if (fragment.childNodes.length > 0) {
this.gridElement.appendChild(fragment);
}
-
+
// If we're close to the end and have more items to load, fetch them
if (end > this.items.length - (this.columnsCount * 2) && this.hasMore && !this.isLoading) {
this.loadMoreItems();
}
-
+
// Check if we need to slide the data window
this.slideDataWindow();
}
@@ -439,14 +439,14 @@ export class VirtualScroller {
this.totalItems = totalItems || 0;
this.hasMore = hasMore;
this.updateSpacerHeight();
-
+
// Check if there are no items and show placeholder if needed
if (this.items.length === 0) {
this.showNoItemsPlaceholder();
} else {
this.removeNoItemsPlaceholder();
}
-
+
// Clear all rendered items and redraw
this.clearRenderedItems();
this.scheduleRender();
@@ -455,29 +455,29 @@ export class VirtualScroller {
createItemElement(item, index) {
// Create the DOM element
const element = this.createItemFn(item);
-
+
// Add virtual scroll item class
element.classList.add('virtual-scroll-item');
-
+
// Calculate the position
const row = Math.floor(index / this.columnsCount);
const col = index % this.columnsCount;
-
+
// Calculate precise positions with row gap included
// Add the top padding to account for container padding
const topPos = this.containerPaddingTop + (row * (this.itemHeight + this.rowGap));
-
+
// Position correctly with leftOffset (no need to add padding as absolute
// positioning is already relative to the padding edge of the container)
const leftPos = this.leftOffset + (col * (this.itemWidth + this.columnGap));
-
+
// Position the element with absolute positioning
element.style.position = 'absolute';
element.style.left = `${leftPos}px`;
element.style.top = `${topPos}px`;
element.style.width = `${this.itemWidth}px`;
element.style.height = `${this.itemHeight}px`;
-
+
return element;
}
@@ -486,17 +486,17 @@ export class VirtualScroller {
const scrollTop = this.scrollContainer.scrollTop;
this.scrollDirection = scrollTop > this.lastScrollTop ? 'down' : 'up';
this.lastScrollTop = scrollTop;
-
+
// Handle large jumps in scroll position - check if we need to fetch a new window
const { scrollHeight } = this.scrollContainer;
const scrollRatio = scrollTop / scrollHeight;
-
+
// Only perform data windowing if the feature is enabled
if (this.enableDataWindowing && this.totalItems > this.windowSize) {
const estimatedIndex = Math.floor(scrollRatio * this.totalItems);
const currentWindowStart = this.absoluteWindowStart;
const currentWindowEnd = currentWindowStart + this.items.length;
-
+
// If the estimated position is outside our current window by a significant amount
if (estimatedIndex < currentWindowStart || estimatedIndex > currentWindowEnd) {
// Fetch a new data window centered on the estimated position
@@ -504,14 +504,14 @@ export class VirtualScroller {
return; // Skip normal rendering until new data is loaded
}
}
-
+
// Render visible items
this.scheduleRender();
-
+
// If we're near the bottom and have more items, load them
const { clientHeight } = this.scrollContainer;
const scrollBottom = scrollTop + clientHeight;
-
+
// Fix the threshold calculation - use percentage of remaining height instead
// We'll trigger loading when within 20% of the bottom of rendered content
const remainingScroll = scrollHeight - scrollBottom;
@@ -521,9 +521,9 @@ export class VirtualScroller {
// Or when within 2 rows of content from the bottom, whichever is larger
(this.itemHeight + this.rowGap) * 2
);
-
+
const shouldLoadMore = remainingScroll <= scrollThreshold;
-
+
if (shouldLoadMore && this.hasMore && !this.isLoading) {
this.loadMoreItems();
}
@@ -533,40 +533,40 @@ export class VirtualScroller {
async fetchDataWindow(targetIndex) {
// Skip if data windowing is disabled or already fetching
if (!this.enableDataWindowing || this.fetchingWindow) return;
-
+
this.fetchingWindow = true;
-
+
try {
// Calculate which page we need to fetch based on target index
const targetPage = Math.floor(targetIndex / this.pageSize) + 1;
console.log(`Fetching data window for index ${targetIndex}, page ${targetPage}`);
-
+
const { items, totalItems, hasMore } = await this.fetchItemsFn(targetPage, this.pageSize);
-
+
if (items && items.length > 0) {
// Calculate new absolute window start
this.absoluteWindowStart = (targetPage - 1) * this.pageSize;
-
+
// Replace the entire data window with new items
this.items = items;
- this.dataWindow = {
+ this.dataWindow = {
start: 0,
end: items.length
};
-
+
this.totalItems = totalItems || 0;
this.hasMore = hasMore;
-
+
// Update the current page for future fetches
const pageState = getCurrentPageState();
pageState.currentPage = targetPage + 1;
pageState.hasMore = hasMore;
-
+
// Update the spacer height and clear current rendered items
this.updateSpacerHeight();
this.clearRenderedItems();
this.scheduleRender();
-
+
console.log(`Loaded ${items.length} items for window at absolute index ${this.absoluteWindowStart}`);
}
} catch (err) {
@@ -581,37 +581,37 @@ export class VirtualScroller {
async slideDataWindow() {
// Skip if data windowing is disabled
if (!this.enableDataWindowing) return;
-
+
const { start, end } = this.getVisibleRange();
const windowStart = this.dataWindow.start;
const windowEnd = this.dataWindow.end;
const absoluteIndex = this.absoluteWindowStart + windowStart;
-
+
// Calculate the midpoint of the visible range
const visibleMidpoint = Math.floor((start + end) / 2);
const absoluteMidpoint = this.absoluteWindowStart + visibleMidpoint;
-
+
// Check if we're too close to the window edges
const closeToStart = start - windowStart < this.windowPadding;
const closeToEnd = windowEnd - end < this.windowPadding;
-
+
// If we're close to either edge and have total items > window size
if ((closeToStart || closeToEnd) && this.totalItems > this.windowSize) {
// Calculate a new target index centered around the current viewport
const halfWindow = Math.floor(this.windowSize / 2);
const targetIndex = Math.max(0, absoluteMidpoint - halfWindow);
-
+
// Don't fetch a new window if we're already showing items near the beginning
if (targetIndex === 0 && this.absoluteWindowStart === 0) {
return;
}
-
+
// Don't fetch if we're showing the end of the list and are near the end
- if (this.absoluteWindowStart + this.items.length >= this.totalItems &&
+ if (this.absoluteWindowStart + this.items.length >= this.totalItems &&
this.totalItems - end < halfWindow) {
return;
}
-
+
// Fetch the new data window
await this.fetchDataWindow(targetIndex);
}
@@ -620,18 +620,18 @@ export class VirtualScroller {
reset() {
// Remove all rendered items
this.clearRenderedItems();
-
+
// Reset state
this.items = [];
this.totalItems = 0;
this.hasMore = true;
-
+
// Reset spacer height
this.spacerElement.style.height = '0px';
-
+
// Remove any placeholder
this.removeNoItemsPlaceholder();
-
+
// Schedule a re-render
this.scheduleRender();
}
@@ -640,21 +640,21 @@ export class VirtualScroller {
// Remove event listeners
this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
window.removeEventListener('resize', this.resizeHandler);
-
+
// Clean up the resize observer if present
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
-
+
// Remove rendered elements
this.clearRenderedItems();
-
+
// Remove spacer
this.spacerElement.remove();
-
+
// Remove virtual scroll class
this.gridElement.classList.remove('virtual-scroll');
-
+
// Clear any pending timeout
this.clearLoadingTimeout();
}
@@ -663,19 +663,19 @@ export class VirtualScroller {
showNoItemsPlaceholder(message) {
// Remove any existing placeholder first
this.removeNoItemsPlaceholder();
-
+
// Create placeholder message
const placeholder = document.createElement('div');
placeholder.className = 'placeholder-message';
-
+
// Determine appropriate message based on page type
let placeholderText = '';
-
+
if (message) {
placeholderText = message;
} else {
const pageType = state.currentPageType;
-
+
if (pageType === 'recipes') {
placeholderText = `
No recipes found
@@ -698,10 +698,10 @@ export class VirtualScroller {
`;
}
}
-
+
placeholder.innerHTML = placeholderText;
placeholder.id = 'virtualScrollPlaceholder';
-
+
// Append placeholder to the grid
this.gridElement.appendChild(placeholder);
}
@@ -716,7 +716,7 @@ export class VirtualScroller {
// Utility method for debouncing
debounce(func, wait) {
let timeout;
- return function(...args) {
+ return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
@@ -727,55 +727,55 @@ export class VirtualScroller {
disable() {
// Detach scroll event listener
this.scrollContainer.removeEventListener('scroll', this.scrollHandler);
-
+
// Clear all rendered items from the DOM
this.clearRenderedItems();
-
+
// Hide the spacer element
if (this.spacerElement) {
this.spacerElement.style.display = 'none';
}
-
+
// Flag as disabled
this.disabled = true;
-
+
console.log('Virtual scroller disabled');
}
// Add enable method to resume rendering and events
enable() {
if (!this.disabled) return;
-
+
// Reattach scroll event listener
this.scrollContainer.addEventListener('scroll', this.scrollHandler);
-
+
// Check if spacer element exists in the DOM, if not, recreate it
if (!this.spacerElement || !this.gridElement.contains(this.spacerElement)) {
console.log('Spacer element not found in DOM, recreating it');
-
+
// Create a new spacer element
this.spacerElement = document.createElement('div');
this.spacerElement.className = 'virtual-scroll-spacer';
this.spacerElement.style.width = '100%';
this.spacerElement.style.height = '0px';
this.spacerElement.style.pointerEvents = 'none';
-
+
// Append it to the grid
this.gridElement.appendChild(this.spacerElement);
-
+
// Update the spacer height
this.updateSpacerHeight();
} else {
// Show the spacer element if it exists
this.spacerElement.style.display = 'block';
}
-
+
// Flag as enabled
this.disabled = false;
-
+
// Re-render items
this.scheduleRender();
-
+
console.log('Virtual scroller enabled');
}
@@ -783,31 +783,30 @@ export class VirtualScroller {
deepMerge(target, source) {
if (!source || !target) return target;
+ // Initialize result with a copy of target
const result = { ...target };
- // Only iterate over keys that exist in target
- Object.keys(target).forEach(key => {
- // Check if source has this key
- if (source.hasOwnProperty(key)) {
- const targetValue = target[key];
- const sourceValue = source[key];
+ if (!source) return result;
- // If both values are non-null objects and not arrays, merge recursively
- if (
- targetValue !== null &&
- typeof targetValue === 'object' &&
- !Array.isArray(targetValue) &&
- sourceValue !== null &&
- typeof sourceValue === 'object' &&
- !Array.isArray(sourceValue)
- ) {
- result[key] = this.deepMerge(targetValue, sourceValue);
- } else {
- // For primitive types, arrays, or null, use the value from source
- result[key] = sourceValue;
- }
+ // Iterate over all keys in the source object
+ Object.keys(source).forEach(key => {
+ const targetValue = target[key];
+ const sourceValue = source[key];
+
+ // If both values are non-null objects and not arrays, merge recursively
+ if (
+ targetValue !== null &&
+ typeof targetValue === 'object' &&
+ !Array.isArray(targetValue) &&
+ sourceValue !== null &&
+ typeof sourceValue === 'object' &&
+ !Array.isArray(sourceValue)
+ ) {
+ result[key] = this.deepMerge(targetValue || {}, sourceValue);
+ } else {
+ // Otherwise update with source value (includes primitives, arrays, and new keys)
+ result[key] = sourceValue;
}
- // If source does not have this key, keep the original value from target
});
return result;
@@ -828,43 +827,43 @@ export class VirtualScroller {
// Update the item data using deep merge
this.items[index] = this.deepMerge(this.items[index], updatedItem);
-
+
// If the item is currently rendered, update its DOM representation
if (this.renderedItems.has(index)) {
const element = this.renderedItems.get(index);
-
+
// Remove the old element
element.remove();
this.renderedItems.delete(index);
-
+
// Create and render the updated element
const updatedElement = this.createItemElement(this.items[index], index);
-
+
// Add update indicator visual effects
updatedElement.classList.add('updated');
-
+
// Add temporary update tag
const updateIndicator = document.createElement('div');
updateIndicator.className = 'update-indicator';
updateIndicator.textContent = 'Updated';
updatedElement.querySelector('.card-preview').appendChild(updateIndicator);
-
+
// Automatically remove the updated class after animation completes
setTimeout(() => {
updatedElement.classList.remove('updated');
}, 1500);
-
+
// Automatically remove the indicator after animation completes
setTimeout(() => {
if (updateIndicator && updateIndicator.parentNode) {
updateIndicator.remove();
}
}, 2000);
-
+
this.renderedItems.set(index, updatedElement);
this.gridElement.appendChild(updatedElement);
}
-
+
return true;
}
@@ -882,26 +881,26 @@ export class VirtualScroller {
// Remove the item from the data array
this.items.splice(index, 1);
-
+
// Decrement total count
this.totalItems = Math.max(0, this.totalItems - 1);
-
+
// Remove the item from rendered items if it exists
if (this.renderedItems.has(index)) {
this.renderedItems.get(index).remove();
this.renderedItems.delete(index);
}
-
+
// Shift all rendered items with higher indices down by 1
const indicesToUpdate = [];
-
+
// Collect all indices that need to be updated
for (const [idx, element] of this.renderedItems.entries()) {
if (idx > index) {
indicesToUpdate.push(idx);
}
}
-
+
// Update the elements and map entries
for (const idx of indicesToUpdate) {
const element = this.renderedItems.get(idx);
@@ -909,14 +908,14 @@ export class VirtualScroller {
// The item is now at the previous index
this.renderedItems.set(idx - 1, element);
}
-
+
// Update the spacer height to reflect the new total
this.updateSpacerHeight();
-
+
// Re-render to ensure proper layout
this.clearRenderedItems();
this.scheduleRender();
-
+
console.log(`Removed item with file path ${filePath} from virtual scroller data`);
return true;
}
@@ -929,28 +928,28 @@ export class VirtualScroller {
return; // Ignore rapid repeated triggers
}
this.lastPageNavTime = now;
-
+
const scrollContainer = this.scrollContainer;
const viewportHeight = scrollContainer.clientHeight;
-
+
// Calculate scroll distance (one viewport minus 10% overlap for context)
const scrollDistance = viewportHeight * 0.9;
-
+
// Determine the new scroll position
const newScrollTop = scrollContainer.scrollTop + (direction === 'down' ? scrollDistance : -scrollDistance);
-
+
// Remove any existing transition indicators
this.removeExistingTransitionIndicator();
-
+
// Scroll to the new position with smooth animation
scrollContainer.scrollTo({
top: newScrollTop,
behavior: 'smooth'
});
-
+
// Page transition indicator removed
// this.showTransitionIndicator();
-
+
// Force render after scrolling
setTimeout(() => this.renderItems(), 100);
setTimeout(() => this.renderItems(), 300);
@@ -966,25 +965,25 @@ export class VirtualScroller {
scrollToTop() {
this.removeExistingTransitionIndicator();
-
+
// Page transition indicator removed
// this.showTransitionIndicator();
-
+
this.scrollContainer.scrollTo({
top: 0,
behavior: 'smooth'
});
-
+
// Force render after scrolling
setTimeout(() => this.renderItems(), 100);
}
scrollToBottom() {
this.removeExistingTransitionIndicator();
-
+
// Page transition indicator removed
// this.showTransitionIndicator();
-
+
// Start loading all remaining pages to ensure content is available
this.loadRemainingPages().then(() => {
// After loading all content, scroll to the very bottom
@@ -995,27 +994,27 @@ export class VirtualScroller {
});
});
}
-
+
// New method to load all remaining pages
async loadRemainingPages() {
// If we're already at the end or loading, don't proceed
if (!this.hasMore || this.isLoading) return;
-
+
console.log('Loading all remaining pages for End key navigation...');
-
+
// Keep loading pages until we reach the end
while (this.hasMore && !this.isLoading) {
await this.loadMoreItems();
-
+
// Force render after each page load
this.renderItems();
-
+
// Small delay to prevent overwhelming the browser
await new Promise(resolve => setTimeout(resolve, 50));
}
-
+
console.log('Finished loading all pages');
-
+
// Final render to ensure all content is displayed
this.renderItems();
}
diff --git a/templates/components/header.html b/templates/components/header.html
index e2942c39..95c7c01e 100644
--- a/templates/components/header.html
+++ b/templates/components/header.html
@@ -8,52 +8,60 @@