From d9c7f51ea58eeb2756469a72ae267d0783b4aa6c Mon Sep 17 00:00:00 2001
From: AmarTrebinjac <amartrebinjac@gmail.com>
Date: Thu, 16 Apr 2026 21:50:09 +0000
Subject: [PATCH] feat: show claimable milestone count badge on Game Center
 sidebar item

Add a count badge to the Game Center sidebar menu item that displays
the number of milestone quests waiting to be claimed. Uses the existing
useQuestDashboard hook data and follows the Pending Posts badge pattern.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../sidebar/sections/MainSection.tsx          | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/shared/src/components/sidebar/sections/MainSection.tsx b/packages/shared/src/components/sidebar/sections/MainSection.tsx
index 46ec6e2ea8..fdedbf7d30 100644
--- a/packages/shared/src/components/sidebar/sections/MainSection.tsx
+++ b/packages/shared/src/components/sidebar/sections/MainSection.tsx
@@ -27,6 +27,8 @@ import {
   featureYearInReview,
   questsFeature,
 } from '../../../lib/featureManagement';
+import { useQuestDashboard } from '../../../hooks/useQuestDashboard';
+import { Typography, TypographyColor } from '../../typography/Typography';
 
 export const MainSection = ({
   isItemsButton,
@@ -48,6 +50,12 @@ export const MainSection = ({
     feature: questsFeature,
     shouldEvaluate: isLoggedIn,
   });
+  const { data: questDashboard } = useQuestDashboard();
+  const claimableMilestoneCount = useMemo(
+    () =>
+      questDashboard?.milestone?.filter((quest) => quest.claimable).length ?? 0,
+    [questDashboard?.milestone],
+  );
 
   const menuItems: SidebarMenuItem[] = useMemo(() => {
     // this path can be opened on extension so it purposly
@@ -102,6 +110,17 @@ export const MainSection = ({
           path: `${webappUrl}game-center`,
           isForcedLink: true,
           requiresLogin: true,
+          ...(claimableMilestoneCount > 0 && {
+            rightIcon: () => (
+              <Typography
+                color={TypographyColor.Secondary}
+                bold
+                className="rounded-6 bg-background-subtle px-1.5"
+              >
+                {claimableMilestoneCount}
+              </Typography>
+            ),
+          }),
         }
       : undefined;
 
@@ -162,6 +181,7 @@ export const MainSection = ({
       ] as (SidebarMenuItem | undefined)[]
     ).filter((item): item is SidebarMenuItem => !!item);
   }, [
+    claimableMilestoneCount,
     ctaCopy,
     isCustomDefaultFeed,
     isLoggedIn,