Add items per page feature to more easily allow bulk pasting settings across lots of files

.gitignore

@@ -41,4 +41,8 @@ notes.md
 labels.db
 
 # Test output directories
-tests/*/output/
+tests/*/output/
+
+# Windows links
+*.lnk
+*.url

server/routes/labels.ts

@@ -648,17 +648,18 @@ router.get('/page/:page', async (req, res) => {
     const filteredEntries = applyFilters(mergedEntries, { region, language, videoMode, search, ownedIds: filterOwnedIds });
 
     const totalEntries = filteredEntries.length;
-    const totalPages = Math.ceil(totalEntries / pageSize);
-    const start = page * pageSize;
-    const end = Math.min(start + pageSize, totalEntries);
+    const effectivePageSize = pageSize === 0 ? totalEntries : pageSize;
+    const totalPages = Math.ceil(totalEntries / effectivePageSize);
+    const start = page * effectivePageSize;
+    const end = Math.min(start + effectivePageSize, totalEntries);
     const entries = filteredEntries.slice(start, end);
 
     res.json({
       imported: true, // We have content to show (either labels or owned carts)
       hasLabels: !!labelsEntries,
       hasOwnedCarts: allOwnedIds.length > 0,
       page,
-      pageSize,
+      pageSize: effectivePageSize,
       totalPages,
       totalEntries,
       totalUnfiltered: mergedEntries.length,

src/components/LabelsBrowser.tsx

@@ -85,6 +85,10 @@ export function LabelsBrowser({ onSelectLabel, refreshKey, sdCardPath }: LabelsB
   const [languageFilter, setLanguageFilter] = useState<string>(searchParams.get('language') || '');
   const [videoModeFilter, setVideoModeFilter] = useState<string>(searchParams.get('videoMode') || '');
   const [ownedFilter, setOwnedFilter] = useState<boolean>(searchParams.get('owned') === 'true');
+  const [pageSize, setPageSize] = useState(() => {
+    const saved = localStorage.getItem('labelsPageSize');
+    return saved ? parseInt(saved, 10) : 48;
+  });
 
   // Modal states
   const [showImportModal, setShowImportModal] = useState(false);
@@ -100,7 +104,6 @@ export function LabelsBrowser({ onSelectLabel, refreshKey, sdCardPath }: LabelsB
   // Unowned cartridges indicator
   const [unownedOnSDCount, setUnownedOnSDCount] = useState(0);
 
-  const pageSize = 48;
   const hasActiveFilters = regionFilter || languageFilter || videoModeFilter || searchQuery || ownedFilter;
   const hasClearableFilters = regionFilter || languageFilter || videoModeFilter || searchQuery;
 
@@ -157,14 +160,15 @@ export function LabelsBrowser({ onSelectLabel, refreshKey, sdCardPath }: LabelsB
       videoMode?: string;
       search?: string;
       owned?: boolean;
+      pageSize?: number;
     }
   ) => {
     try {
       setLoading(true);
       setError(null);
 
       const params = new URLSearchParams();
-      params.set('pageSize', pageSize.toString());
+      params.set('pageSize', (options?.pageSize ?? pageSize).toString());
 
       // Add filter parameters
       const region = options?.region ?? regionFilter;
@@ -202,7 +206,7 @@ export function LabelsBrowser({ onSelectLabel, refreshKey, sdCardPath }: LabelsB
     } finally {
       setLoading(false);
     }
-  }, [regionFilter, languageFilter, videoModeFilter, searchQuery, ownedFilter]);
+  }, [regionFilter, languageFilter, videoModeFilter, searchQuery, ownedFilter, pageSize]);
 
   // Check for unowned cartridges on SD card
   const checkUnownedOnSD = useCallback(async () => {
@@ -253,6 +257,14 @@ export function LabelsBrowser({ onSelectLabel, refreshKey, sdCardPath }: LabelsB
     fetchPage(newPage);
   };
 
+  const handlePageSizeChange = (newPageSize: number) => {
+    localStorage.setItem('labelsPageSize', newPageSize.toString());
+    setPageSize(newPageSize);
+    // Reset to first page when page size changes
+    updateURL(0, { search: searchQuery, region: regionFilter, language: languageFilter, videoMode: videoModeFilter, owned: ownedFilter });
+    fetchPage(0, { pageSize: newPageSize });
+  };
+
   const handleFilterChange = (
     type: 'search' | 'region' | 'language' | 'videoMode' | 'owned',
     value: string | boolean
@@ -418,6 +430,23 @@ export function LabelsBrowser({ onSelectLabel, refreshKey, sdCardPath }: LabelsB
               </div>
             </div>
 
+            <div className="filter-group">
+              <label htmlFor="pageSize" className="text-label">Items</label>
+              <select
+                id="pageSize"
+                value={pageSize}
+                onChange={(e) => handlePageSizeChange(parseInt(e.target.value))}
+                disabled={loading}
+                className="page-size-select"
+              >
+                {[25, 50, 100, 250, 1000].map(size => (
+                  <option key={size} value={size}>
+                    {size}
+                  </option>
+                ))}
+              </select>
+            </div>
+
             <div className="filter-group filter-group-search">
               <label htmlFor="search-input" className="text-label">Search</label>
               <div className="search-input-wrapper">
@@ -607,7 +636,9 @@ export function LabelsBrowser({ onSelectLabel, refreshKey, sdCardPath }: LabelsB
               <Pagination
                 page={page}
                 totalPages={totalPages}
+                pageSize={pageSize}
                 onPageChange={handlePageChange}
+                onPageSizeChange={handlePageSizeChange}
                 disabled={loading}
               />
             </>

src/components/Pagination.css

@@ -7,6 +7,38 @@
   padding: 1rem;
 }
 
+.pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  background: var(--color-bg-secondary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+.pagination-controls label {
+  font-size: 0.875rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.page-size-select {
+  padding: 0.25rem 0.5rem;
+  background: var(--color-bg);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-body);
+  cursor: pointer;
+  min-width: 30px;
+}
+
+.page-size-select:hover {
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
 .pagination button {
   padding: 0.5rem 1rem;
   background: transparent;

src/components/Pagination.tsx

@@ -3,11 +3,13 @@ import './Pagination.css';
 interface PaginationProps {
   page: number;
   totalPages: number;
+  pageSize: number;
   onPageChange: (page: number) => void;
+  onPageSizeChange: (pageSize: number) => void;
   disabled?: boolean;
 }
 
-export function Pagination({ page, totalPages, onPageChange, disabled }: PaginationProps) {
+export function Pagination({ page, totalPages, pageSize, onPageChange, onPageSizeChange, disabled }: PaginationProps) {
   if (totalPages <= 1) return null;
 
   return (