conditionally showing the canvas

.vscode/settings.json

@@ -8,6 +8,6 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "workbench.colorTheme": "Default Light+",
   "javascript.format.semicolons": "insert",
-  "window.zoomLevel": 0,
+  "window.zoomLevel": 1,
   "trunk.trunkGrayOutNonBlockingIssues": false
 }

packages/desktop/src/controller/recoil.tsx

@@ -36,7 +36,7 @@ export const $maxNumberActiveStreams = atom<number>({
 
 // ============
 
-type DesktopMode = "flowState" | "overlayOnly" | "terminal" | "terminalDetails";
+type DesktopMode = "flowState" | "overlayOnly" | "terminal";
 
 export const $desktopMode = atom<DesktopMode>({
   key: "DESKTOP_MODE",

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

@@ -30,10 +30,7 @@ export default function NirvanaRouter() {
 
     // go hunting for which dimensions to have
     if (desktopMode === "terminal") {
-      finalDimensions = { height: 675, width: 400 };
+      finalDimensions = { height: 875, width: 1210 };
-    }
-    if (desktopMode === "terminalDetails") {
-      finalDimensions = { height: 675, width: 800 };
     }
     if (desktopMode === "flowState") {
       finalPosition = "topRight";
@@ -84,17 +81,6 @@ export default function NirvanaRouter() {
     });
   }, [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");
-    } else if (!selectedLineId && desktopMode === "terminalDetails")
-      setDesktopMode("terminal");
-
-    // TODO: add more cases step by step based on experience I want
-  }, [selectedLineId, desktopMode, setDesktopMode]);
-
   const handleToggleFlowState = useCallback(() => {
     setDesktopMode("flowState");
   }, [setDesktopMode]);

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

@@ -14,11 +14,13 @@ import { useRecoilState } from "recoil";
 export default function LineDetailsTerminal({
   selectedLine,
 }: {
-  selectedLine: MasterLineData;
+  selectedLine?: MasterLineData;
 }) {
   const { handleTuneToLine } = useLineDataProvider();
   const { data: userDetails } = useGetUserDetails();
 
+  console.log("selected line", selectedLine);
+
   const isUserToggleTuned = useMemo(
     () => selectedLine?.currentUserMember?.state === LineMemberState.TUNED,
     [selectedLine]
@@ -37,82 +39,69 @@ export default function LineDetailsTerminal({
   return (
     <>
       <div
-        className="flex flex-col flex-1 bg-gray-100 items-stretch justify-start relative 
+        className="flex flex-col flex-1 bg-gray-100 relative 
       border-l border-l-gray-200"
       >
-        {/* line overview header */}
+        {selectedLine && (
-        <div className="flex flex-row p-3 items-center gap-1">
+          <>
-          {/* <LineIcon sourceImages={selectedLine.profilePictures} />
+            {/* controls */}
-
+            <div
-          <span className="flex flex-col items-start gap-1">
+              className="absolute bottom-0 p-4 shadow-2xl
-            <h2
-              className={`text-inherit text-md truncate ${
-                selectedLine.hasNewActivity ? "font-semibold" : ""
-              }`}
-            >
-              {selectedLine.name}
-            </h2>
-
-            <span className="text-xs text-gray-300">
-              {`${selectedLine.numberMembers} members`}
-            </span>
-          </span> */}
-        </div>
-
-        {/* controls */}
-        <div
-          className="absolute bottom-0 p-4 shadow-2xl
         flex flex-row items-center gap-2 justify-end w-full"
-        >
+            >
-          <span className="mr-auto text-teal-800">{`${
+              <span className="mr-auto text-teal-800">{`${
-            selectedLine?.tunedInMemberIds?.length ?? 0
+                selectedLine?.tunedInMemberIds?.length ?? 0
-          } on the line`}</span>
+              } on the line`}</span>
 
-          <button
+              <button
-            className={`p-3 flex justify-center items-center hover:bg-gray-300
+                className={`p-3 flex justify-center items-center hover:bg-gray-300
            transition-all hover:scale-105`}
-          >
+              >
-            <FiSettings className="text-gray-400 text-md" />
+                <FiSettings className="text-gray-400 text-md" />
-          </button>
+              </button>
 
-          {/* TODO: move to on hover of line row  */}
+              {/* TODO: move to on hover of line row  */}
-          <Tooltip
+              <Tooltip
-            title={`${
+                title={`${
-              isUserToggleTuned ? "click to untoggle" : "click to stay tuned in"
+                  isUserToggleTuned
-            }`}
+                    ? "click to untoggle"
-          >
+                    : "click to stay tuned in"
-            <button
+                }`}
-              className={`p-3 flex justify-center items-center shadow-lg
+              >
+                <button
+                  className={`p-3 flex justify-center items-center shadow-lg
           hover:scale-105 transition-all animate-pulse ${
             isUserToggleTuned ? "bg-gray-800 text-white" : "text-black"
           }`}
-              onClick={() =>
+                  onClick={() =>
-                isUserToggleTuned
+                    isUserToggleTuned
-                  ? handleTuneToLine(
+                      ? handleTuneToLine(
-                      selectedLine.lineDetails._id.toString(),
+                          selectedLine.lineDetails._id.toString(),
-                      false
+                          false
-                    )
+                        )
-                  : handleTuneToLine(
+                      : handleTuneToLine(
-                      selectedLine.lineDetails._id.toString(),
+                          selectedLine.lineDetails._id.toString(),
-                      true
+                          true
-                    )
+                        )
-              }
+                  }
-            >
+                >
-              <FiActivity className="text-lg" />
+                  <FiActivity className="text-lg" />
-            </button>
+                </button>
-          </Tooltip>
+              </Tooltip>
 
-          <button
+              <button
-            className={`p-3 flex justify-center items-center shadow-lg
+                className={`p-3 flex justify-center items-center shadow-lg
           hover:scale-105 transition-all ${
             isUserBroadcasting
               ? "bg-teal-800 text-white"
               : "text-teal-800 border-teal-800 border"
           }`}
-          >
+              >
-            <FiSun className="text-lg" />
+                <FiSun className="text-lg" />
-          </button>
+              </button>
-        </div>
+            </div>
+          </>
+        )}
       </div>
     </>
   );

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

@@ -233,9 +233,7 @@ export default function NirvanaTerminal() {
           </div>
         </div>
 
-        {desktopMode === "terminalDetails" && selectedLine && (
+        <LineDetailsTerminal selectedLine={selectedLine} />
-          <LineDetailsTerminal selectedLine={selectedLine} />
-        )}
       </div>
     </>
   );