refactor: tighten upload and viewer contracts

components/ModelViewer.tsx

@@ -2,7 +2,7 @@
 
 import { Component, useEffect, useState } from 'react'
 import type { ComponentType, ReactNode } from 'react'
-import type { ModelHierarchyNode, ModelStats } from './SceneViewer'
+import type { ModelHierarchyNode, ModelStats, SceneViewerProps } from '@/lib/client-types'
 
 interface ModelViewerProps {
   url: string
@@ -11,6 +11,21 @@ interface ModelViewerProps {
   size: string
 }
 
+const VIEWER_FRAME_CLASS = 'w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden'
+const CENTERED_VIEWER_FRAME_CLASS = `${VIEWER_FRAME_CLASS} flex items-center justify-center`
+
+const MODEL_STAT_ROWS = [
+  { label: 'Draw calls', getValue: (stats: ModelStats) => stats.drawCalls },
+  { label: 'Children', getValue: (stats: ModelStats) => stats.childObjects },
+  { label: 'Meshes', getValue: (stats: ModelStats) => stats.meshes },
+  { label: 'Triangles', getValue: (stats: ModelStats) => stats.triangles.toLocaleString('fr-FR') },
+  { label: 'Materials', getValue: (stats: ModelStats) => stats.materials },
+  { label: 'Textures', getValue: (stats: ModelStats) => stats.textures },
+] satisfies Array<{
+  label: string
+  getValue: (stats: ModelStats) => number | string
+}>
+
 function getPreviewErrorMessage(error: unknown) {
   return error instanceof Error ? error.message : 'Erreur preview inconnue'
 }
@@ -117,6 +132,19 @@ function HierarchyPanel({
   )
 }
 
+function ModelStatsPanel({ stats }: { stats: ModelStats }) {
+  return (
+    <div className="flex flex-col gap-1.5 rounded-lg border border-white/10 bg-black-900/75 p-2 text-xs text-gray-300 backdrop-blur">
+      {MODEL_STAT_ROWS.map(({ label, getValue }) => (
+        <span key={label} className="flex justify-between gap-3">
+          <span className="text-gray-500">{label}</span>
+          <span className="font-mono text-gray-200">{getValue(stats)}</span>
+        </span>
+      ))}
+    </div>
+  )
+}
+
 class PreviewErrorBoundary extends Component<
   { children: ReactNode },
   { message: string | null }
@@ -146,12 +174,7 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
   const [hierarchy, setHierarchy] = useState<ModelHierarchyNode | null>(null)
   const [hierarchyOpen, setHierarchyOpen] = useState(false)
   const [sceneError, setSceneError] = useState<string | null>(null)
-  const [Scene, setScene] = useState<ComponentType<{
-    url: string
-    assetUrls: Record<string, string>
-    onStatsReady: (stats: ModelStats) => void
-    onHierarchyReady: (hierarchy: ModelHierarchyNode) => void
-  }> | null>(null)
+  const [Scene, setScene] = useState<ComponentType<SceneViewerProps> | null>(null)
 
   useEffect(() => {
     if (!canPreview) return
@@ -175,7 +198,7 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
 
   if (!canPreview) {
     return (
-      <div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
+      <div className={CENTERED_VIEWER_FRAME_CLASS}>
         <p className="text-sm text-gray-400 px-6 text-center">
           La preview 3D locale n&apos;est pas disponible pour les dossiers <span className="font-mono">model.gltf</span> avec fichiers associes.
         </p>
@@ -185,14 +208,14 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
 
   if (!Scene) {
     return (
-      <div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden flex items-center justify-center">
+      <div className={CENTERED_VIEWER_FRAME_CLASS}>
         <div className="w-6 h-6 border-2 border-gray-500 border-t-gray-300 rounded-full animate-spin" />
       </div>
     )
   }
 
   return (
-    <div className="w-full h-[450px] bg-black-800 border border-white/20 rounded-xl overflow-hidden relative">
+    <div className={`${VIEWER_FRAME_CLASS} relative`}>
       <div className="absolute top-3 left-3 z-10 flex items-center gap-2">
         <span className="text-xs text-gray-400 font-mono bg-black-900/60 px-2 py-1 rounded">
           {filename}
@@ -203,32 +226,7 @@ export default function ModelViewer({ url, assetUrls, filename, size }: ModelVie
       </div>
       {stats && (
         <div className="absolute top-3 right-3 z-20 flex w-44 flex-col gap-2">
-          <div className="flex flex-col gap-1.5 rounded-lg border border-white/10 bg-black-900/75 p-2 text-xs text-gray-300 backdrop-blur">
-            <span className="flex justify-between gap-3">
-              <span className="text-gray-500">Draw calls</span>
-              <span className="font-mono text-gray-200">{stats.drawCalls}</span>
-            </span>
-            <span className="flex justify-between gap-3">
-              <span className="text-gray-500">Children</span>
-              <span className="font-mono text-gray-200">{stats.childObjects}</span>
-            </span>
-            <span className="flex justify-between gap-3">
-              <span className="text-gray-500">Meshes</span>
-              <span className="font-mono text-gray-200">{stats.meshes}</span>
-            </span>
-            <span className="flex justify-between gap-3">
-              <span className="text-gray-500">Triangles</span>
-              <span className="font-mono text-gray-200">{stats.triangles.toLocaleString('fr-FR')}</span>
-            </span>
-            <span className="flex justify-between gap-3">
-              <span className="text-gray-500">Materials</span>
-              <span className="font-mono text-gray-200">{stats.materials}</span>
-            </span>
-            <span className="flex justify-between gap-3">
-              <span className="text-gray-500">Textures</span>
-              <span className="font-mono text-gray-200">{stats.textures}</span>
-            </span>
-          </div>
+          <ModelStatsPanel stats={stats} />
           <button
             type="button"
             disabled={!hierarchy}