From e17a31bca5383842a7821982eeaa1c957aca356b Mon Sep 17 00:00:00 2001
From: BrickheadJohnny <johnny.zgen@gmail.com>
Date: Mon, 9 Dec 2024 12:49:29 +0100
Subject: [PATCH] feat(MemberCount): display actual member count in a tooltip

---
 .../RoleCard/components/MemberCount.tsx       | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/[guild]/RoleCard/components/MemberCount.tsx b/src/components/[guild]/RoleCard/components/MemberCount.tsx
index b6a9e31b3b..59833785ae 100644
--- a/src/components/[guild]/RoleCard/components/MemberCount.tsx
+++ b/src/components/[guild]/RoleCard/components/MemberCount.tsx
@@ -45,10 +45,12 @@ const MemberCount = ({
 
 type WithSyncProps = Props & {
   roleId?: number
+  tooltipContent?: string // used only if sync status is not "STARTED"
 }
 
 const MemberCountWithSyncIndicator = ({
   roleId,
+  tooltipContent,
   ...rest
 }: PropsWithChildren<WithSyncProps>) => {
   const { status, data } = useActiveStatusUpdates(roleId)
@@ -76,6 +78,19 @@ const MemberCountWithSyncIndicator = ({
       </Tooltip>
     )
 
+  if (!!tooltipContent)
+    return (
+      <Tooltip>
+        <TooltipTrigger>
+          <MemberCount {...rest} />
+        </TooltipTrigger>
+
+        <TooltipContent>
+          <p>{tooltipContent}</p>
+        </TooltipContent>
+      </Tooltip>
+    )
+
   return <MemberCount {...rest} />
 }
 
@@ -101,7 +116,9 @@ const RoleCardMemberCount = ({
   memberCount,
   roleId,
   lastSyncedAt,
-}: PropsWithChildren<WithSyncProps & { lastSyncedAt: string }>) => {
+}: PropsWithChildren<
+  Omit<WithSyncProps, "tooltipContent"> & { lastSyncedAt: string }
+>) => {
   const { featureFlags } = useGuild()
   const { isAdmin } = useGuildPermission()
   const { isSuperAdmin } = useUser()
@@ -111,6 +128,9 @@ const RoleCardMemberCount = ({
       memberCount={memberCount}
       roleId={roleId}
       className="!bg-transparent text-muted-foreground"
+      tooltipContent={new Intl.NumberFormat("en-US", {
+        notation: "standard",
+      }).format(memberCount)}
     >
       {isSuperAdmin ? (
         <MemberCountLastSyncTooltip lastSyncedAt={lastSyncedAt}>