zone based assets added and 3d widgets dnd updated

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

@@ -12,10 +12,14 @@ import {
   LockIcon,
   RmoveIcon,
 } from "../../icons/ExportCommonIcons";
+import { useThree } from "@react-three/fiber";
+import { useZoneAssetId } from "../../../store/store";
 
 interface Asset {
   id: string;
   name: string;
+  position?: [number, number, number]; // Proper 3D vector
+  rotation?: { x: number; y: number; z: number }; // Proper rotation format
 }
 
 interface ZoneItem {
@@ -33,11 +37,13 @@ interface ListProps {
 const List: React.FC<ListProps> = ({ items = [], remove }) => {
   const { activeModule, setActiveModule } = useModuleStore();
   const { selectedZone, setSelectedZone } = useSelectedZoneStore();
+  const { zoneAssetId, setZoneAssetId } = useZoneAssetId();
   const { setSubModule } = useSubModuleStore();
   const [expandedZones, setExpandedZones] = useState<Record<string, boolean>>(
     {}
   );
 
+
   useEffect(() => {
     useSelectedZoneStore.getState().setSelectedZone({
       zoneName: "",
@@ -88,7 +94,9 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
       console.error("Error selecting zone:", error);
     }
   }
-
+  function handleAssetClick(asset: Asset) {
+    setZoneAssetId(asset)
+  }
   return (
     <>
       {items.length > 0 ? (
@@ -139,7 +147,7 @@ const List: React.FC<ListProps> = ({ items = [], remove }) => {
                         className="list-container asset-item"
                       >
                         <div className="list-item">
-                          <div className="value">
+                          <div className="value" onClick={() => handleAssetClick(asset)}>
                             <RenameInput value={asset.name} />
                           </div>
                           <div className="options-container">