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>
+  );
+}