Refactor builder store and remove wall store

Refactor builder store and remove wall store

- Consolidated wall-related state management into the builder store by removing the useWallStore.
- Added new properties and setters for wall attributes (thickness, height, materials) in the builder store.
- Introduced SelectedWallProperties and WallProperties components for managing wall properties in the sidebar.
- Created a new floor store for managing floor-related state.
- Added a wall asset store for managing wall assets.
- Implemented a zone store for managing zones and their properties.
- Updated sidebar styles for better layout and appearance.

app/src/modules/builder/wall/Instances/instance/wall.tsx

@@ -1,18 +1,25 @@
 import * as THREE from 'three';
+import { Base } from '@react-three/csg';
 import { useMemo, useRef, useState } from 'react';
-import * as Constants from '../../../../../types/world/worldConstants';
+import { Decal, MeshDiscardMaterial } from '@react-three/drei';
+import { useFrame, useThree } from '@react-three/fiber';
 
 import defaultMaterial from '../../../../../assets/textures/floor/wall-tex.png';
 import material1 from '../../../../../assets/textures/floor/factory wall texture.jpg';
-import { useWallStore } from '../../../../../store/builder/useWallStore';
+
+import useModuleStore from '../../../../../store/useModuleStore';
+import { useSceneContext } from '../../../../scene/sceneContext';
 import { useWallClassification } from './helpers/useWallClassification';
-import { useFrame, useThree } from '@react-three/fiber';
-import { useWallVisibility } from '../../../../../store/builder/store';
-import { Decal } from '@react-three/drei';
-import { Base } from '@react-three/csg';
+import { useToggleView, useWallVisibility } from '../../../../../store/builder/store';
+import { useBuilderStore } from '../../../../../store/builder/useBuilderStore';
+import * as Constants from '../../../../../types/world/worldConstants';
 
 function Wall({ wall }: { readonly wall: Wall }) {
-    const { walls } = useWallStore();
+    const { wallStore } = useSceneContext();
+    const { walls } = wallStore();
+    const { togglView } = useToggleView();
+    const { setSelectedWall } = useBuilderStore();
+    const { activeModule } = useModuleStore();
     const { camera } = useThree();
     const { wallVisibility } = useWallVisibility();
     const { getWallType, isWallFlipped } = useWallClassification(walls);
@@ -67,7 +74,7 @@ function Wall({ wall }: { readonly wall: Wall }) {
             new THREE.MeshStandardMaterial({
                 color: Constants.wallConfig.defaultColor,
                 side: THREE.DoubleSide,
-                map: wall.outsideMaterial === 'Default Material`' ? defaultWallTexture : material1WallTexture,
+                map: wall.outsideMaterial === 'Default Material' ? defaultWallTexture : material1WallTexture,
             }),
         ];
     }, [defaultWallTexture, material1WallTexture, wall]);
@@ -100,6 +107,7 @@ function Wall({ wall }: { readonly wall: Wall }) {
                 geometry={geometry}
                 position={[centerX, centerY, centerZ]}
                 rotation={[0, -angle, 0]}
+                userData={wall}
             >
                 {materials.map((material, index) => (
                     <primitive key={index} visible={visible} object={material} attach={`material-${index}`} />
@@ -112,6 +120,7 @@ function Wall({ wall }: { readonly wall: Wall }) {
                             position={[decal.decalPosition[0], decal.decalPosition[1], wall.wallThickness / 2]}
                             rotation={[0, 0, decal.decalRotation]}
                             scale={[decal.decalScale, decal.decalScale, 0.001]}
+                            userData={decal}
                         >
                             <meshBasicMaterial
                                 map={material1WallTexture}
@@ -123,6 +132,22 @@ function Wall({ wall }: { readonly wall: Wall }) {
                     )
                 })}
             </Base>
+            <mesh
+                castShadow
+                geometry={geometry}
+                position={[centerX, centerY, centerZ]}
+                rotation={[0, -angle, 0]}
+                userData={wall}
+                name={`WallRaycastReference_${wall.wallUuid}`}
+                onClick={(e) => {
+                    if (visible && !togglView && activeModule === 'builder') {
+                        setSelectedWall(e.object)
+                    }
+                }}
+                onPointerMissed={() => { setSelectedWall(null) }}
+            >
+                <MeshDiscardMaterial />
+            </mesh>
         </mesh>
     );
 }

app/src/modules/builder/wall/Instances/wallInstances.tsx

@@ -2,9 +2,10 @@ import React, { useEffect, useMemo } from 'react';
 import { DoubleSide, RepeatWrapping, Shape, SRGBColorSpace, TextureLoader, Vector2, Vector3 } from 'three';
 import { Geometry } from '@react-three/csg';
 import { Html, Extrude } from '@react-three/drei';
-import { useWallStore } from '../../../../store/builder/useWallStore'
-import { useWallClassification } from './instance/helpers/useWallClassification';
+import { useLoader } from '@react-three/fiber';
+import { useSceneContext } from '../../../scene/sceneContext';
 import { useToggleView } from '../../../../store/builder/store';
+import { useWallClassification } from './instance/helpers/useWallClassification';
 import Line from '../../line/line';
 import Point from '../../point/point';
 import WallInstance from './instance/wallInstance';
@@ -12,10 +13,10 @@ import * as Constants from '../../../../types/world/worldConstants';
 
 import texturePath from "../../../../assets/textures/floor/white.png";
 import texturePathDark from "../../../../assets/textures/floor/black.png";
-import { useLoader } from '@react-three/fiber';
 
 function WallInstances() {
-    const { walls } = useWallStore();
+    const { wallStore } = useSceneContext();
+    const { walls } = wallStore();
     const { rooms } = useWallClassification(walls)
     const { toggleView } = useToggleView();