Refactor Footer component to integrate OuterClick for better shortcut management; add SelectFloorPlan component with preset options

app/src/components/footer/Footer.tsx

@@ -10,14 +10,19 @@ import {
 import ShortcutHelper from "./shortcutHelper";
 import { useShortcutStore } from "../../store/builder/store";
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
+import OuterClick from "../../utils/outerClick";
 
 const Footer: React.FC = () => {
   const { logs, setIsLogListVisible } = useLogger();
   const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
 
-  const { showShortcuts } = useShortcutStore();
+  const { showShortcuts, setShowShortcuts } = useShortcutStore();
   const { isPlaying } = usePlayButtonStore();
 
+  OuterClick({
+    contextClassName: ["shortcut-helper-overlay"],
+    setMenuVisible: () => setShowShortcuts(false),
+  });
 
   return (
     <div className="footer-container">

app/src/components/temporary/SelectFloorPlan.tsx

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+
+const SelectFloorPlan: React.FC = () => {
+  const [preset, setPreset] = useState("");
+  return (
+    <div className="select-floorplane-wrapper">
+      Don't have an idea? Use these presets!
+      <div className="presets-container">
+        <button
+          className={`preset ${preset === "1" ? "active" : ""}`}
+          onClick={() => {
+            setPreset("1");
+          }}
+        >
+          Preset 1
+        </button>
+        <button
+          className={`preset ${preset === "2" ? "active" : ""}`}
+          onClick={() => {
+            setPreset("2");
+          }}
+        >
+          Preset 2
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default SelectFloorPlan;

app/src/styles/scene/scene.scss

@@ -27,3 +27,13 @@
 .pointer-none {
   pointer-events: none;
 }
+
+
+// temp
+.select-floorplane-wrapper{
+  .presets-container{
+    .preset{
+      
+    }
+  }
+}