handle escape and introducing shortcuts slowly

packages/desktop/src/providers/ConversationProvider.tsx

@@ -23,9 +23,10 @@ import {
   getConversationById,
   getConversations,
 } from '../api/NirvanaApi';
-import { useAsyncFn, useEffectOnce, useUnmount } from 'react-use';
+import { useAsyncFn, useEffectOnce, useKeyPressEvent, useUnmount } from 'react-use';
 
 import CreateConversationRequest from '@nirvana/core/requests/CreateConversationRequest.request';
+import { KeyboardShortcuts } from '../util/keyboard';
 import Peer from 'simple-peer';
 import { Typography } from '@mui/material';
 import User from '@nirvana/core/models/user.model';
@@ -72,6 +73,8 @@ interface IConversationContext {
   selectConversation?: (conversationId: string, temporaryOverrideSort?: boolean) => Promise<void>;
 
   handleStartConversation?: (otherUsers: User[], conversationName?: string) => Promise<boolean>;
+
+  handleEscape?: () => void;
 }
 
 const ConversationContext = React.createContext<IConversationContext>({
@@ -382,6 +385,12 @@ export function ConversationProvider({ children }: { children: React.ReactNode }
     return [priorityConversations, inboxConversations];
   }, [conversationMap, user]);
 
+  const handleEscape = useCallback(() => {
+    selectConversation(undefined);
+  }, [selectConversation]);
+
+  useKeyPressEvent(KeyboardShortcuts.escape.shortcutKey, handleEscape);
+
   if (fetchState.error) {
     return (
       <Typography variant={'h6'} color={'danger'}>
@@ -399,6 +408,7 @@ export function ConversationProvider({ children }: { children: React.ReactNode }
         selectConversation,
         priorityConversations: masterConversations[0],
         inboxConversations: masterConversations[1],
+        handleEscape,
       }}
     >
       {children}

packages/desktop/src/tree/ConversationList.tsx

@@ -79,7 +79,7 @@ export function ConversationList() {
       >
         <Stack direction={'column'} alignItems="center">
           <Typography align="center" variant="caption">
-            Have your favorites here for quick dialing
+            Add your favorites here for quick dialing
           </Typography>
         </Stack>
       </List>

packages/desktop/src/tree/FooterControls.tsx

@@ -171,7 +171,7 @@ function OverlayConversation({
   masterConversation: MasterConversation;
   isSelected?: boolean;
 }) {
-  const { selectConversation } = useConversations();
+  const { selectConversation, handleEscape } = useConversations();
 
   const handleSelectConversation = useCallback(() => {
     selectConversation(masterConversation._id.toString(), false);
@@ -271,6 +271,7 @@ function OverlayConversation({
               color: 'GrayText',
             }}
             size="small"
+            onClick={handleEscape}
           >
             <FiX />
           </IconButton>