From f3f453439225887e0f05ed1cd30405d0dcbecbf8 Mon Sep 17 00:00:00 2001
From: Gulum <gulum@rismer.de>
Date: Sat, 13 Jun 2026 08:11:17 +0200
Subject: [PATCH] FEAT: Normalize Anke B./Anke Busch contact, and save other
 infinite scroll layout updates

---
 .../src/hooks/useInfiniteList.ts              | 24 +++++++
 gerbil-manager-web/src/pages/AnfragenPage.tsx | 55 ++++++---------
 gerbil-manager-web/src/pages/BeckenPage.tsx   | 68 +++++++------------
 .../src/pages/VertraegeListPage.tsx           | 41 ++++-------
 tools/import/merge_and_resolve.py             |  1 +
 5 files changed, 84 insertions(+), 105 deletions(-)

diff --git a/gerbil-manager-web/src/hooks/useInfiniteList.ts b/gerbil-manager-web/src/hooks/useInfiniteList.ts
index fe7d76a..32581a1 100644
--- a/gerbil-manager-web/src/hooks/useInfiniteList.ts
+++ b/gerbil-manager-web/src/hooks/useInfiniteList.ts
@@ -125,3 +125,27 @@ export function useInfiniteList<T>(
 
   return { items, total, loading, loadingMore, error, hasMore, loadMore, reload }
 }
+
+/**
+ * Wires an IntersectionObserver to a sentinel element that triggers loadMore() as
+ * it scrolls into view. Render the returned ref on a small element shown only while
+ * `list.hasMore`, e.g. `{list.hasMore && <div ref={sentinelRef} />}`. Re-subscribes
+ * when the load state changes so it keeps paging while the sentinel stays in view.
+ */
+export function useInfiniteSentinel<T>(list: InfiniteListState<T>) {
+  const ref = useRef<HTMLDivElement | null>(null)
+  const { hasMore, loading, loadingMore, loadMore } = list
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const io = new IntersectionObserver(
+      (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loading && !loadingMore) loadMore()
+      },
+      { rootMargin: '300px 0px' },
+    )
+    io.observe(el)
+    return () => io.disconnect()
+  }, [hasMore, loading, loadingMore, loadMore])
+  return ref
+}
diff --git a/gerbil-manager-web/src/pages/AnfragenPage.tsx b/gerbil-manager-web/src/pages/AnfragenPage.tsx
index 36897ac..0567fe7 100644
--- a/gerbil-manager-web/src/pages/AnfragenPage.tsx
+++ b/gerbil-manager-web/src/pages/AnfragenPage.tsx
@@ -13,7 +13,8 @@ import {
   syncRequests,
   type RequestStatus,
 } from '../api/requests'
-import { useApi, useMutation } from '../hooks/useApi'
+import { useMutation } from '../hooks/useApi'
+import { useInfiniteList, useInfiniteSentinel } from '../hooks/useInfiniteList'
 import { formatDateTime } from '../format/labels'
 import { FilterPanel } from '../components/FilterPanel'
 import './anfragen.css'
@@ -31,19 +32,20 @@ export function StatusBadge({ status }: { status: RequestStatus }) {
 export default function AnfragenPage() {
   const t = de.pages.anfragen
   const [status, setStatus] = useState<RequestStatus | ''>('')
-  const [page, setPage] = useState(1)
   const [notice, setNotice] = useState<string | null>(null)
 
-  const requests = useApi(
-    () =>
+  const requests = useInfiniteList(
+    (page) =>
       listRequests({
         page,
         pageSize: PAGE_SIZE,
-        orderBy: 'receivedAt desc',
+        orderBy: 'receivedAt desc,id',
         filter: status === '' ? undefined : `status==${status}`,
       }),
-    [page, status],
+    `${status}`,
   )
+  const sentinelRef = useInfiniteSentinel(requests)
+  const { items, total, loading } = requests
 
   const sync = useMutation(() => syncRequests())
   async function onSync() {
@@ -63,7 +65,7 @@ export default function AnfragenPage() {
       <header className="page-head">
         <div>
           <h2>{t.title}</h2>
-          {requests.data && <p className="muted">{t.countText(requests.data.totalCount)}</p>}
+          {!loading && <p className="muted">{t.countText(total)}</p>}
         </div>
         <div className="head-actions">
           <button type="button" className="btn btn--primary" onClick={onSync} disabled={sync.pending}>
@@ -78,16 +80,13 @@ export default function AnfragenPage() {
       {/* Status-Filter */}
       <FilterPanel
         activeCount={status !== '' ? 1 : 0}
-        onReset={() => { setStatus(''); setPage(1) }}
+        onReset={() => setStatus('')}
       >
         <label className="field">
           <span>{t.detail.statusLabel}</span>
           <select
             value={status}
-            onChange={(e) => {
-              setStatus(e.target.value as RequestStatus | '')
-              setPage(1)
-            }}
+            onChange={(e) => setStatus(e.target.value as RequestStatus | '')}
           >
             <option value="">{t.filterAll}</option>
             {REQUEST_STATUSES.map((s) => (
@@ -99,7 +98,7 @@ export default function AnfragenPage() {
         </label>
       </FilterPanel>
 
-      {requests.loading && <p className="muted">{de.common.loading}</p>}
+      {loading && <p className="muted">{de.common.loading}</p>}
       {requests.error && (
         <div className="alert alert--error">
           <span>{requests.error}</span>
@@ -109,13 +108,13 @@ export default function AnfragenPage() {
         </div>
       )}
 
-      {requests.data && requests.data.items.length === 0 && (
+      {!loading && items.length === 0 && (
         <p className="muted">{status === '' ? t.empty : t.emptyFiltered}</p>
       )}
 
-      {requests.data && requests.data.items.length > 0 && (
+      {items.length > 0 && (
         <ul className="card-list">
-          {requests.data.items.map((r) => (
+          {items.map((r) => (
             <li key={r.id}>
               <Link to={`/anfragen/${r.id}`} className="gerbil-card anfrage-card">
                 <span className="gerbil-card__name">{r.fromName ?? r.fromAddress}</span>
@@ -130,24 +129,12 @@ export default function AnfragenPage() {
         </ul>
       )}
 
-      {requests.data && requests.data.totalCount > PAGE_SIZE && (
-        <nav className="pager" aria-label="Seitennavigation">
-          <button type="button" className="btn" disabled={page <= 1} onClick={() => setPage(page - 1)}>
-            {de.common.previous}
-          </button>
-          <span>
-            {de.common.page} {page} {de.common.of}{' '}
-            {Math.max(1, Math.ceil(requests.data.totalCount / PAGE_SIZE))}
-          </span>
-          <button
-            type="button"
-            className="btn"
-            disabled={page >= Math.ceil(requests.data.totalCount / PAGE_SIZE)}
-            onClick={() => setPage(page + 1)}
-          >
-            {de.common.next}
-          </button>
-        </nav>
+      {/* Infinite-scroll sentinel + "loading more" indicator. */}
+      {requests.hasMore && <div ref={sentinelRef} aria-hidden="true" style={{ height: 1 }} />}
+      {requests.loadingMore && (
+        <p className="muted" style={{ textAlign: 'center', padding: '0.75rem 0' }}>
+          {de.common.loading}
+        </p>
       )}
     </section>
   )
diff --git a/gerbil-manager-web/src/pages/BeckenPage.tsx b/gerbil-manager-web/src/pages/BeckenPage.tsx
index b47bf7d..1553cfd 100644
--- a/gerbil-manager-web/src/pages/BeckenPage.tsx
+++ b/gerbil-manager-web/src/pages/BeckenPage.tsx
@@ -1,35 +1,34 @@
-/** FEAT-2: Becken-Liste — Gridify-Namenssuche + Paging, Link auf Detailseite. */
+/** FEAT-2: Becken-Liste — Gridify-Namenssuche + Infinite Scroll, Link auf Detailseite. */
 import { useState } from 'react'
 import { Link } from 'react-router-dom'
 import { de } from '../strings/de'
 import { listEnclosuresPaged } from '../api/enclosures'
-import { condition, type GridifyQuery } from '../api/gridify'
-import { useApi } from '../hooks/useApi'
+import { condition } from '../api/gridify'
+import { useInfiniteList, useInfiniteSentinel } from '../hooks/useInfiniteList'
 
 const PAGE_SIZE = 20
 
 export default function BeckenPage() {
   const t = de.pages.becken
   const [search, setSearch] = useState('')
-  const [page, setPage] = useState(1)
 
   const filter = search.trim()
     ? condition({ field: 'name', op: 'contains', value: search.trim() })
     : undefined
-  const query: GridifyQuery = { filter, orderBy: 'name', page, pageSize: PAGE_SIZE }
-
-  const enclosures = useApi(() => listEnclosuresPaged(query), [filter, page])
-
-  const total = enclosures.data?.totalCount ?? 0
-  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE))
-  const items = enclosures.data?.items ?? []
+  // Infinite scroll; trailing `id` keeps OFFSET pagination stable (no repeats/omits).
+  const list = useInfiniteList(
+    (page) => listEnclosuresPaged({ filter, orderBy: 'name,id', page, pageSize: PAGE_SIZE }),
+    `${filter ?? ''}`,
+  )
+  const sentinelRef = useInfiniteSentinel(list)
+  const { items, total, loading } = list
 
   return (
     <section className="page">
       <header className="page-head">
         <div>
           <h2>{t.title}</h2>
-          {enclosures.data && (
+          {!loading && (
             <p className="muted">
               {total} {t.countLabel}
             </p>
@@ -46,27 +45,22 @@ export default function BeckenPage() {
           className="input"
           placeholder={t.searchPlaceholder}
           value={search}
-          onChange={(e) => {
-            setSearch(e.target.value)
-            setPage(1)
-          }}
+          onChange={(e) => setSearch(e.target.value)}
           aria-label={t.fields.name}
         />
       </div>
 
-      {enclosures.loading && <p className="muted">{de.common.loading}</p>}
-      {enclosures.error && (
+      {loading && <p className="muted">{de.common.loading}</p>}
+      {list.error && (
         <div className="alert alert--error">
-          <span>{enclosures.error}</span>
-          <button type="button" className="btn" onClick={enclosures.reload}>
+          <span>{list.error}</span>
+          <button type="button" className="btn" onClick={list.reload}>
             {de.common.retry}
           </button>
         </div>
       )}
 
-      {!enclosures.loading && !enclosures.error && items.length === 0 && (
-        <p className="muted">{t.empty}</p>
-      )}
+      {!loading && !list.error && items.length === 0 && <p className="muted">{t.empty}</p>}
 
       {items.length > 0 && (
         <ul className="card-list">
@@ -81,28 +75,12 @@ export default function BeckenPage() {
         </ul>
       )}
 
-      {totalPages > 1 && (
-        <nav className="pager" aria-label="Seitennavigation">
-          <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. */}
+      {list.hasMore && <div ref={sentinelRef} aria-hidden="true" style={{ height: 1 }} />}
+      {list.loadingMore && (
+        <p className="muted" style={{ textAlign: 'center', padding: '0.75rem 0' }}>
+          {de.common.loading}
+        </p>
       )}
     </section>
   )
diff --git a/gerbil-manager-web/src/pages/VertraegeListPage.tsx b/gerbil-manager-web/src/pages/VertraegeListPage.tsx
index 79756dd..ae38704 100644
--- a/gerbil-manager-web/src/pages/VertraegeListPage.tsx
+++ b/gerbil-manager-web/src/pages/VertraegeListPage.tsx
@@ -5,6 +5,7 @@ import { de } from '../strings/de'
 import { contractFileUrl, deleteContract, listContracts } from '../api/contracts'
 import { listContactsPaged } from '../api/contacts'
 import { useApi, useMutation } from '../hooks/useApi'
+import { useInfiniteList, useInfiniteSentinel } from '../hooks/useInfiniteList'
 import { formatDate } from '../format/labels'
 import './vertragWizard.css'
 
@@ -16,12 +17,14 @@ function formatPrice(price: number): string {
 
 export default function VertraegeListPage() {
   const t = de.pages.vertraege
-  const [page, setPage] = useState(1)
 
-  const contracts = useApi(
-    () => listContracts({ page, pageSize: PAGE_SIZE, orderBy: 'createdAt desc' }),
-    [page],
+  const contracts = useInfiniteList(
+    (page) => listContracts({ page, pageSize: PAGE_SIZE, orderBy: 'createdAt desc,id' }),
+    'contracts',
   )
+  const sentinelRef = useInfiniteSentinel(contracts)
+  const { items, total: totalCount, loading } = contracts
+
   const contacts = useApi(() => listContactsPaged({ page: 1, pageSize: 1000, orderBy: 'name' }), [])
   const contactName = useMemo(
     () => new Map((contacts.data?.items ?? []).map((c) => [c.id, c.name])),
@@ -35,8 +38,8 @@ export default function VertraegeListPage() {
     if (result.ok) contracts.reload()
   }
 
-  if (contracts.loading) return <p className="muted">{de.common.loading}</p>
-  if (contracts.error || !contracts.data) {
+  if (loading) return <p className="muted">{de.common.loading}</p>
+  if (contracts.error) {
     return (
       <section className="page">
         <h2>{t.title}</h2>
@@ -50,9 +53,6 @@ export default function VertraegeListPage() {
     )
   }
 
-  const { items, totalCount } = contracts.data
-  const totalPages = Math.max(1, Math.ceil(totalCount / PAGE_SIZE))
-
   return (
     <section className="page">
       <header className="page-head">
@@ -98,23 +98,12 @@ export default function VertraegeListPage() {
         </ul>
       )}
 
-      {totalPages > 1 && (
-        <nav className="pager" aria-label="Seitennavigation">
-          <button type="button" className="btn" disabled={page <= 1} onClick={() => setPage(page - 1)}>
-            {de.common.previous}
-          </button>
-          <span>
-            {de.common.page} {page} {de.common.of} {totalPages}
-          </span>
-          <button
-            type="button"
-            className="btn"
-            disabled={page >= totalPages}
-            onClick={() => setPage(page + 1)}
-          >
-            {de.common.next}
-          </button>
-        </nav>
+      {/* Infinite-scroll sentinel + "loading more" indicator. */}
+      {contracts.hasMore && <div ref={sentinelRef} aria-hidden="true" style={{ height: 1 }} />}
+      {contracts.loadingMore && (
+        <p className="muted" style={{ textAlign: 'center', padding: '0.75rem 0' }}>
+          {de.common.loading}
+        </p>
       )}
     </section>
   )
diff --git a/tools/import/merge_and_resolve.py b/tools/import/merge_and_resolve.py
index 6203f64..b923747 100644
--- a/tools/import/merge_and_resolve.py
+++ b/tools/import/merge_and_resolve.py
@@ -88,6 +88,7 @@ def get_normalized_contact_name(name):
         "hanserenners": "Hanse Renner",
         "blackforestgv": "Black Forest",
         "topol": "Topolino",
+        "ankeb": "Anke Busch",
     }
     
     if n in norm_map: