feat: on settings screen if we press escape go back to the messages view

ts/components/leftpane/ActionsPanel.tsx

@@ -1,5 +1,5 @@
 import { debounce } from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 import useInterval from 'react-use/lib/useInterval';
@@ -47,6 +47,8 @@ import { switchThemeTo } from '../../themes/switchTheme';
 import { ReleasedFeatures } from '../../util/releaseFeature';
 import { getOppositeTheme } from '../../util/theme';
 import { SessionNotificationCount } from '../icon/SessionNotificationCount';
+import { useHotkey } from '../../hooks/useHotkey';
+import { getIsModalVisble } from '../../state/selectors/modal';
 
 const Section = (props: { type: SectionType }) => {
   const ourNumber = useSelector(getOurNumber);
@@ -54,6 +56,7 @@ const Section = (props: { type: SectionType }) => {
   const dispatch = useDispatch();
   const { type } = props;
 
+  const isModalVisible = useSelector(getIsModalVisble);
   const isDarkTheme = useIsDarkTheme();
   const focusedSection = useSelector(getFocusedSection);
   const isSelected = focusedSection === props.type;
@@ -82,6 +85,17 @@ const Section = (props: { type: SectionType }) => {
     }
   };
 
+  const settingsIconRef = useRef<HTMLButtonElement>(null);
+
+  useHotkey('Escape', () => {
+    if (type === SectionType.Settings && !isModalVisible) {
+      settingsIconRef.current?.blur();
+      dispatch(clearSearch());
+      dispatch(showLeftPaneSection(SectionType.Message));
+      dispatch(resetLeftOverlayMode());
+    }
+  });
+
   if (type === SectionType.Profile) {
     return (
       <Avatar
@@ -116,6 +130,7 @@ const Section = (props: { type: SectionType }) => {
           iconType={'gear'}
           onClick={handleClick}
           isSelected={isSelected}
+          ref={settingsIconRef}
         />
       );
     case SectionType.PathIndicator:

ts/state/selectors/modal.ts

@@ -27,6 +27,19 @@ export const getModal = (state: StateType): ModalState => {
   return state.modals;
 };
 
+export const getIsModalVisble = createSelector(getModal, (state: ModalState): boolean => {
+  const modalValues = Object.values(state);
+  let visible = false;
+  for (let i = 0; i < modalValues.length; i++) {
+    if (modalValues[i] !== null) {
+      visible = true;
+      break;
+    }
+  }
+
+  return visible;
+});
+
 export const getConfirmModal = createSelector(
   getModal,
   (state: ModalState): ConfirmModalState => state.confirmModal