From 8796355ce392ff87cd2a00a241eb49c3c00113d7 Mon Sep 17 00:00:00 2001
From: yougotwill <willmgrant@gmail.com>
Date: Fri, 2 Aug 2024 14:59:52 +1000
Subject: [PATCH] feat: on settings screen if we press escape go back to the
 messages view

---
 ts/components/leftpane/ActionsPanel.tsx | 17 ++++++++++++++++-
 ts/state/selectors/modal.ts             | 13 +++++++++++++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/ts/components/leftpane/ActionsPanel.tsx b/ts/components/leftpane/ActionsPanel.tsx
index 4d27e45c4..1186699ef 100644
--- a/ts/components/leftpane/ActionsPanel.tsx
+++ b/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:
diff --git a/ts/state/selectors/modal.ts b/ts/state/selectors/modal.ts
index 71ce6b581..a1896f736 100644
--- a/ts/state/selectors/modal.ts
+++ b/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