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

src/pages/Notifications.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router";
 
 import { API_URL } from "../config/api.ts";
 import { useAuth } from "../hooks/useAuth.ts";
+import { ErrorCard } from "../components/ErrorCard.tsx";
 import { useWS } from "../hooks/useWS.ts";
 import type {
   DumpUpvotedData,
@@ -17,6 +18,7 @@ import type {
 } from "../model.ts";
 import { deserializeNotification } from "../model.ts";
 import { PageShell } from "../components/PageShell.tsx";
+import { friendlyFetchError } from "../utils/apiError.ts";
 
 const PAGE_SIZE = 30;
 
@@ -210,7 +212,9 @@ export function Notifications() {
         );
       })
       .catch((err) => {
-        if (err instanceof Error && err.message === "Failed to load") {
+        if (err instanceof TypeError) {
+          setState({ status: "error", error: friendlyFetchError(err) });
+        } else if (err instanceof Error && err.message === "Failed to load") {
           setState({ status: "error", error: err.message });
         }
       });
@@ -277,8 +281,9 @@ export function Notifications() {
         </div>
 
         {state.status === "loading" && <p className="page-loading">Loading…</p>}
-        {state.status === "error" && <p className="form-error">{state.error}
-        </p>}
+        {state.status === "error" && (
+          <ErrorCard title="Failed to load" message={state.error} />
+        )}
 
         {state.status === "loaded" && state.items.length === 0 && (
           <div className="notifications-empty">