more flow changes going back and forth with terminal and such

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

@@ -17,7 +17,11 @@ import Logo from "../Logo";
 import { useGetUserDetails } from "../../controller/index";
 import { useRecoilState } from "recoil";
 
-export default function NirvanaHeader() {
+export default function NirvanaHeader({
+  onHeaderFocus,
+}: {
+  onHeaderFocus: () => void;
+}) {
   const { data: userDetailsRes, isLoading } = useGetUserDetails();
 
   const inputRef = useRef<HTMLInputElement>(null);
@@ -81,6 +85,7 @@ export default function NirvanaHeader() {
       <div
         className="flex flex-row items-center bg-gray-100 pl-2 border-b border-b-gray-200"
         id="titlebar"
+        onFocus={onHeaderFocus}
       >
         <Logo type="small" />
 

packages/desktop/src/index.ts

@@ -30,6 +30,8 @@ if (require("electron-squirrel-startup")) {
 // be closed automatically when the JavaScript object is garbage collected.
 export let browserWindow: BrowserWindow;
 
+let display;
+
 const createWindow = (): void => {
   // Create the browser window.
   browserWindow = new BrowserWindow({
@@ -40,9 +42,10 @@ const createWindow = (): void => {
     },
     icon: "./assets/1024x1024.icns",
 
+    transparent: true,
+
     frame: false,
     roundedCorners: false,
-    transparent: true,
   });
 
   // and load the index.html of the app.
@@ -50,6 +53,8 @@ const createWindow = (): void => {
 
   // Open the DevTools.
   browserWindow.webContents.openDevTools({ mode: "detach" });
+
+  display = screen.getPrimaryDisplay();
 };
 
 // This method will be called when Electron has finished
@@ -85,11 +90,16 @@ app
         browserWindow.setAlwaysOnTop(true, "floating");
 
         // move window/overlay to top right
-        let display = screen.getPrimaryDisplay();
-        browserWindow.setPosition(display.bounds.width, display.bounds.height);
-      } else browserWindow.setAlwaysOnTop(false);
 
-      browserWindow.setSize(width, height, true);
+        browserWindow.setPosition(display.bounds.width - 300, 0, true);
+
+        browserWindow.setSize(width, height, true);
+      } else {
+        browserWindow.setSize(width, height, true);
+
+        browserWindow.center();
+        browserWindow.setAlwaysOnTop(false);
+      }
     });
   })
   .then(() => {

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

@@ -9,7 +9,7 @@ export default function LineDetailsTerminal({
   return (
     <div
       id={`${selectedLine.lineId}-lineDetailsTerminal`}
-      className="flex flex-col flex-1 bg-gray-100 h-full"
+      className="flex flex-col flex-1 bg-gray-100"
     >
       {/* line overview header */}
       <div className="flex flex-row p-3 items-center gap-1">

packages/desktop/src/pages/nirvanaApp.tsx

@@ -67,10 +67,10 @@ function NirvanaApp() {
               <NirvanaRouter />
             </ProtectedRoute>
 
-            <ReactQueryDevtools
+            {/* <ReactQueryDevtools
               initialIsOpen={false}
               position={"bottom-left"}
-            />
+            /> */}
           </RecoilRoot>
         </ThemeProvider>
         <Toaster />

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

@@ -273,9 +273,11 @@ export default function NirvanaRouter() {
 
   return (
     <div className="flex flex-col h-screen w-screen">
-      <NirvanaHeader />
+      <NirvanaHeader
+        onHeaderFocus={() => setDesktopMode(DimensionPresets.terminal)}
+      />
 
-      <div className="flex flex-row">
+      <div className="flex flex-row flex-1">
         {(desktopMode === DimensionPresets.terminal ||
           desktopMode === DimensionPresets.terminalAndDetails) && (
           <NirvanaTerminal