Feature: Add badges

[yashksaini-coder]

Fixes: #1002

Description

This PR fixes the useColorMode hook error that was causing the leaderboard page to crash and implements UI improvements for the badge display system. The leaderboard was previously crashing with the error "Hook useColorMode is called outside the " when navigating to /dashboard#leaderboard. Additionally, this PR enhances the badge display by adding a dedicated column and increasing badge sizes for better visibility.

Key Changes:

• Fixed useColorMode hook error by implementing useSafeColorMode hook that safely handles SSR and DOM-based theme detection
• Added a new "Badges" column in the leaderboard table for better organization
• Increased badge sizes (44px in main table, 36px in top performer cards, 32px in podium cards)
• Improved layout by separating badges from username cell into their own dedicated column

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• UI/UX improvement (design, layout, or styling updates)

Changes Made

Bug Fixes:

1. Fixed useColorMode hook error in leaderboard.tsx and PRListModal.tsx

   • Replaced useColorMode from @docusaurus/theme-common with custom useSafeColorMode hook
   • The new hook reads theme from DOM (data-theme attribute) instead of relying on ColorModeProvider context
   • Prevents SSR hydration mismatches and works outside the Layout component tree

2. Fixed useNavbarMobileSidebar hook error in Navbar/Content/index.tsx

   • Created SafeMobileSidebarToggle wrapper component to handle cases where provider isn't available
   • Prevents crashes when mobile sidebar toggle is rendered outside provider context

UI/UX Improvements:

1. Added dedicated "Badges" column to leaderboard table

   • New column positioned after "Points" column
   • Updated grid layout: grid-template-columns: 0.5fr 0.5fr 2fr 1fr 1fr 1.5fr
   • Badges moved from username cell to dedicated column for better organization

2. Increased badge sizes for better visibility:

   • Main table badges: 32px → 44px (37.5% increase)
   • Top performer cards: 28px → 36px
   • Podium cards: 24px → 32px
   • Improved gap spacing between badges (6px → 8px)

3. Enhanced badge styling:

   • Better hover effects with scale animation
   • Improved border radius (6px → 8px) for smoother appearance
   • Added dedicated CSS class for badges column cell

Files Modified:

• src/components/dashboard/LeaderBoard/leaderboard.tsx - Fixed hook usage, added badges column
• src/components/dashboard/LeaderBoard/PRListModal.tsx - Fixed hook usage
• src/components/dashboard/LeaderBoard/leaderboard.css - Updated styles for new column and larger badges
• src/utils/useSafeColorMode.ts - Custom hook for safe color mode detection (already existed, now used)
• src/theme/Navbar/Content/index.tsx - Fixed mobile sidebar toggle error

Dependencies

• No new dependencies required
• Uses existing Docusaurus utilities: @docusaurus/ExecutionEnvironment
• All changes are backward compatible

Checklist

• My code follows the style guidelines of this project.
• I have tested my changes across major browsers and devices
• My changes do not generate new console warnings or errors (except for known TypeScript false positives that don't affect functionality)
• I ran npm run build and attached screenshot(s) in this PR.
• This is already assigned Issue to me, not an unassigned issue.

Screenshots

Before: Leaderboard page crashed with useColorMode error
After: Leaderboard loads successfully with badges displayed in dedicated column

Testing

• ✅ Tested on /dashboard#leaderboard route
• ✅ Verified badges display correctly in new column
• ✅ Confirmed no console errors related to useColorMode
• ✅ Tested theme switching (light/dark mode)
• ✅ Verified responsive behavior maintained

Related Issues

Fixes the useColorMode hook error that was preventing the leaderboard page from loading.

[vercel]

@yashksaini-coder is attempting to deploy a commit to the recode Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. The estimated time for response is 5–8 hrs.

In the meantime, please provide all necessary screenshots and make sure you run - npm build run , command and provide a screenshot, a video recording, or an image of the update you made below, which helps speed up the review and assignment. If you have questions, reach out to LinkedIn. Your contributions are highly appreciated!😊

Note: I maintain the repo issue every day twice at 8:00 AM IST and 9:00 PM IST. If your PR goes stale for more than one day, you can tag and comment on this same issue by tagging @sanjay-kv.

We are here to help you on this journey of open source. Consistent 20 contributions are eligible for sponsorship 💰

🎁 check our list of amazing people we sponsored so far: GitHub Sponsorship. ✨

📚Your perks for contribution to this community 👇🏻

1. Get free Consultation use code recode50 to get free: Mentorship for free.

2. Get the Ebook for free use code recode at checkout: Data Science cheatsheet for Beginners.

3. Check out this weekly Newsletter: Sanjay's Newsletter.

If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[yashksaini-coder]

@sanjay-kv Hi please review this PR and let me know the status,

Final Preview:-

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
recode-website	Ready	Preview	Comment	Nov 13, 2025 5:06am

[sanjay-kv]

https://www.loom.com/share/caf132f0c74b4d45911dfb4741dd9025

bug

[Adez017]

https://www.loom.com/share/caf132f0c74b4d45911dfb4741dd9025

bug

@yashksaini-coder , need to fix this

[sanjay-kv]

@Adez017 can you check the bug too.

[Adez017]

@Adez017 can you check the bug too.

ok @sanjay-kv , will check this out.

[Adez017]

@yashksaini-coder , any updates on this . i think there is some changes for with and thats getting the error in DOM . could you rectify on this ?

[yashksaini-coder]

@yashksaini-coder , any updates on this . i think there is some changes for with and thats getting the error in DOM . could you rectify on this ?

Yes just finished dinner, working on a fix

[github-actions]

✅ Synchronized metadata from Issue #1002:

• Labels: enhancement, level 1, recode, hacktoberfest-accepted
• Milestone: recode:launch 3.0

[github-actions]

✅ Synchronized metadata from Issue #1002:

• Labels: enhancement, level 1, recode, hacktoberfest-accepted
• Milestone: recode:launch 3.0

[yashksaini-coder]

@sanjay-kv @Adez017 Please review I've refactored and fix the errors, also add A new Badge Component showcase area Component

Add.Badges.webm

[Adez017]

@yashksaini-coder , pretty good work :) . resolve the conflicts and we are good to go.

[github-actions]

✅ Synchronized metadata from Issue #1002:

• Labels: enhancement, level 1, recode, hacktoberfest-accepted
• Milestone: recode:launch 3.0

[yashksaini-coder]

@yashksaini-coder , pretty good work :) . resolve the conflicts and we are good to go.

Conflicts resolved, please do final review @Adez017

[Adez017]

@sanjay-kv , ready to merge