v3: error cards across the app, friendly network errors, code quality pass

src/pages/UserRegister.tsx

@@ -6,6 +6,8 @@ import { API_URL } from "../config/api.ts";
 import { deserializeAuthResponse } from "../model.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { PageShell } from "../components/PageShell.tsx";
+import { ErrorCard } from "../components/ErrorCard.tsx";
+import { friendlyFetchError } from "../utils/apiError.ts";
 
 type TokenState =
   | { status: "checking" }
@@ -67,10 +69,7 @@ export function UserRegister() {
         });
       }
     } catch (err) {
-      setFormState({
-        status: "error",
-        error: err instanceof Error ? err.message : "Registration failed.",
-      });
+      setFormState({ status: "error", error: friendlyFetchError(err) });
     }
   };
 
@@ -85,11 +84,11 @@ export function UserRegister() {
   if (tokenState.status === "invalid") {
     return (
       <PageShell centered>
-        <div className="auth-card">
-          <h1 className="auth-card-title">Invalid invite</h1>
-          <p className="auth-card-footer">
-            This invite link is missing, expired, or already used.
-          </p>
+        <div className="page-error-wrap">
+          <ErrorCard
+            title="Invalid invite"
+            message="This invite link is missing, expired, or already used."
+          />
         </div>
       </PageShell>
     );
@@ -101,7 +100,7 @@ export function UserRegister() {
         <h1 className="auth-card-title">Register</h1>
 
         {formState.status === "error" && (
-          <div className="error-banner">{formState.error}</div>
+          <ErrorCard title="Registration failed" message={formState.error} />
         )}
 
         <form onSubmit={handleSubmit} className="auth-form">