nice count in the sidebar dynamic

packages/web/components/Conversations/PriorityConvoRow.tsx

@@ -1,4 +1,4 @@
-import { Avatar } from "antd";
+import { Avatar, Tooltip } from "antd";
 import { useRecoilValue } from "recoil";
 import {
   checkIncomingMessageSelector,
@@ -7,6 +7,7 @@ import {
 import Conversation from "../../../common/models/conversation";
 import { MasterAvatarGroupWithUserFetch } from "../UserDetails/MasterAvatarGroup";
 import moment from "moment";
+import { FaMicrophoneAlt, FaPlay } from "react-icons/fa";
 
 export default function PriorityConvoRow(props: {
   conversation: Conversation;
@@ -51,6 +52,24 @@ justify-center rounded-lg text-slate-400 font-bold hover:cursor-pointer text-xs"
           {moment(props.conversation.lastActivityDate.toDate()).fromNow()}
         </span>
       </span>
+
+      {isSelected && (
+        <>
+          <Tooltip title={"Record by pressing and holding R on keyboard."}>
+            <span className="ml-auto p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+              <FaMicrophoneAlt className="ml-auto text-md text-orange-800" />
+            </span>
+          </Tooltip>
+
+          <Tooltip
+            title={"Play last convo chunk by pressing SPACE on keyboard."}
+          >
+            <span className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200">
+              <FaPlay className="ml-auto text-md text-emerald-800" />
+            </span>
+          </Tooltip>
+        </>
+      )}
     </span>
   );
 }

packages/web/components/MainTabsOrPages/Priority.tsx

@@ -47,8 +47,6 @@ export default function Priority() {
 
   const selectingPriorityConvoHandler = (event) => {
     const key = event.key;
-    console.log(mapShortcutsToConvoId);
-    console.log(key);
 
     // select the convo based on the right convo
 

packages/web/components/MainTabsOrPages/Sidebar.tsx

@@ -16,6 +16,11 @@ import {
 } from "react-icons/fa";
 import { HiSpeakerphone } from "react-icons/hi";
 import Priority from "./Priority";
+import { useRecoilValue } from "recoil";
+import {
+  countNavigationContentSelector,
+  NavigationContentCount,
+} from "../../recoil/main";
 
 function Sidebar() {
   const router = useRouter();
@@ -28,6 +33,10 @@ function Sidebar() {
     });
   };
 
+  const navCountObject: NavigationContentCount = useRecoilValue(
+    countNavigationContentSelector
+  );
+
   return (
     <div className="flex flex-col justify-start items-baseline w-[20rem]">
       {/* new button */}
@@ -73,7 +82,11 @@ function Sidebar() {
             </span>
           </span>
 
-          <span className="text-slate-300 text-md ml-auto">4</span>
+          {navCountObject.defaultCount > 0 && (
+            <span className="text-slate-300 text-md ml-auto">
+              {navCountObject.defaultCount}
+            </span>
+          )}
         </span>
 
         <span
@@ -97,7 +110,11 @@ function Sidebar() {
             Later
           </span>
 
-          <span className="text-slate-300 text-md ml-auto">1</span>
+          {navCountObject.laterCount > 0 && (
+            <span className="text-slate-300 text-md ml-auto">
+              {navCountObject.laterCount}
+            </span>
+          )}
         </span>
 
         <span
@@ -120,6 +137,12 @@ function Sidebar() {
           <span className="text-md text-slate-400 font-semibold group-hover:text-slate-600">
             Done
           </span>
+
+          {navCountObject.doneCount > 0 && (
+            <span className="text-slate-300 text-md ml-auto">
+              {navCountObject.doneCount}
+            </span>
+          )}
         </span>
 
         <Divider />
@@ -145,10 +168,16 @@ function Sidebar() {
             Drawer
           </span>
 
-          <span className="ml-2 text-emerald-700 bg-emerald-200 bg-opacity-20 p-1 rounded-md text-xs font-semibold flex items-center flex-row space-x-1">
+          <span className="text-emerald-700 bg-emerald-200 bg-opacity-20 p-1 rounded-md text-xs font-semibold flex items-center flex-row space-x-1">
             <HiSpeakerphone />
             <span>new</span>
           </span>
+
+          {navCountObject.drawerCount > 0 && (
+            <span className="text-slate-300 text-md ml-auto">
+              {navCountObject.drawerCount}
+            </span>
+          )}
         </span>
 
         <Divider />

packages/web/recoil/main.tsx

@@ -40,6 +40,9 @@ export enum RecoilActions {
   USER_DATA = "USER_DATA",
 
   SELECTED_CONVERSATION_ATOM = "SELECTED_CONVERSATION_ATOM",
+
+  COUNT_DEFAULT_CONVOS_SELECTOR = "COUNT_DEFAULT_CONVOS_SELECTOR",
+  COUNT_NAVIGATION_ITEMS = "COUNT_NAVIGATION_ITEMS",
 }
 
 export const nirvanaUserDataAtom = atom<NirvanaUser | null>({
@@ -198,6 +201,48 @@ export const doneConvosSelector = selector<Conversation[]>({
   },
 });
 
+export const countDefaultConvosSelector = selector<number>({
+  key: RecoilActions.COUNT_DEFAULT_CONVOS_SELECTOR,
+  get: ({ get }) => {
+    const sortedConvos = get(sortedRoomSelector);
+
+    const userMemberMap = get(allUsersConversationsAtom);
+    const defaultConvos = sortedConvos.filter((convo) => {
+      return (
+        userMemberMap.get(convo.id)?.state == ConversationMemberState.default &&
+        !convo.membersInLiveRoom?.length
+      );
+    });
+
+    return defaultConvos.length;
+  },
+});
+
+export interface NavigationContentCount {
+  doneCount: number;
+  defaultCount: number;
+  laterCount: number;
+  drawerCount: number;
+}
+
+export const countNavigationContentSelector = selector<NavigationContentCount>({
+  key: RecoilActions.COUNT_NAVIGATION_ITEMS,
+  get: ({ get }) => {
+    const laterConvos = get(laterConvosSelector);
+    const doneConvos = get(doneConvosSelector);
+    const defaultCount = get(countDefaultConvosSelector);
+
+    const navCountObject: NavigationContentCount = {
+      defaultCount,
+      laterCount: laterConvos.length,
+      doneCount: doneConvos.length,
+      drawerCount: 0,
+    };
+
+    return navCountObject;
+  },
+});
+
 export enum RelativeTimeConvosSections {
   today = "TODAY",