From 29bba9aef37cb18cf0199919aaf15f65bf881975 Mon Sep 17 00:00:00 2001
From: Martti Malmi <sirius@iki.fi>
Date: Thu, 23 Nov 2023 11:51:44 +0200
Subject: [PATCH] close graph on esc

---
 packages/app/src/Pages/Layout/LogoHeader.tsx | 10 ++++---
 packages/app/src/Pages/Layout/NavSidebar.tsx | 17 ++++++++----
 packages/app/src/Pages/NetworkGraph.tsx      | 29 ++++++++++++++++++--
 packages/app/src/lang.json                   |  3 ++
 packages/app/src/translations/en.json        |  1 +
 5 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/packages/app/src/Pages/Layout/LogoHeader.tsx b/packages/app/src/Pages/Layout/LogoHeader.tsx
index 0779353c..41a6433d 100644
--- a/packages/app/src/Pages/Layout/LogoHeader.tsx
+++ b/packages/app/src/Pages/Layout/LogoHeader.tsx
@@ -21,10 +21,12 @@ export function LogoHeader({ showText = false }) {
     <Link to="/" className="logo" onClick={handleLogoClick}>
       <h1 className="flex flex-row items-center">
         <img src={CONFIG.navLogo} className="w-8 h-8" />
-        {showText && <div className="md:hidden xl:inline ml-2">
-          {extra()}
-          {CONFIG.appName}
-        </div>}
+        {showText && (
+          <div className="md:hidden xl:inline ml-2">
+            {extra()}
+            {CONFIG.appName}
+          </div>
+        )}
       </h1>
       {currentSubscription && (
         <div className="flex items-center g4 text-sm font-semibold tracking-wider">
diff --git a/packages/app/src/Pages/Layout/NavSidebar.tsx b/packages/app/src/Pages/Layout/NavSidebar.tsx
index 7255bcb4..09325ca3 100644
--- a/packages/app/src/Pages/Layout/NavSidebar.tsx
+++ b/packages/app/src/Pages/Layout/NavSidebar.tsx
@@ -52,7 +52,7 @@ const getNavLinkClass = (isActive: boolean, narrow: boolean) => {
   const c = isActive
     ? "py-4 hover:no-underline flex flex-row items-center text-nostr-purple"
     : "py-4 hover:no-underline hover:text-nostr-purple flex flex-row items-center";
-  return classNames(c, { "xl:ml-1": !narrow })
+  return classNames(c, { "xl:ml-1": !narrow });
 };
 
 export default function NavSidebar({ narrow = false }) {
@@ -65,13 +65,16 @@ export default function NavSidebar({ narrow = false }) {
   const profile = useUserProfile(publicKey);
   const navigate = useNavigate();
 
-  const className = classNames({"xl:w-56 xl:gap-3 xl:items-start": !narrow}, "sticky items-center border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-2")
+  const className = classNames(
+    { "xl:w-56 xl:gap-3 xl:items-start": !narrow },
+    "sticky items-center border-r border-neutral-900 top-0 z-20 h-screen max-h-screen hidden md:flex flex-col px-2 py-4 flex-shrink-0 gap-2",
+  );
 
   return (
     <div className={className}>
       <LogoHeader showText={!narrow} />
       <div className="flex-grow flex flex-col justify-between">
-        <div className={classNames({"xl:items-start": !narrow }, "flex flex-col items-center font-bold text-lg")}>
+        <div className={classNames({ "xl:items-start": !narrow }, "flex flex-col items-center font-bold text-lg")}>
           {MENU_ITEMS.map(item => {
             if (!item.nonLoggedIn && !publicKey) {
               return "";
@@ -91,9 +94,11 @@ export default function NavSidebar({ narrow = false }) {
             <div className="mt-2">
               <button onClick={() => navigate("/login/sign-up")} className="flex flex-row items-center primary">
                 <Icon name="sign-in" size={24} />
-                {!narrow && <span className="hidden xl:inline ml-3">
-                  <FormattedMessage defaultMessage="Sign up" id="8HJxXG"/>
-                </span>}
+                {!narrow && (
+                  <span className="hidden xl:inline ml-3">
+                    <FormattedMessage defaultMessage="Sign up" id="8HJxXG" />
+                  </span>
+                )}
               </button>
             </div>
           )}
diff --git a/packages/app/src/Pages/NetworkGraph.tsx b/packages/app/src/Pages/NetworkGraph.tsx
index 699e9858..8e4506c3 100644
--- a/packages/app/src/Pages/NetworkGraph.tsx
+++ b/packages/app/src/Pages/NetworkGraph.tsx
@@ -6,6 +6,8 @@ import * as THREE from "three";
 import { defaultAvatar } from "../SnortUtils";
 import { proxyImg } from "@/Hooks/useImgProxy";
 import { LoginStore } from "@/Login";
+import { FormattedMessage } from "react-intl";
+import Icon from "@/Icons/Icon";
 
 interface GraphNode {
   id: UID;
@@ -71,6 +73,27 @@ const NetworkGraph = () => {
   // const [direction, setDirection] = useState(Direction.OUTBOUND);
   // const [renderLimit, setRenderLimit] = useState(NODE_LIMIT);
 
+  const handleCloseGraph = () => {
+    setOpen(false);
+  };
+
+  const handleKeyDown = (event: { key: string; }) => {
+    if (event.key === "Escape") {
+      handleCloseGraph();
+    }
+  };
+
+  useEffect(() => {
+    if (open) {
+      window.addEventListener("keydown", handleKeyDown);
+    }
+
+    // Cleanup function to remove the event listener
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
   const updateConfig = async (changes: Partial<GraphConfig>) => {
     setGraphConfig(old => {
       const newConfig = Object.assign({}, old, changes);
@@ -197,13 +220,13 @@ const NetworkGraph = () => {
             setOpen(true);
             refreshData();
           }}>
-          Show graph
+          <FormattedMessage defaultMessage="Show graph" id="ha8JKG" />
         </button>
       )}
       {open && graphData && (
         <div className="fixed top-0 left-0 right-0 bottom-0 z-20">
-          <button className="absolute top-6 right-6 z-30 btn hover:bg-gray-900" onClick={() => setOpen(false)}>
-            X
+          <button className="absolute top-6 right-6 z-30 btn hover:bg-gray-900" onClick={handleCloseGraph}>
+            <Icon name="x" size={24} />
           </button>
           <div className="absolute top-6 right-0 left-0 z-20 flex flex-col content-center justify-center text-center">
             <div className="text-center pb-2">Degrees of separation</div>
diff --git a/packages/app/src/lang.json b/packages/app/src/lang.json
index c01b4437..137191e8 100644
--- a/packages/app/src/lang.json
+++ b/packages/app/src/lang.json
@@ -1122,6 +1122,9 @@
   "hY4lzx": {
     "defaultMessage": "Supports"
   },
+  "ha8JKG": {
+    "defaultMessage": "Show graph"
+  },
   "hicxcO": {
     "defaultMessage": "Show replies"
   },
diff --git a/packages/app/src/translations/en.json b/packages/app/src/translations/en.json
index 13e79805..eb538ee8 100644
--- a/packages/app/src/translations/en.json
+++ b/packages/app/src/translations/en.json
@@ -369,6 +369,7 @@
   "hMzcSq": "Messages",
   "hRTfTR": "PRO",
   "hY4lzx": "Supports",
+  "ha8JKG": "Show graph",
   "hicxcO": "Show replies",
   "hmZ3Bz": "Media",
   "hniz8Z": "here",