- {/* Left side actions */}
-
-
- Year in Code
-
-
- Settings
-
-
- {/* Right side exports */}
-
+
+
+ ✨ Year in Code
+
+
+
+ Compare Friends
+
+
+ Settings
+
+
@@ -198,8 +199,60 @@ export default async function DashboardPage() {
Analytics & Repositories
- {/* Repo Analytics Explorer spans full width */}
-
+ {/* Right: streak + coding time */}
+
+
+
+
+
+
+ {/* Repo analytics explorer — full width */}
+
+ }>
+
+
+
+
+ {/* -- Row 2: PR metrics + Community metrics -- */}
+
+
+ {/* PR breakdown + commit time — 2-col so charts have room */}
+
+
+ {/* Activity ring — full width */}
+
+
+ {/* Coding activity insights — full width */}
+
+ }>
+
+
+
+
+ {/* PR review trend — full width */}
+
+
+ {/* -- Row 3: Issues (2/3) + CI analytics (1/3) -- */}
+
+
}>
@@ -231,6 +284,7 @@ export default async function DashboardPage() {
+
{/* 4. GOALS & INSIGHTS */}
diff --git a/src/app/friend-compare/page.tsx b/src/app/friend-compare/page.tsx
new file mode 100644
index 00000000..b44d4c7d
--- /dev/null
+++ b/src/app/friend-compare/page.tsx
@@ -0,0 +1,127 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useSession } from "next-auth/react";
+import { redirect } from "next/navigation";
+import FriendComparison from "@/components/FriendComparison";
+import dynamic from "next/dynamic";
+import Link from "next/link";
+
+const ContributionGraph = dynamic(
+ () => import("@/components/ContributionGraph"),
+ { ssr: false }
+);
+
+export default function FriendComparePage() {
+ const { data: session, status } = useSession();
+ const [showCommitActivity, setShowCommitActivity] = useState(false);
+ const [compareUsername, setCompareUsername] = useState
(null);
+
+ useEffect(() => {
+ if (status === "unauthenticated") {
+ redirect("/");
+ }
+ }, [status]);
+
+ useEffect(() => {
+ const handleShowCommitActivity = (e: Event) => {
+ const customEvent = e as CustomEvent<{ username?: string }>;
+ const username = customEvent.detail?.username;
+ setCompareUsername(username || null);
+ setShowCommitActivity(true);
+ };
+
+ const handleClearCommitActivity = () => {
+ setShowCommitActivity(false);
+ setCompareUsername(null);
+ };
+
+ window.addEventListener("devtrack:show-commit-activity", handleShowCommitActivity as EventListener);
+ window.addEventListener("devtrack:clear-compare-user", handleClearCommitActivity);
+ return () => {
+ window.removeEventListener("devtrack:show-commit-activity", handleShowCommitActivity as EventListener);
+ window.removeEventListener("devtrack:clear-compare-user", handleClearCommitActivity);
+ };
+ }, []);
+
+ // When showCommitActivity becomes true, dispatch the compare event after a tick
+ useEffect(() => {
+ if (showCommitActivity && compareUsername) {
+ // Dispatch after the component has fully mounted (1000ms delay ensures dynamic import + listener setup)
+ const timer = setTimeout(() => {
+ window.dispatchEvent(
+ new CustomEvent("devtrack:compare-user", {
+ detail: { username: compareUsername },
+ })
+ );
+ // Scroll to the element
+ const element = document.getElementById("contribution-activity");
+ if (element) {
+ const elementPosition = element.getBoundingClientRect().top;
+ const offsetPosition = elementPosition + window.pageYOffset - 100;
+ window.scrollTo({ top: offsetPosition, behavior: "smooth" });
+ }
+ }, 1000);
+ return () => clearTimeout(timer);
+ }
+ }, [showCommitActivity, compareUsername]);
+
+ // Auto-show commit activity if a friend was persisted on page refresh
+ useEffect(() => {
+ if (typeof window !== "undefined") {
+ try {
+ const persistedFriend = localStorage.getItem("devtrack:compare_username");
+ if (persistedFriend) {
+ setCompareUsername(persistedFriend);
+ setShowCommitActivity(true);
+ }
+ } catch {
+ // Silently fail if localStorage is not available
+ }
+ }
+ }, []);
+
+ if (status === "loading") {
+ return (
+
+ );
+ }
+
+ return (
+
+ {/* Header */}
+
+
+
+ Dashboard
+
+
+ Friend Comparison
+
+
+ Compare your GitHub stats with friends and see how you stack up
+
+
+
+ {/* Main content */}
+
+
+
+ {/* Commit Activity Comparison - Only rendered when button is clicked */}
+ {showCommitActivity && (
+
+ )}
+
+
-
setFriendUsername(e.target.value)}
- onFocus={() => {
- if (suggestions.length > 0) setSuggestOpen(true);
- }}
- onKeyDown={(e) => {
- if (!suggestOpen || suggestions.length === 0) return;
-
- if (e.key === "ArrowDown") {
- e.preventDefault();
- setActiveIndex((prev) => Math.min(prev + 1, suggestions.length - 1));
- } else if (e.key === "ArrowUp") {
- e.preventDefault();
- setActiveIndex((prev) => Math.max(prev - 1, 0));
- } else if (e.key === "Enter") {
- if (activeIndex >= 0 && activeIndex < suggestions.length) {
+ {selectedUserAvatar && friendUsername ? (
+
+
+ {friendUsername}
+
+
+ ) : (
+
setFriendUsername(e.target.value)}
+ onFocus={() => {
+ if (suggestions.length > 0) setSuggestOpen(true);
+ }}
+ onKeyDown={(e) => {
+ if (!suggestOpen || suggestions.length === 0) return;
+
+ if (e.key === "ArrowDown") {
e.preventDefault();
- chooseSuggestion(suggestions[activeIndex]);
+ setActiveIndex((prev) => Math.min(prev + 1, suggestions.length - 1));
+ } else if (e.key === "ArrowUp") {
+ e.preventDefault();
+ setActiveIndex((prev) => Math.max(prev - 1, 0));
+ } else if (e.key === "Enter") {
+ if (activeIndex >= 0 && activeIndex < suggestions.length) {
+ e.preventDefault();
+ chooseSuggestion(suggestions[activeIndex]);
+ }
+ } else if (e.key === "Escape") {
+ setSuggestOpen(false);
+ setActiveIndex(-1);
}
- } else if (e.key === "Escape") {
- setSuggestOpen(false);
- setActiveIndex(-1);
- }
- }}
- aria-autocomplete="list"
- aria-expanded={suggestOpen}
- aria-controls="friend-compare-suggestions"
- className="w-full rounded-md border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm outline-none focus:border-[var(--accent)]"
- />
+ }}
+ aria-autocomplete="list"
+ aria-expanded={suggestOpen}
+ aria-controls="friend-compare-suggestions"
+ className="w-full rounded-md border border-[var(--border)] bg-[var(--background)] px-3 py-2 text-sm outline-none focus:border-[var(--accent)]"
+ />
+ )}
{suggestOpen && suggestions.length > 0 && (
{loading ? "Loading..." : "Compare"}
+
+ {friendData && (
+
+ )}
@@ -332,14 +368,41 @@ export default function FriendComparison() {
)}
-
-
-
You ({myData.username})
-
Metric
-
Them ({friendData.username})
+
+ {/* Header with profile info */}
+
+ {/* Metric column header */}
+
+ Metric
+
+
+ {/* My profile header */}
+
+
+ {myData.username}
+
+
+ {/* Friend profile header */}
+
+
+ {friendData.username}
+
-
+ {/* Metrics rows */}
+
)}
@@ -425,20 +475,20 @@ function ComparisonRow({
}
return (
-
+
+
+ {label}
+
{myValue}
{suffix}
-
- {label}
-