From 93ffc04eb690ea4ba6f4276bb3120d72ab67f63f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Thu, 14 May 2026 16:42:34 +0000
Subject: [PATCH] Changes

Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
---
 src/components/SceneModelList.tsx | 121 ++++++++++++++++++++++++++++++
 1 file changed, 121 insertions(+)
 create mode 100644 src/components/SceneModelList.tsx

diff --git a/src/components/SceneModelList.tsx b/src/components/SceneModelList.tsx
new file mode 100644
index 0000000..0575237
--- /dev/null
+++ b/src/components/SceneModelList.tsx
@@ -0,0 +1,121 @@
+import { Eye, EyeOff, Lock, Unlock, Copy, Trash2, Box, Layers } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { useModelStore } from '@/stores/useModelStore';
+import { toast } from 'sonner';
+
+interface SceneModelListProps {
+  compact?: boolean;
+}
+
+export function SceneModelList({ compact = false }: SceneModelListProps) {
+  const models = useModelStore((s) => s.models);
+  const activeId = useModelStore((s) => s.activeModelId);
+  const setActive = useModelStore((s) => s.setActiveModel);
+  const removeModel = useModelStore((s) => s.removeModel);
+  const toggleVisible = useModelStore((s) => s.toggleModelVisible);
+  const toggleLocked = useModelStore((s) => s.toggleModelLocked);
+  const duplicate = useModelStore((s) => s.duplicateModel);
+  const max = useModelStore((s) => s.maxModels);
+
+  if (models.length === 0) {
+    return (
+      <div className="rounded-lg border border-dashed bg-muted/20 p-3 text-center">
+        <Layers className="mx-auto mb-1 h-4 w-4 text-muted-foreground" />
+        <p className="font-mono text-[10px] text-muted-foreground">Nenhuma peça na cena</p>
+      </div>
+    );
+  }
+
+  const textSize = compact ? 'text-[9px]' : 'text-[11px]';
+  const padding = compact ? 'p-1.5' : 'p-2';
+
+  return (
+    <div className="space-y-1">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-1.5">
+          <Layers className="h-3 w-3 text-primary" />
+          <span className={`font-mono ${textSize} font-semibold uppercase tracking-wider text-muted-foreground`}>
+            Cena
+          </span>
+        </div>
+        <span className={`font-mono ${textSize} text-muted-foreground`}>
+          {models.length}/{max}
+        </span>
+      </div>
+
+      <div className="space-y-1">
+        {models.map((m) => {
+          const isActive = m.id === activeId;
+          return (
+            <div
+              key={m.id}
+              className={`flex items-center gap-1 rounded-md border ${padding} transition-colors cursor-pointer ${
+                isActive
+                  ? 'border-primary bg-primary/10'
+                  : 'border-border bg-muted/30 hover:bg-muted/50'
+              }`}
+              onClick={() => setActive(m.id)}
+            >
+              <div
+                className="h-2.5 w-2.5 shrink-0 rounded-full ring-1 ring-foreground/20"
+                style={{ backgroundColor: m.color }}
+                title="Cor da peça"
+              />
+              <Box className={`h-3 w-3 shrink-0 ${isActive ? 'text-primary' : 'text-muted-foreground'}`} />
+              <span className={`flex-1 truncate font-mono ${textSize} ${isActive ? 'text-foreground font-semibold' : 'text-muted-foreground'}`}>
+                {m.fileName}
+              </span>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5 shrink-0"
+                onClick={(e) => { e.stopPropagation(); toggleVisible(m.id); }}
+                title={m.visible ? 'Ocultar' : 'Exibir'}
+              >
+                {m.visible ? <Eye className="h-3 w-3" /> : <EyeOff className="h-3 w-3 text-muted-foreground" />}
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5 shrink-0"
+                onClick={(e) => { e.stopPropagation(); toggleLocked(m.id); }}
+                title={m.locked ? 'Destravar' : 'Travar'}
+              >
+                {m.locked ? <Lock className="h-3 w-3 text-warning" /> : <Unlock className="h-3 w-3 text-muted-foreground" />}
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5 shrink-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  if (models.length >= max) {
+                    toast.error(`Limite de ${max} peças atingido`);
+                    return;
+                  }
+                  duplicate(m.id);
+                }}
+                title="Duplicar"
+              >
+                <Copy className="h-3 w-3" />
+              </Button>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-5 w-5 shrink-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  removeModel(m.id);
+                  toast.success(`"${m.fileName}" removido`);
+                }}
+                title="Remover"
+              >
+                <Trash2 className="h-3 w-3 text-destructive" />
+              </Button>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}