clean up a bunch of shit and use recoil to avoid the prop drilling

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

@@ -1,4 +1,5 @@
-import { useMemo, useState } from "react";
+import { $desktopMode, $selectedLineId } from "../../controller/recoil";
+import { useCallback, useMemo, useState } from "react";
 
 import { FaPlus } from "react-icons/fa";
 import { FiActivity } from "react-icons/fi";
@@ -6,16 +7,18 @@ import { ILineDetails } from "../router";
 import IconButton from "../../components/Button/IconButton/index";
 import LineRow from "../../components/lines/lineRow.tsx/index";
 import NewLineModal from "./newLine";
+import { useSetRecoilState } from "recoil";
 
 export default function NirvanaTerminal({
-  handleSelectLine,
   allLines,
 }: {
-  handleSelectLine: (lineId: string) => void;
   allLines: ILineDetails[];
 }) {
   const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
+  const setSelectedLineId = useSetRecoilState($selectedLineId);
+  const setDesktopMode = useSetRecoilState($desktopMode);
+
   // todo: sort/order based on activity and activity date and currently broadcasting/live
 
   const toggleTunedLines = useMemo(
@@ -28,6 +31,15 @@ export default function NirvanaTerminal({
     []
   );
 
+  /** show user line details */
+  const handleSelectLine = useCallback(
+    (lineId: string) => {
+      setSelectedLineId(lineId);
+      setDesktopMode("terminalDetails");
+    },
+    [setSelectedLineId, setDesktopMode]
+  );
+
   return (
     <div className="flex flex-col bg-white w-[400px]">
       {/* modal for creating new line */}