From 58ced3cc2d9090fb00cfed6087a2950d0b8cb45d Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Sat, 12 Apr 2025 14:12:21 +0700
Subject: [PATCH] camera naming fix, button text truncate

---
 .../components/reusable/Popover/Popover.tsx   | 16 ++++---
 .../CameraSettingsModal.tsx                   | 43 +++++++++++++++----
 .../PageEnigma/comps/PromptBox/PromptBox.tsx  |  1 +
 3 files changed, 46 insertions(+), 14 deletions(-)

diff --git a/frontend/apps/editor3d/app/components/reusable/Popover/Popover.tsx b/frontend/apps/editor3d/app/components/reusable/Popover/Popover.tsx
index 3d55b39045..7b1e9e0d2a 100644
--- a/frontend/apps/editor3d/app/components/reusable/Popover/Popover.tsx
+++ b/frontend/apps/editor3d/app/components/reusable/Popover/Popover.tsx
@@ -86,9 +86,15 @@ export const PopoverMenu = ({
       {({ close }) => (
         <>
           <Popover.Button className={className}>
-            {triggerIcon}
-            {mode === "toggle" && selectedItem ? selectedItem.label : null}
-            {mode === "default" && triggerLabel ? triggerLabel : null}
+            <>
+              {triggerIcon}
+              {mode === "toggle" && selectedItem ? (
+                <span className="truncate">{selectedItem.label}</span>
+              ) : null}
+              {mode === "default" && triggerLabel ? (
+                <span className="truncate">{triggerLabel}</span>
+              ) : null}
+            </>
           </Popover.Button>
 
           <div
@@ -166,9 +172,9 @@ export const PopoverMenu = ({
                           variant="secondary"
                           disabled={item.disabled}
                         >
-                          <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-2 truncate">
                             {showIconsInList && item.icon}
-                            {item.label}
+                            <span className="truncate">{item.label}</span>
                           </div>
                           {mode === "toggle" && (
                             <input
diff --git a/frontend/apps/editor3d/app/pages/PageEnigma/comps/CameraSettingsModal/CameraSettingsModal.tsx b/frontend/apps/editor3d/app/pages/PageEnigma/comps/CameraSettingsModal/CameraSettingsModal.tsx
index 3b047007ef..98bcb0b1f9 100644
--- a/frontend/apps/editor3d/app/pages/PageEnigma/comps/CameraSettingsModal/CameraSettingsModal.tsx
+++ b/frontend/apps/editor3d/app/pages/PageEnigma/comps/CameraSettingsModal/CameraSettingsModal.tsx
@@ -41,6 +41,15 @@ export const CameraSettingsModal = ({
 }: CameraSettingsModalProps) => {
   const selectedCamera = cameras.find((cam) => cam.id === selectedCameraId);
   const [isDragging, setIsDragging] = useState(false);
+  const [tempCameraName, setTempCameraName] = useState<string>("");
+  const [editingCameraId, setEditingCameraId] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (selectedCamera) {
+      setTempCameraName(selectedCamera.label);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedCamera?.id]);
 
   useEffect(() => {
     const handlePointerUp = () => {
@@ -67,16 +76,29 @@ export const CameraSettingsModal = ({
     onCameraFocalLengthChange(id, value);
   };
 
+  const handleNameBlur = () => {
+    if (selectedCamera && tempCameraName.trim() !== "") {
+      onCameraNameChange(selectedCamera.id, tempCameraName);
+    } else if (selectedCamera) {
+      setTempCameraName(selectedCamera.label);
+    }
+    setEditingCameraId(null);
+  };
+
+  const handleNameFocus = (id: string) => {
+    setEditingCameraId(id);
+  };
+
   return (
     <TransitionDialogue
       isOpen={isOpen}
       onClose={onClose}
       className={twMerge(
-        "h-[500px] max-w-3xl transition-opacity duration-200",
-        isDragging ? "opacity-30 hover:opacity-20" : "opacity-100",
+        "h-[500px] max-w-3xl duration-200",
+        isDragging ? "opacity-10" : "opacity-100",
       )}
       backdropClassName={twMerge(
-        "transition-opacity duration-200",
+        "duration-200",
         isDragging ? "opacity-0" : "opacity-100",
       )}
       childPadding={false}
@@ -99,14 +121,16 @@ export const CameraSettingsModal = ({
             {cameras.map((camera) => (
               <button
                 key={camera.id}
-                className={`w-full rounded-lg p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/40 ${
+                className={`h-9 w-full rounded-lg p-2 text-left transition-colors duration-100 hover:bg-[#63636B]/40 ${
                   camera.id === selectedCameraId ? "bg-[#63636B]/40" : ""
                 }`}
                 onClick={() => handleCameraSelect(camera)}
               >
                 <div className="flex items-center gap-2.5 text-sm">
                   {camera.icon}
-                  {camera.label}
+                  {editingCameraId === camera.id
+                    ? tempCameraName
+                    : camera.label}
                 </div>
               </button>
             ))}
@@ -154,10 +178,11 @@ export const CameraSettingsModal = ({
                   <Input
                     id="camera-name"
                     type="text"
-                    value={selectedCamera?.label || ""}
-                    onChange={(e) =>
-                      selectedCamera &&
-                      onCameraNameChange(selectedCamera.id, e.target.value)
+                    value={tempCameraName}
+                    onChange={(e) => setTempCameraName(e.target.value)}
+                    onBlur={handleNameBlur}
+                    onFocus={() =>
+                      selectedCamera && handleNameFocus(selectedCamera.id)
                     }
                     className="text-sm"
                   />
diff --git a/frontend/apps/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx b/frontend/apps/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
index f408398804..8203cc5294 100644
--- a/frontend/apps/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
+++ b/frontend/apps/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
@@ -652,6 +652,7 @@ export const PromptBox = () => {
                   panelTitle="Camera"
                   panelActionLabel="Settings"
                   onPanelAction={() => setIsCameraSettingsOpen(true)}
+                  buttonClassName="max-w-[130px] h-9"
                 />
               </Tooltip>
               <Tooltip