code refactor

app/src/components/layout/sidebarLeft/Outline.tsx

@@ -99,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 header="Zones" type="Zones" items={sceneAssetsDataList} isDefaultOpen={true} showKebabMenu={false} showAddIcon={false} />
+                        <DropDownList header="Zones" items={sceneAssetsDataList} isDefaultOpen={true} showKebabMenu={false} showAddIcon={false} />
                     </section>
                 </div>
             )}

app/src/components/ui/list/DropDownList.tsx

@@ -5,7 +5,6 @@ import List from "./OutlineList/ListNew";
 
 interface DropDownListProps {
     header?: string;
-    type?: "Zones" | "Assets";
     items?: { id: string; name: string }[];
     showFocusIcon?: boolean;
     onFocusClick?: () => void;
@@ -21,7 +20,6 @@ interface DropDownListProps {
 const DropDownList: React.FC<DropDownListProps> = ({
     header = "Dropdown",
     items = [],
-    type = "Assets",
     showFocusIcon = false,
     onFocusClick,
     showAddIcon = true,

app/src/components/ui/list/KebebMenuList.tsx

@@ -28,11 +28,7 @@ const KebabMenuList: React.FC<KebabMenuListProps> = ({ items, onSelect }) => {
             {isOpen && (
                 <div className="menu-list">
                     {items.map((item, index) => (
-            <div
-              key={index}
-              className="menu-item"
-              onClick={() => handleItemClick(item)}
-            >
+                        <div key={index} className="menu-item" onClick={() => handleItemClick(item)}>
                             {item}
                         </div>
                     ))}

app/src/components/ui/list/KebebMenuListMultiSelect.tsx

@@ -6,10 +6,7 @@ interface KebabMenuListMultiSelectProps {
     onSelectionChange?: (selectedItems: string[]) => void; // Callback for selected items
 }
 
-const KebabMenuListMultiSelect: React.FC<KebabMenuListMultiSelectProps> = ({
-  items,
-  onSelectionChange,
-}) => {
+const KebabMenuListMultiSelect: React.FC<KebabMenuListMultiSelectProps> = ({ items, onSelectionChange }) => {
     const [isOpen, setIsOpen] = useState(false);
     const [selectedItems, setSelectedItems] = useState<string[]>([]);
     const menuRef = useRef<HTMLDivElement>(null); // Ref to track the container
@@ -55,21 +52,9 @@ const KebabMenuListMultiSelect: React.FC<KebabMenuListMultiSelectProps> = ({
             {isOpen && (
                 <div className="menu-list">
                     {items.map((item) => (
-            <div
-              key={item.id}
-              className={`menu-item ${
-                selectedItems.includes(item.id) ? "selected" : ""
-              }`}
-              onClick={() => handleItemToggle(item.id)}
-            >
-              <input
-                type="checkbox"
-                checked={selectedItems.includes(item.id)}
-                onChange={() => handleItemToggle(item.id)}
-              />
-              <div className="icon-container">
-                {selectedItems.includes(item.id) && <TickIcon />}
-              </div>
+                        <div key={item.id} className={`menu-item ${selectedItems.includes(item.id) ? "selected" : ""}`} onClick={() => handleItemToggle(item.id)}>
+                            <input type="checkbox" checked={selectedItems.includes(item.id)} onChange={() => handleItemToggle(item.id)} />
+                            <div className="icon-container">{selectedItems.includes(item.id) && <TickIcon />}</div>
                             {item.name}
                         </div>
                     ))}

app/src/types/uiTypes.d.ts

@@ -78,3 +78,60 @@ interface Tutorial {
     thumbnail?: string;
     createdAt: string;
 }
+
+// Base interface for all list items
+interface BaseListItem {
+    id: string;
+    name: string;
+    type: "zone" | "asset" | "wall" | "floor" | "point" | "decal";
+    isLocked?: boolean;
+    isVisible?: boolean;
+    isActive?: boolean;
+    canEdit?: boolean;
+    children?: ListItem[]; // For nested relationships
+    metadata?: {
+        position?: [number, number, number];
+        rotation?: [number, number, number];
+        scale?: [number, number, number];
+        color?: string;
+        height?: number;
+        thickness?: number;
+        // ... other type-specific properties
+    };
+}
+
+// Extended interfaces for specific types
+interface ZoneListItem extends BaseListItem {
+    type: "zone";
+    metadata: {
+        zoneHeight: number;
+        zoneColor: string;
+        viewPortPosition: [number, number, number];
+        viewPortTarget: [number, number, number];
+    };
+}
+
+interface AssetListItem extends BaseListItem {
+    type: "asset";
+    metadata: {
+        modelUuid: string;
+        position: [number, number, number];
+        rotation: [number, number, number];
+        scale: [number, number, number];
+        isCollidable: boolean;
+        opacity: number;
+        animations?: string[];
+    };
+}
+
+interface WallListItem extends BaseListItem {
+    type: "wall";
+    metadata: {
+        wallThickness: number;
+        wallHeight: number;
+        outsideMaterial: string;
+        insideMaterial: string;
+    };
+}
+
+type ListItem = ZoneListItem | AssetListItem | WallListItem | BaseListItem;