more composition with terminal being the whole thing

packages/desktop/src/pages/terminal/details/index.tsx

@@ -2,13 +2,13 @@ import { FiActivity, FiSettings, FiSun } from "react-icons/fi";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { useCallback, useMemo } from "react";
 
-import { $selectedLineId } from "../../controller/recoil";
+import { $selectedLineId } from "../../../controller/recoil";
-import { ILineDetails } from "../router";
+import { ILineDetails } from "../../router";
-import LineIcon from "../../components/lines/lineIcon/index";
+import LineIcon from "../../../components/lines/lineIcon/index";
 import { LineMemberState } from "@nirvana/core/models/line.model";
 import MasterLineData from "@nirvana/core/models/masterLineData.model";
 import { Tooltip } from "antd";
-import { useLineDataProvider } from "../../controller/lineDataProvider";
+import { useLineDataProvider } from "../../../controller/lineDataProvider";
 import { useRecoilState } from "recoil";
 
 export default function LineDetailsTerminal() {
@@ -28,34 +28,12 @@ export default function LineDetailsTerminal() {
   }, [selectedLineId, linesMap]);
 
   const isUserToggleTuned = useMemo(
-    () => selectedLine.currentUserMember.state === LineMemberState.TUNED,
+    () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
     [selectedLine]
   );
 
-  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 className="flex flex-col bg-gray-100 w-[400px] items-stretch justify-start relative">
         {/* line overview header */}
         <div className="flex flex-row p-3 items-center gap-1">

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

@@ -1,24 +1,26 @@
 import { $desktopMode, $selectedLineId } from "../../controller/recoil";
+import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { Skeleton, Tooltip } from "antd";
 import { useCallback, useMemo, useState } from "react";
+import { useRecoilState, useSetRecoilState } from "recoil";
 
 import { FaPlus } from "react-icons/fa";
 import { FiActivity } from "react-icons/fi";
 import { ILineDetails } from "../router";
 import IconButton from "../../components/Button/IconButton/index";
+import LineDetailsTerminal from "./details";
 import { LineMemberState } from "@nirvana/core/models/line.model";
 import LineRow from "../../components/lines/lineRow.tsx/index";
 import MasterLineData from "@nirvana/core/models/masterLineData.model";
 import NewLineModal from "./newLine";
 import { useLineDataProvider } from "../../controller/lineDataProvider";
-import { useSetRecoilState } from "recoil";
 import { useUserLines } from "../../controller/index";
 
 export default function NirvanaTerminal() {
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
-  const setSelectedLineId = useSetRecoilState($selectedLineId);
+  const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
-  const setDesktopMode = useSetRecoilState($desktopMode);
+  const [desktopMode, setDesktopMode] = useRecoilState($desktopMode);
 
   // simply using this query for specific data on loading
   // todo: add these properties in context provider value although more work down the line for control
@@ -45,7 +47,31 @@ export default function NirvanaTerminal() {
 
   // todo: sort/order based on activity and activity date and currently broadcasting/live
 
+  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 className="flex flex-row flex-1">
         <div className="flex flex-col bg-white w-[400px]">
           {/* modal for creating new line */}
           <NewLineModal
@@ -110,5 +136,11 @@ export default function NirvanaTerminal() {
             )}
           </div>
         </div>
+
+        {desktopMode === "terminalDetails" && selectedLineId && (
+          <LineDetailsTerminal />
+        )}
+      </div>
+    </>
   );
 }