feat(frontend): Sprint R4 — retro Editor

Redesign the Editor page with retro-computing aesthetic:

- RetroMenuBar with page info, version/status, save button
- Two RetroWindows side by side: Image viewer + Editor panel
- Tab bar with RetroButtons (Transcription/Commentaire/Regions/Historique)
- RetroTextarea for OCR text and commentary editing
- RetroSelect for editorial status
- Region list with RetroButton validate/reject controls
- History list with RetroBadge status + Restaurer buttons
- Loading/error states in centered RetroWindow dialogs
- All forms use retro primitives (inset wells, pixel font)

Build passes (tsc + vite).

https://claude.ai/code/session_01WWohTtw2CxGRawmpH1tyrY

frontend/src/pages/Editor.tsx

@@ -7,6 +7,14 @@ import {
   type VersionInfo,
 } from '../lib/api.ts'
 import Viewer from '../components/Viewer.tsx'
+import {
+  RetroMenuBar,
+  RetroWindow,
+  RetroButton,
+  RetroTextarea,
+  RetroSelect,
+  RetroBadge,
+} from '../components/retro'
 
 interface Props {
   pageId: string
@@ -15,6 +23,13 @@ interface Props {
 
 type Panel = 'transcription' | 'commentary' | 'regions' | 'history'
 
+const PANEL_LABELS: Record<Panel, string> = {
+  transcription: 'Transcription',
+  commentary: 'Commentaire',
+  regions: 'Regions',
+  history: 'Historique',
+}
+
 export default function Editor({ pageId, onBack }: Props) {
   const [master, setMaster] = useState<PageMaster | null>(null)
   const [history, setHistory] = useState<VersionInfo[]>([])
@@ -25,7 +40,6 @@ export default function Editor({ pageId, onBack }: Props) {
   const [saveError, setSaveError] = useState<string | null>(null)
   const [saveSuccess, setSaveSuccess] = useState(false)
 
-  // Editable field values
   const [ocrText, setOcrText] = useState('')
   const [commentaryPublic, setCommentaryPublic] = useState('')
   const [commentaryScholarly, setCommentaryScholarly] = useState('')
@@ -45,7 +59,6 @@ export default function Editor({ pageId, onBack }: Props) {
       setCommentaryPublic(m.commentary?.public ?? '')
       setCommentaryScholarly(m.commentary?.scholarly ?? '')
       setEditorialStatus(m.editorial.status)
-      // Restore existing region validations from extensions
       const ext = (m as unknown as { extensions?: { region_validations?: Record<string, string> } }).extensions
       setRegionValidations(ext?.region_validations ?? {})
     } catch (e: unknown) {
@@ -107,249 +120,239 @@ export default function Editor({ pageId, onBack }: Props) {
     setRegionValidations((prev) => ({ ...prev, [regionId]: val }))
   }
 
+  // ── Loading / Error ─────────────────────────────────────────────────
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-screen text-stone-500">
-        Chargement…
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Chargement" className="w-64">
+          <div className="p-4 text-retro-sm text-center">Chargement...</div>
+        </RetroWindow>
       </div>
     )
   }
 
   if (error) {
-    return <div className="p-8 text-red-600">Erreur : {error}</div>
+    return (
+      <div className="min-h-screen bg-retro-dither flex items-center justify-center">
+        <RetroWindow title="Erreur" className="w-80">
+          <div className="p-4 text-retro-sm">
+            {error}
+            <div className="mt-2"><RetroButton onClick={onBack}>Retour</RetroButton></div>
+          </div>
+        </RetroWindow>
+      </div>
+    )
   }
 
   const imageUrl = master?.image?.derivative_web ?? master?.image?.master ?? ''
   const regions = master?.layout?.regions ?? []
 
   return (
-    <div className="flex flex-col h-screen bg-stone-100">
-      {/* ── Header ──────────────────────────────────────────────────────────── */}
-      <header className="flex items-center gap-3 bg-stone-900 text-stone-100 px-5 py-2.5 shrink-0">
-        <button
-          onClick={onBack}
-          className="text-stone-400 hover:text-stone-100 text-sm transition-colors"
-        >
-          ← Retour
-        </button>
-        <span className="text-stone-600">|</span>
-        <span className="text-sm font-medium text-stone-200">
-          Éditeur — {master?.folio_label ?? pageId}
-        </span>
-        {master && (
-          <span className="ml-2 text-xs text-stone-400">
-            v{master.editorial.version} · {master.editorial.status}
-          </span>
-        )}
+    <div className="flex flex-col h-screen bg-retro-dither">
+      {/* ── Menu bar ───────────────────────────────────────────────── */}
+      <RetroMenuBar
+        items={[
+          { label: 'IIIF Studio', onClick: onBack },
+          { label: `Editeur — ${master?.folio_label ?? pageId}` },
+        ]}
+        right={
+          <div className="flex items-center gap-1">
+            {master && (
+              <span className="text-retro-xs px-2">
+                v{master.editorial.version} — {master.editorial.status}
+              </span>
+            )}
+            {saveSuccess && <RetroBadge variant="success">OK</RetroBadge>}
+            {saveError && <RetroBadge variant="error">Err</RetroBadge>}
+            <RetroButton
+              size="sm"
+              onClick={() => void handleSave()}
+              disabled={saving}
+            >
+              {saving ? 'Saving...' : 'Sauvegarder'}
+            </RetroButton>
+          </div>
+        }
+      />
 
-        <div className="ml-auto flex items-center gap-3">
-          {saveSuccess && (
-            <span className="text-green-400 text-xs">Enregistré</span>
-          )}
-          {saveError && (
-            <span className="text-red-400 text-xs">{saveError}</span>
-          )}
-          <button
-            onClick={() => void handleSave()}
-            disabled={saving}
-            className="px-4 py-1.5 bg-amber-600 hover:bg-amber-500 disabled:opacity-40 text-white text-sm rounded transition-colors"
-          >
-            {saving ? 'Enregistrement…' : 'Enregistrer'}
-          </button>
-        </div>
-      </header>
+      {/* ── Main layout 50/50 ──────────────────────────────────────── */}
+      <div className="flex flex-1 overflow-hidden p-1 gap-1">
 
-      {/* ── Layout 50 / 50 ──────────────────────────────────────────────────── */}
-      <div className="flex flex-1 overflow-hidden">
-        {/* Visionneuse gauche */}
-        <div className="relative" style={{ width: '50%' }}>
-          <Viewer imageUrl={imageUrl} onViewerReady={() => {}} />
-          {!imageUrl && (
-            <div className="absolute inset-0 flex items-center justify-center bg-stone-200 text-stone-400 text-sm">
-              Aperçu image non disponible
-            </div>
-          )}
-        </div>
-
-        {/* Panneaux droite */}
-        <div
-          className="flex flex-col border-l border-stone-200 bg-white"
-          style={{ width: '50%' }}
+        {/* ── Viewer window (left) ───────────────────────────────── */}
+        <RetroWindow
+          title={`Image — ${master?.folio_label ?? pageId}`}
+          className="flex-1 min-w-0"
         >
-          {/* Onglets */}
-          <div className="flex border-b border-stone-200 shrink-0">
-            {(['transcription', 'commentary', 'regions', 'history'] as Panel[]).map((p) => (
-              <button
-                key={p}
-                onClick={() => setActivePanel(p)}
-                className={`flex-1 py-2.5 text-xs font-medium capitalize transition-colors ${
-                  activePanel === p
-                    ? 'border-b-2 border-amber-500 text-amber-700 bg-amber-50'
-                    : 'text-stone-500 hover:text-stone-800'
-                }`}
-              >
-                {p === 'transcription' ? 'Transcription' :
-                 p === 'commentary' ? 'Commentaire' :
-                 p === 'regions' ? 'Régions' : 'Historique'}
-              </button>
-            ))}
+          <div className="relative w-full h-full">
+            <Viewer imageUrl={imageUrl} onViewerReady={() => {}} />
+            {!imageUrl && (
+              <div className="absolute inset-0 flex items-center justify-center bg-retro-gray text-retro-darkgray text-retro-sm">
+                Apercu non disponible
+              </div>
+            )}
           </div>
+        </RetroWindow>
+
+        {/* ── Editor window (right) ──────────────────────────────── */}
+        <RetroWindow
+          title="Editeur"
+          className="flex-1 min-w-0"
+          scrollable
+        >
+          <div className="flex flex-col">
+            {/* ── Tab bar ──────────────────────────────────────── */}
+            <div className="flex shrink-0 border-b border-retro-black bg-retro-gray">
+              {(['transcription', 'commentary', 'regions', 'history'] as Panel[]).map((p) => (
+                <RetroButton
+                  key={p}
+                  size="sm"
+                  pressed={activePanel === p}
+                  onClick={() => setActivePanel(p)}
+                  className="flex-1 border-0 border-r border-retro-darkgray last:border-r-0"
+                >
+                  {PANEL_LABELS[p]}
+                </RetroButton>
+              ))}
+            </div>
 
-          {/* Contenu du panneau actif */}
-          <div className="flex-1 overflow-y-auto p-4">
+            {/* ── Panel content ─────────────────────────────────── */}
+            <div className="p-2">
 
-            {/* ── Transcription ─────────────────────────────────────────── */}
-            {activePanel === 'transcription' && (
-              <div className="space-y-4">
-                <div>
-                  <label className="block text-xs font-semibold text-stone-600 mb-1.5 uppercase tracking-wide">
-                    Texte diplomatique (OCR)
-                  </label>
-                  <textarea
+              {/* Transcription */}
+              {activePanel === 'transcription' && (
+                <div className="flex flex-col gap-2">
+                  <RetroTextarea
+                    label="Texte diplomatique (OCR)"
                     value={ocrText}
                     onChange={(e) => setOcrText(e.target.value)}
                     rows={12}
-                    className="w-full border border-stone-300 rounded-md px-3 py-2 text-sm font-mono focus:outline-none focus:ring-2 focus:ring-amber-400 resize-y"
                   />
-                </div>
-                <div>
-                  <label className="block text-xs font-semibold text-stone-600 mb-1.5 uppercase tracking-wide">
-                    Statut éditorial
-                  </label>
-                  <select
+                  <RetroSelect
+                    label="Statut editorial"
                     value={editorialStatus}
                     onChange={(e) => setEditorialStatus(e.target.value)}
-                    className="w-full border border-stone-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400"
-                  >
-                    <option value="machine_draft">machine_draft</option>
-                    <option value="needs_review">needs_review</option>
-                    <option value="reviewed">reviewed</option>
-                    <option value="validated">validated</option>
-                    <option value="published">published</option>
-                  </select>
+                    options={[
+                      { value: 'machine_draft', label: 'machine_draft' },
+                      { value: 'needs_review', label: 'needs_review' },
+                      { value: 'reviewed', label: 'reviewed' },
+                      { value: 'validated', label: 'validated' },
+                      { value: 'published', label: 'published' },
+                    ]}
+                  />
+                  {master?.ocr && (
+                    <div className="text-retro-xs text-retro-darkgray">
+                      Langue: {master.ocr.language} — Confiance: {(master.ocr.confidence * 100).toFixed(0)}%
+                    </div>
+                  )}
                 </div>
-                {master?.ocr && (
-                  <div className="text-xs text-stone-400 space-y-0.5">
-                    <div>Langue : {master.ocr.language}</div>
-                    <div>Confiance : {(master.ocr.confidence * 100).toFixed(0)} %</div>
-                  </div>
-                )}
-              </div>
-            )}
+              )}
 
-            {/* ── Commentaire ───────────────────────────────────────────── */}
-            {activePanel === 'commentary' && (
-              <div className="space-y-5">
-                <div>
-                  <label className="block text-xs font-semibold text-stone-600 mb-1.5 uppercase tracking-wide">
-                    Commentaire public
-                  </label>
-                  <textarea
+              {/* Commentary */}
+              {activePanel === 'commentary' && (
+                <div className="flex flex-col gap-2">
+                  <RetroTextarea
+                    label="Commentaire public"
                     value={commentaryPublic}
                     onChange={(e) => setCommentaryPublic(e.target.value)}
                     rows={6}
-                    className="w-full border border-stone-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 resize-y"
                   />
-                </div>
-                <div>
-                  <label className="block text-xs font-semibold text-stone-600 mb-1.5 uppercase tracking-wide">
-                    Commentaire savant
-                  </label>
-                  <textarea
+                  <RetroTextarea
+                    label="Commentaire savant"
                     value={commentaryScholarly}
                     onChange={(e) => setCommentaryScholarly(e.target.value)}
                     rows={8}
-                    className="w-full border border-stone-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-amber-400 resize-y"
                   />
                 </div>
-              </div>
-            )}
+              )}
 
-            {/* ── Régions ───────────────────────────────────────────────── */}
-            {activePanel === 'regions' && (
-              <div className="space-y-2">
-                {regions.length === 0 ? (
-                  <p className="text-sm text-stone-400 italic">Aucune région détectée.</p>
-                ) : (
-                  regions.map((region) => {
-                    const validation = regionValidations[region.id]
-                    return (
+              {/* Regions */}
+              {activePanel === 'regions' && (
+                <div className="flex flex-col gap-[2px]">
+                  {regions.length === 0 ? (
+                    <p className="text-retro-sm text-retro-darkgray p-2">Aucune region detectee.</p>
+                  ) : (
+                    regions.map((region) => {
+                      const validation = regionValidations[region.id]
+                      return (
+                        <div
+                          key={region.id}
+                          className="
+                            flex items-center justify-between
+                            border border-retro-black p-2
+                            bg-retro-white
+                          "
+                        >
+                          <div>
+                            <span className="text-retro-sm font-bold capitalize">
+                              {region.type.replace(/_/g, ' ')}
+                            </span>
+                            <span className="ml-2 text-retro-xs text-retro-darkgray">
+                              {region.id}
+                            </span>
+                            <div className="text-retro-xs text-retro-darkgray">
+                              confiance: {(region.confidence * 100).toFixed(0)}%
+                            </div>
+                          </div>
+                          <div className="flex gap-[2px] ml-2 shrink-0">
+                            <RetroButton
+                              size="sm"
+                              pressed={validation === 'validated'}
+                              onClick={() => setRegionValidation(region.id, 'validated')}
+                            >
+                              OK
+                            </RetroButton>
+                            <RetroButton
+                              size="sm"
+                              pressed={validation === 'rejected'}
+                              onClick={() => setRegionValidation(region.id, 'rejected')}
+                            >
+                              X
+                            </RetroButton>
+                          </div>
+                        </div>
+                      )
+                    })
+                  )}
+                </div>
+              )}
+
+              {/* History */}
+              {activePanel === 'history' && (
+                <div className="flex flex-col gap-[2px]">
+                  {history.length === 0 ? (
+                    <p className="text-retro-sm text-retro-darkgray p-2">Aucune version archivee.</p>
+                  ) : (
+                    history.map((v) => (
                       <div
-                        key={region.id}
-                        className="flex items-center justify-between border border-stone-200 rounded-lg px-3 py-2.5 text-sm"
+                        key={v.version}
+                        className="
+                          flex items-center justify-between
+                          border border-retro-black p-2
+                          bg-retro-white
+                        "
                       >
                         <div>
-                          <span className="font-medium text-stone-800 capitalize">
-                            {region.type.replace(/_/g, ' ')}
-                          </span>
-                          <span className="ml-2 text-xs text-stone-400 font-mono">{region.id}</span>
-                          <div className="text-xs text-stone-400">
-                            confiance : {(region.confidence * 100).toFixed(0)} %
+                          <span className="text-retro-sm font-bold">v{v.version}</span>
+                          <RetroBadge className="ml-2">{v.status}</RetroBadge>
+                          <div className="text-retro-xs text-retro-darkgray mt-[2px]">
+                            {new Date(v.saved_at).toLocaleString('fr-FR')}
                           </div>
                         </div>
-                        <div className="flex gap-2 ml-4 shrink-0">
-                          <button
-                            onClick={() => setRegionValidation(region.id, 'validated')}
-                            className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
-                              validation === 'validated'
-                                ? 'bg-green-600 text-white'
-                                : 'bg-stone-100 text-stone-600 hover:bg-green-100'
-                            }`}
-                          >
-                            Valider
-                          </button>
-                          <button
-                            onClick={() => setRegionValidation(region.id, 'rejected')}
-                            className={`px-2.5 py-1 text-xs rounded-md transition-colors ${
-                              validation === 'rejected'
-                                ? 'bg-red-600 text-white'
-                                : 'bg-stone-100 text-stone-600 hover:bg-red-100'
-                            }`}
-                          >
-                            Rejeter
-                          </button>
-                        </div>
+                        <RetroButton
+                          size="sm"
+                          onClick={() => void handleRestore(v.version)}
+                          disabled={saving}
+                        >
+                          Restaurer
+                        </RetroButton>
                       </div>
-                    )
-                  })
-                )}
-              </div>
-            )}
-
-            {/* ── Historique ────────────────────────────────────────────── */}
-            {activePanel === 'history' && (
-              <div className="space-y-2">
-                {history.length === 0 ? (
-                  <p className="text-sm text-stone-400 italic">
-                    Aucune version archivée.
-                  </p>
-                ) : (
-                  history.map((v) => (
-                    <div
-                      key={v.version}
-                      className="flex items-center justify-between border border-stone-200 rounded-lg px-3 py-2.5 text-sm"
-                    >
-                      <div>
-                        <span className="font-medium text-stone-800">v{v.version}</span>
-                        <span className="ml-2 text-xs text-stone-500">{v.status}</span>
-                        <div className="text-xs text-stone-400 mt-0.5">
-                          {new Date(v.saved_at).toLocaleString('fr-FR')}
-                        </div>
-                      </div>
-                      <button
-                        onClick={() => void handleRestore(v.version)}
-                        disabled={saving}
-                        className="ml-4 px-3 py-1 text-xs bg-stone-100 text-stone-600 hover:bg-amber-100 hover:text-amber-700 disabled:opacity-40 rounded-md transition-colors"
-                      >
-                        Restaurer
-                      </button>
-                    </div>
-                  ))
-                )}
-              </div>
-            )}
+                    ))
+                  )}
+                </div>
+              )}
+            </div>
           </div>
-        </div>
+        </RetroWindow>
       </div>
     </div>
   )