Hustler-Pixelwelt: Pult und Keller füllen die Seite (alte Hülle und Übergangsregel entfernt, CSS eingebunden)

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

src/pages/WorkersPage.jsx

@@ -12,7 +12,9 @@ import '../styles/workers.css'
 import '../styles/hustler/schrift.css'
 import '../styles/hustler/hochhaus.css'
 import '../styles/hustler/keller.css'
+import '../styles/hustler/hustler-keller-ui.css'
 import '../styles/hustler/pult.css'
+import '../styles/hustler/hustler-pult-ui.css'
 import '../styles/hustler/hustler-ui.css'
 import '../styles/hustler/hustler-welt.css'
 import '../styles/hustler/hustler-kopf.css'
@@ -72,29 +74,24 @@ export default function WorkersPage() {
           onOpen={(tab) => setParams({ tab })}
         />
       )}
-      {/* Pult und Keller stecken bis T9/T10 noch in der alten hellen Hülle (.page.wk-page); hustler-ui.css gibt ihnen dafür normale Höhe */}
       {active.id === 'freigabe' && (
-        <div className="page wk-page">
+        <PultList
-          <PultList
+          api={api}
-            api={api}
+          me={{ id: user?.$id, name: user?.name }}
-            me={{ id: user?.$id, name: user?.name }}
+          kpis={state?.kpis}
-            kpis={state?.kpis}
+          workers={workers}
-            workers={workers}
+          onBack={() => setParams({ tab: 'hochhaus' })}
-            onBack={() => setParams({ tab: 'hochhaus' })}
+        />
-          />
-        </div>
       )}
       {active.id === 'botleads' && (
-        <div className="page wk-page">
+        <BotLeadList
-          <BotLeadList
+          api={api}
-            api={api}
+          bot={bot}
-            bot={bot}
+          onClearBot={() => setParams({ tab: 'botleads' })}
-            onClearBot={() => setParams({ tab: 'botleads' })}
+          kpis={state?.kpis}
-            kpis={state?.kpis}
+          workers={workers}
-            workers={workers}
+          onBack={() => setParams({ tab: 'hochhaus' })}
-            onBack={() => setParams({ tab: 'hochhaus' })}
+        />
-          />
-        </div>
       )}
     </div>
   )

src/styles/hustler/hustler-ui.css

@@ -8,11 +8,8 @@
   /* Mobilleiste aus global.css (.mobile-bar, 52 px) abziehen */
   .hk-seite { height: calc(100vh - 52px); height: calc(100dvh - 52px); }
 }
-.hk-seite > .hk-hochhaus { position: absolute; inset: 0; }
+.hk-seite > .hk-hochhaus, .hk-seite > .hk-pult, .hk-seite > .hk-keller { position: absolute; inset: 0; }
 
-/* Übergang bis T9/T10: Pult und Keller stehen noch in der alten hellen Hülle (.page.wk-page), brauchen normale Höhe, Scrollen und hellen Grund.
-   Entfällt, sobald PultList und BotLeadList in ihre Pixelszenen umgebaut sind (.hk-pult / .hk-keller füllen dann selbst die Seite). */
-.hk-seite[data-tab="freigabe"], .hk-seite[data-tab="botleads"] { height: auto; overflow: visible; background: none; }
 
 /* ---------- Hochhaus: Laden und Leerzustand im Pixel-Stil ---------- */
 .hk-hochhaus .hk-laden,

tests/unit/hustlerSeite.test.mjs

@@ -268,16 +268,16 @@ test('Seite: ohne ?tab, mit ?tab=hochhaus und mit unbekanntem Tab erscheint das
   }
 })
 
-test('Seite: ?tab=freigabe zeigt das Pult in der alten Hülle, ?tab=botleads den Keller; data-tab folgt', async () => {
+test('Seite: ?tab=freigabe zeigt das Pult, ?tab=botleads den Keller, beide direkt in .hk-seite (keine alte helle Hülle mehr); data-tab folgt', async () => {
   const pult = await seite('tab=freigabe')
   try {
     assert.equal(pult.root().props['data-tab'], 'freigabe'); assert.deepEqual(pult.screen(), ['pult'])
-    assert.equal(byClass(pult.root(), 'page').length, 1); assert.ok(hasClass(byClass(pult.root(), 'page')[0], 'wk-page'))
+    assert.equal(byClass(pult.root(), 'page').length, 0); assert.equal(byClass(pult.root(), 'wk-page').length, 0)
   } finally { pult.end() }
   const keller = await seite('tab=botleads')
   try {
     assert.equal(keller.root().props['data-tab'], 'botleads'); assert.deepEqual(keller.screen(), ['keller'])
-    assert.equal(byClass(keller.root(), 'page').length, 1)
+    assert.equal(byClass(keller.root(), 'page').length, 0); assert.equal(byClass(keller.root(), 'wk-page').length, 0)
   } finally { keller.end() }
 })
 

tests/unit/workersRoute.test.mjs

@@ -47,7 +47,7 @@ test('WorkersPage: freigabe zeigt die PultList, botleads die BotLeadList (api, b
 })
 test('CSS-Importe der Hustler-Oberfläche stehen nur in WorkersPage, nicht in den Komponenten (sonst nicht unter Node mit fakeReact ladbar)', () => {
   const s = readFileSync(new URL('../../src/pages/WorkersPage.jsx', import.meta.url), 'utf8')
-  for (const css of ['workers', 'hustler/schrift', 'hustler/hochhaus', 'hustler/keller', 'hustler/pult', 'hustler/hustler-ui', 'hustler/hustler-welt', 'hustler/hustler-kopf', 'hustler/hustler-detail', 'hustler/hustler-regie']) assert.ok(s.includes(`import '../styles/${css}.css'`), css)
+  for (const css of ['workers', 'hustler/schrift', 'hustler/hochhaus', 'hustler/keller', 'hustler/pult', 'hustler/hustler-ui', 'hustler/hustler-welt', 'hustler/hustler-kopf', 'hustler/hustler-detail', 'hustler/hustler-regie', 'hustler/hustler-pult-ui', 'hustler/hustler-keller-ui']) assert.ok(s.includes(`import '../styles/${css}.css'`), css)
   const walk = (dir) => readdirSync(dir, { withFileTypes: true }).flatMap((e) => (e.isDirectory() ? walk(path.join(dir, e.name)) : [path.join(dir, e.name)]))
   const root = fileURLToPath(new URL('../../src/components/workers/', import.meta.url))
   const files = walk(root).filter((f) => /\.(jsx?|mjs)$/.test(f))