better display of status and all separately

packages/desktop/src/components/User/userAvatarWithStatus.tsx

@@ -0,0 +1,36 @@
+import { User, UserStatus } from "@nirvana/core/models";
+
+export default function UserAvatarWithStatus(props: { user: User }) {
+  return (
+    <span className="relative">
+      <img
+        src={props.user.picture}
+        className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
+        alt=""
+      />
+
+      <UserStatusBubble status={props.user.status} />
+    </span>
+  );
+}
+
+export function UserStatusBubble(props: { status: UserStatus }) {
+  switch (props.status) {
+    case UserStatus.ONLINE:
+      return (
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+      );
+    case UserStatus.OFFLINE:
+      return (
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-slate-400 h-3 w-3"></span>
+      );
+    case UserStatus.FLOW_STATE:
+      return (
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-pink-400 h-3 w-3"></span>
+      );
+    default:
+      return (
+        <span className="absolute bottom-0 -right-1.5 rounded-full bg-pink-400 h-3 w-3"></span>
+      );
+  }
+}

packages/desktop/src/components/User/userStatusText.tsx

@@ -0,0 +1,16 @@
+import { UserStatus } from "@nirvana/core/models";
+
+export default function UserStatusText(props: { status: UserStatus }) {
+  switch (props.status) {
+    case UserStatus.ONLINE:
+      return <span className="text-emerald-600 text-sm lowercase">ONLINE</span>;
+    case UserStatus.OFFLINE:
+      return <></>;
+    case UserStatus.FLOW_STATE:
+      return (
+        <span className="text-pink-400 text-sm lowercase">FLOW STATE</span>
+      );
+    default:
+      return <></>;
+  }
+}

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

@@ -1,23 +1,32 @@
 import { Add, LinkRounded } from "@mui/icons-material";
 
+import { $selectedConversation } from "../../../controller/recoil";
 import { Avatar } from "antd";
 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 { useGetAllContactBasicDetails } from "../../../controller";
+import { useRecoilState } from "recoil";
 
 export default function Conversations() {
   const { data: contactDetailsListResponse, isLoading } =
     useGetAllContactBasicDetails();
+  const [selectedConvo, setSelectedConvo] = useRecoilState(
+    $selectedConversation
+  );
 
-  /** 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
-   */
+  // todo: show conversations with activity/new content for me first...then the rest of the contacts
+
+  const selectContact = async (googleUserId: string) => {
+    // if this person is already selected, unselect
+    if (selectedConvo === googleUserId) {
+      setSelectedConvo(null);
+      return;
+    }
+
+    setSelectedConvo(googleUserId);
+  };
 
   return (
     <>
@@ -48,16 +57,28 @@ export default function Conversations() {
 
       {isLoading ? <SkeletonLoader /> : null}
       <div className="flex flex-col m-5 p-4">
+        <span className="flex flex-row justify-start items-center mb-2">
+          <span className="ml-2 tracking-wider text-slate-100 uppercase text-sm font-semibold">
+            Inbox
+          </span>
+        </span>
+
         {contactDetailsListResponse?.contactsDetails.map((contactDetail) => {
           return (
-            <div className="flex flex-row items-center">
-              <Avatar src={contactDetail.otherUser.picture} />
+            <div
+              onClick={() => selectContact(contactDetail.otherUser.googleId)}
+              className="flex flex-row items-center hover:bg-slate-600 group border-t border-t-slate-500
+            py-4 px-2 cursor-pointer"
+            >
+              <UserAvatarWithStatus user={contactDetail.otherUser} />
 
               <span className="text-white font-semibold ml-2">
                 {contactDetail.otherUser.name}
               </span>
 
-              <span className="ml-2">{contactDetail.otherUser.status}</span>
+              <span className="ml-2">
+                <UserStatusText status={contactDetail.otherUser.status} />
+              </span>
 
               <span className="ml-auto">speaking...</span>
             </div>

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

@@ -5,6 +5,7 @@ import { useRecoilState, useSetRecoilState } from "recoil";
 
 import { GlobalHotKeys } from "react-hotkeys";
 import { STORE_ITEMS } from "../../../electron/constants";
+import UserAvatarWithStatus from "../../../components/User/userAvatarWithStatus";
 import { useGetUserDetails } from "../../../controller/index";
 import { useRef } from "react";
 
@@ -48,7 +49,7 @@ export default function Header() {
     <>
       <GlobalHotKeys handlers={handlers} keyMap={keyMap}></GlobalHotKeys>
 
-      <div className="flex flex-row items-center bg-slate-800 h-20">
+      <div className="flex flex-row items-center bg-slate-800 h-20 px-5">
         <Logo type={LogoType.small} className="scale-[0.4]" />
         <input
           ref={inputRef}
@@ -58,18 +59,13 @@ export default function Header() {
           onChange={(e) => setSearchQuery(e.target.value)}
         />
 
-        <button className="ml-auto hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
+        <button className="ml-auto mr-2 hover:scale-110 bg-slate-600 text-teal-500 py-1 px-2 rounded-lg text-sm">
           flow state
         </button>
 
         <Dropdown overlay={ProfileMenu} trigger={["click"]}>
-          <span className="relative mx-5">
-            <img
-              src={user.picture}
-              className="rounded-lg h-8 hover:bg-slate-200 hover:cursor-pointer hover:scale-110"
-              alt="cannot find"
-            />
-            <span className="absolute bottom-0 -right-1.5 rounded-full bg-emerald-600 h-3 w-3"></span>
+          <span className="px-5">
+            <UserAvatarWithStatus user={user} />
           </span>
         </Dropdown>
       </div>