refactor(ui): persist sort per-mode with two storage keys, add recipes sort persistence

This commit is contained in:
Will Miao
2026-06-26 17:07:17 +08:00
parent a429e6b1c3
commit b3edda62ad
2 changed files with 24 additions and 19 deletions

View File

@@ -316,7 +316,12 @@ export class PageControls {
* Load sort preference from storage * Load sort preference from storage
*/ */
loadSortPreference() { loadSortPreference() {
const savedSort = getStorageItem(`${this.pageType}_sort`); // Use separate keys for grouped vs non-grouped sort so each mode
// remembers its own preference independently
const key = state.global.settings.group_by_model
? `${this.pageType}_sort_grouped`
: `${this.pageType}_sort`;
const savedSort = getStorageItem(key);
if (savedSort) { if (savedSort) {
// Handle legacy format conversion // Handle legacy format conversion
const convertedSort = this.convertLegacySortFormat(savedSort); const convertedSort = this.convertLegacySortFormat(savedSort);
@@ -360,7 +365,11 @@ export class PageControls {
}; };
return; return;
} }
setStorageItem(`${this.pageType}_sort`, sortValue); // Separate storage for grouped vs non-grouped sort
const key = state.global.settings.group_by_model
? `${this.pageType}_sort_grouped`
: `${this.pageType}_sort`;
setStorageItem(key, sortValue);
} }
/** /**
@@ -555,37 +564,28 @@ export class PageControls {
/** /**
* Called when group_by_model is toggled. * Called when group_by_model is toggled.
* Saves current sort when entering grouped mode, restores normal sort * Swaps between {pageType}_sort (non-group) and {pageType}_sort_grouped,
* when leaving — prevents "Most versions first" persisting after exit. * so each mode remembers its own sort preference independently.
*/ */
onGroupByModelToggled(isEnabled) { onGroupByModelToggled(isEnabled) {
const normalKey = `${this.pageType}_sort_normal`;
const groupedKey = `${this.pageType}_sort_grouped`; const groupedKey = `${this.pageType}_sort_grouped`;
if (isEnabled) { if (isEnabled) {
// Entering group mode: save current sort for later restoration // Entering group mode: restore last-used grouped sort, if any
setStorageItem(normalKey, this.pageState.sortBy);
// Restore previously saved grouped sort, if any
const savedGroupedSort = getStorageItem(groupedKey); const savedGroupedSort = getStorageItem(groupedKey);
if (savedGroupedSort) { if (savedGroupedSort) {
this.pageState.sortBy = savedGroupedSort; this.pageState.sortBy = savedGroupedSort;
this.saveSortPreference(savedGroupedSort);
const sortSelect = document.getElementById('sortSelect'); const sortSelect = document.getElementById('sortSelect');
if (sortSelect) { if (sortSelect) {
sortSelect.value = savedGroupedSort; sortSelect.value = savedGroupedSort;
} }
} }
} else { } else {
// Leaving group mode: save current grouped sort aside, restore normal // Leaving group mode: persist current sort for next time, restore non-group sort
const currentSort = this.pageState.sortBy; setStorageItem(groupedKey, this.pageState.sortBy);
if (currentSort && currentSort.startsWith('versions_count')) { const savedNormalSort = getStorageItem(`${this.pageType}_sort`);
setStorageItem(groupedKey, currentSort);
}
const savedNormalSort = getStorageItem(normalKey);
if (savedNormalSort) { if (savedNormalSort) {
removeStorageItem(normalKey);
this.pageState.sortBy = savedNormalSort; this.pageState.sortBy = savedNormalSort;
this.saveSortPreference(savedNormalSort);
const sortSelect = document.getElementById('sortSelect'); const sortSelect = document.getElementById('sortSelect');
if (sortSelect) { if (sortSelect) {
sortSelect.value = savedNormalSort; sortSelect.value = savedNormalSort;

View File

@@ -4,7 +4,7 @@ import { ImportManager } from './managers/ImportManager.js';
import { BatchImportManager } from './managers/BatchImportManager.js'; import { BatchImportManager } from './managers/BatchImportManager.js';
import { RecipeModal } from './components/RecipeModal.js'; import { RecipeModal } from './components/RecipeModal.js';
import { state, getCurrentPageState } from './state/index.js'; import { state, getCurrentPageState } from './state/index.js';
import { getSessionItem, removeSessionItem } from './utils/storageHelpers.js'; import { getStorageItem, setStorageItem, getSessionItem, removeSessionItem } from './utils/storageHelpers.js';
import { RecipeContextMenu } from './components/ContextMenu/index.js'; import { RecipeContextMenu } from './components/ContextMenu/index.js';
import { DuplicatesManager } from './components/DuplicatesManager.js'; import { DuplicatesManager } from './components/DuplicatesManager.js';
import { refreshVirtualScroll } from './utils/infiniteScroll.js'; import { refreshVirtualScroll } from './utils/infiniteScroll.js';
@@ -237,13 +237,18 @@ class RecipeManager {
} }
initEventListeners() { initEventListeners() {
// Sort select // Sort select — load saved preference, persist on change
const sortSelect = document.getElementById('sortSelect'); const sortSelect = document.getElementById('sortSelect');
if (sortSelect) { if (sortSelect) {
const savedSort = getStorageItem('recipes_sort');
if (savedSort) {
this.pageState.sortBy = savedSort;
}
initSortDropdown(sortSelect); initSortDropdown(sortSelect);
sortSelect.value = this.pageState.sortBy || 'date:desc'; sortSelect.value = this.pageState.sortBy || 'date:desc';
sortSelect.addEventListener('change', () => { sortSelect.addEventListener('change', () => {
this.pageState.sortBy = sortSelect.value; this.pageState.sortBy = sortSelect.value;
setStorageItem('recipes_sort', sortSelect.value);
refreshVirtualScroll(); refreshVirtualScroll();
}); });
} }