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

src/pages/UserLogin.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 UserLoginState =
   | { status: "idle" }
@@ -34,21 +36,19 @@ export function UserLogin() {
         body: JSON.stringify({ username, password }),
       });
 
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
       const apiResponse = await res.json();
 
       if (apiResponse.success) {
         login(deserializeAuthResponse(apiResponse.data));
         navigate("/");
       } else {
-        setState({ status: "error", error: apiResponse.error.message });
+        setState({
+          status: "error",
+          error: apiResponse.error?.message ?? "Login failed.",
+        });
       }
     } catch (err) {
-      setState({
-        status: "error",
-        error: err instanceof Error ? err.message : "Login failed.",
-      });
+      setState({ status: "error", error: friendlyFetchError(err) });
     }
   };
 
@@ -58,7 +58,7 @@ export function UserLogin() {
         <h1 className="auth-card-title">Log in</h1>
 
         {state.status === "error" && (
-          <div className="error-banner">{state.error}</div>
+          <ErrorCard title="Login failed" message={state.error} />
         )}
 
         <form onSubmit={handleSubmit} className="auth-form">