Client:Profile: Added backspace hotkey for easier navigation

packages/client/src/pages/Profile/Section/Header/index.js

@@ -30,7 +30,9 @@ import ImageReactSvgUrl from "PUBLIC_DIR/images/image.react.svg?url";
 import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?url";
 import ArrowPathReactSvgUrl from "PUBLIC_DIR/images/arrow.path.react.svg?url";
 import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";
+
 import { useState } from "react";
+import { useHotkeys } from "react-hotkeys-hook";
 import { withTranslation } from "react-i18next";
 import { useNavigate, useLocation } from "react-router-dom";
 import { inject, observer } from "mobx-react";
@@ -39,6 +41,7 @@ import { IconButton } from "@docspace/shared/components/icon-button";
 import { ContextMenuButton } from "@docspace/shared/components/context-menu-button";
 import Headline from "@docspace/shared/components/headline/Headline";
 import { SectionHeaderSkeleton } from "@docspace/shared/skeletons/sections";
+import { checkDialogsOpen } from "@docspace/shared/utils/checkDialogsOpen";
 import { DeleteSelfProfileDialog } from "SRC_DIR/components/dialogs";
 import { DeleteOwnerProfileDialog } from "SRC_DIR/components/dialogs";
 
@@ -72,6 +75,7 @@ const Header = (props) => {
     showProfileLoader,
     setIsLoading,
     userId,
+    enabledHotkeys,
   } = props;
 
   const navigate = useNavigate();
@@ -152,6 +156,11 @@ const Header = (props) => {
     // setFilter(filter);
   };
 
+  useHotkeys("Backspace", onClickBack, {
+    filter: () => !checkDialogsOpen() && enabledHotkeys,
+    filterPreventDefault: false,
+  });
+
   if (showProfileLoader) return <SectionHeaderSkeleton />;
 
   return (
@@ -219,6 +228,8 @@ export default inject(
     peopleStore,
     clientLoadingStore,
     profileActionsStore,
+    filesStore,
+    mediaViewerDataStore,
   }) => {
     const { isAdmin } = authStore;
 
@@ -234,6 +245,9 @@ export default inject(
 
     const { profileClicked } = profileActionsStore;
 
+    const { enabledHotkeys } = filesStore;
+    const { visible: mediaViewerIsVisible } = mediaViewerDataStore;
+
     const { setChangePasswordVisible, setChangeAvatarVisible } =
       targetUserStore;
 
@@ -258,6 +272,8 @@ export default inject(
 
       showProfileLoader,
       profileClicked,
+      enabledHotkeys:
+        enabledHotkeys && !mediaViewerIsVisible && !showProfileLoader,
     };
   },
 )(