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

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

@@ -1,9 +1,9 @@
+import { Avatar, Menu } from "antd";
 import { GlobalHotKeys, KeyMap } from "react-hotkeys";
 import { HeadsetMicSharp, VideocamSharp } from "@mui/icons-material";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { $selectedOutputMode } from "../../controller/recoil";
-import { Avatar } from "antd";
 import { FaSearch } from "react-icons/fa";
 import Logo from "../Logo";
 import { useGetUserDetails } from "../../controller/index";

packages/desktop/src/controller/recoil.tsx

@@ -41,3 +41,15 @@ export const $maxNumberActiveStreams = atom<number>({
   key: "MAX_NUMBER_ACTIVE_STREAMS",
   default: 0,
 });
+
+type DesktopMode = "flowState" | "overlayOnly" | "terminal" | "terminalDetails";
+
+export const $desktopMode = atom<DesktopMode>({
+  key: "DESKTOP_MODE",
+  default: "terminal",
+});
+
+export const $selectedLineId = atom<string>({
+  key: "SELECTED_LINE_ID",
+  default: null,
+});

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

@@ -1,6 +1,8 @@
 import {
+  $desktopMode,
   $maxNumberActiveStreams,
   $numberActiveLines,
+  $selectedLineId,
 } from "../../controller/recoil";
 import Channels, {
   DimensionChangeRequest,
@@ -11,13 +13,13 @@ import Channels, {
 } from "../../electron/constants";
 import React, { useState } from "react";
 import { useCallback, useEffect, useMemo } from "react";
+import { useRecoilState, useRecoilValue } from "recoil";
 
 import LineDetailsTerminal from "../lineDetailsTerminal";
 import NirvanaHeader from "../../components/header/index";
 import NirvanaTerminal from "../terminal";
 import Overlay from "../overlay";
 import { Radio } from "antd";
-import { useRecoilValue } from "recoil";
 
 export interface ILineDetails {
   lineId: string;
@@ -219,12 +221,9 @@ const testLines: ILineDetails[] = [
   ),
 ];
 
-type DesktopMode = "flowState" | "overlayOnly" | "terminal" | "terminalDetails";
-
 export default function NirvanaRouter() {
-  const [selectedLineId, setSelectedLineId] = useState<string>(null);
-  const [desktopMode, setDesktopMode] =
-    useState<DesktopMode>("terminalDetails");
+  const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
+  const [desktopMode, setDesktopMode] = useRecoilState($desktopMode);
   const numberOfOverlayColumns = useRecoilValue($numberActiveLines);
   const numberOfOverlayRows = useRecoilValue($maxNumberActiveStreams);
 
@@ -235,7 +234,7 @@ export default function NirvanaRouter() {
         "window blurring now, should be always on top and then ill tell main process to change dimensions"
       );
       // todo: just in testing mode
-      // setDesktopMode("overlayOnly");
+      setDesktopMode("overlayOnly");
     });
   }, [setDesktopMode]);
 
@@ -301,15 +300,6 @@ export default function NirvanaRouter() {
     });
   }, [desktopMode, numberOfOverlayColumns, numberOfOverlayRows]);
 
-  /** show user line details */
-  const handleSelectLine = useCallback(
-    (lineId: string) => {
-      setSelectedLineId(lineId);
-      setDesktopMode("terminalDetails");
-    },
-    [setSelectedLineId, setDesktopMode]
-  );
-
   const handleToggleFlowState = useCallback(() => {
     setDesktopMode("flowState");
   }, [setDesktopMode]);
@@ -323,24 +313,9 @@ export default function NirvanaRouter() {
     <div className="flex flex-col h-screen">
       <NirvanaHeader onHeaderFocus={() => setDesktopMode("terminal")} />
 
-      <Radio.Group
-        value={desktopMode}
-        onChange={(e) => setDesktopMode(e.target.value)}
-      >
-        <Radio.Button value={"terminal"}>terminal</Radio.Button>
-        <Radio.Button value={"terminalDetails"}>
-          terminal and details
-        </Radio.Button>
-        <Radio.Button value={"flowState"}>flow state</Radio.Button>
-        <Radio.Button value={"overlayOnly"}>overlay only</Radio.Button>
-      </Radio.Group>
-
       <div className="flex flex-row flex-1">
         {(desktopMode === "terminal" || desktopMode === "terminalDetails") && (
-          <NirvanaTerminal
-            handleSelectLine={handleSelectLine}
-            allLines={testLines}
-          />
+          <NirvanaTerminal allLines={testLines} />
         )}
 
         {desktopMode === "terminalDetails" && selectedLine && (

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 */}