Changes

Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>

src/pages/Viewer.tsx

@@ -20,7 +20,9 @@ import { convertIFCtoGLB } from "@/lib/convertIFC";
 
 const Viewer = () => {
   const navigate = useNavigate();
-  const { model, xrSupported } = useModelStore();
+  const { model, xrSupported, addModel, models, maxModels } = useModelStore();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [converting, setConverting] = useState(false);
 
   useEffect(() => {
     if (!model) {
@@ -28,6 +30,42 @@ const Viewer = () => {
     }
   }, [model, navigate]);
 
+  const handleFileUpload = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    e.target.value = '';
+    if (!file) return;
+    if (models.length >= maxModels) {
+      toast.error(`Limite de ${maxModels} peças simultâneas atingido`);
+      return;
+    }
+    const ext = getSupportedExtension(file.name);
+    if (!ext) {
+      toast.error('Formato inválido. Selecione .GLB, .OBJ, .STL ou .IFC');
+      return;
+    }
+    if (ext === 'glb') {
+      const url = URL.createObjectURL(file);
+      addModel({ fileName: file.name, fileSize: file.size, url });
+      toast.success(`"${file.name}" adicionado à cena`);
+      return;
+    }
+    setConverting(true);
+    try {
+      const buffer = await file.arrayBuffer();
+      const result = ext === 'ifc'
+        ? await convertIFCtoGLB(buffer, file.name)
+        : await convertToGLB(buffer, ext, file.name);
+      const url = URL.createObjectURL(result.blob);
+      addModel({ fileName: result.fileName, fileSize: result.fileSize, url });
+      toast.success(`"${file.name}" convertido e adicionado!`);
+    } catch (err) {
+      console.error(err);
+      toast.error(`Falha ao converter "${file.name}"`);
+    } finally {
+      setConverting(false);
+    }
+  }, [addModel, models.length, maxModels]);
+
   if (!model) return null;
 
   const handleEnterXR = async () => {
@@ -38,8 +76,18 @@ const Viewer = () => {
     navigate("/xr");
   };
 
+  const canAddMore = models.length < maxModels;
+
   return (
     <div className="flex h-screen flex-col bg-background">
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={ACCEPTED_EXTENSIONS}
+        className="hidden"
+        onChange={handleFileUpload}
+      />
+
       {/* Top bar */}
       <header className="flex items-center justify-between border-b bg-card px-4 py-3">
         <div className="flex items-center gap-3">
@@ -66,7 +114,7 @@ const Viewer = () => {
       <div className="flex flex-1 overflow-hidden">
         {/* 3D Canvas with floating controls */}
         <div className="relative flex-1">
-          <ModelViewerCanvas url={model.url} />
+          <ModelViewerCanvas />
           <ViewerControls />
         </div>
 
@@ -75,8 +123,33 @@ const Viewer = () => {
           <ScrollArea className="h-full">
             <div className="p-4 space-y-5">
               <div>
-                <h2 className="mb-3 font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+                <div className="flex items-center justify-between mb-3">
-                  Informações do Modelo
+                  <h2 className="font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+                    Cena · {models.length}/{maxModels} peças
+                  </h2>
+                </div>
+                <SceneModelList />
+                <div className="mt-2 grid grid-cols-2 gap-1.5">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="h-8 gap-1.5 text-[10px] font-mono"
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={!canAddMore || converting}
+                    title={canAddMore ? 'Adicionar arquivo local' : 'Limite atingido'}
+                  >
+                    {converting ? <Loader2 className="h-3.5 w-3.5 animate-spin" /> : <Upload className="h-3.5 w-3.5" />}
+                    {converting ? 'Convertendo…' : 'Adicionar'}
+                  </Button>
+                  <CloudLoader compact variant="outline" />
+                </div>
+              </div>
+
+              <Separator />
+
+              <div>
+                <h2 className="mb-2 font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
+                  Peça selecionada
                 </h2>
                 <div className="space-y-3">
                   <InfoItem icon={FileText} label="Arquivo" value={model.fileName} />
@@ -102,8 +175,8 @@ const Viewer = () => {
               <ScreenshotGallery />
               <div className="rounded-lg border bg-muted/50 p-3">
                 <p className="font-mono text-xs text-muted-foreground">
-                  Use o mouse para orbitar, scroll para zoom. Controle a opacidade e o modo de renderização nos
+                  Clique em uma peça na cena para selecioná-la — os controles de ajuste fino
-                  controles flutuantes.
+                  passam a operar sobre ela. Use "Adicionar" / "Nuvem" para empilhar peças.
                 </p>
               </div>
             </div>