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 />