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 { ILineDetails } from "../router";
-import LineIcon from "../../components/lines/lineIcon/index";
+import { $selectedLineId } from "../../../controller/recoil";
+import { ILineDetails } from "../../router";
+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 setDesktopMode = useSetRecoilState($desktopMode);
+  const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
+  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,70 +47,100 @@ 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 (
-    <div className="flex flex-col bg-white w-[400px]">
-      {/* modal for creating new line */}
-      <NewLineModal
-        open={isModalVisible}
-        handleClose={() => setIsModalVisible(false)}
-      />
+    <>
+      <GlobalHotKeys handlers={handlers} keyMap={keyMap} allowChanges />
 
-      {/* tuned in lines block */}
-      <div className="bg-gray-100 flex flex-col shadow-lg">
-        {/* tuned in header + general controls */}
-        <div className="flex flex-row items-center py-3 px-4 pb-0">
-          <span className="flex flex-row gap-2 items-center justify-start text-gray-400 animate-pulse">
-            <FiActivity className="text-sm" />
+      <div className="flex flex-row flex-1">
+        <div className="flex flex-col bg-white w-[400px]">
+          {/* modal for creating new line */}
+          <NewLineModal
+            open={isModalVisible}
+            handleClose={() => setIsModalVisible(false)}
+          />
 
-            <h2 className="text-inherit text-sm">Tuned In</h2>
+          {/* tuned in lines block */}
+          <div className="bg-gray-100 flex flex-col shadow-lg">
+            {/* tuned in header + general controls */}
+            <div className="flex flex-row items-center py-3 px-4 pb-0">
+              <span className="flex flex-row gap-2 items-center justify-start text-gray-400 animate-pulse">
+                <FiActivity className="text-sm" />
 
-            <p className="text-slate-300 text-xs">0/5</p>
-          </span>
+                <h2 className="text-inherit text-sm">Tuned In</h2>
 
-          <Tooltip title="new line">
-            <div
-              onClick={() => setIsModalVisible(true)}
-              className="ml-auto shadow-xl"
-            >
-              <IconButton>
-                <FaPlus />
-              </IconButton>
-            </div>
-          </Tooltip>
-        </div>
-
-        {/* list of toggle tuned lines */}
-        <div className="flex flex-col mt-2">
-          {toggleTunedLines.map((masterLineData) => (
-            <LineRow
-              key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
-              masterLineData={masterLineData}
-            />
-          ))}
-        </div>
-      </div>
-
-      {/* rest of the lines */}
-      <div className={"flex flex-col"}>
-        {isLoadingInitialLines ? (
-          <Skeleton />
-        ) : (
-          <>
-            {!allLines.length && (
-              <span className="text-gray-300 text-sm my-5 text-center">
-                You have no lines! <br /> Create one to connect to your team
-                instantly.
+                <p className="text-slate-300 text-xs">0/5</p>
               </span>
+
+              <Tooltip title="new line">
+                <div
+                  onClick={() => setIsModalVisible(true)}
+                  className="ml-auto shadow-xl"
+                >
+                  <IconButton>
+                    <FaPlus />
+                  </IconButton>
+                </div>
+              </Tooltip>
+            </div>
+
+            {/* list of toggle tuned lines */}
+            <div className="flex flex-col mt-2">
+              {toggleTunedLines.map((masterLineData) => (
+                <LineRow
+                  key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
+                  masterLineData={masterLineData}
+                />
+              ))}
+            </div>
+          </div>
+
+          {/* rest of the lines */}
+          <div className={"flex flex-col"}>
+            {isLoadingInitialLines ? (
+              <Skeleton />
+            ) : (
+              <>
+                {!allLines.length && (
+                  <span className="text-gray-300 text-sm my-5 text-center">
+                    You have no lines! <br /> Create one to connect to your team
+                    instantly.
+                  </span>
+                )}
+                {allLines.map((masterLineData) => (
+                  <LineRow
+                    key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
+                    masterLineData={masterLineData}
+                  />
+                ))}
+              </>
             )}
-            {allLines.map((masterLineData) => (
-              <LineRow
-                key={`terminalListLines-${masterLineData.lineDetails._id.toString()}`}
-                masterLineData={masterLineData}
-              />
-            ))}
-          </>
+          </div>
+        </div>
+
+        {desktopMode === "terminalDetails" && selectedLineId && (
+          <LineDetailsTerminal />
         )}
       </div>
-    </div>
+    </>
   );
 }