having new flow with windows taking out the redundancy

packages/desktop/src/components/lines/lineRow.tsx/index.tsx

@@ -1,10 +1,9 @@
-import { $desktopMode, $selectedLineId } from "../../../controller/recoil";
 import { useCallback, useMemo } from "react";
 import { useRecoilState, useSetRecoilState } from "recoil";
 
+import { $selectedLineId } from "../../../controller/recoil";
 import { Avatar } from "antd";
 import { FiSun } from "react-icons/fi";
-import { ILineDetails } from "../../../pages/router/index";
 import LineIcon from "../lineIcon";
 import MasterLineData from "@nirvana/core/models/masterLineData.model";
 import { useGetUserDetails } from "../../../controller/index";
@@ -20,13 +19,10 @@ export default function LineRow({
   const [selectedLineId, setSelectedLineId] = useRecoilState($selectedLineId);
   const { data: userData } = useGetUserDetails();
 
-  const setDesktopMode = useSetRecoilState($desktopMode);
-
   /** show user line details */
   const handleSelectLine = useCallback(() => {
     setSelectedLineId(masterLineData.lineDetails._id.toString());
-    setDesktopMode("terminalDetails");
+  }, [setSelectedLineId, masterLineData]);
-  }, [setSelectedLineId, setDesktopMode, masterLineData]);
 
   /**
    * TODO: slowly add to this and fix based on added features

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

@@ -1,34 +1,31 @@
 import { ILineDetails } from "../router";
 import LineIcon from "../../components/lines/lineIcon/index";
 
-export default function LineDetailsTerminal({
+export default function LineDetailsTerminal() {
-  selectedLine,
-}: {
-  selectedLine: ILineDetails;
-}) {
   return (
-    <div
+    <></>
-      id={`${selectedLine.lineId}-lineDetailsTerminal`}
+    // <div
-      className="flex flex-col bg-gray-100 w-[400px]"
+    //   id={`${selectedLine.lineId}-lineDetailsTerminal`}
-    >
+    //   className="flex flex-col bg-gray-100 w-[400px]"
-      {/* line overview header */}
+    // >
-      <div className="flex flex-row p-3 items-center gap-1">
+    //   {/* line overview header */}
-        <LineIcon sourceImages={selectedLine.profilePictures} />
+    //   <div className="flex flex-row p-3 items-center gap-1">
+    //     <LineIcon sourceImages={selectedLine.profilePictures} />
 
-        <span className="flex flex-col items-start gap-1">
+    //     <span className="flex flex-col items-start gap-1">
-          <h2
+    //       <h2
-            className={`text-inherit text-md truncate ${
+    //         className={`text-inherit text-md truncate ${
-              selectedLine.hasNewActivity ? "font-semibold" : ""
+    //           selectedLine.hasNewActivity ? "font-semibold" : ""
-            }`}
+    //         }`}
-          >
+    //       >
-            {selectedLine.name}
+    //         {selectedLine.name}
-          </h2>
+    //       </h2>
 
-          <span className="text-xs text-gray-300">
+    //       <span className="text-xs text-gray-300">
-            {`${selectedLine.numberMembers} members`}
+    //         {`${selectedLine.numberMembers} members`}
-          </span>
+    //       </span>
-        </span>
+    //     </span>
-      </div>
+    //   </div>
-    </div>
+    // </div>
   );
 }

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

@@ -66,9 +66,6 @@ export default function Overlay() {
 
   // initially, have these set to default
   useEffect(() => {
-    setNumActiveLines(1);
-    setMaxNumActiveStreams(1);
-
     // POC: nirvana all connected users call
     // send signal to all peers through ws
 

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

@@ -227,55 +227,32 @@ export default function NirvanaRouter() {
   const numberOfOverlayColumns = useRecoilValue($numberActiveLines);
   const numberOfOverlayRows = useRecoilValue($maxNumberActiveStreams);
 
-  // on window blur, put app in overlay only mode
-  useEffect(() => {
-    window.electronAPI.on(Channels.ON_WINDOW_BLUR, () => {
-      console.log(
-        "window blurring now, should be always on top and then ill tell main process to change dimensions"
-      );
-      // TODO: testing mode
-      // setDesktopMode("overlayOnly");
-    });
-  }, [setDesktopMode]);
-
   // handle all window resizing logic
   useEffect(() => {
-    // always have overlay so need to calculate that
-    const overlayDimensions: Dimensions = {
-      height: 40 + numberOfOverlayRows * 200,
-      width: 360 * numberOfOverlayColumns,
-    };
-    const setAlwaysOnTop =
-      desktopMode === "overlayOnly" || desktopMode === "flowState";
-
     // add dimensions if it's not overlay only mode
     let finalDimensions: Dimensions = { height: 0, width: 0 };
     let finalPosition;
 
+    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") {
-      finalPosition = "center";
       finalDimensions = { height: 675, width: 800 };
     }
-
     if (desktopMode === "flowState") {
       finalPosition = "topRight";
-      finalDimensions = { height: 40, width: 360 };
+      finalDimensions = { height: 68, width: 360 };
     }
-
-    // add overlay for all variants except flow state
-    if (desktopMode !== "flowState")
-      finalDimensions = {
-        width: finalDimensions.width + overlayDimensions.width,
-        height: Math.max(finalDimensions.height, overlayDimensions.height),
-      };
-
     if (desktopMode === "overlayOnly") {
       finalPosition = "topRight";
+      finalDimensions = {
+        height: 68 + numberOfOverlayRows * 200,
+        width: 360 + 360 * numberOfOverlayColumns,
+      };
     }
 
     console.log(
@@ -283,7 +260,6 @@ export default function NirvanaRouter() {
       desktopMode,
       numberOfOverlayColumns,
       numberOfOverlayRows,
-      overlayDimensions,
       finalDimensions,
       setAlwaysOnTop
     );
@@ -300,21 +276,35 @@ export default function NirvanaRouter() {
     });
   }, [desktopMode, numberOfOverlayColumns, numberOfOverlayRows]);
 
+  // on window blur, put app in overlay only mode
+  // get rid of selected line from terminal if we had any...
+
+  useEffect(() => {
+    window.electronAPI.on(Channels.ON_WINDOW_BLUR, () => {
+      console.log(
+        "window blurring now, should be always on top and then ill tell main process to change dimensions"
+      );
+      // TODO: testing mode
+      setDesktopMode("overlayOnly");
+
+      // todo: make sure that if I am toggle broadcasted into a line, then don't deselect selected line
+      // the overlay should be showing selected line if I am broadcasting toggled into it as well as of course all other toggle tuned ones
+      setSelectedLineId(null);
+    });
+  }, [setDesktopMode, setSelectedLineId]);
+
+  // handling desktop mode switch on change of selected line
+  useEffect(() => {
+    if (selectedLineId && desktopMode === "terminal") {
+      console.log("selected line right now", selectedLineId);
+      setDesktopMode("terminalDetails");
+    }
+  }, [selectedLineId, desktopMode, setDesktopMode]);
+
   const handleToggleFlowState = useCallback(() => {
     setDesktopMode("flowState");
   }, [setDesktopMode]);
 
-  const selectedLine = useMemo(
-    () => testLines.find((line) => line.lineId === selectedLineId),
-    [testLines, selectedLineId]
-  );
-
-  const overlayView = useMemo(() => {
-    if (desktopMode === "overlayOnly") return <Overlay />;
-
-    return <></>;
-  }, [desktopMode]);
-
   return (
     <div className="flex flex-col h-screen">
       <NirvanaHeader onHeaderFocus={() => setDesktopMode("terminal")} />
@@ -324,11 +314,9 @@ export default function NirvanaRouter() {
           <NirvanaTerminal allLines={testLines} />
         )}
 
-        {desktopMode === "terminalDetails" && selectedLine && (
+        {desktopMode === "terminalDetails" && <LineDetailsTerminal />}
-          <LineDetailsTerminal selectedLine={selectedLine} />
-        )}
 
-        {overlayView}
+        {desktopMode === "overlayOnly" && <Overlay />}
       </div>
     </div>
   );