diff --git a/src/views/Summary.tsx b/src/views/Summary.tsx index 08ce445..43bbb7d 100644 --- a/src/views/Summary.tsx +++ b/src/views/Summary.tsx @@ -1,4 +1,4 @@ -import { memo, useMemo, useCallback } from 'react'; +import React, { memo, useMemo, useCallback, useEffect } from 'react'; import { Text, Button, @@ -6,6 +6,7 @@ import { Checkbox, Box, Token, + Pagination, } from '@primer/react'; import { ChevronDownIcon, @@ -76,6 +77,23 @@ const SummaryView = memo(function SummaryView({ const [collapsedSections, setCollapsedSections] = useLocalStorage>('summary-collapsedSections', new Set()); + // Per-section pagination state + const [sectionPages, setSectionPages] = useLocalStorage>('summary-sectionPages', {}); + const itemsPerPage = 100; + + const getSectionPage = useCallback((sectionName: string) => { + return sectionPages[sectionName] || 1; + }, [sectionPages]); + + const setSectionPage = useCallback((sectionName: string, page: number) => { + setSectionPages(prev => ({ ...prev, [sectionName]: page })); + }, [setSectionPages]); + + // Reset pagination when search changes + useEffect(() => { + setSectionPages({}); + }, [searchText, setSectionPages]); + // Filter and sort items const filteredItems = filterItemsByAdvancedSearch(items, searchText); const sortedItems = sortItemsByUpdatedDate(filteredItems); @@ -248,25 +266,45 @@ const SummaryView = memo(function SummaryView({ - {!isCollapsed && ( -
- {Object.entries(urlGroups).map(([url, items]) => { - const mostRecent = getMostRecent(items); - return ( -
- 1 ? items.length : undefined} + {!isCollapsed && (() => { + const urlGroupEntries = Object.entries(urlGroups); + const sectionPage = getSectionPage(groupName); + const sectionTotalPages = Math.ceil(urlGroupEntries.length / itemsPerPage); + const startIndex = (sectionPage - 1) * itemsPerPage; + const paginatedUrlGroups = urlGroupEntries.slice(startIndex, startIndex + itemsPerPage); + + return ( +
+ {paginatedUrlGroups.map(([url, items]) => { + const mostRecent = getMostRecent(items); + return ( +
+ 1 ? items.length : undefined} + /> +
+ ); + })} + {sectionTotalPages > 1 && ( + + setSectionPage(groupName, page)} + showPages={{ narrow: false }} + marginPageCount={2} + surroundingPageCount={2} /> -
- ); - })} -
- )} + + )} +
+ ); + })()} ); })