feat(ux): globale Scroll-Wiederherstellung für ALLE Listen/Seiten

Neuer Hook useScrollRestoration (einmal im AppShell gemountet) erhält die
Scrollposition je Route über:
- Zurück/Vorwärts-Navigation (POP restauriert, PUSH startet oben),
- Bildschirm-Sperre / App-Hintergrund (visibilitychange, pagehide/pageshow) —
  damit das Handy nach dem Entsperren nicht mehr oben landet.

Robust gegen nachladende Listen (rAF-Nachjustierung bis ~2,5 s, während die Liste
wächst), bricht bei eigener Scroll-Eingabe ab, Deep-Links (?focus=, #anchor) haben
Vorrang. Die bisher nur in der Tickets-Seite eingebaute Logik wurde durch den
globalen Hook ersetzt.

tsc/eslint/vitest grün; e2e (navigation/listen/tickets, 42) grün.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-23 13:48:02 +02:00
parent f9e672c707
commit ebc70cc0b8
3 changed files with 136 additions and 103 deletions

View File

@@ -4,6 +4,7 @@ import { NavLink, Outlet } from 'react-router-dom'
import { de } from '../strings/de'
import GerbilIcon from './GerbilIcon'
import { BreederSuffixProvider } from './BreederSuffixProvider'
import { useScrollRestoration } from '../hooks/useScrollRestoration'
import './appShell.css'
interface NavItem {
@@ -52,6 +53,9 @@ const linkClass = ({ isActive }: { isActive: boolean }) =>
*/
export default function AppShell() {
const [moreOpen, setMoreOpen] = useState(false)
// Scrollposition je Seite erhalten (Zurück-Navigation + Handy-Sperre/Hintergrund) — gilt für
// ALLE scrollbaren Listen der App.
useScrollRestoration()
return (
<div className="app-shell">