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,62 @@
+interface ActionButtonsProps {
+  isUploading: boolean
+  isSecretEmpty: boolean
+  hasPendingOrErrors: boolean
+  allDone: boolean
+  hasErrors: boolean
+  onUpload: () => void
+  onCancel: () => void
+  onReset: () => void
+}
+
+export default function ActionButtons({
+  isUploading,
+  isSecretEmpty,
+  hasPendingOrErrors,
+  allDone,
+  hasErrors,
+  onUpload,
+  onCancel,
+  onReset,
+}: ActionButtonsProps) {
+  return (
+    <div className="flex gap-3">
+      {!isUploading && hasPendingOrErrors && (
+        <button
+          onClick={onUpload}
+          disabled={isSecretEmpty}
+          className={`flex-1 font-medium text-sm py-2.5 px-6 rounded-xl transition-all duration-150
+                     focus:outline-none focus:ring-2 focus:ring-white/50 border border-white/20
+                     ${isSecretEmpty
+                       ? 'bg-white/30 text-gray-500 cursor-not-allowed'
+                       : 'bg-white text-[#000000] hover:bg-gray-200'
+                     }`}
+        >
+          Envoyer sur GitHub
+        </button>
+      )}
+
+      {isUploading && (
+        <button
+          onClick={onCancel}
+          className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
+                     py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
+                     hover:bg-black-600"
+        >
+          Annuler
+        </button>
+      )}
+
+      {(allDone || hasErrors) && !isUploading && (
+        <button
+          onClick={onReset}
+          className="flex-1 bg-black-700 text-gray-300 font-medium text-sm
+                     py-2.5 px-6 rounded-xl border border-black-600 transition-colors duration-150
+                     hover:bg-black-600"
+        >
+          {allDone ? 'Tout effacer' : 'Reessayer'}
+        </button>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,38 @@
+import { DESTINATIONS } from '@/lib/constants'
+import type { Destination } from '@/lib/constants'
+
+interface DestinationPickerProps {
+  destination: Destination
+  disabled: boolean
+  onChange: (value: Destination) => void
+}
+
+export default function DestinationPicker({
+  destination,
+  disabled,
+  onChange,
+}: DestinationPickerProps) {
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-sm font-medium text-gray-300">Destination</label>
+      <div className="grid grid-cols-3 gap-2">
+        {DESTINATIONS.map((dest) => (
+          <button
+            key={dest.value}
+            type="button"
+            onClick={() => onChange(dest.value)}
+            disabled={disabled}
+            className={`px-3 py-2 rounded-xl text-sm font-medium transition-all duration-150 border
+                       disabled:opacity-50 disabled:cursor-not-allowed
+                       ${destination === dest.value
+                         ? 'bg-white text-[#000000] border-white'
+                         : 'bg-black-800 text-gray-400 border-white/20 hover:border-white/40 hover:text-gray-200'
+                       }`}
+          >
+            {dest.label}
+          </button>
+        ))}
+      </div>
+    </div>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+    </>
+  )
+}
@@ -0,0 +1,97 @@
+import type { FileDiff } from '@/lib/types'
+
+interface OverwriteConfirmModalProps {
+  destination: string
+  folderName: string
+  diffs: FileDiff[]
+  onCancel: () => void
+  onConfirm: () => void
+}
+
+export default function OverwriteConfirmModal({
+  destination,
+  folderName,
+  diffs,
+  onCancel,
+  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 sur le repo
+            </p>
+          </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>
+        )}
+
+        <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>
+      </div>
+    </div>
+  )
+}
@@ -0,0 +1,61 @@
+interface SecretInputProps {
+  secret: string
+  secretVisible: boolean
+  secretError: string | null
+  disabled: boolean
+  onChange: (value: string) => void
+  onToggleVisible: () => void
+}
+
+export default function SecretInput({
+  secret,
+  secretVisible,
+  secretError,
+  disabled,
+  onChange,
+  onToggleVisible,
+}: SecretInputProps) {
+  return (
+    <div className="space-y-1.5">
+      <label className="block text-sm font-medium text-gray-300">Cle d&apos;acces</label>
+      <div className="relative">
+        <input
+          type={secretVisible ? 'text' : 'password'}
+          value={secret}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="Entrez la cle secrete..."
+          disabled={disabled}
+          className={`w-full bg-black-800 border rounded-xl px-4 py-2.5 pr-12
+                     text-gray-100 placeholder-gray-500 text-sm
+                     focus:outline-none focus:ring-2 focus:border-white/50
+                     disabled:opacity-50 disabled:cursor-not-allowed transition
+                     ${secretError
+                       ? 'border-red-500/70 focus:ring-red-500/50'
+                       : 'border-white/30 focus:ring-white/50'
+                     }`}
+        />
+        <button
+          type="button"
+          onClick={onToggleVisible}
+          aria-label={secretVisible ? 'Masquer la cle' : 'Afficher la cle'}
+          className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-300 transition"
+          tabIndex={-1}
+        >
+          {secretVisible ? (
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
+            </svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
+              <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+            </svg>
+          )}
+        </button>
+      </div>
+      {secretError && (
+        <p className="text-xs text-red-400 mt-1">{secretError}</p>
+      )}
+    </div>
+  )
+}
@@ -0,0 +1,22 @@
+interface WarningBannerProps {
+  warnings: string[]
+}
+
+export default function WarningBanner({ warnings }: WarningBannerProps) {
+  if (warnings.length === 0) return null
+
+  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>
+        <span>Textures manquantes : {warnings.join(', ')}</span>
+      </div>
+    </div>
+  )
+}