feat: TranslationHub, Pair-Review-Button (Action-Bar), reviewed für Bilder
- TranslationHub (/translations): Coverage-Matrix, Batch-Übersetzen pro Tabelle×Sprache - Pair Status: StatusSelect ersetzt durch Action-Bar ✓Reviewed/↩Draft/🚫Block, Reviewed kaskadiert via /pairs/:id/review (Backend prüft 3-Sprachen-Vollständigkeit) - Top-Nav: 'Übersetzungen' zwischen Inhalte und Audio - Dashboard: Übersetzungen-Kachel - tables.js: pictures-Status um 'reviewed' erweitert Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
114
src/pages/TranslationHub.jsx
Normal file
114
src/pages/TranslationHub.jsx
Normal file
@@ -0,0 +1,114 @@
|
||||
import { useEffect, useState, useCallback } from 'react';
|
||||
import Layout from '../components/Layout';
|
||||
import { apiFetch, apiPost } from '../lib/api';
|
||||
|
||||
const SOURCE_LABELS = { words: 'Wörter', questions: 'Fragen', statements: 'Statements' };
|
||||
const LANGS = [
|
||||
{ code: 'de', label: 'Deutsch', flag: '🇩🇪' },
|
||||
{ code: 'en', label: 'English', flag: '🇬🇧' },
|
||||
{ code: 'sv', label: 'Svenska', flag: '🇸🇪' },
|
||||
];
|
||||
const SOURCES = ['words', 'questions', 'statements'];
|
||||
|
||||
function pct(have, total) { return total ? Math.round((have / total) * 100) : 0; }
|
||||
|
||||
export default function TranslationHub() {
|
||||
const [coverage, setCoverage] = useState(null); // 'words|de' → {total, have, missing}
|
||||
const [busy, setBusy] = useState(null); // `${table}|${to}`
|
||||
const [progress, setProgress] = useState(null);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
const { coverage } = await apiFetch('/claude/translation-coverage');
|
||||
const map = {};
|
||||
for (const g of coverage) map[`${g.source_table}|${g.language}`] = g;
|
||||
setCoverage(map);
|
||||
} catch (e) { setError(e.message); }
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
async function translateMissing(table, to) {
|
||||
const key = `${table}|${to}`;
|
||||
setBusy(key); setError(null); setProgress(`Übersetze fehlende ${SOURCE_LABELS[table]} nach ${to.toUpperCase()} …`);
|
||||
try {
|
||||
const res = await apiPost('/claude/translate-missing', { source_table: table, to });
|
||||
setProgress(`Fertig: ${res.translated} übersetzt${res.failed ? `, ${res.failed} fehlgeschlagen` : ''}.`);
|
||||
await load();
|
||||
} catch (e) {
|
||||
setError(e.message);
|
||||
setProgress(null);
|
||||
} finally {
|
||||
setBusy(null);
|
||||
setTimeout(() => setProgress(null), 4000);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Layout back="/">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-slate-800 mb-1">Übersetzungen</h1>
|
||||
<p className="text-slate-500 mb-4">
|
||||
Fehlende Sprachen per Claude automatisch übersetzen. Placeholder (z.B. <code className="px-1 bg-slate-100 rounded">{`{{Apfel.w:...}}`}</code>)
|
||||
bleiben strukturell erhalten, das Label wird mit-übersetzt und korrekt gebeugt.
|
||||
</p>
|
||||
|
||||
<div className="bg-emerald-50 border border-emerald-200 text-emerald-800 text-sm rounded-xl px-4 py-3 mb-6">
|
||||
<b>Logik:</b> Es werden nur Zeilen übersetzt, die in mindestens einer Sprache Text haben und in der Zielsprache leer sind.
|
||||
Quell-Sprache wird automatisch gewählt (Default: erste gefüllte Sprache).
|
||||
Nach „Alle übersetzen" werden die Wörter mit allen 3 Sprachen automatisch auf Status <b>translated</b> gesetzt.
|
||||
</div>
|
||||
|
||||
{error && <div className="bg-red-50 border border-red-200 text-red-700 text-sm rounded-xl px-4 py-2 mb-4">{error}</div>}
|
||||
{progress && <div className="bg-amber-50 border border-amber-200 text-amber-800 text-sm rounded-xl px-4 py-2 mb-4">{progress}</div>}
|
||||
|
||||
<div className="space-y-6">
|
||||
{SOURCES.map(table => (
|
||||
<div key={table} className="bg-white rounded-2xl border border-slate-200 p-5">
|
||||
<h2 className="font-semibold text-slate-700 mb-4">{SOURCE_LABELS[table]}</h2>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
|
||||
{LANGS.map(lang => {
|
||||
const g = coverage?.[`${table}|${lang.code}`];
|
||||
const total = g?.total ?? 0;
|
||||
const have = g?.have ?? 0;
|
||||
const missing = g?.missing ?? 0;
|
||||
const key = `${table}|${lang.code}`;
|
||||
const p = pct(have, total);
|
||||
return (
|
||||
<div key={lang.code} className="border border-slate-100 rounded-xl p-3 bg-slate-50/50">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-sm font-medium text-slate-700">{lang.flag} {lang.label}</span>
|
||||
<span className="text-xs text-slate-500">{coverage ? `${have}/${total}` : '…'}</span>
|
||||
</div>
|
||||
<div className="h-2 bg-slate-200 rounded-full overflow-hidden mb-2">
|
||||
<div className="h-full bg-emerald-500 transition-all" style={{ width: `${p}%` }} />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className={`text-xs ${missing ? 'text-amber-600' : 'text-emerald-600'}`}>
|
||||
{missing ? `${missing} fehlen` : 'vollständig'}
|
||||
</span>
|
||||
<button
|
||||
disabled={!missing || busy === key}
|
||||
onClick={() => translateMissing(table, lang.code)}
|
||||
className={`text-xs px-2.5 py-1 rounded-lg font-medium transition-colors
|
||||
${!missing
|
||||
? 'bg-slate-100 text-slate-400 cursor-not-allowed'
|
||||
: busy === key
|
||||
? 'bg-emerald-300 text-white cursor-wait'
|
||||
: 'bg-emerald-600 text-white hover:bg-emerald-500'}`}
|
||||
>
|
||||
{busy === key ? 'Läuft …' : '🪄 Übersetzen'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user