Enhance Footer component to toggle shortcut visibility with Escape key; integrate OuterClick for improved interaction

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">

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",