feat(frontend): Sprint R2 — retro Home / Desktop

Transform the Home page into a retro desktop environment:

- RetroMenuBar at top with IIIF Studio branding + search + admin
- Dithered gray background (bg-retro-dither)
- Corpus list in a RetroWindow with selection highlighting (navy blue)
- Profile-based icon glyphs for each corpus type
- Manuscripts sub-window appears on corpus with multiple manuscripts
- Bottom dock with RetroIcon grid for quick corpus access
- Loading/error states displayed in centered RetroWindow dialogs

Restyle SearchBar: inset well input, navy-blue hover on results.
Restyle AdminNav: uses RetroButton component.
Remove RetroDemo page (no longer needed).

Build passes (tsc + vite).

https://claude.ai/code/session_01WWohTtw2CxGRawmpH1tyrY

frontend/src/App.tsx

@@ -3,14 +3,12 @@ import Admin from './pages/Admin.tsx'
 import Editor from './pages/Editor.tsx'
 import Home from './pages/Home.tsx'
 import Reader from './pages/Reader.tsx'
-import RetroDemo from './pages/RetroDemo.tsx'
 
 type View =
   | { name: 'home' }
   | { name: 'reader'; manuscriptId: string; profileId: string }
   | { name: 'admin' }
   | { name: 'editor'; pageId: string }
-  | { name: 'retro-demo' }
 
 export default function App() {
   const [view, setView] = useState<View>({ name: 'home' })
@@ -39,10 +37,6 @@ export default function App() {
     )
   }
 
-  if (view.name === 'retro-demo') {
-    return <RetroDemo onBack={() => setView({ name: 'home' })} />
-  }
-
   return (
     <Home
       onOpenManuscript={(manuscriptId, profileId) =>

frontend/src/components/AdminNav.tsx

@@ -1,14 +1,13 @@
+import { RetroButton } from './retro'
+
 interface AdminNavProps {
   onClick: () => void
 }
 
 export default function AdminNav({ onClick }: AdminNavProps) {
   return (
-    <button
-      onClick={onClick}
-      className="text-stone-400 hover:text-stone-100 text-sm transition-colors"
-    >
-      Administration
-    </button>
+    <RetroButton size="sm" onClick={onClick}>
+      Admin
+    </RetroButton>
   )
 }

frontend/src/components/SearchBar.tsx

@@ -41,7 +41,6 @@ export default function SearchBar({ onSelectResult }: Props) {
     }
   }, [query, runSearch])
 
-  // Close dropdown on outside click
   useEffect(() => {
     const handler = (e: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
@@ -53,27 +52,45 @@ export default function SearchBar({ onSelectResult }: Props) {
   }, [])
 
   return (
-    <div ref={containerRef} className="relative w-72">
+    <div ref={containerRef} className="relative w-64">
       <div className="relative">
         <input
           type="search"
           value={query}
           onChange={(e) => setQuery(e.target.value)}
           onFocus={() => results.length > 0 && setOpen(true)}
-          placeholder="Rechercher dans les manuscrits…"
-          className="w-full bg-stone-800 text-stone-100 placeholder-stone-500 text-sm px-3 py-1.5 pr-8 rounded-md border border-stone-700 focus:outline-none focus:border-amber-500 focus:ring-1 focus:ring-amber-500"
+          placeholder="Rechercher..."
+          className="
+            w-full px-2 py-[2px]
+            text-retro-sm font-retro
+            bg-retro-white text-retro-black
+            border border-retro-black
+            shadow-retro-well
+            placeholder:text-retro-darkgray
+          "
         />
         {loading && (
-          <span className="absolute right-2.5 top-1/2 -translate-y-1/2 text-stone-400 text-xs">
-            …
+          <span className="absolute right-2 top-1/2 -translate-y-1/2 text-retro-darkgray text-retro-xs">
+            ...
           </span>
         )}
       </div>
 
       {open && (
-        <div className="absolute top-full left-0 right-0 mt-1 bg-white border border-stone-200 rounded-lg shadow-xl z-50 max-h-80 overflow-y-auto">
+        <div
+          className="
+            absolute top-full left-0 right-0 mt-[2px]
+            bg-retro-white
+            border-retro border-retro-black
+            shadow-retro-lg
+            z-50 max-h-60
+            overflow-y-auto retro-scroll
+          "
+        >
           {results.length === 0 ? (
-            <div className="px-4 py-3 text-sm text-stone-400 italic">Aucun résultat.</div>
+            <div className="px-2 py-2 text-retro-xs text-retro-darkgray">
+              Aucun resultat.
+            </div>
           ) : (
             <ul>
               {results.map((r) => (
@@ -83,17 +100,20 @@ export default function SearchBar({ onSelectResult }: Props) {
                       setOpen(false)
                       onSelectResult?.(r)
                     }}
-                    className="w-full text-left px-4 py-3 hover:bg-amber-50 border-b border-stone-100 last:border-0 transition-colors"
+                    className="
+                      w-full text-left px-2 py-[3px]
+                      text-retro-sm font-retro
+                      hover:bg-retro-select hover:text-retro-select-text
+                      border-b border-retro-gray last:border-0
+                    "
                   >
                     <div className="flex items-center justify-between gap-2">
-                      <span className="font-medium text-stone-800 text-sm">
-                        {r.folio_label}
-                      </span>
-                      <span className="text-xs text-stone-400 shrink-0">
-                        score : {r.score}
+                      <span className="font-bold">{r.folio_label}</span>
+                      <span className="text-retro-xs opacity-60">
+                        {r.score}
                       </span>
                     </div>
-                    <div className="text-xs text-stone-500 mt-0.5 truncate">
+                    <div className="text-retro-xs truncate opacity-70">
                       {r.excerpt}
                     </div>
                   </button>

frontend/src/pages/Home.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import AdminNav from '../components/AdminNav.tsx'
 import SearchBar from '../components/SearchBar.tsx'
+import { RetroMenuBar, RetroWindow, RetroIcon } from '../components/retro'
 import {
   fetchCorpora,
   fetchManuscripts,
@@ -8,6 +9,14 @@ import {
   type Manuscript,
 } from '../lib/api.ts'
 
+/** Map profile IDs to desktop icon glyphs */
+const PROFILE_GLYPHS: Record<string, string> = {
+  'medieval-illuminated': '\u{1F4DC}',
+  'medieval-textual':     '\u{1F4D6}',
+  'early-modern-print':   '\u{1F5A8}',
+  'modern-handwritten':   '\u{270D}',
+}
+
 interface Props {
   onOpenManuscript: (manuscriptId: string, profileId: string) => void
   onOpenPage?: (pageId: string) => void
@@ -20,6 +29,7 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
   const [error, setError] = useState<string | null>(null)
   const [manuscripts, setManuscripts] = useState<Record<string, Manuscript[]>>({})
   const [expanding, setExpanding] = useState<string | null>(null)
+  const [selectedCorpus, setSelectedCorpus] = useState<Corpus | null>(null)
 
   useEffect(() => {
     fetchCorpora()
@@ -29,7 +39,8 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
   }, [])
 
   const handleCorpusClick = async (corpus: Corpus) => {
-    // Si déjà chargé, naviguer directement si un seul manuscrit
+    setSelectedCorpus(corpus)
+
     const cached = manuscripts[corpus.id]
     if (cached) {
       if (cached.length === 1) onOpenManuscript(cached[0].id, corpus.profile_id)
@@ -42,95 +53,171 @@ export default function Home({ onOpenManuscript, onOpenPage, onAdmin }: Props) {
       setManuscripts((prev) => ({ ...prev, [corpus.id]: ms }))
       if (ms.length === 1) onOpenManuscript(ms[0].id, corpus.profile_id)
     } catch {
-      // Échec silencieux — la liste reste vide
+      // silent
     } finally {
       setExpanding(null)
     }
   }
 
+  // ── Loading state ───────────────────────────────────────────────────
   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="IIIF Studio" className="w-72">
+          <div className="p-4 text-retro-sm text-center">
+            Chargement...
+          </div>
+        </RetroWindow>
       </div>
     )
   }
 
+  // ── Error state ─────────────────────────────────────────────────────
   if (error) {
     return (
-      <div className="p-8 text-red-600">
-        Erreur : {error}
+      <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">
+            <p className="font-bold mb-2">Erreur de connexion</p>
+            <p className="text-retro-xs">{error}</p>
+          </div>
+        </RetroWindow>
       </div>
     )
   }
 
+  const selectedMs = selectedCorpus ? manuscripts[selectedCorpus.id] : undefined
+
   return (
-    <div className="min-h-screen bg-stone-50">
-      <header className="bg-stone-900 text-stone-100 px-8 py-6 flex items-start justify-between">
-        <div>
-          <h1 className="text-2xl font-semibold tracking-tight">IIIF Studio</h1>
-          <p className="text-stone-400 text-sm mt-1">
-            Plateforme de génération d'éditions savantes augmentées
-          </p>
+    <div className="min-h-screen bg-retro-dither flex flex-col">
+      {/* ── Menu bar (top of screen) ─────────────────────────────── */}
+      <RetroMenuBar
+        items={[
+          { label: 'IIIF Studio' },
+          { label: 'Fichier' },
+          { label: 'Corpus' },
+          { label: 'Aide' },
+        ]}
+        right={
+          <div className="flex items-center gap-1">
+            <SearchBar onSelectResult={onOpenPage ? (r) => onOpenPage(r.page_id) : undefined} />
+            <AdminNav onClick={onAdmin} />
+          </div>
+        }
+      />
+
+      {/* ── Desktop area ─────────────────────────────────────────── */}
+      <div className="flex-1 flex flex-col">
+
+        {/* ── Corpus list window (center) ──────────────────────── */}
+        <div className="flex-1 flex items-start justify-center p-6 gap-4">
+          <RetroWindow
+            title="Corpus disponibles"
+            statusBar={`${corpora.length} corpus enregistre${corpora.length > 1 ? 's' : ''}`}
+            className="w-full max-w-2xl"
+            scrollable
+          >
+            {corpora.length === 0 ? (
+              <div className="p-4 text-retro-sm text-retro-darkgray">
+                Aucun corpus enregistre. Creez-en un via Administration.
+              </div>
+            ) : (
+              <div className="divide-y divide-retro-gray">
+                {corpora.map((corpus) => (
+                  <div key={corpus.id}>
+                    <button
+                      onClick={() => void handleCorpusClick(corpus)}
+                      className={`
+                        w-full text-left px-3 py-[6px] flex items-center gap-3
+                        text-retro-sm font-retro
+                        ${selectedCorpus?.id === corpus.id
+                          ? 'bg-retro-select text-retro-select-text'
+                          : 'hover:bg-retro-select hover:text-retro-select-text'
+                        }
+                      `}
+                    >
+                      <span className="text-[18px] leading-none shrink-0">
+                        {PROFILE_GLYPHS[corpus.profile_id] || '\u{1F4C1}'}
+                      </span>
+                      <div className="flex-1 min-w-0">
+                        <div className="font-bold truncate">{corpus.title}</div>
+                        <div className={`text-retro-xs truncate ${
+                          selectedCorpus?.id === corpus.id ? 'opacity-70' : 'text-retro-darkgray'
+                        }`}>
+                          {corpus.profile_id} — {corpus.slug}
+                        </div>
+                      </div>
+                    </button>
+
+                    {expanding === corpus.id && (
+                      <div className="px-3 py-1 text-retro-xs text-retro-darkgray bg-retro-light">
+                        Chargement...
+                      </div>
+                    )}
+                  </div>
+                ))}
+              </div>
+            )}
+          </RetroWindow>
+
+          {/* ── Manuscripts sub-window (appears when a corpus has multiple) ── */}
+          {selectedMs && selectedMs.length > 1 && selectedCorpus && (
+            <RetroWindow
+              title={`Manuscrits — ${selectedCorpus.title}`}
+              onClose={() => setSelectedCorpus(null)}
+              statusBar={`${selectedMs.length} manuscrit${selectedMs.length > 1 ? 's' : ''}`}
+              className="w-80"
+              scrollable
+            >
+              <div className="divide-y divide-retro-gray">
+                {selectedMs.map((ms) => (
+                  <button
+                    key={ms.id}
+                    onClick={() => onOpenManuscript(ms.id, selectedCorpus.profile_id)}
+                    className="
+                      w-full text-left px-3 py-[6px]
+                      text-retro-sm font-retro
+                      hover:bg-retro-select hover:text-retro-select-text
+                    "
+                  >
+                    <div className="font-bold truncate">{ms.title}</div>
+                    {ms.total_pages > 0 && (
+                      <div className="text-retro-xs text-retro-darkgray">
+                        {ms.total_pages} pages
+                      </div>
+                    )}
+                  </button>
+                ))}
+              </div>
+            </RetroWindow>
+          )}
         </div>
-        <div className="flex items-center gap-4">
-          <SearchBar onSelectResult={onOpenPage ? (r) => onOpenPage(r.page_id) : undefined} />
-          <AdminNav onClick={onAdmin} />
+
+        {/* ── Desktop icons (bottom dock) ────────────────────────── */}
+        <div
+          className="
+            shrink-0 flex items-end justify-center gap-1 px-4 py-3
+            border-t-retro border-retro-black
+            bg-retro-gray
+            shadow-retro-outset
+          "
+        >
+          {corpora.map((corpus) => (
+            <RetroIcon
+              key={corpus.id}
+              glyph={PROFILE_GLYPHS[corpus.profile_id] || '\u{1F4C1}'}
+              label={corpus.slug}
+              selected={selectedCorpus?.id === corpus.id}
+              onClick={() => void handleCorpusClick(corpus)}
+            />
+          ))}
+          {corpora.length === 0 && (
+            <div className="text-retro-xs text-retro-darkgray py-2">
+              Aucun corpus
+            </div>
+          )}
         </div>
-      </header>
-
-      <main className="max-w-3xl mx-auto py-10 px-8">
-        <h2 className="text-sm font-semibold text-stone-500 uppercase tracking-wide mb-6">
-          Corpus disponibles
-        </h2>
-
-        {corpora.length === 0 ? (
-          <p className="text-stone-400 text-sm">
-            Aucun corpus enregistré. Créez-en un via{' '}
-            <code className="bg-stone-200 px-1 rounded text-xs">POST /api/v1/corpora</code>.
-          </p>
-        ) : (
-          <ul className="space-y-3">
-            {corpora.map((corpus) => (
-              <li key={corpus.id}>
-                <button
-                  onClick={() => void handleCorpusClick(corpus)}
-                  className="w-full text-left bg-white border border-stone-200 rounded-lg px-6 py-4 hover:border-stone-400 hover:shadow-sm transition-all"
-                >
-                  <div className="font-medium text-stone-900">{corpus.title}</div>
-                  <div className="text-xs text-stone-400 mt-1">
-                    Profil : {corpus.profile_id} · Slug : {corpus.slug}
-                  </div>
-                </button>
-
-                {expanding === corpus.id && (
-                  <div className="mt-2 ml-4 text-xs text-stone-400">Chargement…</div>
-                )}
-
-                {manuscripts[corpus.id] && manuscripts[corpus.id].length > 1 && (
-                  <ul className="mt-2 ml-4 space-y-1">
-                    {manuscripts[corpus.id].map((ms) => (
-                      <li key={ms.id}>
-                        <button
-                          onClick={() => onOpenManuscript(ms.id, corpus.profile_id)}
-                          className="text-sm text-stone-600 hover:text-stone-900 hover:underline text-left"
-                        >
-                          {ms.title}
-                          {ms.total_pages > 0 && (
-                            <span className="text-stone-400 ml-1">
-                              ({ms.total_pages} pages)
-                            </span>
-                          )}
-                        </button>
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </li>
-            ))}
-          </ul>
-        )}
-      </main>
+      </div>
     </div>
   )
 }

frontend/src/pages/RetroDemo.tsx

@@ -1,198 +0,0 @@
-import { useState } from 'react'
-import {
-  RetroWindow,
-  RetroButton,
-  RetroMenuBar,
-  RetroIcon,
-  RetroCheckbox,
-  RetroInput,
-  RetroTextarea,
-  RetroSelect,
-  RetroBadge,
-} from '../components/retro'
-
-export default function RetroDemo({ onBack }: { onBack: () => void }) {
-  const [checked1, setChecked1] = useState(true)
-  const [checked2, setChecked2] = useState(false)
-  const [selectedIcon, setSelectedIcon] = useState<string | null>(null)
-  const [inputVal, setInputVal] = useState('')
-  const [textareaVal, setTextareaVal] = useState('Explicit liber primus incipit secundus...')
-  const [selectVal, setSelectVal] = useState('medieval-illuminated')
-
-  return (
-    <div className="min-h-screen bg-retro-dither">
-      {/* ── Menu Bar ─────────────────────────────────────────── */}
-      <RetroMenuBar
-        items={[
-          { label: 'IIIF Studio', onClick: onBack },
-          { label: 'Fichier' },
-          { label: 'Edition' },
-          { label: 'Aide' },
-          { label: 'Disabled', disabled: true },
-        ]}
-        right={
-          <span className="text-retro-xs text-retro-darkgray px-2">
-            Design System Demo
-          </span>
-        }
-      />
-
-      <div className="p-4 flex flex-col gap-4 max-w-4xl mx-auto">
-        {/* ── Section: Buttons ──────────────────────────────── */}
-        <RetroWindow title="RetroButton" statusBar="Boutons avec bevel 3D outset/inset">
-          <div className="p-3 flex flex-wrap gap-2 items-center">
-            <RetroButton>Normal</RetroButton>
-            <RetroButton size="sm">Small</RetroButton>
-            <RetroButton pressed>Pressed</RetroButton>
-            <RetroButton disabled>Disabled</RetroButton>
-            <RetroButton onClick={onBack}>Retour Accueil</RetroButton>
-          </div>
-        </RetroWindow>
-
-        {/* ── Section: Window variants ─────────────────────── */}
-        <div className="flex gap-4">
-          <RetroWindow
-            title="Fenetre active"
-            onClose={() => {}}
-            statusBar="Active window"
-            className="flex-1"
-            active
-          >
-            <div className="p-3 text-retro-sm">
-              Contenu de la fenetre avec barre de titre noire.
-              Le bouton [x] ferme la fenetre.
-            </div>
-          </RetroWindow>
-
-          <RetroWindow
-            title="Fenetre inactive"
-            onClose={() => {}}
-            statusBar="Inactive window"
-            className="flex-1"
-            active={false}
-          >
-            <div className="p-3 text-retro-sm">
-              Une fenetre non focusee a une barre de titre grise.
-            </div>
-          </RetroWindow>
-        </div>
-
-        {/* ── Section: Scrollable window ───────────────────── */}
-        <RetroWindow title="Scrollable Window" scrollable className="h-[150px]">
-          <div className="p-3 text-retro-sm">
-            {Array.from({ length: 20 }, (_, i) => (
-              <p key={i}>Ligne {i + 1} — Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-            ))}
-          </div>
-        </RetroWindow>
-
-        {/* ── Section: Icons ───────────────────────────────── */}
-        <RetroWindow title="RetroIcon — Desktop Icons" statusBar="Cliquez pour selectionner">
-          <div className="p-4 flex flex-wrap gap-2 bg-retro-dither-light">
-            {[
-              { glyph: '\u{1F4DC}', label: 'Beatus' },
-              { glyph: '\u{1F4D6}', label: 'Cartulaire' },
-              { glyph: '\u{1F4C4}', label: 'Charte' },
-              { glyph: '\u{1F5BC}', label: 'Enluminures' },
-              { glyph: '\u{1F4BE}', label: 'Export' },
-              { glyph: '\u{2699}', label: 'Config' },
-            ].map((icon) => (
-              <RetroIcon
-                key={icon.label}
-                glyph={icon.glyph}
-                label={icon.label}
-                selected={selectedIcon === icon.label}
-                onClick={() => setSelectedIcon(icon.label)}
-              />
-            ))}
-          </div>
-        </RetroWindow>
-
-        {/* ── Section: Form controls ───────────────────────── */}
-        <RetroWindow title="Form Controls" statusBar="Inputs, textareas, selects, checkboxes">
-          <div className="p-3 flex flex-col gap-3">
-            <div className="flex gap-4">
-              <div className="flex-1">
-                <RetroInput
-                  label="Identifiant du corpus"
-                  placeholder="ex: beatus-lat8878"
-                  value={inputVal}
-                  onChange={(e) => setInputVal(e.target.value)}
-                />
-              </div>
-              <div className="flex-1">
-                <RetroSelect
-                  label="Profil de corpus"
-                  value={selectVal}
-                  onChange={(e) => setSelectVal(e.target.value)}
-                  options={[
-                    { value: 'medieval-illuminated', label: 'Medieval Illuminated' },
-                    { value: 'medieval-textual', label: 'Medieval Textual' },
-                    { value: 'early-modern-print', label: 'Early Modern Print' },
-                    { value: 'modern-handwritten', label: 'Modern Handwritten' },
-                  ]}
-                />
-              </div>
-            </div>
-
-            <RetroTextarea
-              label="Transcription diplomatique"
-              value={textareaVal}
-              onChange={(e) => setTextareaVal(e.target.value)}
-              rows={4}
-            />
-
-            <div className="flex gap-4">
-              <RetroCheckbox
-                label="OCR diplomatique"
-                checked={checked1}
-                onChange={setChecked1}
-              />
-              <RetroCheckbox
-                label="Iconographie"
-                checked={checked2}
-                onChange={setChecked2}
-              />
-              <RetroCheckbox
-                label="Disabled"
-                checked={false}
-                onChange={() => {}}
-                disabled
-              />
-            </div>
-          </div>
-        </RetroWindow>
-
-        {/* ── Section: Badges ──────────────────────────────── */}
-        <RetroWindow title="RetroBadge — Status Indicators">
-          <div className="p-3 flex flex-wrap gap-2 items-center">
-            <RetroBadge>default</RetroBadge>
-            <RetroBadge variant="success">validated</RetroBadge>
-            <RetroBadge variant="warning">needs_review</RetroBadge>
-            <RetroBadge variant="error">failed</RetroBadge>
-            <RetroBadge variant="info">machine_draft</RetroBadge>
-          </div>
-        </RetroWindow>
-
-        {/* ── Section: Typography ──────────────────────────── */}
-        <RetroWindow title="Typography & Utilities">
-          <div className="p-3 flex flex-col gap-2">
-            <p className="text-retro-2xl font-bold">Heading 2XL — IIIF Studio</p>
-            <p className="text-retro-xl font-bold">Heading XL — Beatus de Saint-Sever</p>
-            <p className="text-retro-lg font-semibold">Heading LG — Folio 13r</p>
-            <p className="text-retro-base">Body base — Explicit liber primus incipit secundus</p>
-            <p className="text-retro-sm">Body SM — Metadata and labels</p>
-            <p className="text-retro-xs text-retro-darkgray">Caption XS — Timestamps and fine print</p>
-            <hr className="border-retro-darkgray" />
-            <div className="flex gap-4">
-              <div className="p-2 bg-retro-dither text-retro-xs">bg-retro-dither</div>
-              <div className="p-2 bg-retro-dither-dark text-retro-xs text-retro-white">bg-retro-dither-dark</div>
-              <div className="p-2 bg-retro-dither-light text-retro-xs">bg-retro-dither-light</div>
-              <div className="p-2 bg-retro-lines text-retro-xs">bg-retro-lines</div>
-            </div>
-          </div>
-        </RetroWindow>
-      </div>
-    </div>
-  )
-}