Changes

src/pages/Viewer.tsx

@@ -1,5 +1,5 @@
 import { useNavigate } from 'react-router-dom';
-import { ArrowLeft, Glasses, Box, Ruler, FileText } from 'lucide-react';
+import { ArrowLeft, Glasses, Box, Ruler, FileText, Columns2 } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { useModelStore } from '@/stores/useModelStore';
 import { ModelViewerCanvas } from '@/components/three/ModelViewer';
@@ -8,6 +8,7 @@ import { InspectionChecklist } from '@/components/InspectionChecklist';
 import { FineTuningControls } from '@/components/FineTuningControls';
 import { MeasurementsList } from '@/components/MeasurementsList';
 import { ScreenshotGallery } from '@/components/ScreenshotGallery';
+import { ComparePanel } from '@/components/ComparePanel';
 import { useEffect } from 'react';
 import { toast } from 'sonner';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -15,7 +16,7 @@ import { Separator } from '@/components/ui/separator';
 
 const Viewer = () => {
   const navigate = useNavigate();
-  const { model, xrSupported } = useModelStore();
+  const { model, xrSupported, compareMode, setCompareMode } = useModelStore();
 
   useEffect(() => {
     if (!model) {
@@ -49,23 +50,41 @@ const Viewer = () => {
           </div>
         </div>
 
-        <Button
-          className="gap-2 glow-primary"
-          disabled={!xrSupported}
-          onClick={handleEnterXR}
-        >
-          <Glasses className="h-4 w-4" />
-          Entrar em Modo XR
-        </Button>
+        <div className="flex items-center gap-2">
+          <Button
+            variant={compareMode ? 'default' : 'outline'}
+            size="sm"
+            className="gap-2"
+            onClick={() => setCompareMode(!compareMode)}
+          >
+            <Columns2 className="h-4 w-4" />
+            Comparar
+          </Button>
+          <Button
+            className="gap-2 glow-primary"
+            disabled={!xrSupported}
+            onClick={handleEnterXR}
+          >
+            <Glasses className="h-4 w-4" />
+            Entrar em Modo XR
+          </Button>
+        </div>
       </header>
 
       <div className="flex flex-1 overflow-hidden">
         {/* 3D Canvas with floating controls */}
-        <div className="relative flex-1">
+        <div className={`relative ${compareMode ? 'w-1/2' : 'flex-1'}`}>
           <ModelViewerCanvas url={model.url} />
           <ViewerControls />
         </div>
 
+        {/* Compare panel */}
+        {compareMode && (
+          <div className="w-1/2 border-l">
+            <ComparePanel />
+          </div>
+        )}
+
         {/* Side panel */}
         <aside className="w-80 shrink-0 border-l bg-card">
           <ScrollArea className="h-full">