From 2e3971102fec1c4e9620c7a72e66012ea36ea92c Mon Sep 17 00:00:00 2001
From: Jerald-Golden-B <jerald@hexrfactory.com>
Date: Mon, 29 Sep 2025 14:29:59 +0530
Subject: [PATCH] code refactored

---
 .../components/layout/sidebarLeft/Outline.tsx |   3 +-
 .../layout/sidebarLeft/SideBarLeft.tsx        | 131 ++++++++----------
 app/src/components/ui/list/DropDownList.tsx   |  40 +++---
 3 files changed, 80 insertions(+), 94 deletions(-)

diff --git a/app/src/components/layout/sidebarLeft/Outline.tsx b/app/src/components/layout/sidebarLeft/Outline.tsx
index f755e04..d292517 100644
--- a/app/src/components/layout/sidebarLeft/Outline.tsx
+++ b/app/src/components/layout/sidebarLeft/Outline.tsx
@@ -23,7 +23,6 @@ const Outline: React.FC = () => {
     // const [buildingsList, setBuildingsList] = useState<{ id: string; name: string }[]>([]);
     // const [isLayersOpen, setIsLayersOpen] = useState(true);
     // const [isBuildingsOpen, setIsBuildingsOpen] = useState(false);
-    const [isZonesOpen, setIsZonesOpen] = useState(true);
     const { assetStore, zoneStore } = useSceneContext();
     const { assets } = assetStore();
     const { zones } = zoneStore();
@@ -100,7 +99,7 @@ const Outline: React.FC = () => {
                     </section> */}
                     <section className="outline-section overflow">
                         {/* <DropDownList value="Buildings" items={buildingsList} isOpen={isBuildingsOpen} onToggle={() => setIsBuildingsOpen((prev) => !prev)} showKebabMenu={false} showAddIcon={false} /> */}
-                        <DropDownList value="Zones" items={sceneAssetsDataList} isOpen={isZonesOpen} onToggle={() => setIsZonesOpen((prev) => !prev)} showKebabMenu={false} showAddIcon={false} />
+                        <DropDownList header="Zones" type="Zones" items={sceneAssetsDataList} isDefaultOpen={true} showKebabMenu={false} showAddIcon={false} />
                     </section>
                 </div>
             )}
diff --git a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
index f50be07..fc84dc6 100644
--- a/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
+++ b/app/src/components/layout/sidebarLeft/SideBarLeft.tsx
@@ -11,89 +11,68 @@ import Search from "../../ui/inputs/Search";
 import { useIsComparing } from "../../../store/builder/store";
 
 const SideBarLeft: React.FC = () => {
-  const [activeOption, setActiveOption] = useState("Widgets");
+    const [activeOption, setActiveOption] = useState("Widgets");
 
-  const { toggleUILeft } = useToggleStore();
-  const { activeModule } = useModuleStore();
+    const { toggleUILeft } = useToggleStore();
+    const { activeModule } = useModuleStore();
 
-  const { isComparing } = useIsComparing();
+    const { isComparing } = useIsComparing();
 
-  // Reset activeOption whenever activeModule changes
-  useEffect(() => {
-    setActiveOption("Outline");
-    if (activeModule === "visualization") setActiveOption("Widgets");
-  }, [activeModule]);
+    // Reset activeOption whenever activeModule changes
+    useEffect(() => {
+        setActiveOption("Outline");
+        if (activeModule === "visualization") setActiveOption("Widgets");
+    }, [activeModule]);
 
-  const handleToggleClick = (option: string) => {
-    setActiveOption(option); // Update the active option
-  };
+    const handleToggleClick = (option: string) => {
+        setActiveOption(option); // Update the active option
+    };
 
-  const handleSearchChange = (value: string) => {
-    // Log the search value for now
-    // console.log(value);
-  };
+    const handleSearchChange = (value: string) => {
+        // Log the search value for now
+        // console.log(value);
+    };
 
-  return (
-    <div
-      className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || activeModule !== "simulation") ? "open" : "closed"
-        }`}
-    >
-      <Header />
-      {toggleUILeft && (
-        <div className={`sidebar-left-container `}>
-          {(() => {
-            if (activeModule === "visualization") {
-              return (
-                <>
-                  <ToggleHeader
-                    options={["Widgets", "Templates"]}
-                    activeOption={activeOption}
-                    handleClick={handleToggleClick}
-                  />
-                  <Search onChange={handleSearchChange} />
-                  <div className="sidebar-left-content-container">
-                    {activeOption === "Widgets" ? <Widgets /> : <Templates />}
-                  </div>
-                </>
-              );
-            } else if (activeModule === "market") {
-              return <></>;
-            } else if (activeModule === "builder") {
-              return (
-                <>
-                  <ToggleHeader
-                    options={["Outline", "Assets"]}
-                    activeOption={activeOption}
-                    handleClick={handleToggleClick}
-                  />
-                  <div className="sidebar-left-content-container">
-                    {activeOption === "Outline" ? <Outline /> : <Assets />}
-                  </div>
-                </>
-              );
-            } else {
-              return (
-                <>
-                  {!isComparing && (
-                    <>
-                      <ToggleHeader
-                        options={["Outline"]}
-                        activeOption={activeOption}
-                        handleClick={handleToggleClick}
-                      />
-                      <div className="sidebar-left-content-container">
-                        {activeOption === "Outline" ? <Outline /> : <Assets />}
-                      </div>
-                    </>
-                  )}
-                </>
-              );
-            }
-          })()}
+    return (
+        <div className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || activeModule !== "simulation") ? "open" : "closed"}`}>
+            <Header />
+            {toggleUILeft && (
+                <div className={`sidebar-left-container `}>
+                    {(() => {
+                        if (activeModule === "visualization") {
+                            return (
+                                <>
+                                    <ToggleHeader options={["Widgets", "Templates"]} activeOption={activeOption} handleClick={handleToggleClick} />
+                                    <Search onChange={handleSearchChange} />
+                                    <div className="sidebar-left-content-container">{activeOption === "Widgets" ? <Widgets /> : <Templates />}</div>
+                                </>
+                            );
+                        } else if (activeModule === "market") {
+                            return <></>;
+                        } else if (activeModule === "builder") {
+                            return (
+                                <>
+                                    <ToggleHeader options={["Outline", "Assets"]} activeOption={activeOption} handleClick={handleToggleClick} />
+                                    <div className="sidebar-left-content-container">{activeOption === "Outline" ? <Outline /> : <Assets />}</div>
+                                </>
+                            );
+                        } else {
+                            return (
+                                <>
+                                    {!isComparing && (
+                                        <>
+                                            <ToggleHeader options={["Outline"]} activeOption={activeOption} handleClick={handleToggleClick} />
+                                            <div className="sidebar-left-content-container">{activeOption === "Outline" ? <Outline /> : <Assets />}</div>
+                                        </>
+                                    )}
+                                </>
+                            );
+                        }
+                    })()}
+                </div>
+            )}
         </div>
-      )}
-    </div>
-  );
+    );
 };
 
 export default SideBarLeft;
diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx
index b6bef8a..776672a 100644
--- a/app/src/components/ui/list/DropDownList.tsx
+++ b/app/src/components/ui/list/DropDownList.tsx
@@ -4,61 +4,69 @@ import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
 import List from "./OutlineList/ListNew";
 
 interface DropDownListProps {
-    value?: string;
+    header?: string;
+    type?: "Zones" | "Assets";
     items?: { id: string; name: string }[];
     showFocusIcon?: boolean;
+    onFocusClick?: () => void;
     showAddIcon?: boolean;
+    onAddClick?: () => void;
     showKebabMenu?: boolean;
+    onKebabMenuSelect?: (selectedItems: string[]) => void;
     kebabMenuItems?: { id: string; name: string }[];
-    remove?: boolean;
-    isOpen: boolean;
-    onToggle: () => void;
+    removeIcon?: boolean;
+    isDefaultOpen: boolean;
 }
 
 const DropDownList: React.FC<DropDownListProps> = ({
-    value = "Dropdown",
+    header = "Dropdown",
     items = [],
+    type = "Assets",
     showFocusIcon = false,
+    onFocusClick,
     showAddIcon = true,
+    onAddClick,
     showKebabMenu = true,
+    onKebabMenuSelect,
+    removeIcon = false,
     kebabMenuItems = [
         { id: "Buildings", name: "Buildings" },
         { id: "Paths", name: "Paths" },
         { id: "Zones", name: "Zones" },
     ],
-    remove,
-    isOpen,
-    onToggle,
+    isDefaultOpen,
 }) => {
+    const [isOpen, setIsOpen] = React.useState(isDefaultOpen);
+
     return (
         <div className="dropdown-list-container">
-            <div className="head" onClick={onToggle}>
-                <div className="value">{value}</div>
+            <div className="head" onClick={() => setIsOpen((prev) => !prev)}>
+                <div className="value">{header}</div>
                 <div className="options">
                     {showFocusIcon && (
-                        <div className="focus option">
+                        <div className="focus option" onClick={onFocusClick}>
                             <FocusIcon />
                         </div>
                     )}
                     {showAddIcon && (
-                        <div className="add option">
+                        <div className="add option" onClick={onAddClick}>
                             <AddIcon />
                         </div>
                     )}
                     {showKebabMenu && (
                         <div className="kebab-menu option">
-                            <KebabMenuListMultiSelect items={kebabMenuItems} />
+                            <KebabMenuListMultiSelect items={kebabMenuItems} onSelectionChange={onKebabMenuSelect} />
                         </div>
                     )}
-                    <button id="collapse-btn" title="collapse-btn" className="collapse-icon option" style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}>
+                    <button id="collapse-btn" title="collapse-btn" className="collapse-icon option" style={{ transform: isDefaultOpen ? "rotate(0deg)" : "rotate(-90deg)" }}>
                         <ArrowIcon />
                     </button>
                 </div>
             </div>
 
-            {isOpen && (
+            {isDefaultOpen && isOpen && (
                 <div className="lists-container">
-                    <List items={items} remove={remove} />
+                    <List items={items} remove={removeIcon} />
                 </div>
             )}
         </div>