Add SelectFloorPlan component to Project page and style updates for better layout

app/src/pages/Project.tsx

@@ -31,6 +31,7 @@ import { useLogger } from "../components/ui/log/LoggerContext";
 import RenderOverlay from "../components/templates/Overlay";
 import LogList from "../components/ui/log/LogList";
 import Footer from "../components/footer/Footer";
+import SelectFloorPlan from "../components/temporary/SelectFloorPlan";
 
 const Project: React.FC = () => {
   let navigate = useNavigate();
@@ -96,6 +97,7 @@ const Project: React.FC = () => {
           )}
           <RealTimeVisulization />
           {activeModule === "market" && <MarketPlace />}
+          {activeModule === "builder" && !toggleThreeD && <SelectFloorPlan />}
           {activeModule !== "market" && <Tools />}
           {isPlaying && activeModule === "simulation" && <SimulationPlayer />}
         </>

app/src/styles/scene/scene.scss

@@ -19,7 +19,7 @@
     border-radius: #{$border-radius-medium};
     box-shadow: var(--box-shadow-light);
   }
-  .area{
+  .area {
     background: #008cff;
   }
 }
@@ -28,12 +28,33 @@
   pointer-events: none;
 }
 
-
 // temp
-.select-floorplane-wrapper{
-  .presets-container{
-    .preset{
-      
+.select-floorplane-wrapper {
+  position: absolute;
+  @include flex-center;
+  gap: 12px;
+  top: 0;
+  left: 50%;
+  padding: 8px;
+  padding-left: 14px;
+  background: var(--background-color);
+  backdrop-filter: blur(12px);
+  border-radius: #{$border-radius-large};
+  outline: 1px solid var(--border-color);
+  transform: translate(-50%, 12px);
+  z-index: 100;
+  .presets-container {
+    @include flex-center;
+    gap: 4px;
+    .preset {
+      background: var(--background-color);
+      padding: 2px 8px;
+      border-radius: #{$border-radius-large};
+      outline: 1px solid var(--border-color);
+    }
+    .active{
+      background: var(--background-color-accent);
+      color: var(--text-button-color);
     }
   }
-}
+}