Hustler-Pixelwelt T10: Keller (Szene mit Arne nach Status, Register-Buch, Akte, Gründe)

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

src/components/workers/BotLeadList.jsx

@@ -1,34 +1,41 @@
 import { useEffect, useRef, useState } from 'react'
-import EmptyState from '../ui/EmptyState'
-import { ROOM_FILTERS, botleadRow, pageInfo } from '../../lib/botleadsView'
+import Akte from './keller/Akte'
+import KellerSzene from './keller/KellerSzene'
+import RegisterBuch from './keller/RegisterBuch'
+import { pageInfo } from '../../lib/botleadsView'
+import { eintragModell } from '../../lib/hustlerKeller'
+import { formatCount } from '../../lib/workersView'
 import { restoreFocus } from '../../lib/workersFocus'
 
 const SEARCH_DELAY_MS = 300 // so lange wartet die Suche nach dem letzten Tastendruck, bevor sie den Dienst fragt
-const SEARCH_MAX = 100 // der Dienst kürzt die Suche auf 100 Zeichen
 const UNKNOWN_ERROR = 'Unbekannter Fehler'
-const COLUMNS = ['Betrieb', 'Raum', 'Punkte', 'Grund', 'Telefon', 'Quelle', 'Gefunden']
 const START_VIEW = Object.freeze({ room: '', q: '', page: 1 }) // Raumfilter, geltende Suche, Seite: ein Wert, damit eine Änderung genau eine Anfrage auslöst
 const browserDocument = () => (typeof document === 'undefined' ? null : document) // unter Node (Tests, Server) gibt es keins, dann bleibt der Fokus unangetastet
 
-// Reiter „Bot-Leads“: Betriebe, die nicht angeschrieben werden (z. B. keine veröffentlichte Mail), mit Grund. Reine Liste, nichts wird gesendet oder angerufen.
+// Bildschirm „Keller“ (Hustler-Pixelwelt T10, Spec E12/E13; Dateiname bleibt BotLeadList): die Archiv-Szene mit Arne (keller/KellerSzene), davor Arnes Register-Buch
+// (keller/RegisterBuch) mit den Betrieben, die nicht angeschrieben werden, samt Grund, und die Akte zu einem Eintrag (keller/Akte). Reine Liste, nichts wird gesendet
+// oder angerufen. Props: api, bot, onClearBot, kpis (botLeads für die Zahl am Schild), workers (Hustler-Tabelle der Seite: Arnes Status), onBack (◂ Hochhaus).
 // Die Liste holt sich ihre Daten bei jeder Änderung von Raum, Suche, Seite oder bot selbst; es gibt kein Polling. Nur die jüngste Anfrage zählt: eine späte
 // Antwort (auch ein später Fehler) einer älteren Anfrage oder nach dem Abbau wird verworfen. Scheitert eine Anfrage, steht der Satz des Dienstes mit „Erneut versuchen“,
 // das genau diese Anfrage (Raum, Suche, Seite oder Eintrag) noch einmal stellt; Raum und Suche gehen weiterhin.
 // bot (aus ?bot= der Adresse, Link aus dem Ereignisstrom): zeigt genau diesen Eintrag, hervorgehoben, mit „Alle anzeigen“ (onClearBot nimmt bot aus der Adresse).
-// Alle Texte der Zeilen sind Textknoten; Links entstehen nur aus row.sourceHref (botleadRow prüft die Adresse mit safeHref: nur http und https, keine Zugangsdaten).
-export default function BotLeadList({ api, bot, onClearBot }) {
+// Alle Texte der Zeilen sind Textknoten; Links entstehen nur aus row.sourceHref (botleadRow prüft die Adresse mit safeHref: nur http und https, keine Zugangsdaten), und zwar
+// nur in der Akte. Kein CSS-Import (WorkersPage hängt die Stile ein), keine Bilder, kein HTML-Einschub.
+export default function BotLeadList({ api, bot, onClearBot, kpis, workers, onBack }) {
   const botId = typeof bot === 'string' ? bot : ''
   const single = botId !== ''
   const [view, setView] = useState(START_VIEW)
   const [draft, setDraft] = useState('') // Inhalt des Suchfelds; in view.q steht erst die Suche, die nach der Verzögerung gilt
   const [result, setResult] = useState({ key: null, items: [], total: 0, pageSize: undefined, error: null })
   const [attempt, setAttempt] = useState(0) // zählt „Erneut versuchen“: gehört zum Schlüssel, damit dieselbe Anfrage noch einmal läuft und „Wird geladen“ zeigt
+  const [zu, setZu] = useState(false) // „Register zuklappen“: nur die Szene bleibt
+  const [akte, setAkte] = useState(null) // Nr. des Eintrags in der gezeigten Seite, dessen Akte offen ist
   const timerRef = useRef(null)
   const seqRef = useRef(0)
-  // Tastaturfokus: Wer „Alle anzeigen“ oder „Zurück“/„Weiter“ drückt, verliert den Knopf mit dem Fokus (Einzelansicht und Seitenzeile werden ausgetauscht oder
+  // Tastaturfokus: Wer „Alle anzeigen“ oder ◂/▸ drückt, verliert den Knopf mit dem Fokus (Einzelansicht und Seitenzeile werden ausgetauscht oder
   // hängen beim Laden aus); ohne Zutun fiele der Fokus auf <body>, an den Seitenanfang. Gemerkt wird nur, was der Nutzer als Letztes bedient hat.
-  const selectRef = useRef(null) // Raumfilter: Ziel nach „Alle anzeigen“
-  const clearedRef = useRef(false) // „Alle anzeigen“ gedrückt: erst dann (nie schon beim Einhängen, das öffnete am Handy die Auswahl) bekommt der Raumfilter den Fokus
+  const reiterRef = useRef(null) // aktiver Raum-Reiter: Ziel nach „Alle anzeigen“
+  const clearedRef = useRef(false) // „Alle anzeigen“ gedrückt: erst dann (nie schon beim Einhängen) bekommt der Reiter den Fokus
   const prevRef = useRef(null)
   const nextRef = useRef(null)
   const pagedRef = useRef('') // 'prev' oder 'next': welcher Blätterknopf zuletzt gedrückt wurde; nach dem Laden bekommt die Seitenzeile den Fokus zurück (auch nach „Erneut versuchen“)
@@ -40,6 +47,7 @@ export default function BotLeadList({ api, bot, onClearBot }) {
     const mine = seqRef.current
     // Ein früheres Ergebnis zu genau diesem Schlüssel (hin und zurück gewechselt, bevor der andere Schlüssel antwortete) ist veraltet: erst die neue Antwort zählt
     setResult((prev) => (prev.key === key ? { ...prev, key: null } : prev))
+    setAkte(null) // eine neue Anfrage tauscht die Seite aus: die Akte zu einem Eintrag der alten Seite ist zu
     const load = async () => {
       try {
         const data = await api.botleads(single ? { id: botId } : { room: view.room, q: view.q, page: view.page })
@@ -73,8 +81,7 @@ export default function BotLeadList({ api, bot, onClearBot }) {
     pagedRef.current = dir
     setView((v) => ({ ...v, page: v.page + (dir === 'next' ? 1 : -1) }))
   }
-  const onRoom = (e) => {
-    const room = e.target.value
+  const onRoom = (room) => {
     pagedRef.current = '' // wer den Raum wählt, hat den Blätterknopf verlassen: der Fokus springt nicht zurück
     setView((v) => ({ ...v, room, page: 1 }))
   }
@@ -88,17 +95,17 @@ export default function BotLeadList({ api, bot, onClearBot }) {
 
   const loading = result.key !== key
 
-  // Die Einzelansicht ist weg (die Seite hat bot aus der Adresse genommen): der Raumfilter ersetzt den gedrückten Knopf und bekommt den Fokus.
+  // Die Einzelansicht ist weg (die Seite hat bot aus der Adresse genommen): der Raum-Reiter ersetzt den gedrückten Knopf und bekommt den Fokus.
   // Ohne den Knopf (Zurück-Taste des Browsers) bleibt der Fokus, wo er ist.
   useEffect(() => {
     const wanted = clearedRef.current
     clearedRef.current = false
-    if (wanted && !single) selectRef.current?.focus()
+    if (wanted && !single) reiterRef.current?.focus()
   }, [single])
 
   // Die neue Seite ist da und die Seitenzeile wieder eingehängt: der Fokus geht an den gedrückten Knopf, ist er gesperrt (erste oder letzte Seite) an den anderen.
-  // Nur wenn er wirklich verloren ging (body, nirgends, der alte Knopf ist ausgehängt): wer inzwischen selbst woandershin gegangen ist (Suchfeld, Raumfilter), wird
-  // nicht gestört. Ohne preventScroll spränge die Seite ans Ende der neuen Seite, denn die Seitenzeile steht unter der Tabelle (restoreFocus in workersFocus.js).
+  // Nur wenn er wirklich verloren ging (body, nirgends, der alte Knopf ist ausgehängt): wer inzwischen selbst woandershin gegangen ist (Suchfeld, Reiter), wird
+  // nicht gestört. Ohne preventScroll spränge die Seite ans Ende der neuen Seite (restoreFocus in workersFocus.js).
   // Scheiterte die Anfrage, gibt es keine Seitenzeile; die Merkung bleibt dann für „Erneut versuchen“ stehen (Raum, Suche und neues Blättern setzen sie neu oder zurück).
   useEffect(() => {
     if (loading || result.error) return
@@ -108,86 +115,59 @@ export default function BotLeadList({ api, bot, onClearBot }) {
     restoreFocus(browserDocument(), dir === 'next' ? [nextRef.current, prevRef.current] : [prevRef.current, nextRef.current])
   }, [loading, result.error])
 
-  const rows = result.items.map((item) => botleadRow(item))
+  const zeilen = result.items.map((item) => eintragModell(item))
   const info = pageInfo({ total: result.total, page: view.page, pageSize: result.pageSize })
   const filtered = view.room !== '' || view.q !== ''
+  const zeigeAkte = akte !== null && !loading && !result.error && akte < zeilen.length
+  const plakette = kpis && Number.isFinite(kpis.botLeads) ? formatCount(kpis.botLeads) : ''
 
-  let body
-  if (loading) {
-    body = <div className="loading" role="status">Wird geladen …</div>
-  } else if (result.error) {
-    body = (
-      <>
-        <div className="msg err" role="alert">{result.error}</div>
-        <div className="toolbar wk-bl-retry">
-          <button type="button" className="btn" onClick={onRetry}>Erneut versuchen</button>
-        </div>
-      </>
-    )
-  } else if (rows.length === 0) {
-    if (single) body = <EmptyState title="Dieser Eintrag ist nicht (mehr) in der Liste." hint="Er wurde gekürzt oder ist kein Bot-Lead." />
-    else if (filtered) body = <EmptyState title="Keine Treffer." hint="Für diesen Raum und diese Suche gibt es keine Bot-Leads." />
-    else body = <EmptyState title="Noch keine Bot-Leads." hint="Betriebe, die nicht angeschrieben werden, erscheinen hier mit ihrem Grund." />
-  } else {
-    body = (
-      <div className="wk-bl-scroll" role="region" aria-label="Bot-Leads" tabIndex={0}>
-        <table className="table wk-bl-table">
-          <thead>
-            <tr>{COLUMNS.map((name) => <th key={name} scope="col">{name}</th>)}</tr>
-          </thead>
-          <tbody>
-            {rows.map((row, index) => (
-              <tr key={row.id || `ohne-id-${index}`} className={row.gekuerzt ? 'wk-bl-cut' : undefined} aria-current={single && row.id === botId ? 'true' : undefined}>
-                <td>
-                  <div className="cell-title">{row.title}{row.gekuerzt && <span className="wk-bl-tag">gekürzt</span>}</div>
-                  {row.place && <div className="cell-sub">{row.place}</div>}
-                </td>
-                <td>{row.roomLabel}</td>
-                <td className="wk-bl-nowrap">{row.scoreLabel}</td>
-                <td>{row.reason}</td>
-                <td>{row.phone}</td>
-                <td className="wk-bl-nowrap">
-                  {row.sourceHref
-                    ? <a href={row.sourceHref} target="_blank" rel="noopener noreferrer" aria-label={`Quelle öffnen: ${row.title}`}>Quelle öffnen</a>
-                    : '–'}
-                </td>
-                <td className="wk-bl-nowrap">{row.found}</td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
-    )
-  }
+  const onOpen = (nr) => setAkte(nr)
+  const onBlaettern = (schritt) => setAkte((nr) => (nr === null || zeilen.length === 0 ? nr : (nr + schritt + zeilen.length) % zeilen.length))
 
   return (
-    <div className="wk-bl">
-      <p className="wk-hint">Reine Liste: keine Anrufe, kein Mailversand.</p>
-      {single ? (
-        <div className="toolbar wk-bl-single">
-          <span className="wk-hint">Einzelner Eintrag aus dem Ereignisstrom</span>
-          <button type="button" className="btn" onClick={onClear}>Alle anzeigen</button>
+    <div className="hk-keller">
+      <KellerSzene workers={workers} />
+      <div className="hk-kl-vignette" aria-hidden="true" />
+      <div className="hk-kl-dunkel" aria-hidden="true" />
+      <div className="hk-kl-ui">
+        <div className="hk-kl-kopf">
+          <button type="button" className="hk-knopf hk-kl-knopf-klein" aria-label="Zurück zum Hochhaus" onClick={() => { if (typeof onBack === 'function') onBack() }}>
+            <span className="hk-ic hk-ic-zurueck" aria-hidden="true" /><span className="hk-kl-label">Hochhaus</span>
+          </button>
+          <div className="hk-messing hk-kl-schild">
+            <span className="hk-ic hk-ic-robo" aria-hidden="true" />
+            <h1 className="hk-kl-titel">Bot-Leads</h1>
+            {plakette ? <span className="hk-kl-zahl">{plakette}</span> : null}
+          </div>
+          <button type="button" className="hk-knopf hk-kl-knopf-klein hk-kl-zuklappen" aria-expanded={!zu} aria-label={zu ? 'Register aufklappen' : 'Register zuklappen'} onClick={() => setZu((z) => !z)}>
+            <span className="hk-ic hk-ic-akte" aria-hidden="true" /><span className="hk-kl-label">{zu ? 'Register aufklappen' : 'Register zuklappen'}</span>
+          </button>
         </div>
-      ) : (
-        <div className="toolbar">
-          <select className="select" aria-label="Raum" value={view.room} onChange={onRoom} ref={selectRef}>
-            {ROOM_FILTERS.map((f) => <option key={f.value} value={f.value}>{f.label}</option>)}
-          </select>
-          <input className="input search" type="search" aria-label="Betriebe suchen" placeholder="Name, Ort oder Grund" maxLength={SEARCH_MAX} value={draft} onChange={onSearch} />
-        </div>
-      )}
-      {body}
-      {!single && !loading && !result.error && result.total > 0 && (
-        <div className="table-foot">
-          <span>{info.label}</span>
-          {info.pages > 1 && (
-            <span className="wk-bl-pager">
-              <button type="button" className="btn" ref={prevRef} disabled={!info.hasPrev} onClick={() => onPage('prev')}>Zurück</button>
-              <button type="button" className="btn" ref={nextRef} disabled={!info.hasNext} onClick={() => onPage('next')}>Weiter</button>
-            </span>
-          )}
-        </div>
-      )}
+        {zu ? null : (
+          <RegisterBuch
+            einzeln={single}
+            botId={botId}
+            room={view.room}
+            draft={draft}
+            filtered={filtered}
+            laden={loading}
+            fehler={result.error}
+            zeilen={zeilen}
+            total={result.total}
+            info={info}
+            onRoom={onRoom}
+            onSearch={onSearch}
+            onClear={onClear}
+            onPage={onPage}
+            onRetry={onRetry}
+            onOpen={onOpen}
+            reiterRef={reiterRef}
+            zurueckRef={prevRef}
+            weiterRef={nextRef}
+          />
+        )}
+      </div>
+      {zeigeAkte ? <Akte eintrag={zeilen[akte]} index={akte} gesamt={zeilen.length} onClose={() => setAkte(null)} onBlaettern={onBlaettern} /> : null}
     </div>
   )
 }