close graph on esc

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

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>
           )}

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>

packages/app/src/lang.json

@@ -1122,6 +1122,9 @@
   "hY4lzx": {
     "defaultMessage": "Supports"
   },
+  "ha8JKG": {
+    "defaultMessage": "Show graph"
+  },
   "hicxcO": {
     "defaultMessage": "Show replies"
   },

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