more fluidity

packages/desktop/src/components/header/index.tsx

@@ -121,7 +121,7 @@ export default function NirvanaHeader({
 
   return (
     <>
-      <GlobalHotKeys handlers={handlers} keyMap={keyMap} />
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap} allowChanges />
 
       <div
         className="flex flex-row items-center bg-gray-100 p-4 border-b border-b-gray-200"

packages/desktop/src/pages/lineDetailsTerminal/index.tsx

@@ -1,9 +1,38 @@
+import { GlobalHotKeys, KeyMap } from "react-hotkeys";
+import { useCallback, useMemo } from "react";
+
+import { $selectedLineId } from "../../controller/recoil";
 import { ILineDetails } from "../router";
 import LineIcon from "../../components/lines/lineIcon/index";
+import { useRecoilState } from "recoil";
 
 export default function LineDetailsTerminal() {
+  const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
+
+  const handleEscape = useCallback(() => {
+    console.log("deselecting line");
+
+    setSelectedLineId(null);
+  }, [setSelectedLineId]);
+
+  const keyMap: KeyMap = useMemo(
+    () => ({
+      DESELECT_LINE: "esc",
+    }),
+    [handleEscape]
+  );
+
+  const handlers = useMemo(
+    () => ({
+      DESELECT_LINE: handleEscape,
+    }),
+    [handleEscape]
+  );
+
   return (
-    <></>
+    <>
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap} allowChanges />
+    </>
     // <div
     //   id={`${selectedLine.lineId}-lineDetailsTerminal`}
     //   className="flex flex-col bg-gray-100 w-[400px]"

packages/desktop/src/pages/router/index.tsx

@@ -11,6 +11,7 @@ import Channels, {
   TERMINAL_DETAILS_PRESET,
   TERMINAL_PRESET,
 } from "../../electron/constants";
+import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import React, { useState } from "react";
 import { useCallback, useEffect, useMemo } from "react";
 import { useRecoilState, useRecoilValue } from "recoil";
@@ -231,13 +232,14 @@ export default function NirvanaRouter() {
   useEffect(() => {
     // add dimensions if it's not overlay only mode
     let finalDimensions: Dimensions = { height: 0, width: 0 };
-    let finalPosition;
+    let finalPosition: "center" | "topRight";
 
     const setAlwaysOnTop =
       desktopMode === "overlayOnly" || desktopMode === "flowState";
 
     // go hunting for which dimensions to have
     if (desktopMode === "terminal") {
+      finalPosition = "center";
       finalDimensions = { height: 675, width: 400 };
     }
     if (desktopMode === "terminalDetails") {
@@ -298,7 +300,10 @@ export default function NirvanaRouter() {
     if (selectedLineId && desktopMode === "terminal") {
       console.log("selected line right now", selectedLineId);
       setDesktopMode("terminalDetails");
-    }
+    } else if (!selectedLineId && desktopMode === "terminalDetails")
+      setDesktopMode("terminal");
+
+    // TODO: add more cases step by step based on experience I want
   }, [selectedLineId, desktopMode, setDesktopMode]);
 
   const handleToggleFlowState = useCallback(() => {