From 8136bfb97ee85b4795612d8bba6db435745072df Mon Sep 17 00:00:00 2001
From: chmm195 <297213864+chmm195@users.noreply.github.com>
Date: Mon, 24 Aug 2026 21:22:11 -0400
Subject: [PATCH] Four fixes: empty state, sign-in fallback, FAQ a11y, mock
 profiles

- /issues rendered a bare empty grid with no EmptyState, unlike every
  dashboard list, so a fresh deployment looked broken (#274)
- auth/callback wrapped CallbackClient in Suspense with no fallback, so
  the sign-in page was blank until the boundary resolved (#265)
- the FAQ accordion's decorative '+' had no aria-hidden, so screen
  readers announced a literal plus after the native summary state (#268)
- mockReputationProfiles covered 2 of the 5 topContributors handles, so
  three of the five homepage leaderboard links 404'd in demo mode (#284)

Closes #274
Closes #265
Closes #268
Closes #284
---
 src/app/auth/callback/page.tsx | 22 +++++++++++++++++++++-
 src/app/issues/page.tsx        | 20 +++++++++++++++-----
 src/app/page.tsx               |  7 ++++++-
 src/lib/mock-data.ts           | 33 +++++++++++++++++++++++++++++++++
 4 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/src/app/auth/callback/page.tsx b/src/app/auth/callback/page.tsx
index b4674a1..c709c3d 100644
--- a/src/app/auth/callback/page.tsx
+++ b/src/app/auth/callback/page.tsx
@@ -1,9 +1,29 @@
 import { Suspense } from "react";
 import { CallbackClient } from "./CallbackClient";
 
+/**
+ * CallbackClient reads useSearchParams(), which the App Router requires to sit
+ * behind a Suspense boundary. Without a fallback the page renders nothing at
+ * all until that boundary resolves, so a user completing sign-in sees a blank
+ * screen rather than any sign the app is working.
+ */
+function CallbackFallback() {
+  return (
+    <div className="mx-auto flex max-w-md flex-col items-center px-6 py-24 text-center">
+      <span
+        aria-hidden="true"
+        className="h-8 w-8 animate-spin rounded-full border-2 border-slate-200 border-t-indigo-600 dark:border-slate-700 dark:border-t-indigo-400"
+      />
+      <p className="mt-4 text-sm text-slate-500 dark:text-slate-400" role="status">
+        Finishing sign-in&hellip;
+      </p>
+    </div>
+  );
+}
+
 export default function AuthCallbackPage() {
   return (
-    <Suspense>
+    <Suspense fallback={<CallbackFallback />}>
       <CallbackClient />
     </Suspense>
   );
diff --git a/src/app/issues/page.tsx b/src/app/issues/page.tsx
index 2b32818..828f79f 100644
--- a/src/app/issues/page.tsx
+++ b/src/app/issues/page.tsx
@@ -1,7 +1,9 @@
 import type { Metadata } from "next";
+import { Inbox } from "lucide-react";
 import { fetchBounties } from "@/lib/api";
 import { mockBounties } from "@/lib/mock-data";
 import { BountyCard } from "@/components/bounty/BountyCard";
+import { EmptyState } from "@/components/ui/EmptyState";
 
 const issuesDescription =
   "Browse paid, escrow-backed GitHub issues funded through MergeFi and ready for contributors.";
@@ -39,11 +41,19 @@ export default async function IssuesPage() {
           moment it&apos;s merged.
         </p>
       </div>
-      <div className="grid gap-4 md:grid-cols-2">
-        {bounties.map((bounty) => (
-          <BountyCard key={bounty.id} bounty={bounty} />
-        ))}
-      </div>
+      {bounties.length === 0 ? (
+        <EmptyState
+          icon={Inbox}
+          title="No paid issues yet"
+          description="Nothing is funded on this deployment right now. Once a sponsor locks funds into an escrow, the bounty shows up here."
+        />
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2">
+          {bounties.map((bounty) => (
+            <BountyCard key={bounty.id} bounty={bounty} />
+          ))}
+        </div>
+      )}
     </div>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index ec2a3dd..b755440 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -285,7 +285,12 @@ export default function HomePage() {
                 <summary className="cursor-pointer list-none font-medium text-slate-900 marker:content-none dark:text-white">
                   <span className="flex items-center justify-between">
                     {faq.question}
-                    <span className="ml-4 text-slate-400 transition-transform group-open:rotate-45">+</span>
+                    <span
+                      aria-hidden="true"
+                      className="ml-4 text-slate-400 transition-transform group-open:rotate-45"
+                    >
+                      +
+                    </span>
                   </span>
                 </summary>
                 <p className="mt-3 text-sm leading-relaxed text-slate-500 dark:text-slate-400">
diff --git a/src/lib/mock-data.ts b/src/lib/mock-data.ts
index bd045ad..d7b8ba9 100644
--- a/src/lib/mock-data.ts
+++ b/src/lib/mock-data.ts
@@ -145,6 +145,39 @@ export const mockReputationProfiles: Record<string, ReputationProfile> = {
     languages: ["Rust", "Solidity"],
     organizations: ["mergefi"],
   },
+  devrel_ana: {
+    handle: "devrel_ana",
+    avatarUrl: "https://avatars.githubusercontent.com/u/3?v=4",
+    lifetimeEarnings: 2890,
+    mergedPRs: 24,
+    completionRate: 0.92,
+    avgReviewTimeHours: 11,
+    onTimeDeliveryRate: 0.86,
+    languages: ["TypeScript", "Python"],
+    organizations: ["mergefi", "soroban-foundation"],
+  },
+  qa_marcus: {
+    handle: "qa_marcus",
+    avatarUrl: "https://avatars.githubusercontent.com/u/4?v=4",
+    lifetimeEarnings: 2140,
+    mergedPRs: 19,
+    completionRate: 0.87,
+    avgReviewTimeHours: 26,
+    onTimeDeliveryRate: 0.79,
+    languages: ["Go", "TypeScript"],
+    organizations: ["core-indexer"],
+  },
+  linh_dev: {
+    handle: "linh_dev",
+    avatarUrl: "https://avatars.githubusercontent.com/u/5?v=4",
+    lifetimeEarnings: 1780,
+    mergedPRs: 15,
+    completionRate: 0.91,
+    avgReviewTimeHours: 9,
+    onTimeDeliveryRate: 0.9,
+    languages: ["TypeScript", "Rust"],
+    organizations: ["stellar-labs"],
+  },
 };
 
 // Not modeled in types/index.ts alongside Bounty/Milestone/etc: this shape