feat: add texture diagnostics to viewer

2026-05-17 16:49:24 +02:00
parent 3cfb3a21a9
commit 83b2b405b4
7 changed files with 419 additions and 16 deletions
@@ -0,0 +1,99 @@
+'use client'
+
+import { useState } from 'react'
+import { CheckIcon, ChevronIcon, WarningIcon, XIcon } from '@/components/ui/icons'
+import type { TextureDiagnosticReport } from '@/lib/client-types'
+
+interface TextureDiagnosticsPanelProps {
+  report?: TextureDiagnosticReport
+}
+
+const idleReport: TextureDiagnosticReport = {
+  status: 'idle',
+  summary: 'Deposez un dossier pour analyser les textures du model.gltf.',
+  issues: [],
+}
+
+const statusStyles = {
+  idle: {
+    icon: <WarningIcon className="h-4 w-4" />,
+    label: 'En attente',
+    tone: 'border-white/15 bg-white/5 text-gray-400',
+  },
+  ok: {
+    icon: <CheckIcon className="h-4 w-4" />,
+    label: 'OK',
+    tone: 'border-green-500/30 bg-green-500/10 text-green-300',
+  },
+  warning: {
+    icon: <WarningIcon className="h-4 w-4" />,
+    label: 'A verifier',
+    tone: 'border-yellow-500/30 bg-yellow-500/10 text-yellow-300',
+  },
+  error: {
+    icon: <XIcon className="h-4 w-4" />,
+    label: 'Probleme',
+    tone: 'border-red-500/30 bg-red-500/10 text-red-300',
+  },
+}
+
+const issueStyles = {
+  error: 'border-red-500/25 bg-red-500/10 text-red-200',
+  warning: 'border-yellow-500/25 bg-yellow-500/10 text-yellow-200',
+}
+
+export default function TextureDiagnosticsPanel({
+  report,
+}: TextureDiagnosticsPanelProps) {
+  const currentReport = report || idleReport
+  const style = statusStyles[currentReport.status]
+  const [isOpen, setIsOpen] = useState(true)
+
+  return (
+    <aside className="overflow-hidden rounded-xl border border-white/15 bg-black-800 text-xs text-gray-400 lg:max-h-[450px]">
+      <button
+        type="button"
+        onClick={() => setIsOpen((open) => !open)}
+        aria-expanded={isOpen}
+        className="flex w-full items-center justify-between gap-3 px-4 py-3 text-left transition hover:bg-white/5"
+      >
+        <span className="flex min-w-0 items-center gap-2">
+          <ChevronIcon className={`h-4 w-4 shrink-0 text-gray-500 transition-transform ${isOpen ? 'rotate-180' : ''}`} />
+          <span className="truncate text-sm font-semibold text-gray-100">Diagnostic textures</span>
+        </span>
+        <span className={`inline-flex items-center gap-1.5 rounded-full border px-2 py-1 ${style.tone}`}>
+          {style.icon}
+          {style.label}
+        </span>
+      </button>
+
+      {isOpen && (
+        <div className="max-h-[380px] overflow-auto border-t border-white/10 px-4 py-3">
+          <p className="leading-relaxed">{currentReport.summary}</p>
+
+          {currentReport.issues.length > 0 ? (
+            <ul className="mt-3 space-y-2">
+              {currentReport.issues.map((issue, index) => (
+                <li
+                  key={`${issue.title}-${index}`}
+                  className={`rounded-xl border px-3 py-2 ${issueStyles[issue.severity]}`}
+                >
+                  <p className="font-medium">{issue.title}</p>
+                  <p className="mt-1 leading-relaxed text-gray-300">{issue.detail}</p>
+                </li>
+              ))}
+            </ul>
+          ) : currentReport.status === 'idle' ? (
+            <p className="mt-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2 leading-relaxed">
+              Les resultats apparaitront ici apres selection du dossier.
+            </p>
+          ) : (
+            <p className="mt-3 rounded-xl border border-white/10 bg-white/5 px-3 py-2 leading-relaxed">
+              Aucun probleme texture detecte cote app.
+            </p>
+          )}
+        </div>
+      )}
+    </aside>
+  )
+}