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,118 @@
+import dynamic from 'next/dynamic'
+import type { FolderEntry } from '@/lib/client-types'
+import { formatBytes } from '@/lib/format-bytes'
+import WarningBanner from './WarningBanner'
+
+const ModelViewer = dynamic(() => import('../ModelViewer'), { ssr: false })
+
+interface FolderCardProps {
+  entry: FolderEntry
+  index: number
+  onToggleViewer: (index: number) => void
+  onRemove: (index: number) => void
+}
+
+export default function FolderCard({ entry, index, onToggleViewer, onRemove }: FolderCardProps) {
+  return (
+    <div>
+      <div className="flex items-center gap-3 bg-black-800 border border-white/20 rounded-xl px-4 py-3">
+        {/* Status icon */}
+        <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>
+            </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>
+            </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>
+            </div>
+          ) : (
+            <button
+              onClick={() => entry.modelUrl ? onToggleViewer(index) : undefined}
+              aria-label={entry.viewerOpen ? 'Fermer la preview 3D' : 'Ouvrir la preview 3D'}
+              className={`shrink-0 w-8 h-8 rounded-full flex items-center justify-center transition ${
+                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>
+            </button>
+          )}
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2">
+            <span className="text-sm text-gray-200 font-mono truncate">{entry.folderName}/</span>
+            <span className="shrink-0 text-xs px-1.5 py-0.5 rounded-full bg-gray-700 text-gray-300">Dossier</span>
+          </div>
+          <div className="flex items-center gap-2 mt-0.5">
+            <span className="text-xs text-gray-500">modele : {entry.modelFile.name}</span>
+            {entry.status === 'error' && entry.error && (
+              <span className="text-xs text-red-400 truncate">{entry.error}</span>
+            )}
+            {entry.status === 'success' && entry.filename && (
+              <span className="text-xs text-green-400 font-mono">{entry.filename}</span>
+            )}
+          </div>
+          {entry.status === 'uploading' && (
+            <div className="mt-1.5 w-full h-1 bg-black-700 rounded-full overflow-hidden">
+              <div
+                className="h-full bg-gray-400 rounded-full transition-all duration-200"
+                style={{ width: `${entry.progress}%` }}
+              />
+            </div>
+          )}
+        </div>
+
+        {/* Remove button */}
+        {entry.status !== 'uploading' && (
+          <button
+            onClick={() => onRemove(index)}
+            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>
+          </button>
+        )}
+      </div>
+
+      {/* Warning banner */}
+      {entry.status !== 'success' && (
+        <WarningBanner warnings={entry.warnings} />
+      )}
+
+      {/* 3D preview */}
+      {entry.modelUrl && entry.status !== 'success' && (
+        <div
+          className={`transition-all duration-300 ease-in-out overflow-hidden ${
+            entry.viewerOpen ? 'max-h-[500px] opacity-100 mt-2' : 'max-h-0 opacity-0 pointer-events-none'
+          }`}
+        >
+          <ModelViewer
+            url={entry.modelUrl}
+            filename={entry.modelFile.name}
+            size={formatBytes(entry.modelFile.size)}
+          />
+        </div>
+      )}
+    </div>
+  )
+}