adding route for the getting of conversation details

packages/desktop/src/controller/index.tsx

@@ -45,6 +45,7 @@ export function useGetUserDetails() {
     () => getUserDetails(authTokens?.accessToken, authTokens?.idToken),
     {
       retry: false,
+      refetchOnWindowFocus: false,
     }
   );
 }

packages/desktop/src/controller/recoil.tsx

@@ -18,3 +18,9 @@ export const $authFailureCount = atom<number>({
   key: "AUTH_FAILURE_COUNT",
   default: 0,
 });
+
+// google Id of the selected person/conversation
+export const $selectedConversation = atom<string>({
+  key: "SELECTED_CONVERSATION",
+  default: null,
+});

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

@@ -7,6 +7,15 @@ import {
 } from "@mui/icons-material";
 
 export default function Conversations() {
+  /** Data we need: have this huge data store client side to be able to access
+   * for now, need a simple list of contacts
+   * - first list is the live/pinned
+   * - second list is the pending invites, out going or incoming? or this on a separate page?
+   * - third list is just the rest of my contacts
+   *
+   * web sockets for all of my active contacts
+   * - actually play messages if pinned contact for me
+   */
   return (
     <>
       {/* actions navbar */}

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

@@ -1,5 +1,9 @@
-import { $searchQuery } from "../../../controller/recoil";
-import { FaPaperPlane } from "react-icons/fa";
+import {
+  $searchQuery,
+  $selectedConversation,
+} from "../../../controller/recoil";
+
+import { FaAngleRight } from "react-icons/fa";
 import { Tooltip } from "@mui/material";
 import { User } from "@nirvana/core/models";
 import { useEffect } from "react";
@@ -14,6 +18,10 @@ import { useSearch } from "../../../controller";
 export default function Search() {
   const [searchQuery, setSearchQuery] = useRecoilState($searchQuery);
 
+  const [selectedConvo, setSelectedConvo] = useRecoilState(
+    $selectedConversation
+  );
+
   const { data, isLoading, isError, refetch } = useSearch();
 
   useEffect(() => {
@@ -33,11 +41,22 @@ export default function Search() {
     setSearchQuery("");
   };
 
+  const selectContact = async (googleUserId: string) => {
+    // if this person is already selected, unselect
+    if (selectedConvo === googleUserId) {
+      setSelectedConvo(null);
+      return;
+    }
+
+    setSelectedConvo(googleUserId);
+  };
+
   const renderUserRow = (user: User) => {
     return (
       <span
-        className="border-t border-t-slate-400 py-5 flex flex-row justify-start 
-      items-center w-full hover:bg-slate-600 cursor-pointer"
+        onClick={() => selectContact(user.googleId)}
+        className="border-t border-t-slate-500 py-5 flex flex-row justify-start 
+      items-center w-full hover:bg-slate-600 cursor-pointer group"
       >
         <span className="relative mx-5">
           <img
@@ -59,7 +78,7 @@ export default function Search() {
         {/* actions */}
         <Tooltip title="Request connect">
           <button className="hover:bg-slate-300 p-1 flex flex-row items-center justify-center ml-auto">
-            <FaPaperPlane className="text-emerald-500 text-lg" />
+            <FaAngleRight className="group-hover:text-slate-300 text-lg" />
           </button>
         </Tooltip>
       </span>

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

@@ -0,0 +1,19 @@
+import { $selectedConversation } from "../../../controller/recoil";
+import { useRecoilState } from "recoil";
+
+export default function SelectedConversation() {
+  const [selectedConvo, setSelectedConvo] = useRecoilState(
+    $selectedConversation
+  );
+
+  // want to grab the right data based on the selected contact
+
+  /** Data we need:
+   * user details of the selected person...should be in the search results client side, but just do another fetch?
+   * websocket for the status only if there exists a relationship?
+   * ability to see my relationship with this user...whether null, pending, active, etc.
+   * all messages between me and them
+   */
+
+  return <span>this is the selected conversation</span>;
+}