Refactor SelectFloorPlan and LayoutModel components to use Zustand for layout management and improve code clarity

app/src/components/temporary/SelectFloorPlan.tsx

@@ -1,23 +1,24 @@
-import React, { useState } from "react";
+import React from "react";
+import useLayoutStore from "../../store/builder/uselayoutStore";
 
 const SelectFloorPlan: React.FC = () => {
-  const [preset, setPreset] = useState("");
+  const { currentLayout, setLayout } = useLayoutStore();
   return (
     <div className="select-floorplane-wrapper">
       Don't have an idea? Use these presets!
       <div className="presets-container">
         <button
-          className={`preset ${preset === "1" ? "active" : ""}`}
+          className={`preset ${currentLayout === "layout1" ? "active" : ""}`}
           onClick={() => {
-            setPreset("1");
+            setLayout("layout1");
           }}
         >
           Preset 1
         </button>
         <button
-          className={`preset ${preset === "2" ? "active" : ""}`}
+          className={`preset ${currentLayout === "layout2" ? "active" : ""}`}
           onClick={() => {
-            setPreset("2");
+            setLayout("layout2");
           }}
         >
           Preset 2

app/src/modules/builder/layout/layoutImage.tsx

@@ -11,25 +11,24 @@ const modelPaths: Record<string, string> = {
 };
 
 function LayoutModel() {
-    const { toggleView } = useToggleView();
+  const { toggleView } = useToggleView();
-    const { currentLayout } = useLayoutStore();
+  const { currentLayout } = useLayoutStore();
-    if (!currentLayout) return null;
 
-    const path = modelPaths[currentLayout];
+  // Always call the hook, but ensure it has a valid fallback
-    const gltf = useGLTF(path);
+  const path = currentLayout ? modelPaths[currentLayout] : modelPaths.layout1;
-    const cloned = useMemo(() => gltf?.scene?.clone(), [gltf]);
 
-    return (
+  // Explicitly cast the return type to ensure it's not an array
-        <>
+  const gltf = useGLTF(path) as any;
-            {toggleView &&
+
-                <group position={[0,0,0]} scale={[0,0,0]} dispose={null}>
+  const cloned = useMemo(() => gltf.scene.clone(), [gltf]);
-                    <primitive
+
-                        object={cloned}
+  if (!currentLayout || !toggleView) return null;
-                    />
+
-                </group>
+  return (
-            }
+    <group position={[0, 0, 0]} dispose={null}>
-        </>
+      <primitive object={cloned} />
-    );
+    </group>
+  );
 }
 
 export default LayoutModel;