refactor: rename ErrorPage to FullPageError and extract ErrorDisplay

- Rename ErrorPage → FullPageError for clarity
- Extract shared ErrorDisplay component from error pages
- Update router to use FullPageError

Author: morgan-wowk

src/routes/ErrorPage.tsx src/components/shared/ErrorDisplay.tsxsrc/routes/ErrorPage.tsx renamed to src/components/shared/ErrorDisplay.tsx

@@ -1,20 +1,25 @@
-import { type ErrorComponentProps, useRouter } from "@tanstack/react-router";
-
 import { InfoBox } from "@/components/shared/InfoBox";
 import { Button } from "@/components/ui/button";
 import { BlockStack } from "@/components/ui/layout";
 import { Paragraph, Text } from "@/components/ui/typography";
 
-export default function ErrorPage({ error }: ErrorComponentProps) {
-  const router = useRouter();
-
-  const handleRefresh = () => {
-    window.location.reload();
-  };
+interface ErrorDisplayProps {
+  error: unknown;
+  onRefresh: () => void;
+  onGoHome: () => void;
+}
 
-  const handleGoHome = () => {
-    router.navigate({ to: "/" });
-  };
+/**
+ * Shared error display component used by both ComponentError and FullPageError.
+ * Shows a user-friendly error message with options to refresh or go home.
+ */
+export const ErrorDisplay = ({
+  error,
+  onRefresh,
+  onGoHome,
+}: ErrorDisplayProps) => {
+  const errorMessage =
+    error instanceof Error ? error.message : "An unexpected error occurred";
 
   return (
     <div className="min-h-screen flex items-center justify-center bg-background p-4">
@@ -31,25 +36,21 @@ export default function ErrorPage({ error }: ErrorComponentProps) {
 
           <InfoBox title="Error Details" variant="error">
             <Paragraph font="mono" size="xs">
-              {error?.message || "An unexpected error occurred"}
+              {errorMessage}
             </Paragraph>
           </InfoBox>
 
           <BlockStack gap="3">
-            <Button onClick={handleRefresh} className="w-full">
+            <Button onClick={onRefresh} className="w-full">
               Try Again
             </Button>
 
-            <Button
-              onClick={handleGoHome}
-              variant="secondary"
-              className="w-full"
-            >
+            <Button onClick={onGoHome} variant="secondary" className="w-full">
               Go Home
             </Button>
           </BlockStack>
         </BlockStack>
       </div>
     </div>
   );
-}
+};

src/routes/FullPageError.tsx

@@ -0,0 +1,23 @@
+import { type ErrorComponentProps, useRouter } from "@tanstack/react-router";
+
+import { ErrorDisplay } from "@/components/shared/ErrorDisplay";
+
+export default function FullPageError({ error }: ErrorComponentProps) {
+  const router = useRouter();
+
+  const handleGoHome = () => {
+    router.navigate({ to: "/" });
+  };
+
+  const handleRefresh = () => {
+    window.location.reload();
+  };
+
+  return (
+    <ErrorDisplay
+      error={error}
+      onRefresh={handleRefresh}
+      onGoHome={handleGoHome}
+    />
+  );
+}

src/routes/router.ts

@@ -12,7 +12,7 @@ import { BASE_URL, IS_GITHUB_PAGES } from "@/utils/constants";
 
 import RootLayout from "../components/layout/RootLayout";
 import Editor from "./Editor";
-import ErrorPage from "./ErrorPage";
+import FullPageError from "./FullPageError";
 import Home from "./Home";
 import NotFoundPage from "./NotFoundPage";
 import PipelineRun from "./PipelineRun";
@@ -40,7 +40,7 @@ export const APP_ROUTES = {
 
 const rootRoute = createRootRoute({
   component: Outlet,
-  errorComponent: ErrorPage,
+  errorComponent: FullPageError,
   notFoundComponent: NotFoundPage,
 });