From d5be7b6f7762229ac95435285a6f0cbfa4c9c577 Mon Sep 17 00:00:00 2001 From: Benjamin Admin Date: Thu, 5 Mar 2026 16:07:25 +0100 Subject: [PATCH] =?UTF-8?q?fix:=20vocab=20worksheet=20=E2=80=94=20wider=20?= =?UTF-8?q?table,=20show=20original=20pages,=20better=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Swap from 3/5-2/5 grid to 1/3-2/3 flexbox (original left, table right) - Table uses 3 equal 1fr columns for EN/DE/example instead of cramped 13-col grid - Full viewport height minus header (calc(100vh - 240px)) for more visible rows - Show only processed pages in original preview (filtered by selectedPages) - Remove per-row insert buttons to reduce vertical noise - Compact row spacing (py-1.5) to fit ~15+ rows without scrolling Co-Authored-By: Claude Opus 4.6 --- studio-v2/app/vocab-worksheet/page.tsx | 229 +++++++++++-------------- 1 file changed, 98 insertions(+), 131 deletions(-) diff --git a/studio-v2/app/vocab-worksheet/page.tsx b/studio-v2/app/vocab-worksheet/page.tsx index 24939eb..db7b645 100644 --- a/studio-v2/app/vocab-worksheet/page.tsx +++ b/studio-v2/app/vocab-worksheet/page.tsx @@ -1417,10 +1417,55 @@ export default function VocabWorksheetPage() { {/* Vocabulary Tab */} {session && activeTab === 'vocabulary' && ( -
- {/* Left: Vocabulary List (3/5) */} -
-
+
+ {/* Left: Original pages (scrollable, 1/3 width) */} +
+

+ Original ({(() => { const pp = selectedPages.length > 0 ? selectedPages : [...new Set(vocabulary.map(v => (v.source_page || 1) - 1))]; return pp.length; })()} Seiten) +

+
+ {(() => { + const processedPageIndices = selectedPages.length > 0 + ? selectedPages + : [...new Set(vocabulary.map(v => (v.source_page || 1) - 1))].sort((a, b) => a - b) + const thumbsToShow = processedPageIndices + .filter(idx => idx >= 0 && idx < pagesThumbnails.length) + .map(idx => ({ idx, src: pagesThumbnails[idx] })) + + if (thumbsToShow.length > 0) { + return thumbsToShow.map(({ idx, src }) => ( +
+
+ S. {idx + 1} +
+ {`Seite +
+ )) + } + if (uploadedImage) { + return ( +
+ Arbeitsblatt +
+ ) + } + return ( +
+
+ + + +

Kein Bild verfuegbar

+
+
+ ) + })()} +
+
+ + {/* Right: Vocabulary table (2/3 width) */} +
+

Vokabeln ({vocabulary.length})

@@ -1436,9 +1481,9 @@ export default function VocabWorksheetPage() { {/* Error messages for failed pages */} {processingErrors.length > 0 && ( -
-
Einige Seiten konnten nicht verarbeitet werden:
-
    +
    +
    Einige Seiten konnten nicht verarbeitet werden:
    +
      {processingErrors.map((err, idx) => (
    • • {err}
      • ))} @@ -1448,12 +1493,12 @@ export default function VocabWorksheetPage() { {/* Processing Progress */} {currentlyProcessingPage && ( -
      +
      -
      +
      -
      Verarbeite Seite {currentlyProcessingPage}...
      -
      +
      Verarbeite Seite {currentlyProcessingPage}...
      +
      {successfulPages.length > 0 && `${successfulPages.length} Seite(n) fertig • `} {vocabulary.length} Vokabeln bisher
      @@ -1464,14 +1509,14 @@ export default function VocabWorksheetPage() { {/* Success info */} {!currentlyProcessingPage && successfulPages.length > 0 && failedPages.length === 0 && ( -
      +
      Alle {successfulPages.length} Seite(n) erfolgreich verarbeitet - {vocabulary.length} Vokabeln insgesamt
      )} {/* Partial success info */} {!currentlyProcessingPage && successfulPages.length > 0 && failedPages.length > 0 && ( -
      +
      {successfulPages.length} Seite(n) erfolgreich, {failedPages.length} fehlgeschlagen - {vocabulary.length} Vokabeln extrahiert
      )} @@ -1479,10 +1524,10 @@ export default function VocabWorksheetPage() { {vocabulary.length === 0 ? (

      Keine Vokabeln gefunden.

      ) : ( -
      +
      {/* Fixed Header */} -
      -
      +
      +
      0 && vocabulary.every(v => v.selected)} @@ -1491,37 +1536,20 @@ export default function VocabWorksheetPage() { title="Alle auswählen" />
      -
      S.
      -
      Englisch
      -
      Deutsch
      -
      Beispiel
      -
      +
      S.
      +
      Englisch
      +
      Deutsch
      +
      Beispiel
      +
      {/* Scrollable Content */} -
      - {/* Insert button at the beginning */} -
      - -
      - +
      {vocabulary.map((entry, index) => ( {/* Vocabulary row */} -
      -
      +
      +
      -
      +
      {entry.source_page || '-'}
      updateVocabularyEntry(entry.id, 'english', e.target.value)} - className={`col-span-3 px-2 py-1 rounded-lg border ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`} + className={`px-2 py-1 rounded-lg border text-sm ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`} /> updateVocabularyEntry(entry.id, 'german', e.target.value)} - className={`col-span-4 px-2 py-1 rounded-lg border ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`} + className={`px-2 py-1 rounded-lg border text-sm ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`} /> updateVocabularyEntry(entry.id, 'example_sentence', e.target.value)} placeholder="Beispiel" - className={`col-span-3 px-2 py-1 rounded-lg border text-sm ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`} + className={`px-2 py-1 rounded-lg border text-sm ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`} /> -
      - - {/* Insert button after each row */} -
      - -
      ))}
      - {/* Add new row button at the end */} - - - {/* Footer with scroll hint */} -
      - {vocabulary.length} Vokabeln insgesamt - {vocabulary.filter(v => v.selected).length > 0 && ` (${vocabulary.filter(v => v.selected).length} ausgewählt)`} - {(() => { - const pages = [...new Set(vocabulary.map(v => v.source_page).filter(Boolean))].sort((a, b) => (a || 0) - (b || 0)) - return pages.length > 1 ? ` • Seiten: ${pages.join(', ')}` : '' - })()} + {/* Footer */} +
      + + {vocabulary.length} Vokabeln + {vocabulary.filter(v => v.selected).length > 0 && ` (${vocabulary.filter(v => v.selected).length} ausgewaehlt)`} + {(() => { + const pages = [...new Set(vocabulary.map(v => v.source_page).filter(Boolean))].sort((a, b) => (a || 0) - (b || 0)) + return pages.length > 1 ? ` • Seiten: ${pages.join(', ')}` : '' + })()} + +
      )}
      - - {/* Right: Original Worksheet Preview (2/5) */} -
      -

      - Original-Arbeitsblatt -

      -
      - {pagesThumbnails.length > 0 ? ( -
      - {pagesThumbnails.map((thumb, idx) => ( -
      -
      - Seite {idx + 1} -
      - {`Seite -
      - ))} -
      - ) : uploadedImage ? ( -
      -
      - Hochgeladenes Arbeitsblatt -
      -
      - ) : ( -
      -
      - - - -

      Kein Bild verfügbar

      -
      -
      - )} -
      -
      )}