From a5cd65898def0743b24b9cb97ae8cc779041c430 Mon Sep 17 00:00:00 2001
From: Vishnu <vishnu@hexrfactory.com>
Date: Tue, 13 May 2025 18:13:48 +0530
Subject: [PATCH] Refactor Footer component to integrate OuterClick for better
 shortcut management; add SelectFloorPlan component with preset options

---
 app/src/components/footer/Footer.tsx          |  7 ++++-
 .../components/temporary/SelectFloorPlan.tsx  | 30 +++++++++++++++++++
 app/src/styles/scene/scene.scss               | 10 +++++++
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 app/src/components/temporary/SelectFloorPlan.tsx

diff --git a/app/src/components/footer/Footer.tsx b/app/src/components/footer/Footer.tsx
index be52a92..abb3a97 100644
--- a/app/src/components/footer/Footer.tsx
+++ b/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">
diff --git a/app/src/components/temporary/SelectFloorPlan.tsx b/app/src/components/temporary/SelectFloorPlan.tsx
new file mode 100644
index 0000000..4e9cb1a
--- /dev/null
+++ b/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;
diff --git a/app/src/styles/scene/scene.scss b/app/src/styles/scene/scene.scss
index ff7fec3..a9341c0 100644
--- a/app/src/styles/scene/scene.scss
+++ b/app/src/styles/scene/scene.scss
@@ -27,3 +27,13 @@
 .pointer-none {
   pointer-events: none;
 }
+
+
+// temp
+.select-floorplane-wrapper{
+  .presets-container{
+    .preset{
+      
+    }
+  }
+}
\ No newline at end of file