fin du refactp

2026-04-14 14:27:50 +02:00
parent e9ae6ffc41
commit f9e15d5e1f
18 changed files with 826 additions and 476 deletions
@@ -0,0 +1,87 @@
+import type { FolderEntry } from '@/lib/client-types'
+import { validateFolder } from '@/lib/validate-folder'
+
+interface FolderDropzoneProps {
+  isUploading: boolean
+  onFolderSelected: (entry: FolderEntry) => void
+  onError: (message: string) => void
+}
+
+export default function FolderDropzone({
+  isUploading,
+  onFolderSelected,
+  onError,
+}: FolderDropzoneProps) {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = e.target.files
+    if (!selected || selected.length === 0) return
+
+    const fileArray = Array.from(selected)
+    const folderName = fileArray[0].webkitRelativePath?.split('/')[0] || 'folder'
+    const validation = validateFolder(fileArray)
+
+    if (validation.errors.length > 0) {
+      onError(validation.errors.join(' | '))
+      return
+    }
+
+    const entry: FolderEntry = {
+      folderName,
+      modelFile: validation.model!,
+      textures: validation.textures,
+      status: 'pending',
+      progress: 0,
+      warnings: validation.warnings,
+      modelUrl: URL.createObjectURL(validation.model!),
+      viewerOpen: true,
+    }
+    onFolderSelected(entry)
+  }
+
+  return (
+    <>
+      <input
+        type="file"
+        id="folder-input"
+        {...({ webkitdirectory: '', directory: '' } as React.InputHTMLAttributes<HTMLInputElement>)}
+        multiple
+        className="hidden"
+        onChange={handleChange}
+      />
+
+      <div
+        onClick={() => document.getElementById('folder-input')?.click()}
+        className={`
+          relative border-2 border-dashed rounded-2xl p-8 text-center cursor-pointer transition-all duration-200 bg-black-800
+          ${isUploading ? 'cursor-not-allowed opacity-60 border-white/20' : ''}
+          ${!isUploading ? 'border-white/30 hover:border-white/50 hover:bg-black-700' : ''}
+        `}
+      >
+        <div className="flex justify-center mb-3">
+          <div className="w-12 h-12 rounded-full flex items-center justify-center bg-black-700">
+            <svg
+              className="w-6 h-6 text-gray-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+              strokeWidth={1.5}
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+              />
+            </svg>
+          </div>
+        </div>
+        <p className="text-sm font-medium text-gray-300">
+          Deposez votre dossier ici
+          <span className="text-gray-500 font-normal"> ou cliquez pour parcourir</span>
+        </p>
+        <p className="text-xs text-gray-500 mt-1">
+          Contenu attendu : model.glb/gltf + textures (roughness, normal, metalness, color, displace)
+        </p>
+      </div>
+    </>
+  )
+}