Hustler-Pixelwelt T13: Korrekturen Hochhaus (Fokus, Tastatur, weniger Bewegung, Handy-Tippflächen, Schnee per transform, Pause überall, Seite ohne Leerlauf-Blitz)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/pages/WorkersPage.jsx

@@ -36,12 +36,16 @@ const api = workersApi
 // Auth und Dienst-API kommen von hier. Der Feed (Zustand alle 15 s, Ereignisse alle 5 s) läuft genau einmal pro Seite, egal welcher
 // Bildschirm offen ist; die Hustler-Tabelle (indexWorkers beim Schnappschuss, reduceEvents bei Ereignissen) gehört ebenfalls hierher.
 // Ereignisse gehen zusätzlich an die Regie, die nur das Hochhaus über regieRef einhängt.
+// Die Tabelle liegt nie einen Render hinter dem Schnappschuss zurück (sonst stünden alle Figuren kurz auf „Leerlauf“): sie merkt sich, aus welchem Schnappschuss sie
+// entstand, und wird im Render neu aus `state` gebaut, sobald der Schnappschuss ein anderer ist. Pause (state.paused) geht an alle drei Bildschirme.
+// Das Hochhaus bekommt vonTab (der Bildschirm, von dem man zurückkommt) und fokussiert dann die Etage, über die man gegangen war.
 export default function WorkersPage() {
   const { isAdmin, user } = useAuth()
   const [params, setParams] = useSearchParams()
   const active = pickTab(WORKERS_TABS, params.get('tab'))
   const bot = params.get('bot') ?? ''
-  const [workers, setWorkers] = useState({})
+  const [tabelle, setTabelle] = useState({ von: null, workers: {} }) // Hustler-Tabelle samt dem Schnappschuss, aus dem sie entstand
+  const [verlauf, setVerlauf] = useState({ aktuell: active.id, vorher: null }) // aktueller und vorheriger Bildschirm
   const regieRef = useRef(null)
 
   // Tab-Titel nur solange die Seite offen ist; beim Verlassen kommt der vorige Titel zurück
@@ -53,14 +57,20 @@ export default function WorkersPage() {
 
   // Neue Ereignisse: Tabelle fortschreiben und der Regie vorspielen (die Regie kennt den Rückstau selbst)
   const onEvents = useCallback((events) => {
-    setWorkers((w) => reduceEvents(w, events))
+    setTabelle((t) => ({ von: t.von, workers: reduceEvents(t.workers, events) }))
     if (regieRef.current) regieRef.current.push(events)
   }, [])
 
   const { state, error, loaded, refresh } = useWorkersFeed(api, { onEvents })
-  useEffect(() => {
-    if (state) setWorkers(indexWorkers(state))
-  }, [state])
+  // Neuer Schnappschuss: Tabelle sofort neu bauen (nicht erst nach einem Effekt) und merken
+  const veraltet = Boolean(state) && tabelle.von !== state
+  const workers = veraltet ? indexWorkers(state) : tabelle.workers
+  if (veraltet) setTabelle({ von: state, workers })
+  // Bildschirmwechsel: der bisherige wird zum vorherigen
+  const gewechselt = verlauf.aktuell !== active.id
+  const vonTab = gewechselt ? verlauf.aktuell : verlauf.vorher
+  if (gewechselt) setVerlauf({ aktuell: active.id, vorher: vonTab })
+  const paused = state?.paused === true
 
   return (
     <div className="hk-seite" data-tab={active.id}>
@@ -71,6 +81,7 @@ export default function WorkersPage() {
           feed={{ state, error, loaded, refresh }}
           workers={workers}
           regieRef={regieRef}
+          vonTab={vonTab}
           onOpen={(tab) => setParams({ tab })}
         />
       )}
@@ -80,6 +91,7 @@ export default function WorkersPage() {
           me={{ id: user?.$id, name: user?.name }}
           kpis={state?.kpis}
           workers={workers}
+          paused={paused}
           onBack={() => setParams({ tab: 'hochhaus' })}
         />
       )}
@@ -90,6 +102,7 @@ export default function WorkersPage() {
           onClearBot={() => setParams({ tab: 'botleads' })}
           kpis={state?.kpis}
           workers={workers}
+          paused={paused}
           onBack={() => setParams({ tab: 'hochhaus' })}
         />
       )}