adding new convo page with search

packages/desktop/src/controller/recoil.tsx

@@ -15,3 +15,9 @@ export const $selectedConversation = atom<string>({
   key: "SELECTED_CONVERSATION",
   default: null,
 });
+
+// new convo page trigger
+export const $newConvoPage = atom<boolean>({
+  key: "NEW_CONVO_PAGE",
+  default: false,
+});

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

@@ -1,14 +1,17 @@
+import {
+  $newConvoPage,
+  $selectedConversation,
+} from "../../../controller/recoil";
 import { Add, LinkRounded, RecordVoiceOverTwoTone } from "@mui/icons-material";
 import { Avatar, Tooltip } from "antd";
 import { Button, Tab, Tabs } from "@mui/material";
+import { useRecoilState, useSetRecoilState } from "recoil";
 
-import { $selectedConversation } from "../../../controller/recoil";
 import { ContactDetails } from "@nirvana/core/responses/getContacts.response";
 import { FaVolumeUp } from "react-icons/fa";
 import SkeletonLoader from "../../../components/loading/skeleton";
 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";
 
@@ -25,6 +28,7 @@ export default function Conversations() {
   const [selectedConvo, setSelectedConvo] = useRecoilState(
     $selectedConversation
   );
+  const setNewConvoPageTrigger = useSetRecoilState($newConvoPage);
 
   const [selectedTab, setSelectedTab] = useState<ConvoTab>(ConvoTab.INBOX);
 
@@ -32,6 +36,10 @@ export default function Conversations() {
     setSelectedTab(newTab);
   };
 
+  const handleNewConvo = () => {
+    setNewConvoPageTrigger(true);
+  };
+
   // todo: show conversations with activity/new content for me first...then the rest of the contacts
 
   const selectContact = async (googleUserId: string) => {
@@ -79,6 +87,7 @@ export default function Conversations() {
           startIcon={<RecordVoiceOverTwoTone />}
           size="small"
           style={{ textTransform: "none" }}
+          onClick={handleNewConvo}
         >
           New
         </Button>

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

@@ -1,8 +1,9 @@
+import { $newConvoPage, $searchQuery } from "../../controller/recoil";
 import Logo, { LogoType } from "../../components/Logo";
 
-import { $searchQuery } from "../../controller/recoil";
 import Conversations from "./conversations";
 import Header from "./header";
+import NewConvo from "./newConvo";
 // import Header from "./header";
 import Search from "./search";
 // import SelectedConversation from "./selectedConversation";
@@ -13,6 +14,16 @@ export default function Home() {
   // const { data: user } = useGetUserDetails();
   const searchQuery = useRecoilValue($searchQuery);
 
+  const newConvoPage = useRecoilValue($newConvoPage);
+
+  const renderMainContent = () => {
+    if (searchQuery) return <Search />;
+
+    if (newConvoPage) return <NewConvo />;
+
+    return <Conversations />;
+  };
+
   return (
     <div className="h-screen bg-zinc-700 flex flex-row">
       <div className="flex-1">
@@ -21,7 +32,8 @@ export default function Home() {
 
         {/*  main content */}
 
-        {searchQuery ? <Search /> : <Conversations />}
+        {/* {renderMainContent()} */}
+        <NewConvo />
       </div>
 
       {/* <SelectedConversation /> */}

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

@@ -0,0 +1,28 @@
+import {
+  Button,
+  FormControl,
+  Input,
+  InputAdornment,
+  InputLabel,
+  TextField,
+} from "@mui/material";
+
+import { Search } from "@mui/icons-material";
+
+export default function NewConvo() {
+  return (
+    <div className="flex flex-col items-start">
+      <div className="flex flex-row w-full">
+        <Button size="small">back</Button>
+
+        <TextField
+          autoFocus
+          color="secondary"
+          label="Search by name or email"
+          variant="filled"
+          fullWidth
+        />
+      </div>
+    </div>
+  );
+}