Show received friend request count in sidebar

src/components/AccountSidebar.astro

@@ -1,6 +1,7 @@
 ---
 import AstroIcon from './AstroIcon.astro';
 import { TeamDropdown } from './TeamDropdown/TeamDropdown';
+import { SidebarFriendsCounter } from './Friends/SidebarFriendsCounter';
 
 export interface Props {
   activePageId: string;
@@ -142,12 +143,18 @@ const sidebarLinks = [
                       {sidebarLink.title}
                     </span>
 
-                    {sidebarLink.isNew && !isActive && (
+                    {sidebarLink.isNew &&
+                      sidebarLink.id !== 'friends' &&
+                      !isActive && (
                         <span class='relative mr-1 flex items-center'>
                           <span class='relative rounded-full bg-gray-200 p-1 text-xs' />
                           <span class='absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs' />
                         </span>
                       )}
+
+                    {sidebarLink.id === 'friends' && (
+                      <SidebarFriendsCounter client:load />
+                    )}
                   </a>
                 </li>
               );
@@ -159,7 +166,12 @@ const sidebarLinks = [
   }
   <!-- /End Desktop Sidebar -->
 
-  <div class:list={['grow px-0 py-0 md:py-10', { 'md:px-10': hasDesktopSidebar, 'md:px-5': !hasDesktopSidebar }]}>
+  <div
+    class:list={[
+      'grow px-0 py-0 md:py-10',
+      { 'md:px-10': hasDesktopSidebar, 'md:px-5': !hasDesktopSidebar },
+    ]}
+  >
     <slot />
   </div>
 </div>

src/components/Friends/EmptyFriends.tsx

@@ -19,8 +19,8 @@ export function EmptyFriends(props: EmptyFriendsProps) {
           class="mb-2 h-[60px] w-[60px] opacity-10 sm:h-[120px] sm:w-[120px]"
         />
         <h2 class="text-lg font-bold sm:text-xl">Invite your Friends</h2>
-        <p className="mb-4 mt-1 max-w-[400px] text-sm leading-loose text-gray-500">
-          Invite your friends to join you on your learning journey.
+        <p className="mb-4 mt-1 max-w-[400px] text-sm leading-relaxed text-gray-500">
+          Share the unique link below with your friends to track their skills and progress.
         </p>
 
         <div class="flex w-full max-w-[352px] items-center justify-center gap-2 rounded-lg border-2 p-1 text-sm">
@@ -35,7 +35,7 @@ export function EmptyFriends(props: EmptyFriendsProps) {
             readonly
           />
           <button
-            class={`flex items-center justify-center gap-1 rounded-md border-0 p-2 px-3 text-sm text-black ${
+            class={`flex items-center justify-center gap-1 rounded-md border-0 p-2 px-4 text-sm text-black ${
               isCopied
                 ? 'bg-green-300 hover:bg-green-300'
                 : 'bg-gray-200 hover:bg-gray-300'

src/components/Friends/FriendsPage.tsx

@@ -85,10 +85,6 @@ export function FriendsPage() {
     : 'https://roadmap.sh';
   const befriendUrl = `${baseUrl}/befriend?u=${user?.id}`;
 
-  if (friends.length === 0) {
-    return <EmptyFriends befriendUrl={befriendUrl} />;
-  }
-
   const selectedGroupingType = groupingTypes.find(
     (grouping) => grouping.value === selectedGrouping
   );

src/components/Friends/SidebarFriendsCounter.tsx

@@ -0,0 +1,46 @@
+import { httpGet } from '../../lib/http';
+import type { TeamListResponse } from '../TeamDropdown/TeamDropdown';
+import { useEffect, useState } from 'preact/hooks';
+
+type GetFriendCountsResponse = {
+  sentCount: number;
+  acceptedCount: number;
+  receivedCount: number;
+  rejectedCount: number;
+  gotRejectedCount: number;
+};
+
+export function SidebarFriendsCounter() {
+  const [friendCounts, setFriendCounts] = useState<GetFriendCountsResponse>();
+  async function getFriendCounts() {
+    const { response, error } = await httpGet<GetFriendCountsResponse>(
+      `${import.meta.env.PUBLIC_API_URL}/v1-get-friend-counts`
+    );
+
+    if (error || !response) {
+      return;
+    }
+
+    setFriendCounts(response);
+  }
+
+  useEffect(() => {
+    getFriendCounts().finally(() => null);
+  }, []);
+
+  const pendingCount = friendCounts?.receivedCount || 0;
+  if (!pendingCount) {
+    return (
+      <span class="relative mr-1 flex items-center">
+        <span class="relative rounded-full bg-gray-200 p-1 text-xs" />
+        <span class="absolute bottom-0 left-0 right-0 top-0 animate-ping rounded-full bg-gray-400 p-1 text-xs" />
+      </span>
+    );
+  }
+
+  return (
+    <span class="flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-xs font-medium text-white">
+      {pendingCount}
+    </span>
+  );
+}