From fe8a6f0f54debdb4cfbec189799501c3f7b6b89b Mon Sep 17 00:00:00 2001
From: Tom Boullay <tom@famille-boullay.fr>
Date: Fri, 24 Apr 2026 16:40:55 +0200
Subject: [PATCH] refactor: simplify upload UI and enforce glb-only preview

---
 app/page.tsx                         |  6 ++---
 components/ModelViewer.tsx           | 17 ++++++++++++--
 components/UploadZone.tsx            | 33 +++++++++++++++-------------
 components/upload/FolderDropzone.tsx |  4 +++-
 4 files changed, 39 insertions(+), 21 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 62b9fa7..0b53327 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -9,14 +9,14 @@ export default function Home() {
         </h1>
         <p className="text-gray-400 text-base leading-relaxed">
           Deposez vos fichiers 3D — ils seront archives sur le Drive
-          <br />avec versioning, puis envoyes aux devs via GitHub.
+          <br />avec versioning, puis envoyes aux devs via GitHub
         </p>
       </div>
 
       <UploadZone />
 
-      <footer className="mt-10 text-gray-500 text-xs text-center">
-        Modeles : <span className="font-mono text-gray-400">.glb · .gltf</span>
+      <footer className="text-gray-500 text-xs text-center">
+        Modeles : <span className="font-mono text-gray-400">.glb</span>
         <span className="mx-2">·</span>
         Textures : <span className="font-mono text-gray-400">.png · .jpg · .webp</span>
       </footer>
diff --git a/components/ModelViewer.tsx b/components/ModelViewer.tsx
index a347e5a..966b5aa 100644
--- a/components/ModelViewer.tsx
+++ b/components/ModelViewer.tsx
@@ -9,9 +9,12 @@ interface ModelViewerProps {
 }
 
 export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
+  const canPreview = filename.toLowerCase().endsWith('.glb')
   const [Scene, setScene] = useState<React.ComponentType<{ url: string }> | null>(null)
 
   useEffect(() => {
+    if (!canPreview) return
+
     let cancel = false
 
     import('./SceneViewer').then((mod) => {
@@ -19,7 +22,17 @@ export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
     })
 
     return () => { cancel = true }
-  }, [])
+  }, [canPreview])
+
+  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">
+        <p className="text-sm text-gray-400 px-6 text-center">
+          La preview 3D locale est disponible uniquement pour les fichiers <span className="font-mono">.glb</span>.
+        </p>
+      </div>
+    )
+  }
 
   if (!Scene) {
     return (
@@ -42,4 +55,4 @@ export default function ModelViewer({ url, filename, size }: ModelViewerProps) {
       <Scene url={url} />
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/components/UploadZone.tsx b/components/UploadZone.tsx
index 4597ee1..19be515 100644
--- a/components/UploadZone.tsx
+++ b/components/UploadZone.tsx
@@ -72,6 +72,23 @@ export default function UploadZone() {
 
   return (
     <div className="w-full max-w-2xl space-y-4">
+      {entries.length === 0 && (
+        <p className="rounded-2xl border border-white/20 bg-black-800 px-4 py-3 text-xs text-gray-400 leading-relaxed text-center mb-3">
+          Deposez un dossier complet contenant votre modele 3D nomme
+          {' '}<span className="font-mono text-gray-200">model.glb</span>
+          {' '}ainsi que toutes les textures necessaires.
+          {' '}Les textures peuvent etre en
+          {' '}<span className="font-mono text-gray-200">.png</span>,
+          {' '}<span className="font-mono text-gray-200">.jpg</span>
+          {' '}ou <span className="font-mono text-gray-200">.webp</span>.
+          {' '}Utilisez un nom simple si la texture s&apos;applique au modele entier, et un nom detaille si elle correspond a une partie precise du modele,
+          {' '}par exemple <span className="font-mono text-gray-200">color_porte.jpg</span>,
+          {' '}<span className="font-mono text-gray-200">roughness_tuyaux.png</span>,
+          {' '}<span className="font-mono text-gray-200">normal_dashboard.webp</span>
+          {' '}ou <span className="font-mono text-gray-200">opacity_fenetre.png</span>
+        </p>
+      )}
+
       <SecretInput
         secret={secret}
         secretVisible={secretVisible}
@@ -82,21 +99,7 @@ export default function UploadZone() {
       />
 
       {entries.length === 0 && (
-        <div className="space-y-2">
-          <p className="text-xs text-gray-400 leading-relaxed text-center">
-            Deposez un dossier complet contenant votre modele 3D nomme
-            {' '}<span className="font-mono text-gray-200">model.glb</span>
-            {' '}ainsi que toutes les textures necessaires.
-            {' '}Les textures peuvent etre en
-            {' '}<span className="font-mono text-gray-200">.png</span>,
-            {' '}<span className="font-mono text-gray-200">.jpg</span>
-            {' '}ou <span className="font-mono text-gray-200">.webp</span>.
-            {' '}Utilisez un nom simple si la texture s&apos;applique au modele entier, et un nom detaille si elle correspond a une partie precise du modele,
-            {' '}par exemple <span className="font-mono text-gray-200">color_fenetre.jpg</span>,
-            {' '}<span className="font-mono text-gray-200">roughness_tuyaux.png</span>,
-            {' '}<span className="font-mono text-gray-200">normal_dashboard.webp</span>
-            {' '}ou <span className="font-mono text-gray-200">opacity_verre.png</span>.
-          </p>
+        <div>
           <FolderDropzone
             isUploading={isUploading}
             onFolderSelected={handleFolderSelected}
diff --git a/components/upload/FolderDropzone.tsx b/components/upload/FolderDropzone.tsx
index a11ee4e..e9b0a62 100644
--- a/components/upload/FolderDropzone.tsx
+++ b/components/upload/FolderDropzone.tsx
@@ -67,7 +67,9 @@ export default function FolderDropzone({
       status: 'pending',
       progress: 0,
       warnings: validation.warnings,
-      modelUrl: URL.createObjectURL(validation.model),
+      modelUrl: validation.model.name.toLowerCase() === 'model.glb'
+        ? URL.createObjectURL(validation.model)
+        : undefined,
       viewerOpen: true,
     }