From e3aa8e899ee912243a6aa90d8a2b40301f8e9f75 Mon Sep 17 00:00:00 2001
From: Benjamin Admin <benjaminadmin@MacBook-Pro.fritz.box>
Date: Sat, 28 Feb 2026 21:23:32 +0100
Subject: [PATCH] feat(rag-qa): add fullscreen mode for split-view chunk
 browser

Allows viewing chunks side-by-side with original PDF in fullscreen mode
for large screen QA review. Toggle via button or close with Escape key.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../ai/rag/components/ChunkBrowserQA.tsx      | 26 +++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserQA.tsx b/admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserQA.tsx
index 2a48a3a..8b4dbfa 100644
--- a/admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserQA.tsx
+++ b/admin-lehrer/app/(admin)/ai/rag/components/ChunkBrowserQA.tsx
@@ -52,6 +52,7 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
   // Split-View
   const [splitViewActive, setSplitViewActive] = useState(true)
   const [chunksPerPage, setChunksPerPage] = useState(6)
+  const [fullscreen, setFullscreen] = useState(false)
 
   // Collection — default to bp_compliance_ce where we have PDFs downloaded
   const [collection, setCollection] = useState('bp_compliance_ce')
@@ -242,21 +243,24 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
   }
 
   const handleKeyDown = useCallback((e: KeyboardEvent) => {
-    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+    if (e.key === 'Escape' && fullscreen) {
+      e.preventDefault()
+      setFullscreen(false)
+    } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
       e.preventDefault()
       setDocChunkIndex(i => Math.max(0, i - 1))
     } else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
       e.preventDefault()
       setDocChunkIndex(i => Math.min(docChunksRef.current.length - 1, i + 1))
     }
-  }, [])
+  }, [fullscreen])
 
   useEffect(() => {
-    if (selectedRegulation && docChunks.length > 0) {
+    if (fullscreen || (selectedRegulation && docChunks.length > 0)) {
       window.addEventListener('keydown', handleKeyDown)
       return () => window.removeEventListener('keydown', handleKeyDown)
     }
-  }, [selectedRegulation, docChunks.length, handleKeyDown])
+  }, [selectedRegulation, docChunks.length, handleKeyDown, fullscreen])
 
   const toggleGroup = (group: string) => {
     setCollapsedGroups(prev => {
@@ -340,7 +344,10 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
   const structInfo = getStructuralInfo(currentChunk)
 
   return (
-    <div className="flex flex-col" style={{ height: 'calc(100vh - 220px)' }}>
+    <div
+      className={`flex flex-col ${fullscreen ? 'fixed inset-0 z-50 bg-slate-100 p-4' : ''}`}
+      style={fullscreen ? { height: '100vh' } : { height: 'calc(100vh - 220px)' }}
+    >
       {/* Header bar — fixed height */}
       <div className="flex-shrink-0 bg-white rounded-xl border border-slate-200 p-3 mb-3">
         <div className="flex flex-wrap items-center gap-4">
@@ -424,6 +431,15 @@ export function ChunkBrowserQA({ apiProxy }: ChunkBrowserQAProps) {
                 >
                   {splitViewActive ? 'Split-View an' : 'Split-View aus'}
                 </button>
+                <button
+                  onClick={() => setFullscreen(!fullscreen)}
+                  className={`px-3 py-1 text-xs rounded-lg border ${
+                    fullscreen ? 'bg-indigo-50 border-indigo-300 text-indigo-700' : 'bg-slate-50 border-slate-300 text-slate-600'
+                  }`}
+                  title={fullscreen ? 'Vollbild beenden (Esc)' : 'Vollbild'}
+                >
+                  {fullscreen ? '&#10005; Vollbild beenden' : '&#9974; Vollbild'}
+                </button>
               </div>
             </>
           )}