From e60c26ea7711354e4f54e9f5b4f98bc70303c023 Mon Sep 17 00:00:00 2001
From: yangdx <gzdaniel@me.com>
Date: Wed, 30 Jul 2025 18:07:38 +0800
Subject: [PATCH] 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
---
 .../src/features/DocumentManager.tsx          | 19 ++++++++++++-------
 lightrag_webui/src/stores/settings.ts         | 13 +++++++++++--
 2 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/lightrag_webui/src/features/DocumentManager.tsx b/lightrag_webui/src/features/DocumentManager.tsx
index 5f5761ca..57bd7814 100644
--- a/lightrag_webui/src/features/DocumentManager.tsx
+++ b/lightrag_webui/src/features/DocumentManager.tsx
@@ -177,11 +177,17 @@ export default function DocumentManager() {
   // Legacy state for backward compatibility
   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
   const [, setCurrentPageDocs] = useState<DocStatusResponse[]>([])
   const [pagination, setPagination] = useState<PaginationInfo>({
     page: 1,
-    page_size: 20,
+    page_size: documentsPageSize,
     total_count: 0,
     total_pages: 0,
     has_next: false,
@@ -190,10 +196,6 @@ export default function DocumentManager() {
   const [statusCounts, setStatusCounts] = useState<Record<string, number>>({ all: 0 })
   const [isRefreshing, setIsRefreshing] = useState(false)
 
-  const currentTab = useSettingsStore.use.currentTab()
-  const showFileName = useSettingsStore.use.showFileName()
-  const setShowFileName = useSettingsStore.use.setShowFileName()
-
   // Sort state
   const [sortField, setSortField] = useState<SortField>('updated_at')
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc')
@@ -557,10 +559,13 @@ export default function DocumentManager() {
     setPagination(prev => ({ ...prev, page: newPage }));
   }, [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) => {
     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
     setPageByStatus({
       all: 1,
@@ -571,7 +576,7 @@ export default function DocumentManager() {
     });
 
     setPagination(prev => ({ ...prev, page: 1, page_size: newPageSize }));
-  }, [pagination.page_size]);
+  }, [pagination.page_size, setDocumentsPageSize]);
 
   // Handle status filter change - only update state
   const handleStatusFilterChange = useCallback((newStatusFilter: StatusFilter) => {
diff --git a/lightrag_webui/src/stores/settings.ts b/lightrag_webui/src/stores/settings.ts
index 893c98f6..8744887a 100644
--- a/lightrag_webui/src/stores/settings.ts
+++ b/lightrag_webui/src/stores/settings.ts
@@ -13,6 +13,9 @@ interface SettingsState {
   showFileName: boolean
   setShowFileName: (show: boolean) => void
 
+  documentsPageSize: number
+  setDocumentsPageSize: (size: number) => void
+
   // Graph viewer settings
   showPropertyPanel: boolean
   showNodeSearchBar: boolean
@@ -104,6 +107,7 @@ const useSettingsStoreBase = create<SettingsState>()(
 
       currentTab: 'documents',
       showFileName: false,
+      documentsPageSize: 10,
 
       retrievalHistory: [],
 
@@ -187,12 +191,13 @@ const useSettingsStoreBase = create<SettingsState>()(
         })),
 
       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',
       storage: createJSONStorage(() => localStorage),
-      version: 15,
+      version: 16,
       migrate: (state: any, version: number) => {
         if (version < 2) {
           state.showEdgeLabel = false
@@ -275,6 +280,10 @@ const useSettingsStoreBase = create<SettingsState>()(
             history_turns: 0,
           }
         }
+        if (version < 16) {
+          // Add documentsPageSize field for older versions
+          state.documentsPageSize = 10
+        }
         return state
       }
     }