[FEAT] Add Reusable Empty State Components for Dashboard Widgets #2646

src/app/leaderboard/page.tsx

@@ -104,14 +104,14 @@ async function LeaderboardTable({
             title={
               hasFilters
                 ? "No leaderboard results for these filters"
-                : "No public profiles yet"
+                : "No leaderboard data available"
             }
             description={
               hasFilters
                 ? "Try a broader language or time filter, or clear filters to view the full leaderboard."
                 : "No public profiles yet - be the first to enable yours in Settings!"
             }
-            actionLabel="Go to Settings"
+            actionLabel="Sync Dashboard"
             actionHref="/dashboard/settings"
           />
         ) : (

src/components/GoalTracker.tsx

@@ -524,7 +524,7 @@ export default function GoalTracker() {
         <div className="mt-6">
           <EmptyState
             icon="🎯"
-            title="No goals yet"
+            title="No goals created yet"
             description="No goals yet. Create your first coding goal to start tracking progress!"
             actionLabel="Create Goal"
             actionHref="#create-goal-form"

src/components/PRMetrics.tsx

@@ -7,6 +7,7 @@ import { useDashboardWidgetA11y } from "@/components/dashboard/DashboardWidgetA1
 import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from "recharts";
 import PRStatusDonutChart from "./PRStatusDonutChart";
 import MiniPRTrendChart from "./MiniPRTrendChart";
+import EmptyState from "@/components/EmptyState";
 
 interface PRMetricsSummary {
   open: number;
@@ -267,6 +268,14 @@ export default function PRMetrics() {
             Try again
           </button>
         </div>
+      ) : metrics && metrics.total === 0 && (!metrics.gitlab || metrics.gitlab.total === 0) ? (
+        <EmptyState
+          icon="📊"
+          title="No pull requests available"
+          description="Start reviewing or opening PRs to generate analytics."
+          actionLabel="View GitHub Profile"
+          actionHref={`https://github.com/${selectedAccount || ""}`}
+        />
       ) : activeTab === "authored" ? (
         <div className="space-y-6">
           {/* GitHub Stats */}

src/components/TopRepos.tsx

@@ -7,6 +7,7 @@ import type { RepoHealthScore } from "@/types/repo-health";
 import RepoHealthPanel from "@/components/RepoHealthPanel";
 import RepoActivityDrawer from "@/components/RepoActivityDrawer";
 import { Search, Bookmark } from "lucide-react";
+import EmptyState from "@/components/EmptyState";
 
 interface RepoItemProps {
   repo: Repo;
@@ -537,26 +538,13 @@ export default function TopRepos() {
           </button>
         </div>
       ) : repos.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-10 text-center">
-          <div className="mb-3 text-4xl">📦</div>
-
-          <h3 className="text-sm font-semibold text-[var(--card-foreground)]">
-            No repositories found
-          </h3>
-
-          <p className="mt-2 max-w-sm text-sm text-[var(--muted-foreground)]">
-            Push your first commit on GitHub to get started and see repository activity here.
-          </p>
-
-          <a
-            href="https://github.com/new"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="mt-4 inline-flex rounded-md border border-[var(--border)] px-4 py-2 text-sm font-medium hover:bg-[var(--control)]"
-          >
-            Create Repository
-          </a>
-        </div>
+        <EmptyState
+          icon="📦"
+          title="No repositories found"
+          description="Push your first commit on GitHub to get started and see repository activity here."
+          actionLabel="Refresh Data"
+          actionHref="/dashboard"
+        />
       ) : (
       <>