adding tabs for the convos and dark theme nice

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

@@ -25,13 +25,18 @@ export default function ProtectedRoute({
       .then((jwtToken: string) => {
         if (jwtToken) {
           NirvanaApi._jwtToken = jwtToken;
+          setJwtToken(jwtToken);
           refetch();
+
+          console.log("retrieved jwtToken from storage", jwtToken);
+        } else {
+          console.log("no jwt token in store");
         }
       });
   }, []);
 
   useEffect(() => {
-    console.log("change in jwt token");
+    console.log("change in jwt token", jwtToken);
 
     if (jwtToken) {
       window.electronAPI.store.set(STORE_ITEMS.AUTH_SESSION_JWT, jwtToken);

packages/desktop/src/nirvanaApp.tsx

@@ -1,4 +1,5 @@
 import { QueryClient, QueryClientProvider } from "react-query";
+import { ThemeProvider, createTheme } from "@mui/material";
 
 import Home from "./pages/Home";
 import Login from "./pages/Login";
@@ -16,18 +17,26 @@ export const queryClient = new QueryClient();
 
 export const socket = io("http://localhost:5000");
 
+const darkTheme = createTheme({
+  palette: {
+    mode: "dark",
+  },
+});
+
 function NirvanaApp() {
   return (
     <>
       <QueryClientProvider client={queryClient}>
-        <RecoilRoot>
-          <ProtectedRoute>
-            <Home />
-          </ProtectedRoute>
-          <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
-        </RecoilRoot>
+        <ThemeProvider theme={darkTheme}>
+          <RecoilRoot>
+            <ProtectedRoute>
+              <Home />
+            </ProtectedRoute>
+            <ReactQueryDevtools initialIsOpen={true} position={"bottom-left"} />
+          </RecoilRoot>
 
-        <Toaster />
+          <Toaster />
+        </ThemeProvider>
       </QueryClientProvider>
     </>
   );

packages/desktop/src/pages/Home/conversations/index.tsx

@@ -1,5 +1,6 @@
 import { Add, LinkRounded } from "@mui/icons-material";
 import { Avatar, Tooltip } from "antd";
+import { Tab, Tabs } from "@mui/material";
 
 import { $selectedConversation } from "../../../controller/recoil";
 import { ContactDetails } from "@nirvana/core/responses/getContacts.response";
@@ -9,7 +10,14 @@ import UserAvatarWithStatus from "../../../components/User/userAvatarWithStatus"
 import UserStatusText from "../../../components/User/userStatusText";
 import { useRecoilState } from "recoil";
 import useSocketData from "../../../controller/sockets";
+import { useState } from "react";
 
+enum ConvoTab {
+  LIVE = "LIVE",
+  TUNED = "TUNED",
+  INBOX = "INBOX",
+  REQUESTS = "REQUESTS",
+}
 export default function Conversations() {
   // const { data: contactDetailsListResponse, isLoading } =
   //   useGetAllContactBasicDetails();
@@ -18,6 +26,12 @@ export default function Conversations() {
     $selectedConversation
   );
 
+  const [selectedTab, setSelectedTab] = useState<ConvoTab>(ConvoTab.INBOX);
+
+  const handleChangeTab = (event: any, newTab: ConvoTab) => {
+    setSelectedTab(newTab);
+  };
+
   // todo: show conversations with activity/new content for me first...then the rest of the contacts
 
   const selectContact = async (googleUserId: string) => {
@@ -32,6 +46,21 @@ export default function Conversations() {
 
   return (
     <>
+      <div className="flex flex-row justify-between">
+        <Tabs
+          value={selectedTab}
+          onChange={handleChangeTab}
+          textColor="secondary"
+          indicatorColor="secondary"
+          aria-label="secondary tabs example"
+        >
+          <Tab value={ConvoTab.LIVE} label="LIVE" />
+          <Tab value={ConvoTab.TUNED} label="TUNED IN" />
+          <Tab value={ConvoTab.INBOX} label="INBOX" />
+          <Tab value={ConvoTab.REQUESTS} label="REQUESTS" />
+        </Tabs>
+      </div>
+
       {/* pinned conversations */}
       <div className="m-5 p-4 bg-zinc-500 shadow-lg rounded">
         <Tooltip title="Listen in like a walkie-talkie.">

packages/desktop/src/pages/Home/header/index.tsx

@@ -22,11 +22,8 @@ import { useGetUserDetails } from "../../../controller/index";
 export default function Header() {
   const { data: userDetailsResponse, isLoading } = useGetUserDetails();
   const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
-
   const setJwtToken = useSetRecoilState($jwtToken);
-
   const inputRef = useRef(null);
-
   const [anchorEl, setAnchorEl] = useState(null);
   const openAvatarMenu = Boolean(anchorEl);
 
@@ -97,54 +94,32 @@ export default function Header() {
 
       <Menu
         anchorEl={anchorEl as Element}
-        id="account-menu"
+        id="profile-menu"
         open={openAvatarMenu}
         onClose={handleClose}
         onClick={handleClose}
-        PaperProps={{
-          elevation: 0,
-          sx: {
-            overflow: "visible",
-            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-            mt: 1.5,
-            "& .MuiAvatar-root": {
-              width: 32,
-              height: 32,
-              ml: -0.5,
-              mr: 1,
-            },
-            "&:before": {
-              content: '""',
-              display: "block",
-              position: "absolute",
-              top: 0,
-              right: 14,
-              width: 10,
-              height: 10,
-              bgcolor: "background.paper",
-              transform: "translateY(-50%) rotate(45deg)",
-              zIndex: 0,
-            },
-          },
-        }}
-        transformOrigin={{ horizontal: "right", vertical: "top" }}
-        anchorOrigin={{ horizontal: "right", vertical: "bottom" }}
       >
         <MenuItem onClick={() => updateStatus(UserStatus.ONLINE)}>
           <ListItemIcon>
-            <Check fontSize="small" />
+            {userDetailsResponse?.user.status === UserStatus.ONLINE && (
+              <Check fontSize="small" />
+            )}
           </ListItemIcon>
           Online
         </MenuItem>
         <MenuItem onClick={() => updateStatus(UserStatus.OFFLINE)}>
           <ListItemIcon>
-            <Check fontSize="small" />
+            {userDetailsResponse?.user.status === UserStatus.OFFLINE && (
+              <Check fontSize="small" />
+            )}
           </ListItemIcon>
           Away
         </MenuItem>
         <MenuItem onClick={() => updateStatus(UserStatus.FLOW_STATE)}>
           <ListItemIcon>
-            <Check fontSize="small" />
+            {userDetailsResponse?.user.status === UserStatus.OFFLINE && (
+              <Check fontSize="small" />
+            )}
           </ListItemIcon>
           Flow State
         </MenuItem>