fix: add scoped error.tsx and loading.tsx boundaries across all routes (#29)

src/app/connect/error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-20 text-center">
+      <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{'Connection failed'}</h2>
+      <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+        {'Unable to complete the sign-in flow. Please try again.'}
+      </p>
+      {error.digest && (
+        <p className="mt-3 text-xs text-slate-400 font-mono">Ref: {error.digest}</p>
+      )}
+      <button
+        onClick={reset}
+        className="mt-6 inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors dark:bg-indigo-500 dark:hover:bg-indigo-400"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}

src/app/connect/loading.tsx

@@ -0,0 +1,19 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12 space-y-6 animate-pulse">
+      <div className="h-8 w-1/3 rounded-lg bg-slate-200 dark:bg-slate-800" />
+      <div className="h-4 w-2/3 rounded bg-slate-100 dark:bg-slate-800/60" />
+      <div className="grid gap-4 sm:grid-cols-3 mt-8">
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <div className="space-y-3 mt-8">
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <p className="text-xs text-slate-400 text-center pt-4">Loading {'connection'}…</p>
+    </div>
+  );
+}

src/app/dashboard/contributor/error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-20 text-center">
+      <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{'Dashboard error'}</h2>
+      <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+        {'Your contributor dashboard failed to load. Retry below.'}
+      </p>
+      {error.digest && (
+        <p className="mt-3 text-xs text-slate-400 font-mono">Ref: {error.digest}</p>
+      )}
+      <button
+        onClick={reset}
+        className="mt-6 inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors dark:bg-indigo-500 dark:hover:bg-indigo-400"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}

src/app/dashboard/contributor/loading.tsx

@@ -0,0 +1,19 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12 space-y-6 animate-pulse">
+      <div className="h-8 w-1/3 rounded-lg bg-slate-200 dark:bg-slate-800" />
+      <div className="h-4 w-2/3 rounded bg-slate-100 dark:bg-slate-800/60" />
+      <div className="grid gap-4 sm:grid-cols-3 mt-8">
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <div className="space-y-3 mt-8">
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <p className="text-xs text-slate-400 text-center pt-4">Loading {'contributor dashboard'}…</p>
+    </div>
+  );
+}

src/app/dashboard/maintainer/error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-20 text-center">
+      <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{'Dashboard error'}</h2>
+      <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+        {'Your maintainer dashboard failed to load. Retry below.'}
+      </p>
+      {error.digest && (
+        <p className="mt-3 text-xs text-slate-400 font-mono">Ref: {error.digest}</p>
+      )}
+      <button
+        onClick={reset}
+        className="mt-6 inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors dark:bg-indigo-500 dark:hover:bg-indigo-400"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}

src/app/dashboard/maintainer/loading.tsx

@@ -0,0 +1,19 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12 space-y-6 animate-pulse">
+      <div className="h-8 w-1/3 rounded-lg bg-slate-200 dark:bg-slate-800" />
+      <div className="h-4 w-2/3 rounded bg-slate-100 dark:bg-slate-800/60" />
+      <div className="grid gap-4 sm:grid-cols-3 mt-8">
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <div className="space-y-3 mt-8">
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <p className="text-xs text-slate-400 text-center pt-4">Loading {'maintainer dashboard'}…</p>
+    </div>
+  );
+}

src/app/dashboard/sponsor/error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-20 text-center">
+      <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{'Dashboard error'}</h2>
+      <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+        {'Your sponsor dashboard failed to load. Retry below.'}
+      </p>
+      {error.digest && (
+        <p className="mt-3 text-xs text-slate-400 font-mono">Ref: {error.digest}</p>
+      )}
+      <button
+        onClick={reset}
+        className="mt-6 inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors dark:bg-indigo-500 dark:hover:bg-indigo-400"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}

src/app/dashboard/sponsor/loading.tsx

@@ -0,0 +1,19 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12 space-y-6 animate-pulse">
+      <div className="h-8 w-1/3 rounded-lg bg-slate-200 dark:bg-slate-800" />
+      <div className="h-4 w-2/3 rounded bg-slate-100 dark:bg-slate-800/60" />
+      <div className="grid gap-4 sm:grid-cols-3 mt-8">
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <div className="space-y-3 mt-8">
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <p className="text-xs text-slate-400 text-center pt-4">Loading {'sponsor dashboard'}…</p>
+    </div>
+  );
+}

src/app/error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-20 text-center">
+      <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{'Something went wrong'}</h2>
+      <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+        {'The home page encountered an error. Please try again.'}
+      </p>
+      {error.digest && (
+        <p className="mt-3 text-xs text-slate-400 font-mono">Ref: {error.digest}</p>
+      )}
+      <button
+        onClick={reset}
+        className="mt-6 inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors dark:bg-indigo-500 dark:hover:bg-indigo-400"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}

src/app/global-error.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html lang="en">
+      <body className="min-h-screen bg-slate-950 text-slate-100 flex items-center justify-center p-6">
+        <div className="max-w-md w-full rounded-2xl border border-slate-800 bg-slate-900 p-8 shadow-xl">
+          <h1 className="text-xl font-semibold text-white mb-2">Something went wrong</h1>
+          <p className="text-sm text-slate-400 mb-6">
+            An unexpected error occurred. This has been logged for investigation.
+          </p>
+          {error.digest && (
+            <p className="text-xs text-slate-500 mb-4 font-mono">Error ID: {error.digest}</p>
+          )}
+          <button
+            onClick={reset}
+            className="w-full rounded-lg bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white hover:bg-indigo-500 transition-colors"
+          >
+            Try again
+          </button>
+        </div>
+      </body>
+    </html>
+  );
+}

src/app/issues/[id]/error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-20 text-center">
+      <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{'Failed to load bounty details'}</h2>
+      <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+        {'This bounty may have been removed or the server is unavailable.'}
+      </p>
+      {error.digest && (
+        <p className="mt-3 text-xs text-slate-400 font-mono">Ref: {error.digest}</p>
+      )}
+      <button
+        onClick={reset}
+        className="mt-6 inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors dark:bg-indigo-500 dark:hover:bg-indigo-400"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}

src/app/issues/[id]/loading.tsx

@@ -0,0 +1,19 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12 space-y-6 animate-pulse">
+      <div className="h-8 w-1/3 rounded-lg bg-slate-200 dark:bg-slate-800" />
+      <div className="h-4 w-2/3 rounded bg-slate-100 dark:bg-slate-800/60" />
+      <div className="grid gap-4 sm:grid-cols-3 mt-8">
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <div className="space-y-3 mt-8">
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <p className="text-xs text-slate-400 text-center pt-4">Loading {'bounty details'}…</p>
+    </div>
+  );
+}

src/app/issues/error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-20 text-center">
+      <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{'Failed to load bounties'}</h2>
+      <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+        {"We couldn't fetch the bounty list. Check your connection and retry."}
+      </p>
+      {error.digest && (
+        <p className="mt-3 text-xs text-slate-400 font-mono">Ref: {error.digest}</p>
+      )}
+      <button
+        onClick={reset}
+        className="mt-6 inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors dark:bg-indigo-500 dark:hover:bg-indigo-400"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}

src/app/issues/loading.tsx

@@ -0,0 +1,19 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12 space-y-6 animate-pulse">
+      <div className="h-8 w-1/3 rounded-lg bg-slate-200 dark:bg-slate-800" />
+      <div className="h-4 w-2/3 rounded bg-slate-100 dark:bg-slate-800/60" />
+      <div className="grid gap-4 sm:grid-cols-3 mt-8">
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <div className="space-y-3 mt-8">
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <p className="text-xs text-slate-400 text-center pt-4">Loading {'bounties'}…</p>
+    </div>
+  );
+}

src/app/loading.tsx

@@ -0,0 +1,19 @@
+export default function Loading() {
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-12 space-y-6 animate-pulse">
+      <div className="h-8 w-1/3 rounded-lg bg-slate-200 dark:bg-slate-800" />
+      <div className="h-4 w-2/3 rounded bg-slate-100 dark:bg-slate-800/60" />
+      <div className="grid gap-4 sm:grid-cols-3 mt-8">
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-32 rounded-2xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <div className="space-y-3 mt-8">
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+        <div className="h-20 rounded-xl bg-slate-100 dark:bg-slate-800" />
+      </div>
+      <p className="text-xs text-slate-400 text-center pt-4">Loading {'home'}…</p>
+    </div>
+  );
+}

src/app/milestones/error.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+export default function RouteError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <div className="mx-auto max-w-2xl px-6 py-20 text-center">
+      <h2 className="text-lg font-semibold text-slate-900 dark:text-white">{'Failed to load milestones'}</h2>
+      <p className="mt-2 text-sm text-slate-500 dark:text-slate-400">
+        {'Milestone data could not be retrieved. Please retry.'}
+      </p>
+      {error.digest && (
+        <p className="mt-3 text-xs text-slate-400 font-mono">Ref: {error.digest}</p>
+      )}
+      <button
+        onClick={reset}
+        className="mt-6 inline-flex items-center rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-500 transition-colors dark:bg-indigo-500 dark:hover:bg-indigo-400"
+      >
+        Retry
+      </button>
+    </div>
+  );
+}