Changes

src/pages/Viewer.tsx

@@ -3,8 +3,12 @@ import { ArrowLeft, Glasses, Box, Ruler, FileText } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useModelStore } from '@/stores/useModelStore';
 import { ModelViewerCanvas } from '@/components/three/ModelViewer';
+import { ViewerControls } from '@/components/ViewerControls';
+import { InspectionChecklist } from '@/components/InspectionChecklist';
 import { useEffect } from 'react';
 import { toast } from 'sonner';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
 
 const Viewer = () => {
   const navigate = useNavigate();
@@ -53,32 +57,42 @@ const Viewer = () => {
       </header>
 
       <div className="flex flex-1 overflow-hidden">
-        {/* 3D Canvas */}
-        <div className="flex-1">
+        {/* 3D Canvas with floating controls */}
+        <div className="relative flex-1">
           <ModelViewerCanvas url={model.url} />
+          <ViewerControls />
         </div>
 
         {/* Side panel */}
-        <aside className="w-72 shrink-0 overflow-y-auto border-l bg-card p-4">
-          <h2 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-muted-foreground">
-            Informações do Modelo
-          </h2>
+        <aside className="w-80 shrink-0 border-l bg-card">
+          <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">
+                  Informações do Modelo
+                </h2>
+                <div className="space-y-3">
+                  <InfoItem icon={FileText} label="Arquivo" value={model.fileName} />
+                  <InfoItem
+                    icon={Box}
+                    label="Tamanho"
+                    value={`${(model.fileSize / (1024 * 1024)).toFixed(2)} MB`}
+                  />
+                  <InfoItem icon={Ruler} label="Escala" value="1:1 (mm)" />
+                </div>
+              </div>
 
-          <div className="space-y-4">
-            <InfoItem icon={FileText} label="Arquivo" value={model.fileName} />
-            <InfoItem
-              icon={Box}
-              label="Tamanho"
-              value={`${(model.fileSize / (1024 * 1024)).toFixed(2)} MB`}
-            />
-            <InfoItem icon={Ruler} label="Escala" value="1:1 (mm)" />
+              <Separator />
 
-            <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. No Quest 3, use o botão acima para entrar em modo imersivo com passthrough.
-              </p>
+              <InspectionChecklist />
+
+              <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 controles flutuantes.
+                </p>
+              </div>
             </div>
-          </div>
+          </ScrollArea>
         </aside>
       </div>
     </div>