file size limits, keep active filters in session

This commit is contained in:
Stefan Hardegger
2025-10-30 13:11:40 +01:00
parent 924ae12b5b
commit a3bc83db8a
7 changed files with 112 additions and 25 deletions

View File

@@ -13,6 +13,7 @@ import SidebarLayout from '../../components/library/SidebarLayout';
import ToolbarLayout from '../../components/library/ToolbarLayout';
import MinimalLayout from '../../components/library/MinimalLayout';
import { useLibraryLayout } from '../../hooks/useLibraryLayout';
import { useLibraryFilters, clearLibraryFilters } from '../../hooks/useLibraryFilters';
type ViewMode = 'grid' | 'list';
type SortOption = 'createdAt' | 'title' | 'authorName' | 'rating' | 'wordCount' | 'lastReadAt';
@@ -26,17 +27,21 @@ export default function LibraryContent() {
const [loading, setLoading] = useState(false);
const [searchLoading, setSearchLoading] = useState(false);
const [randomLoading, setRandomLoading] = useState(false);
const [searchQuery, setSearchQuery] = useState('');
const [selectedTags, setSelectedTags] = useState<string[]>([]);
const [viewMode, setViewMode] = useState<ViewMode>('list');
const [sortOption, setSortOption] = useState<SortOption>('lastReadAt');
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
// Persisted filter state (survives navigation within session)
const [searchQuery, setSearchQuery] = useLibraryFilters<string>('searchQuery', '');
const [selectedTags, setSelectedTags] = useLibraryFilters<string[]>('selectedTags', []);
const [viewMode, setViewMode] = useLibraryFilters<ViewMode>('viewMode', 'list');
const [sortOption, setSortOption] = useLibraryFilters<SortOption>('sortOption', 'lastReadAt');
const [sortDirection, setSortDirection] = useLibraryFilters<'asc' | 'desc'>('sortDirection', 'desc');
const [advancedFilters, setAdvancedFilters] = useLibraryFilters<AdvancedFilters>('advancedFilters', {});
// Non-persisted state (resets on navigation)
const [page, setPage] = useState(0);
const [totalPages, setTotalPages] = useState(1);
const [totalElements, setTotalElements] = useState(0);
const [refreshTrigger, setRefreshTrigger] = useState(0);
const [urlParamsProcessed, setUrlParamsProcessed] = useState(false);
const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilters>({});
// Initialize filters from URL parameters
useEffect(() => {
@@ -209,11 +214,15 @@ export default function LibraryContent() {
}
};
const clearFilters = () => {
const handleClearFilters = () => {
// Clear state
setSearchQuery('');
setSelectedTags([]);
setAdvancedFilters({});
setPage(0);
// Clear sessionStorage
clearLibraryFilters();
// Trigger refresh
setRefreshTrigger(prev => prev + 1);
};
@@ -266,7 +275,7 @@ export default function LibraryContent() {
onSortDirectionToggle: handleSortDirectionToggle,
onAdvancedFiltersChange: handleAdvancedFiltersChange,
onRandomStory: handleRandomStory,
onClearFilters: clearFilters,
onClearFilters: handleClearFilters,
};
const renderContent = () => {
@@ -280,7 +289,7 @@ export default function LibraryContent() {
}
</p>
{searchQuery || selectedTags.length > 0 || Object.values(advancedFilters).some(v => v !== undefined && v !== '' && v !== 'all' && v !== false) ? (
<Button variant="ghost" onClick={clearFilters}>
<Button variant="ghost" onClick={handleClearFilters}>
Clear Filters
</Button>
) : (