From 1a6f4bd428105085820511b66cb3f1ffc6c80a04 Mon Sep 17 00:00:00 2001
From: talksik <patel.arjun50@gmail.com>
Date: Thu, 5 May 2022 11:18:35 -0500
Subject: [PATCH] more fluidity

---
 .../desktop/src/components/header/index.tsx   |  2 +-
 .../src/pages/lineDetailsTerminal/index.tsx   | 31 ++++++++++++++++++-
 packages/desktop/src/pages/router/index.tsx   |  9 ++++--
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/packages/desktop/src/components/header/index.tsx b/packages/desktop/src/components/header/index.tsx
index 06323df..3888437 100644
--- a/packages/desktop/src/components/header/index.tsx
+++ b/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"
diff --git a/packages/desktop/src/pages/lineDetailsTerminal/index.tsx b/packages/desktop/src/pages/lineDetailsTerminal/index.tsx
index 03b6151..ade8900 100644
--- a/packages/desktop/src/pages/lineDetailsTerminal/index.tsx
+++ b/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]"
diff --git a/packages/desktop/src/pages/router/index.tsx b/packages/desktop/src/pages/router/index.tsx
index c33757c..8d0309d 100644
--- a/packages/desktop/src/pages/router/index.tsx
+++ b/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(() => {