nice escape nad closing

packages/desktop/src/providers/RealTimeRoomProvider.tsx

@@ -20,7 +20,7 @@ import {
 import toast from 'react-hot-toast';
 import { useImmer } from 'use-immer';
 import { LineMemberState } from '@nirvana/core/models/line.model';
-import { useAsyncFn } from 'react-use';
+import { useAsyncFn, useKeyPressEvent } from 'react-use';
 
 import { updateLineMemberState } from '../api/NirvanaApi';
 import UpdateLineMemberState from '@nirvana/core/requests/updateLineMemberState.request';
@@ -293,28 +293,24 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
    * tune into socket room and tell everyone else
    */
   const handleSelectLine = useCallback(
-    (newLineIdToSelect: string | undefined) => {
+    (newLineIdToSelect: string) => {
-      if (!newLineIdToSelect) {
+      setSelectedLineId((prevLineId) => {
-        setSelectedLineId(undefined);
+        if (newLineIdToSelect === prevLineId) {
-      } else {
+          return prevLineId;
-        setSelectedLineId((prevLineId) => {
+        }
-          if (newLineIdToSelect === prevLineId) {
-            return prevLineId;
-          }
 
-          // untune from the last line if it was just a temporary tuned one
+        // untune from the last line if it was just a temporary tuned one
-          if (roomMap[prevLineId]?.currentUserMember.state === LineMemberState.INBOX) {
+        if (roomMap[prevLineId]?.currentUserMember.state === LineMemberState.INBOX) {
-            handleUntuneFromLine(prevLineId);
+          handleUntuneFromLine(prevLineId);
-          }
+        }
 
-          // tune in if not already tuned into this line
+        // tune in if not already tuned into this line
-          if (!roomMap[newLineIdToSelect].tunedInMemberIds?.includes(user._id.toString())) {
+        if (!roomMap[newLineIdToSelect].tunedInMemberIds?.includes(user._id.toString())) {
-            handleTuneIntoLine(newLineIdToSelect);
+          handleTuneIntoLine(newLineIdToSelect);
-          }
+        }
 
-          return newLineIdToSelect;
+        return newLineIdToSelect;
-        });
+      });
-      }
 
       setShowNewChannelForm(false);
     },
@@ -336,6 +332,13 @@ export function RealTimeRoomProvider({ children }: { children: React.ReactChild
     [setShowNewChannelForm, setSelectedLineId],
   );
 
+  const clearMind = useCallback(() => {
+    setSelectedLineId(undefined);
+    setShowNewChannelForm(false);
+  }, [setSelectedLineId, setShowNewChannelForm]);
+
+  useKeyPressEvent('Escape', clearMind);
+
   return (
     <RealTimeRoomContext.Provider
       value={{

packages/desktop/src/tree/protected/terminal/line/LineDetails.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useEffect, useState } from 'react';
+import React, { useMemo, useEffect, useState, useCallback } from 'react';
 import useAuth from '../../../../providers/AuthProvider';
 import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider';
 import useStreams from '../../../../providers/StreamProvider';
@@ -15,8 +15,10 @@ import {
   FiSun,
   FiUsers,
   FiVideo,
+  FiX,
 } from 'react-icons/fi';
 import { Avatar, Tooltip } from 'antd';
+import { useKeyPressEvent } from 'react-use';
 
 export default function LineDetails() {
   const { user } = useAuth();

packages/desktop/src/tree/protected/terminal/panels/SidePanel.tsx

@@ -3,7 +3,7 @@ import MasterLineData from '@nirvana/core/models/masterLineData.model';
 import { Avatar, Skeleton, Tooltip } from 'antd';
 import React, { useCallback, useMemo, useEffect, useState } from 'react';
 import { FaPlus, FaSearch } from 'react-icons/fa';
-import { FiActivity, FiPlus, FiSearch, FiSun } from 'react-icons/fi';
+import { FiActivity, FiPlus, FiSearch, FiSun, FiX } from 'react-icons/fi';
 import useRealTimeRooms from '../../../../providers/RealTimeRoomProvider';
 import useRooms from '../../../../providers/RoomsProvider';
 import useAuth from '../../../../providers/AuthProvider';
@@ -153,6 +153,15 @@ function LineRowTest({
   );
 
   const renderRightActivity = useMemo(() => {
+    if (isSelected) {
+      return (
+        <Tooltip title={'esc'}>
+          <span className="ml-5 flex flex-col items-center gap-2 cursor-pointer">
+            <FiX className="text-gray-300 text-xl" />
+          </span>
+        </Tooltip>
+      );
+    }
     // TODO: get the profile pictures of the broadcasters
     if (line.currentBroadcastersUserIds?.length > 0)
       return (
@@ -205,7 +214,7 @@ function LineRowTest({
         {moment(line.currentUserMember.lastVisitDate).fromNow(true)}
       </span>
     );
-  }, [line]);
+  }, [line, isSelected]);
 
   const profilePictures = useMemo(() => {
     const pictureSources: string[] = [];