FEAT: Merge Anja Sch. into Anja Schaumburg, and keep infinite scroll layout pages

gerbil-manager-web/src/pages/WuerfeListPage.tsx

@@ -3,9 +3,10 @@ import { Link } from 'react-router-dom'
 import { de } from '../strings/de'
 import { listLitters } from '../api/litters'
 import { listGerbils } from '../api/gerbils'
-import { andFilter, condition, escapeGridifyValue, type GridifyQuery } from '../api/gridify'
+import { andFilter, condition, escapeGridifyValue } from '../api/gridify'
 import type { Litter } from '../api/types'
 import { useApi } from '../hooks/useApi'
+import { useInfiniteList, useInfiniteSentinel } from '../hooks/useInfiniteList'
 import { formatDate } from '../format/labels'
 import { FilterPanel } from '../components/FilterPanel'
 
@@ -13,7 +14,8 @@ const PAGE_SIZE = 20
 
 type Tab = 'litters' | 'pairs'
 type SortKey = 'dateDesc' | 'dateAsc'
-const SORT_ORDER_BY: Record<SortKey, string> = { dateDesc: 'date desc', dateAsc: 'date' }
+// Trailing `id` → total order, so OFFSET pagination is stable for infinite scroll.
+const SORT_ORDER_BY: Record<SortKey, string> = { dateDesc: 'date desc,id', dateAsc: 'date,id' }
 
 function yearOptions(): number[] {
   const current = new Date().getFullYear()
@@ -50,7 +52,6 @@ export default function WuerfeListPage() {
   const [search, setSearch] = useState('')
   const [year, setYear] = useState('')
   const [sort, setSort] = useState<SortKey>('dateDesc')
-  const [page, setPage] = useState(1)
 
   // Parent names (shared by both tabs).
   const gerbils = useApi(() => listGerbils({ page: 1, pageSize: 1000, orderBy: 'name' }), [])
@@ -68,8 +69,11 @@ export default function WuerfeListPage() {
     year && condition({ field: 'date', op: '<=', value: `${year}-12-31` }),
   )
   const orderBy = SORT_ORDER_BY[sort]
-  const query: GridifyQuery = { filter: filter || undefined, orderBy, page, pageSize: PAGE_SIZE }
-  const litters = useApi(() => listLitters(query), [filter, orderBy, page])
+  const litters = useInfiniteList(
+    (page) => listLitters({ filter: filter || undefined, orderBy, page, pageSize: PAGE_SIZE }),
+    `${filter}|${orderBy}`,
+  )
+  const littersSentinelRef = useInfiniteSentinel(litters)
 
   // Pairs tab: all litters, grouped client-side.
   const allLitters = useApi(
@@ -88,9 +92,7 @@ export default function WuerfeListPage() {
     )
   }, [pairs, search, nameById])
 
-  const total = litters.data?.totalCount ?? 0
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
-  const items = litters.data?.items ?? []
+  const items = litters.items
 
   return (
     <section className="page">
@@ -131,10 +133,7 @@ export default function WuerfeListPage() {
                 className="input"
                 placeholder={t.searchPlaceholder}
                 value={search}
-                onChange={(e) => {
-                  setSearch(e.target.value)
-                  setPage(1)
-                }}
+                onChange={(e) => setSearch(e.target.value)}
                 aria-label="Wurf suchen"
               />
             }
@@ -143,17 +142,13 @@ export default function WuerfeListPage() {
               setSearch('')
               setYear('')
               setSort('dateDesc')
-              setPage(1)
             }}
           >
             <label className="field">
               <span>{t.filterYear}</span>
               <select
                 value={year}
-                onChange={(e) => {
-                  setYear(e.target.value)
-                  setPage(1)
-                }}
+                onChange={(e) => setYear(e.target.value)}
               >
                 <option value="">{t.allYears}</option>
                 {yearOptions().map((y) => (
@@ -204,28 +199,14 @@ export default function WuerfeListPage() {
             </ul>
           )}
 
-          {totalPages > 1 && (
-            <nav className="pager" aria-label={de.common.pageNav}>
-              <button
-                type="button"
-                className="btn"
-                disabled={page <= 1}
-                onClick={() => setPage((p) => Math.max(1, p - 1))}
-              >
-                {de.common.previous}
-              </button>
-              <span className="muted">
-                {de.common.page} {page} {de.common.of} {totalPages}
-              </span>
-              <button
-                type="button"
-                className="btn"
-                disabled={page >= totalPages}
-                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
-              >
-                {de.common.next}
-              </button>
-            </nav>
+          {/* Infinite-scroll sentinel + "loading more" indicator. */}
+          {litters.hasMore && (
+            <div ref={littersSentinelRef} aria-hidden="true" style={{ height: 1 }} />
+          )}
+          {litters.loadingMore && (
+            <p className="muted" style={{ textAlign: 'center', padding: '0.75rem 0' }}>
+              {de.common.loading}
+            </p>
           )}
         </>
       )}