starting off header with the full window dimensions

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

@@ -1,7 +1,4 @@
-export enum LogoType {
-  primary = "primary",
-  small = "small",
-}
+export type LogoType = "primary" | "small";
 
 export default function Logo({
   className,
@@ -10,7 +7,7 @@ export default function Logo({
   className: string;
   type?: LogoType;
 }) {
-  if (type === LogoType.small) {
+  if (type === "small") {
     return (
       <svg
         width="85"

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

@@ -13,10 +13,11 @@ export default function ProtectedRoute({
 }: {
   children?: React.ReactNode;
 }) {
-  const { isLoading, isError, isFetching, isSuccess, refetch } = useAuthCheck();
-
   const [jwtToken, setJwtToken] = useRecoilState($jwtToken);
 
+  const { isLoading, isError, isFetching, isSuccess, refetch } =
+    useAuthCheck(jwtToken);
+
   useEffect(() => {
     // on load of this, if we already have jwt tokens in store,
     // then try using them with auth check
@@ -40,11 +41,13 @@ export default function ProtectedRoute({
 
     if (jwtToken) {
       window.electronAPI.store.set(STORE_ITEMS.AUTH_SESSION_JWT, jwtToken);
+      setJwtToken(jwtToken);
     } else {
       window.electronAPI.store.set(STORE_ITEMS.AUTH_SESSION_JWT, null);
     }
 
     NirvanaApi._jwtToken = jwtToken;
+
     refetch();
   }, [jwtToken]);
 

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

@@ -0,0 +1,38 @@
+import { Header, HeaderName } from "carbon-components-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import { Avatar } from "antd";
+import Logo from "../Logo";
+import { useGetUserDetails } from "../../controller/index";
+
+export default function NirvanaHeader() {
+  const { data: userDetailsRes, isLoading } = useGetUserDetails();
+
+  const userVideo = useRef<HTMLVideoElement>();
+  const [userVideoStream, setUserVideoStream] =
+    useState<MediaStream>(undefined);
+
+  // todo: show user local video stream
+  useEffect(() => {
+    navigator.mediaDevices
+      .getUserMedia({ video: true, audio: true })
+      .then((stream: MediaStream) => {
+        if (userVideo) userVideo.current.srcObject = stream;
+        setUserVideoStream(stream);
+      });
+  }, []);
+
+  if (isLoading) return <>loading</>;
+
+  const userRepresentation = useMemo(() => {
+    if (userVideoStream) return;
+  }, []);
+
+  return (
+    <div className="flex flex-row items-center h-12 bg-gray-100">
+      <Logo type="small" className="scale-[0.2]" />
+
+      {userDetailsRes?.user?.picture && <></>}
+    </div>
+  );
+}

packages/desktop/src/controller/index.tsx

@@ -2,10 +2,11 @@ import NirvanaApi, { ApiCalls } from "./nirvanaApi";
 import { useMutation, useQuery } from "react-query";
 
 // ====== QUERIES
-export function useAuthCheck() {
+export function useAuthCheck(jwtToken?: string) {
   return useQuery("AUTH_CHECK", ApiCalls.authCheck, {
     retry: false,
     refetchOnWindowFocus: false,
+    enabled: jwtToken ? true : false,
   });
 }
 

packages/desktop/src/electron/constants.ts

@@ -12,14 +12,28 @@ export enum STORE_ITEMS {
   AUTH_SESSION_JWT = "AUTH_SESSION_JWT",
 }
 
-export const Dimensions = {
-  default: {
-    height: 700,
-    width: 500,
+export type Dimensions = {
+  height: number;
+  width: number;
+};
+
+export const DimensionPresets = {
+  terminal: {
+    height: 675,
+    width: 400,
   },
-  selectedConvo: {
-    height: 700,
-    width: 900,
+  terminalDetailOrOverlay: {
+    height: 675,
+    width: 800,
+  },
+  terminalDetailOverlay: {
+    height: 675,
+    width: 1100,
+  },
+  // todo: typically just send whatever dimensions are needed
+  overlayMode: {
+    height: -1,
+    width: 300,
   },
 };
 

packages/desktop/src/electron/preload.ts

@@ -1,6 +1,6 @@
+import Channels, { Dimensions } from "./constants";
 import { contextBridge, ipcRenderer } from "electron";
 
-import Channels from "./constants";
 import { STORE_ITEMS } from "./constants";
 
 const electronAPI = {
@@ -20,7 +20,7 @@ const electronAPI = {
   },
 
   window: {
-    resizeWindow(newDimensions: { width: number; height: number }) {
+    resizeWindow(newDimensions: Dimensions) {
       ipcRenderer.send(Channels.RESIZE_WINDOW, newDimensions);
     },
   },

packages/desktop/src/index.ts

@@ -1,6 +1,7 @@
 import { BrowserWindow, app, dialog, globalShortcut, ipcMain } from "electron";
 import Channels, { Dimensions } from "./electron/constants";
 
+import { DimensionPresets } from "./electron/constants";
 import { handleGoogleLogin } from "./electron/handleLogin";
 import path from "path";
 import store from "./electron/store";
@@ -24,11 +25,12 @@ export let browserWindow: BrowserWindow;
 const createWindow = (): void => {
   // Create the browser window.
   browserWindow = new BrowserWindow({
-    ...Dimensions.default,
+    ...DimensionPresets.terminal,
     webPreferences: {
       preload: MAIN_WINDOW_PRELOAD_WEBPACK_ENTRY,
       sandbox: true,
     },
+    alwaysOnTop: true,
     icon: "./assets/1024x1024.icns",
   });
 

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

@@ -0,0 +1,3 @@
+export default function LineDetails() {
+  return <div className="flex flex-col flex-1">this is the line details</div>;
+}

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

@@ -0,0 +1,3 @@
+export default function Overlay() {
+  return <div className="flex flex-col flex-1">this is the overlay</div>;
+}

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

@@ -1,3 +1,28 @@
+import { DimensionPresets, Dimensions } from "../../electron/constants";
+import React, { useState } from "react";
+
+import LineDetails from "../lineDetails";
+import NirvanaTerminal from "../terminal";
+import Overlay from "../overlay";
+import { Search } from "carbon-components-react";
+import { useEffect } from "react";
+
 export default function NirvanaRouter() {
-  return <>this is the top level router</>;
+  const [desktopMode, setDesktopMode] = useState<Dimensions>(
+    DimensionPresets.terminalDetailOverlay
+  );
+
+  useEffect(() => {
+    window.electronAPI.window.resizeWindow(desktopMode);
+  }, [desktopMode]);
+
+  return (
+    <div className="h-screen w-screen flex flex-row">
+      <NirvanaTerminal />
+
+      <LineDetails />
+
+      <Overlay />
+    </div>
+  );
 }

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

@@ -0,0 +1,9 @@
+import NirvanaHeader from "../../components/header";
+
+export default function NirvanaTerminal() {
+  return (
+    <div className="flex flex-col flex-1">
+      <NirvanaHeader />
+    </div>
+  );
+}