refactor: Update dropdown items to include active state, enhance List and DropDownList components, and improve sidebar styles for better layout and accessibility

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

@@ -3,7 +3,6 @@ import List from "./List";
 import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons";
 import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
 import { useFloorItems, useZones } from "../../../store/store";
-import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore";
 
 interface DropDownListProps {
   value?: string; // Value to display in the DropDownList
@@ -17,6 +16,17 @@ interface DropDownListProps {
   remove?: boolean;
 }
 
+interface Zone {
+  zoneId: string;
+  zoneName: string;
+  points: [number, number, number][]; // polygon vertices
+}
+interface ZoneData {
+  id: string;
+  name: string;
+  assets: { id: string; name: string; position?: []; rotation?: {} }[];
+}
+
 const DropDownList: React.FC<DropDownListProps> = ({
   value = "Dropdown",
   items = [],
@@ -33,38 +43,30 @@ const DropDownList: React.FC<DropDownListProps> = ({
   remove,
 }) => {
   const [isOpen, setIsOpen] = useState<boolean>(defaultOpen);
-  const { zones, setZones } = useZones();
+  const { zones } = useZones();
 
   const handleToggle = () => {
     setIsOpen((prev) => !prev); // Toggle the state
   };
-  interface Asset {
-    id: string;
-    name: string;
-    position: [number, number, number]; // x, y, z
-  }
 
-  interface Zone {
-    zoneId: string;
-    zoneName: string;
-    points: [number, number, number][]; // polygon vertices
-  }
-  interface ZoneData {
-    id: string;
-    name: string;
-    assets: { id: string; name: string; position?: []; rotation?: {} }[];
-  }
   const [zoneDataList, setZoneDataList] = useState<ZoneData[]>([]);
   const { floorItems } = useFloorItems();
 
-  const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => {
+  const isPointInsidePolygon = (
+    point: [number, number],
+    polygon: [number, number][]
+  ) => {
     let inside = false;
     for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
-      const xi = polygon[i][0], zi = polygon[i][1];
-      const xj = polygon[j][0], zj = polygon[j][1];
+      const xi = polygon[i][0],
+        zi = polygon[i][1];
+      const xj = polygon[j][0],
+        zj = polygon[j][1];
 
-      const intersect = ((zi > point[1]) !== (zj > point[1])) &&
-        (point[0] < (xj - xi) * (point[1] - zi) / (zj - zi + 0.000001) + xi);
+      const intersect =
+        // eslint-disable-next-line no-mixed-operators
+        zi > point[1] !== zj > point[1] &&
+        point[0] < ((xj - xi) * (point[1] - zi)) / (zj - zi + 0.000001) + xi;
 
       if (intersect) inside = !inside;
     }
@@ -73,18 +75,21 @@ const DropDownList: React.FC<DropDownListProps> = ({
 
   useEffect(() => {
     const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => {
-      const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][];
+      const polygon2D = zone.points.map((p: [number, number, number]) => [
+        p[0],
+        p[2],
+      ]);
 
       const assetsInZone = floorItems
         .filter((item: any) => {
           const [x, , z] = item.position;
-          return isPointInsidePolygon([x, z], polygon2D);
+          return isPointInsidePolygon([x, z], polygon2D as [number, number][]);
         })
         .map((item: any) => ({
           id: item.modeluuid,
           name: item.modelname,
           position: item.position,
-          rotation: item.rotation
+          rotation: item.rotation,
         }));
 
       return {
@@ -99,9 +104,9 @@ const DropDownList: React.FC<DropDownListProps> = ({
   return (
     <div className="dropdown-list-container">
       <div className="head">
-        <div className="value" onClick={handleToggle}>
+        <button className="value" onClick={handleToggle}>
           {value}
-        </div>
+        </button>
         <div className="options">
           {showFocusIcon && (
             <div className="focus option">
@@ -118,13 +123,13 @@ const DropDownList: React.FC<DropDownListProps> = ({
               <KebabMenuListMultiSelect items={kebabMenuItems} />
             </div>
           )}
-          <div
+          <button
             className="collapse-icon option"
             style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}
             onClick={handleToggle}
           >
             <ArrowIcon />
-          </div>
+          </button>
         </div>
       </div>
       {isOpen && (