From 0a430e5c609fd70ae1388159067f8878b5c1665f Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Fri, 15 May 2026 13:06:30 +0000
Subject: [PATCH] Changes

Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
---
 src/components/SceneModelList.tsx | 46 +++++++++++++++++++++++++++----
 1 file changed, 41 insertions(+), 5 deletions(-)

diff --git a/src/components/SceneModelList.tsx b/src/components/SceneModelList.tsx
index 2fc6487..fb14696 100644
--- a/src/components/SceneModelList.tsx
+++ b/src/components/SceneModelList.tsx
@@ -65,11 +65,47 @@ export function SceneModelList({ compact = false }: SceneModelListProps) {
               }`}
               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"
-              />
+              <Popover>
+                <PopoverTrigger asChild>
+                  <button
+                    type="button"
+                    className="h-2.5 w-2.5 shrink-0 rounded-full ring-1 ring-foreground/20 hover:ring-2 hover:ring-primary cursor-pointer"
+                    style={{ backgroundColor: m.color }}
+                    title="Trocar cor da peça"
+                    onClick={(e) => e.stopPropagation()}
+                  />
+                </PopoverTrigger>
+                <PopoverContent
+                  className="w-auto p-2"
+                  side="right"
+                  align="start"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <p className="font-mono text-[10px] uppercase tracking-widest text-muted-foreground mb-2">
+                    Cor da peça
+                  </p>
+                  <div className="grid grid-cols-5 gap-1.5">
+                    {COLOR_PALETTE.map((c) => {
+                      const selected = c.toLowerCase() === m.color.toLowerCase();
+                      return (
+                        <button
+                          key={c}
+                          type="button"
+                          className="h-6 w-6 rounded-md ring-1 ring-foreground/20 hover:scale-110 transition-transform flex items-center justify-center"
+                          style={{ backgroundColor: c }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setModelColor(m.id, c);
+                          }}
+                          title={c}
+                        >
+                          {selected && <Check className="h-3 w-3" style={{ color: c === '#ffffff' ? '#000' : '#fff' }} />}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </PopoverContent>
+              </Popover>
               <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}