From f2bb79f61c9e549e9ea92905159119bbd70b5c2e Mon Sep 17 00:00:00 2001
From: Nalvazhuthi <nalvazhuthi@hexrfactory.com>
Date: Tue, 13 May 2025 18:05:57 +0530
Subject: [PATCH] Enhance Footer component to toggle shortcut visibility with
 Escape key; integrate OuterClick for improved interaction

---
 app/src/components/footer/Footer.tsx                  | 11 ++++++++++-
 .../sidebarRight/versionHisory/VersionHistory.tsx     |  1 +
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/src/components/footer/Footer.tsx b/app/src/components/footer/Footer.tsx
index ae38c3a..ccda767 100644
--- a/app/src/components/footer/Footer.tsx
+++ b/app/src/components/footer/Footer.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { HelpIcon } from "../icons/DashboardIcon";
 import { useLogger } from "../ui/log/LoggerContext";
 import { GetLogIcon } from "./getLogIcons";
@@ -10,6 +10,7 @@ import {
 import ShortcutHelper from "./shortcutHelper";
 import { useShortcutStore } from "../../store/store";
 import { usePlayButtonStore } from "../../store/usePlayButtonStore";
+import OuterClick from "../../utils/outerClick";
 
 const Footer: React.FC = () => {
   const { logs, setIsLogListVisible } = useLogger();
@@ -29,12 +30,20 @@ const Footer: React.FC = () => {
         e.preventDefault();
         setShowShortcuts(!showShortcuts); // toggle visibility directly
       }
+
+      if (e.key === "Escape") {
+        setShowShortcuts(false);
+      }
     };
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [showShortcuts, setShowShortcuts]);
 
+  OuterClick({
+    contextClassName: ["shortcut-helper-overlay"],
+    setMenuVisible: () => setShowShortcuts(false),
+  });
   return (
     <div className="footer-container">
       <div className="footer-wrapper">
diff --git a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
index ca5a8de..73a630c 100644
--- a/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
+++ b/app/src/components/layout/sidebarRight/versionHisory/VersionHistory.tsx
@@ -10,6 +10,7 @@ import RenameInput from "../../../ui/inputs/RenameInput";
 
 const VersionHistory = () => {
   const userName = localStorage.getItem("userName") ?? "Anonymous";
+
   const initialVersions = [
     {
       versionName: "v1.0",