From 62fcf70176c3b5edbd3ca520d2abfa969a517feb Mon Sep 17 00:00:00 2001
From: bflatastic <bombayapirat@gmail.com>
Date: Sat, 12 Apr 2025 13:53:37 +0700
Subject: [PATCH] gray out add button if camera full (max out at 6)

---
 .../app/components/reusable/Popover/Popover.tsx        | 10 +++++++++-
 .../app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/apps/editor3d/app/components/reusable/Popover/Popover.tsx b/frontend/apps/editor3d/app/components/reusable/Popover/Popover.tsx
index 0e8b563d9a..3d55b39045 100644
--- a/frontend/apps/editor3d/app/components/reusable/Popover/Popover.tsx
+++ b/frontend/apps/editor3d/app/components/reusable/Popover/Popover.tsx
@@ -17,6 +17,7 @@ interface PopoverMenuProps {
   onAdd?: () => void;
   triggerIcon?: ReactNode;
   showAddButton?: boolean;
+  disableAddButton?: boolean;
   showIconsInList?: boolean;
   mode?: "default" | "toggle" | "button";
   triggerLabel?: string;
@@ -36,6 +37,7 @@ export const PopoverMenu = ({
   onAdd,
   triggerIcon,
   showAddButton = false,
+  disableAddButton = false,
   showIconsInList = false,
   mode = "default",
   triggerLabel,
@@ -180,8 +182,14 @@ export const PopoverMenu = ({
                       {showAddButton && onAdd && (
                         <Button
                           variant="secondary"
-                          className="mb-0.5 mt-2 border-none bg-[#7B7B84] py-1 hover:bg-[#8c8c96]"
+                          className={twMerge(
+                            "mb-0.5 mt-2 border-none py-1",
+                            disableAddButton
+                              ? "cursor-not-allowed bg-[#7B7B84]/50 opacity-50"
+                              : "bg-[#7B7B84] hover:bg-[#8c8c96]",
+                          )}
                           onClick={onAdd}
+                          disabled={disableAddButton}
                         >
                           + Add
                         </Button>
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 105c9d8f06..f408398804 100644
--- a/frontend/apps/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
+++ b/frontend/apps/editor3d/app/pages/PageEnigma/comps/PromptBox/PromptBox.tsx
@@ -646,6 +646,7 @@ export const PromptBox = () => {
                     <FontAwesomeIcon icon={faCamera} className="h-4 w-4" />
                   }
                   showAddButton
+                  disableAddButton={cameras.value.length >= 6}
                   showIconsInList
                   mode="toggle"
                   panelTitle="Camera"