refactor: full codebase audit — extract modules, fix type safety, clean dead code

- Extract API helpers from UploadZone into lib/upload-api.ts (FormData builder, checkFolderDiffs, uploadDrive, uploadGit) - Extract upload orchestration into hooks/useUploadOrchestrator.ts (UploadZone: 489 → 162 lines) - Extract file diff classification into lib/diff-files.ts (from git route) - Extract shared SVG icons into components/ui/icons.tsx (7 icons, 0 duplication) - Extract shared modal wrapper into components/ui/Modal.tsx + ModalActions - Extract DriveStatusLine sub-component from FolderCard - Fix checkFolderDiffs silently swallowing auth/network errors (now throws) - Fix type safety: remove as never casts, add isHttpError type guard, use discriminated union for validateFolder - Fix nextcloud: cache getConfig, add max bound to findNextVersion, optimize mkdirRecursive (skip PROPFIND) - Fix drive route: remove req.clone(), extend parseMultiUpload to return extra fields - Fix commit message: model shown as unchanged with ↔️ on updates (not falsely marked as modified) - Clean dead code: unused folderExists import, FileStatus/DriveStatus exports, ParsedFile.textureName, getConfig basePath - Add security headers in next.config.ts (HSTS, X-Content-Type-Options, X-Frame-Options, etc.) - Update README with new project structure
2026-04-14 17:19:10 +02:00
parent 110d64ec33
commit 78f4aa83e0
26 changed files with 957 additions and 721 deletions
@@ -1,3 +1,6 @@
+import Modal, { ModalActions } from '@/components/ui/Modal'
+import { WarningIcon } from '@/components/ui/icons'
+
 interface DriveErrorModalProps {
  error: string
  onCancel: () => void
@@ -10,60 +13,35 @@ export default function DriveErrorModal({
  onContinue,
 }: DriveErrorModalProps) {
  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="drive-error-title"
-    >
-      <div className="bg-black-900 border border-white/20 rounded-2xl p-6 max-w-md w-full mx-4 space-y-4">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-full bg-red-900/30 flex items-center justify-center shrink-0">
-            <svg className="w-5 h-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-          </div>
-          <div>
-            <h3 id="drive-error-title" className="text-sm font-semibold text-gray-100">
-              Erreur Drive
-            </h3>
-            <p className="text-xs text-gray-400 mt-0.5">
-              L&apos;archivage sur le Drive a echoue. Les fichiers n&apos;ont pas ete versionnes.
-            </p>
-          </div>
+    <Modal ariaLabelledBy="drive-error-title">
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-full bg-red-900/30 flex items-center justify-center shrink-0">
+          <WarningIcon className="w-5 h-5 text-red-400" />
        </div>
-
-        <div className="bg-black-800 border border-white/10 rounded-xl p-3">
-          <p className="text-xs text-red-400 font-mono break-all">{error}</p>
-        </div>
-
-        <p className="text-xs text-gray-400">
-          Voulez-vous quand meme envoyer les fichiers aux devs via GitHub ?
-        </p>
-
-        <div className="flex gap-3">
-          <button
-            onClick={onCancel}
-            className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
-                       py-2.5 px-4 rounded-xl border border-white/10 transition-colors duration-150
-                       hover:bg-black-600"
-          >
-            Annuler
-          </button>
-          <button
-            onClick={onContinue}
-            className="flex-1 bg-white text-[#000000] font-medium text-sm
-                       py-2.5 px-4 rounded-xl transition-colors duration-150
-                       hover:bg-gray-200"
-          >
-            Envoyer sur Git seulement
-          </button>
+        <div>
+          <h3 id="drive-error-title" className="text-sm font-semibold text-gray-100">
+            Erreur Drive
+          </h3>
+          <p className="text-xs text-gray-400 mt-0.5">
+            L&apos;archivage sur le Drive a echoue. Les fichiers n&apos;ont pas ete versionnes.
+          </p>
        </div>
      </div>
-    </div>
+
+      <div className="bg-black-800 border border-white/10 rounded-xl p-3">
+        <p className="text-xs text-red-400 font-mono break-all">{error}</p>
+      </div>
+
+      <p className="text-xs text-gray-400">
+        Voulez-vous quand meme envoyer les fichiers aux devs via GitHub ?
+      </p>
+
+      <ModalActions
+        cancelLabel="Annuler"
+        confirmLabel="Envoyer sur Git seulement"
+        onCancel={onCancel}
+        onConfirm={onContinue}
+      />
+    </Modal>
  )
 }
@@ -0,0 +1,44 @@
+// ---------------------------------------------------------------------------
+// Drive/Git status sub-line for FolderCard
+// ---------------------------------------------------------------------------
+
+import { SpinnerIcon, XIcon, InfoIcon } from '@/components/ui/icons'
+import type { FolderEntry } from '@/lib/client-types'
+
+interface DriveStatusLineProps {
+  driveStatus: NonNullable<FolderEntry['driveStatus']>
+  driveError?: string
+}
+
+export default function DriveStatusLine({ driveStatus, driveError }: DriveStatusLineProps) {
+  if (driveStatus === 'pending') return null
+
+  return (
+    <div className="flex items-center gap-1.5 mt-0.5">
+      {driveStatus === 'uploading' && (
+        <>
+          <SpinnerIcon className="w-3 h-3 text-gray-400" />
+          <span className="text-xs text-gray-400">Upload Drive en cours...</span>
+        </>
+      )}
+      {driveStatus === 'success' && (
+        <>
+          <SpinnerIcon className="w-3 h-3 text-gray-400" />
+          <span className="text-xs text-gray-400">Upload Git en cours...</span>
+        </>
+      )}
+      {driveStatus === 'error' && (
+        <>
+          <XIcon className="w-3 h-3 text-red-400" />
+          <span className="text-xs text-red-400 truncate">Drive echoue{driveError ? ` : ${driveError}` : ''}</span>
+        </>
+      )}
+      {driveStatus === 'skipped' && (
+        <>
+          <InfoIcon className="w-3 h-3 text-yellow-400" />
+          <span className="text-xs text-yellow-400">Drive ignore</span>
+        </>
+      )}
+    </div>
+  )
+}
@@ -1,6 +1,8 @@
 import dynamic from 'next/dynamic'
 import type { FolderEntry } from '@/lib/client-types'
 import { formatBytes } from '@/lib/format-bytes'
+import { SpinnerIcon, CheckIcon, XIcon, ChevronIcon } from '@/components/ui/icons'
+import DriveStatusLine from './DriveStatusLine'
 import WarningBanner from './WarningBanner'

 const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false })
@@ -20,22 +22,15 @@ export default function FolderCard({ entry, index, onToggleViewer, onRemove }: F
        <div className="shrink-0">
          {entry.status === 'success' ? (
            <div className="w-8 h-8 rounded-full bg-green-900/30 flex items-center justify-center">
-              <svg className="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
-              </svg>
+              <CheckIcon className="w-4 h-4 text-green-400" />
            </div>
          ) : entry.status === 'error' ? (
            <div className="w-8 h-8 rounded-full bg-red-900/30 flex items-center justify-center">
-              <svg className="w-4 h-4 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-              </svg>
+              <XIcon className="w-4 h-4 text-red-400" />
            </div>
          ) : entry.status === 'uploading' ? (
            <div className="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center">
-              <svg className="w-4 h-4 text-gray-300 animate-spin" fill="none" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-              </svg>
+              <SpinnerIcon className="w-4 h-4 text-gray-300" />
            </div>
          ) : (
            <button
@@ -45,12 +40,7 @@ export default function FolderCard({ entry, index, onToggleViewer, onRemove }: F
                entry.modelUrl ? 'bg-black-700 hover:bg-gray-700 cursor-pointer' : 'bg-black-700 cursor-default'
              }`}
            >
-              <svg
-                className={`w-4 h-4 text-gray-500 transition-transform ${entry.viewerOpen ? 'rotate-180' : ''}`}
-                fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}
-              >
-                <path strokeLinecap="round" strokeLinejoin="round" d="M19 9l-7 7-7-7" />
-              </svg>
+              <ChevronIcon className={`w-4 h-4 text-gray-500 transition-transform ${entry.viewerOpen ? 'rotate-180' : ''}`} />
            </button>
          )}
        </div>
@@ -73,43 +63,9 @@ export default function FolderCard({ entry, index, onToggleViewer, onRemove }: F

          {/* Drive status sub-line (only during upload, not after success) */}
          {entry.status !== 'success' && entry.driveStatus && entry.driveStatus !== 'pending' && (
-            <div className="flex items-center gap-1.5 mt-0.5">
-              {entry.driveStatus === 'uploading' && (
-                <>
-                  <svg className="w-3 h-3 text-gray-400 animate-spin" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                  </svg>
-                  <span className="text-xs text-gray-400">Upload Drive en cours...</span>
-                </>
-              )}
-              {entry.driveStatus === 'success' && (
-                <>
-                  <svg className="w-3 h-3 text-gray-400 animate-spin" fill="none" viewBox="0 0 24 24">
-                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
-                  </svg>
-                  <span className="text-xs text-gray-400">Upload Git en cours...</span>
-                </>
-              )}
-              {entry.driveStatus === 'error' && (
-                <>
-                  <svg className="w-3 h-3 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                  <span className="text-xs text-red-400 truncate">Drive echoue{entry.driveError ? ` : ${entry.driveError}` : ''}</span>
-                </>
-              )}
-              {entry.driveStatus === 'skipped' && (
-                <>
-                  <svg className="w-3 h-3 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01" />
-                  </svg>
-                  <span className="text-xs text-yellow-400">Drive ignore</span>
-                </>
-              )}
-            </div>
+            <DriveStatusLine driveStatus={entry.driveStatus} driveError={entry.driveError} />
          )}
+
          {entry.status === 'uploading' && (
            <div className="mt-1.5 w-full h-1 bg-black-700 rounded-full overflow-hidden">
              <div
@@ -127,9 +83,7 @@ export default function FolderCard({ entry, index, onToggleViewer, onRemove }: F
            aria-label="Supprimer le dossier"
            className="shrink-0 text-gray-600 hover:text-red-400 transition"
          >
-            <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-            </svg>
+            <XIcon className="w-4 h-4" />
          </button>
        )}
      </div>
@@ -1,5 +1,6 @@
 import type { FolderEntry } from '@/lib/client-types'
 import { validateFolder } from '@/lib/validate-folder'
+import { FolderIcon } from '@/components/ui/icons'

 interface FolderDropzoneProps {
  isUploading: boolean
@@ -20,19 +21,19 @@ export default function FolderDropzone({
    const folderName = fileArray[0].webkitRelativePath?.split('/')[0] || 'folder'
    const validation = validateFolder(fileArray)

-    if (validation.errors.length > 0) {
+    if (!validation.ok) {
      onError(validation.errors.join(' | '))
      return
    }

    const entry: FolderEntry = {
      folderName,
-      modelFile: validation.model!,
+      modelFile: validation.model,
      textures: validation.textures,
      status: 'pending',
      progress: 0,
      warnings: validation.warnings,
-      modelUrl: URL.createObjectURL(validation.model!),
+      modelUrl: URL.createObjectURL(validation.model),
      viewerOpen: true,
    }
    onFolderSelected(entry)
@@ -59,19 +60,7 @@ export default function FolderDropzone({
      >
        <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>
+            <FolderIcon className="w-6 h-6 text-gray-400" />
          </div>
        </div>
        <p className="text-sm font-medium text-gray-300">
@@ -1,3 +1,6 @@
+import Modal, { ModalActions } from '@/components/ui/Modal'
+import { CheckIcon } from '@/components/ui/icons'
+
 interface NoChangesModalProps {
  destination: string
  folderName: string
@@ -12,52 +15,27 @@ export default function NoChangesModal({
  onModify,
 }: NoChangesModalProps) {
  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="no-changes-title"
-    >
-      <div className="bg-black-900 border border-white/20 rounded-2xl p-6 max-w-md w-full mx-4 space-y-4">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-full bg-gray-700/50 flex items-center justify-center shrink-0">
-            <svg className="w-5 h-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M5 13l4 4L19 7"
-              />
-            </svg>
-          </div>
-          <div>
-            <h3 id="no-changes-title" className="text-sm font-semibold text-gray-100">
-              Aucun changement detecte
-            </h3>
-            <p className="text-xs text-gray-400 mt-0.5">
-              Le dossier <span className="font-mono text-gray-300">{destination}/{folderName}</span> est identique au contenu distant. Rien a envoyer.
-            </p>
-          </div>
+    <Modal ariaLabelledBy="no-changes-title">
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-full bg-gray-700/50 flex items-center justify-center shrink-0">
+          <CheckIcon className="w-5 h-5 text-gray-400" />
        </div>
-
-        <div className="flex gap-3">
-          <button
-            onClick={onCancel}
-            className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
-                       py-2.5 px-4 rounded-xl border border-white/10 transition-colors duration-150
-                       hover:bg-black-600"
-          >
-            Annuler
-          </button>
-          <button
-            onClick={onModify}
-            className="flex-1 bg-white text-[#000000] font-medium text-sm
-                       py-2.5 px-4 rounded-xl transition-colors duration-150
-                       hover:bg-gray-200"
-          >
-            Modifier
-          </button>
+        <div>
+          <h3 id="no-changes-title" className="text-sm font-semibold text-gray-100">
+            Aucun changement detecte
+          </h3>
+          <p className="text-xs text-gray-400 mt-0.5">
+            Le dossier <span className="font-mono text-gray-300">{destination}/{folderName}</span> est identique au contenu distant. Rien a envoyer.
+          </p>
        </div>
      </div>
-    </div>
+
+      <ModalActions
+        cancelLabel="Annuler"
+        confirmLabel="Modifier"
+        onCancel={onCancel}
+        onConfirm={onModify}
+      />
+    </Modal>
  )
 }
@@ -1,4 +1,6 @@
 import type { FileDiff } from '@/lib/types'
+import Modal, { ModalActions } from '@/components/ui/Modal'
+import { WarningIcon } from '@/components/ui/icons'

 interface OverwriteConfirmModalProps {
  destination: string
@@ -16,83 +18,59 @@ export default function OverwriteConfirmModal({
  onConfirm,
 }: OverwriteConfirmModalProps) {
  return (
-    <div
-      className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="overwrite-title"
-    >
-      <div className="bg-black-900 border border-white/20 rounded-2xl p-6 max-w-md w-full mx-4 space-y-4">
-        <div className="flex items-center gap-3">
-          <div className="w-10 h-10 rounded-full bg-yellow-900/30 flex items-center justify-center shrink-0">
-            <svg className="w-5 h-5 text-yellow-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-              />
-            </svg>
-          </div>
-          <div>
-            <h3 id="overwrite-title" className="text-sm font-semibold text-gray-100">
-              Dossier deja existant
-            </h3>
-            <p className="text-xs text-gray-400 mt-0.5">
-              <span className="font-mono text-yellow-400">{destination}/{folderName}</span> existe deja.
-              Les anciens fichiers seront archives sur le Drive, puis les nouveaux seront envoyes sur le Drive et Git.
-            </p>
-          </div>
+    <Modal ariaLabelledBy="overwrite-title">
+      <div className="flex items-center gap-3">
+        <div className="w-10 h-10 rounded-full bg-yellow-900/30 flex items-center justify-center shrink-0">
+          <WarningIcon className="w-5 h-5 text-yellow-400" />
        </div>
-
-        {diffs.length > 0 && (
-          <div className="bg-black-800 border border-white/10 rounded-xl p-3 max-h-40 overflow-y-auto">
-            <p className="text-xs text-gray-500 mb-2">Modifications detectees :</p>
-            <ul className="space-y-1">
-              {diffs.map((d) => (
-                <li key={d.name} className="flex items-center gap-2 text-xs font-mono">
-                  {d.status === 'changed' && (
-                    <>
-                      <span className="text-yellow-400">🔄</span>
-                      <span className="text-gray-300">{d.name}</span>
-                    </>
-                  )}
-                  {d.status === 'new' && (
-                    <>
-                      <span className="text-green-400">✅</span>
-                      <span className="text-gray-300">{d.name}</span>
-                    </>
-                  )}
-                  {d.status === 'deleted' && (
-                    <>
-                      <span className="text-red-400">❌</span>
-                      <span className="text-gray-500 line-through">{d.name}</span>
-                    </>
-                  )}
-                </li>
-              ))}
-            </ul>
-          </div>
-        )}
-
-        <div className="flex gap-3">
-          <button
-            onClick={onCancel}
-            className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
-                       py-2.5 px-4 rounded-xl border border-white/10 transition-colors duration-150
-                       hover:bg-black-600"
-          >
-            Annuler
-          </button>
-          <button
-            onClick={onConfirm}
-            className="flex-1 bg-yellow-600 text-[#000000] font-medium text-sm
-                       py-2.5 px-4 rounded-xl transition-colors duration-150
-                       hover:bg-yellow-500"
-          >
-            Remplacer
-          </button>
+        <div>
+          <h3 id="overwrite-title" className="text-sm font-semibold text-gray-100">
+            Dossier deja existant
+          </h3>
+          <p className="text-xs text-gray-400 mt-0.5">
+            <span className="font-mono text-yellow-400">{destination}/{folderName}</span> existe deja.
+            Les anciens fichiers seront archives sur le Drive, puis les nouveaux seront envoyes sur le Drive et Git.
+          </p>
        </div>
      </div>
-    </div>
+
+      {diffs.length > 0 && (
+        <div className="bg-black-800 border border-white/10 rounded-xl p-3 max-h-40 overflow-y-auto">
+          <p className="text-xs text-gray-500 mb-2">Modifications detectees :</p>
+          <ul className="space-y-1">
+            {diffs.map((d) => (
+              <li key={d.name} className="flex items-center gap-2 text-xs font-mono">
+                {d.status === 'changed' && (
+                  <>
+                    <span className="text-yellow-400">🔄</span>
+                    <span className="text-gray-300">{d.name}</span>
+                  </>
+                )}
+                {d.status === 'new' && (
+                  <>
+                    <span className="text-green-400">✅</span>
+                    <span className="text-gray-300">{d.name}</span>
+                  </>
+                )}
+                {d.status === 'deleted' && (
+                  <>
+                    <span className="text-red-400">❌</span>
+                    <span className="text-gray-500 line-through">{d.name}</span>
+                  </>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <ModalActions
+        cancelLabel="Annuler"
+        confirmLabel="Remplacer"
+        onCancel={onCancel}
+        onConfirm={onConfirm}
+        confirmClassName="bg-yellow-600 text-[#000000] hover:bg-yellow-500"
+      />
+    </Modal>
  )
 }
@@ -1,3 +1,5 @@
+import { WarningIcon } from '@/components/ui/icons'
+
 interface WarningBannerProps {
  warnings: string[]
 }
@@ -8,13 +10,7 @@ export default function WarningBanner({ warnings }: WarningBannerProps) {
  return (
    <div className="mt-2 px-3 py-2 bg-yellow-900/20 border border-yellow-700/30 rounded-lg">
      <div className="flex items-center gap-2 text-xs text-yellow-400">
-        <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
-          />
-        </svg>
+        <WarningIcon className="w-4 h-4" />
        <span>Textures manquantes : {warnings.join(', ')}</span>
      </div>
    </div>