update leaderboard by 0x3EF8 · Pull Request #38 · hallofcodes/devpulse

0x3EF8 · 2026-03-22T06:58:29Z

update leaderboard

Copilot

Pull request overview

This PR refreshes the leaderboard UI/UX by introducing a new header/banner layout, richer leaderboard visuals (podium + badges + legend), and a stats sidebar, along with a few related client-component and typing adjustments.

Changes:

Add new leaderboard UI components (Banner, InviteFriendsButton, LeaderboardStats) and update the leaderboard header/layout.
Redesign leaderboard ranking presentation with a top-3 podium, updated badge tiers, and a rankings legend.
Dependency/lockfile updates (adds shx) and minor cleanup/typing tweaks in chat/dashboard components.

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
package.json	Adds `shx` to devDependencies.
package-lock.json	Updates lockfile to include `shx` and related dependency graph changes.
app/components/leaderboard/LeaderboardStats.tsx	New leaderboard stats sidebar component (AOS + derived aggregates).
app/components/leaderboard/InviteFriendsButton.tsx	New “Invite Friends” clipboard/share button.
app/components/leaderboard/Header.tsx	New header layout with banner, back button overlay, and invite action.
app/components/leaderboard/Banner.tsx	New banner component (image or generated gradient).
app/components/leaderboard/BackButton.tsx	Adds configurable `href` prop; updates navigation target.
app/components/landing-page/TopLeaderbord.tsx	Simplifies `categories` typing shape on TopMember.
app/components/dashboard/widgets/StatsCard.tsx	Marks component as client-side.
app/components/dashboard/Navbar.tsx	Removes an unused icon import.
app/components/chat/Messages.tsx	Adjusts SyntaxHighlighter typing/spread; edits code block rendering.
app/components/chat/Conversations.tsx	Marks component as client-side.
app/components/LeaderboardTable.tsx	Major leaderboard table redesign: podium, badge tiers/styles, legend, layout changes.
app/components/Chat.tsx	Removes unused `toast` import.
app/(public)/leaderboard/page.tsx	Updates BackButton destination for the public leaderboard list page.
app/(public)/leaderboard/[slug]/page.tsx	Removes standalone BackButton and updates page layout/wrapping.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-22T07:01:46Z

app/components/chat/Messages.tsx

                        <>
-                          {/* @ts-expect-error atomDark style type not compatible with SyntaxHighlighter */}
+                          { }
+


The standalone { } inside the fragment evaluates to an empty object and will be rendered as a React child, which triggers a runtime error (“Objects are not valid as a React child”). Remove this expression entirely.

Copilot · 2026-03-22T07:01:47Z

app/components/LeaderboardTable.tsx

+const getBadgeInfo = (rank: number, hours: number) => {
+  if (hours >= 160) return { label: "MISSION IMPOSSIBLE", class: "badge-impossible", icon: faGhost };
+  if (hours >= 130) return { label: "GOD LEVEL", class: "badge-god", icon: faCrown };
+  if (hours >= 100) return { label: "STARLIGHT", class: "badge-starlight", icon: faStar };
+  if (hours >= 50) return { label: "ELITE", class: "badge-elite", icon: faFire };
+  if (hours >= 20) return { label: "PRO", class: "badge-pro", icon: faBolt };
+  if (hours >= 5) return { label: "NOVICE", class: "badge-novice", icon: faMedal };
+  if (hours >= 1) return { label: "NEWBIE", class: "badge-newbie", icon: faSeedling };
+  return { label: "NONE", class: "badge-none", icon: faMinus }; // 0 hours
+};


rank is not used in getBadgeInfo, which may be flagged by lint rules and makes the API misleading. Either remove the parameter or incorporate rank-based logic if it’s intended to matter.

Copilot · 2026-03-22T07:01:47Z

package.json

    "@types/react-syntax-highlighter": "^15.5.13",
    "eslint": "^9",
    "eslint-config-next": "16.1.6",
+    "shx": "^0.4.0",


shx is added to devDependencies, but there are no package.json scripts (or other repo references) using it. If it’s not needed, remove it; otherwise add/update the script(s) that rely on shx so the dependency is justified.

Suggested change

"shx": "^0.4.0",

Copilot · 2026-03-22T07:01:47Z

app/components/leaderboard/InviteFriendsButton.tsx

+  const handleInvite = () => {
+    if (typeof window !== "undefined") {
+      const inviteUrl = joinCode
+        ? `${window.location.origin}/join/${joinCode}`
+        : window.location.href; // fallback
+
+      const message = leaderboardName
+        ? `Join my coding leaderboard "${leaderboardName}" on DevPulse!\n\nTrack metrics, compete with fellow developers, and showcase your engineering skills.\n\nJoin here: ${inviteUrl}`
+        : `Join my coding leaderboard on DevPulse!\n\nJoin here: ${inviteUrl}`;
+
+      navigator.clipboard.writeText(message);
+      toast.success("Invite message copied to clipboard!");


navigator.clipboard.writeText(...) returns a Promise and can reject (e.g., non-secure context, permissions denied, unsupported browser). Consider awaiting it and handling errors (showing a toast on failure) and/or guarding for navigator.clipboard before calling.

Suggested change

const handleInvite = () => {

if (typeof window !== "undefined") {

const inviteUrl = joinCode

? `${window.location.origin}/join/${joinCode}`

: window.location.href; // fallback

const message = leaderboardName

? `Join my coding leaderboard "${leaderboardName}" on DevPulse!\n\nTrack metrics, compete with fellow developers, and showcase your engineering skills.\n\nJoin here: ${inviteUrl}`

: `Join my coding leaderboard on DevPulse!\n\nJoin here: ${inviteUrl}`;

navigator.clipboard.writeText(message);

toast.success("Invite message copied to clipboard!");

const handleInvite = async () => {

if (typeof window === "undefined") {

return;

}

const inviteUrl = joinCode

? `${window.location.origin}/join/${joinCode}`

: window.location.href; // fallback

const message = leaderboardName

? `Join my coding leaderboard "${leaderboardName}" on DevPulse!\n\nTrack metrics, compete with fellow developers, and showcase your engineering skills.\n\nJoin here: ${inviteUrl}`

: `Join my coding leaderboard on DevPulse!\n\nJoin here: ${inviteUrl}`;

if (!navigator.clipboard || typeof navigator.clipboard.writeText !== "function") {

toast.error("Clipboard is not available in this browser.");

return;

}

try {

await navigator.clipboard.writeText(message);

toast.success("Invite message copied to clipboard!");

} catch (_error) {

toast.error("Failed to copy invite message to clipboard.");

Copilot · 2026-03-22T07:01:47Z

app/components/leaderboard/Header.tsx

+        {/* Using a temporary placeholder banner image */}
+        <Banner name={leaderboard.name} imageUrl="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop" />


This hard-codes a “temporary placeholder” Unsplash banner URL in the UI. If this is meant to be temporary, it’s easy to forget and ship; consider falling back to the generated gradient (omit imageUrl) or sourcing the banner URL from leaderboard data/config instead of inlining it here.

Suggested change

{/* Using a temporary placeholder banner image */}

<Banner name={leaderboard.name} imageUrl="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop" />

<Banner name={leaderboard.name} />

Copilot · 2026-03-22T07:01:48Z

app/components/leaderboard/LeaderboardStats.tsx

+    (m.languages as { name?: string; total_seconds?: number }[] || []).forEach((l: { name?: string; total_seconds?: number } | string) => {
+      const name = typeof l === "string" ? l : l.name || "Unknown";
+      const secs = typeof l === "string" ? 3600 : l.total_seconds || 3600;
+      languageTime[name] = (languageTime[name] || 0) + secs;
+    });
+    (m.editors as { name?: string; total_seconds?: number }[] || []).forEach((e: { name?: string; total_seconds?: number } | string) => {
+      const name = typeof e === "string" ? e : e.name || "Unknown";
+      const secs = typeof e === "string" ? 3600 : e.total_seconds || 3600;
+      editorTime[name] = (editorTime[name] || 0) + secs;


NonNullableMember.languages / editors are typed as { name: string }[] (no total_seconds). Defaulting each entry to 3600 seconds will significantly overcount and makes the “Top Language/Editor” totals and percentages inaccurate. Either extend the view/type to include per-language/editor total_seconds, or change this logic to compute counts (or derive time from a source that actually has per-language/editor durations).

Suggested change

(m.languages as { name?: string; total_seconds?: number }[] || []).forEach((l: { name?: string; total_seconds?: number } | string) => {

const name = typeof l === "string" ? l : l.name || "Unknown";

const secs = typeof l === "string" ? 3600 : l.total_seconds || 3600;

languageTime[name] = (languageTime[name] || 0) + secs;

});

(m.editors as { name?: string; total_seconds?: number }[] || []).forEach((e: { name?: string; total_seconds?: number } | string) => {

const name = typeof e === "string" ? e : e.name || "Unknown";

const secs = typeof e === "string" ? 3600 : e.total_seconds || 3600;

editorTime[name] = (editorTime[name] || 0) + secs;

const memberSeconds = m.total_seconds || 0;

const languages = ((m.languages as ({ name?: string } | string)[] | undefined) || []);

const perLanguageSeconds = languages.length > 0 ? memberSeconds / languages.length : 0;

languages.forEach((l) => {

const name = typeof l === "string" ? l : l.name || "Unknown";

languageTime[name] = (languageTime[name] || 0) + perLanguageSeconds;

});

const editors = ((m.editors as ({ name?: string } | string)[] | undefined) || []);

const perEditorSeconds = editors.length > 0 ? memberSeconds / editors.length : 0;

editors.forEach((e) => {

const name = typeof e === "string" ? e : e.name || "Unknown";

editorTime[name] = (editorTime[name] || 0) + perEditorSeconds;

Copilot · 2026-03-22T07:01:48Z

app/components/leaderboard/LeaderboardStats.tsx

+import { useEffect } from "react";
+import AOS from "aos";
+import "aos/dist/aos.css";
+import { NonNullableMember } from "../LeaderboardTable";


This imports NonNullableMember as a value import, creating a circular module dependency (LeaderboardTable imports LeaderboardStats, and LeaderboardStats imports from LeaderboardTable). Make this a type-only import (import type ...) and/or move shared types to a separate module to avoid runtime circular import issues.

Suggested change

import { NonNullableMember } from "../LeaderboardTable";

import type { NonNullableMember } from "../LeaderboardTable";

Copilot · 2026-03-22T07:01:48Z

app/components/leaderboard/LeaderboardStats.tsx

+    setTimeout(() => {
+      AOS.refresh();
+    }, 200);


The setTimeout in this effect is never cleared. If the component unmounts quickly (navigation), it can still fire and call AOS.refresh(). Store the timeout id and clear it in the cleanup function.

Suggested change

setTimeout(() => {

AOS.refresh();

}, 200);

const timeoutId = setTimeout(() => {

AOS.refresh();

}, 200);

return () => {

clearTimeout(timeoutId);

};

Copilot · 2026-03-22T07:01:48Z

app/components/LeaderboardTable.tsx

@@ -243,18 +236,42 @@ export default function LeaderboardTable({
          color: #93c5fd;
        }


getBadgeInfo no longer returns badge-master or badge-hustler, but the CSS for these classes remains. Removing unused badge styles (or updating getBadgeInfo to use them) will keep the inline stylesheet smaller and easier to maintain.

0x3EF8 added 4 commits March 22, 2026 11:44

fix errors

4651c6b

fix missing use client in Conversations.tsx

352c1d8

fix missing use client in StatsCard.tsx

2f23c4a

update leaderboard

e3b5d49

Copilot AI review requested due to automatic review settings March 22, 2026 06:58

Copilot started reviewing on behalf of 0x3EF8 March 22, 2026 06:58 View session

Copilot AI reviewed Mar 22, 2026

View reviewed changes

update navigation

9b65620

mrepol742 approved these changes Mar 23, 2026

View reviewed changes

mrepol742 merged commit 983eb89 into hallofcodes:master Mar 23, 2026
5 of 7 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

update leaderboard#38

update leaderboard#38
mrepol742 merged 5 commits intohallofcodes:masterfrom
0x3EF8:update-leaderboard

0x3EF8 commented Mar 22, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		{/* Using a temporary placeholder banner image */}
		<Banner name={leaderboard.name} imageUrl="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop" />

	{/* Using a temporary placeholder banner image */}
	<Banner name={leaderboard.name} imageUrl="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop" />
	<Banner name={leaderboard.name} />

	import { NonNullableMember } from "../LeaderboardTable";
	import type { NonNullableMember } from "../LeaderboardTable";

		@@ -243,18 +236,42 @@ export default function LeaderboardTable({
		color: #93c5fd;
		}

Conversation

0x3EF8 commented Mar 22, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants