feat: set default page size to 10 and persist in localStorage

- Change default documents page size from 20 to 10 rows
- Add documentsPageSize setting to settings store with persistence
- Update DocumentManager to use and save page size preference
- Include migration for existing users to get new default value
This commit is contained in:
yangdx 2025-07-30 18:07:38 +08:00
parent 74eecc46e5
commit e60c26ea77
2 changed files with 23 additions and 9 deletions

View file

@ -177,11 +177,17 @@ export default function DocumentManager() {
// Legacy state for backward compatibility // Legacy state for backward compatibility
const [docs, setDocs] = useState<DocsStatusesResponse | null>(null) const [docs, setDocs] = useState<DocsStatusesResponse | null>(null)
const currentTab = useSettingsStore.use.currentTab()
const showFileName = useSettingsStore.use.showFileName()
const setShowFileName = useSettingsStore.use.setShowFileName()
const documentsPageSize = useSettingsStore.use.documentsPageSize()
const setDocumentsPageSize = useSettingsStore.use.setDocumentsPageSize()
// New pagination state // New pagination state
const [, setCurrentPageDocs] = useState<DocStatusResponse[]>([]) const [, setCurrentPageDocs] = useState<DocStatusResponse[]>([])
const [pagination, setPagination] = useState<PaginationInfo>({ const [pagination, setPagination] = useState<PaginationInfo>({
page: 1, page: 1,
page_size: 20, page_size: documentsPageSize,
total_count: 0, total_count: 0,
total_pages: 0, total_pages: 0,
has_next: false, has_next: false,
@ -190,10 +196,6 @@ export default function DocumentManager() {
const [statusCounts, setStatusCounts] = useState<Record<string, number>>({ all: 0 }) const [statusCounts, setStatusCounts] = useState<Record<string, number>>({ all: 0 })
const [isRefreshing, setIsRefreshing] = useState(false) const [isRefreshing, setIsRefreshing] = useState(false)
const currentTab = useSettingsStore.use.currentTab()
const showFileName = useSettingsStore.use.showFileName()
const setShowFileName = useSettingsStore.use.setShowFileName()
// Sort state // Sort state
const [sortField, setSortField] = useState<SortField>('updated_at') const [sortField, setSortField] = useState<SortField>('updated_at')
const [sortDirection, setSortDirection] = useState<SortDirection>('desc') const [sortDirection, setSortDirection] = useState<SortDirection>('desc')
@ -557,10 +559,13 @@ export default function DocumentManager() {
setPagination(prev => ({ ...prev, page: newPage })); setPagination(prev => ({ ...prev, page: newPage }));
}, [pagination.page, statusFilter]); }, [pagination.page, statusFilter]);
// Handle page size change - only update state // Handle page size change - update state and save to store
const handlePageSizeChange = useCallback((newPageSize: number) => { const handlePageSizeChange = useCallback((newPageSize: number) => {
if (newPageSize === pagination.page_size) return; if (newPageSize === pagination.page_size) return;
// Save the new page size to the store
setDocumentsPageSize(newPageSize);
// Reset all status filters to page 1 when page size changes // Reset all status filters to page 1 when page size changes
setPageByStatus({ setPageByStatus({
all: 1, all: 1,
@ -571,7 +576,7 @@ export default function DocumentManager() {
}); });
setPagination(prev => ({ ...prev, page: 1, page_size: newPageSize })); setPagination(prev => ({ ...prev, page: 1, page_size: newPageSize }));
}, [pagination.page_size]); }, [pagination.page_size, setDocumentsPageSize]);
// Handle status filter change - only update state // Handle status filter change - only update state
const handleStatusFilterChange = useCallback((newStatusFilter: StatusFilter) => { const handleStatusFilterChange = useCallback((newStatusFilter: StatusFilter) => {

View file

@ -13,6 +13,9 @@ interface SettingsState {
showFileName: boolean showFileName: boolean
setShowFileName: (show: boolean) => void setShowFileName: (show: boolean) => void
documentsPageSize: number
setDocumentsPageSize: (size: number) => void
// Graph viewer settings // Graph viewer settings
showPropertyPanel: boolean showPropertyPanel: boolean
showNodeSearchBar: boolean showNodeSearchBar: boolean
@ -104,6 +107,7 @@ const useSettingsStoreBase = create<SettingsState>()(
currentTab: 'documents', currentTab: 'documents',
showFileName: false, showFileName: false,
documentsPageSize: 10,
retrievalHistory: [], retrievalHistory: [],
@ -187,12 +191,13 @@ const useSettingsStoreBase = create<SettingsState>()(
})), })),
setShowFileName: (show: boolean) => set({ showFileName: show }), setShowFileName: (show: boolean) => set({ showFileName: show }),
setShowLegend: (show: boolean) => set({ showLegend: show }) setShowLegend: (show: boolean) => set({ showLegend: show }),
setDocumentsPageSize: (size: number) => set({ documentsPageSize: size })
}), }),
{ {
name: 'settings-storage', name: 'settings-storage',
storage: createJSONStorage(() => localStorage), storage: createJSONStorage(() => localStorage),
version: 15, version: 16,
migrate: (state: any, version: number) => { migrate: (state: any, version: number) => {
if (version < 2) { if (version < 2) {
state.showEdgeLabel = false state.showEdgeLabel = false
@ -275,6 +280,10 @@ const useSettingsStoreBase = create<SettingsState>()(
history_turns: 0, history_turns: 0,
} }
} }
if (version < 16) {
// Add documentsPageSize field for older versions
state.documentsPageSize = 10
}
return state return state
} }
} }