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

src/pages/Index.tsx

@@ -21,6 +21,8 @@ import {
   type User,
 } from "../model.ts";
 
+import { ErrorCard } from "../components/ErrorCard.tsx";
+import { friendlyFetchError } from "../utils/apiError.ts";
 import { useFeedCache } from "../hooks/useFeedCache.ts";
 import { useAuth } from "../hooks/useAuth.ts";
 import { useWS } from "../hooks/useWS.ts";
@@ -84,7 +86,7 @@ function FollowedSubFeed({
     return <p className="index-status">Loading…</p>;
   }
   if (state.status === "error") {
-    return <p className="index-status index-status--error">{state.error}</p>;
+    return <ErrorCard title="Failed to load" message={state.error} />;
   }
 
   const visible = state.dumps.filter((d) => !deletedDumpIds.has(d.id));
@@ -210,7 +212,7 @@ export function Index() {
       } catch (err) {
         setDumpsState({
           status: "error",
-          error: err instanceof Error ? err.message : "Failed to load",
+          error: friendlyFetchError(err),
         });
       }
     })();
@@ -248,7 +250,7 @@ export function Index() {
           .catch((err) =>
             setFollowedUsersDumps({
               status: "error",
-              error: err instanceof Error ? err.message : "Failed to load",
+              error: friendlyFetchError(err),
             })
           );
       }
@@ -284,7 +286,7 @@ export function Index() {
           .catch((err) =>
             setFollowedPlaylistsDumps({
               status: "error",
-              error: err instanceof Error ? err.message : "Failed to load",
+              error: friendlyFetchError(err),
             })
           );
       }
@@ -577,6 +579,7 @@ export function Index() {
             {tabBar}
           </div>
         }
+        disableNew={dumpsState.status === "error"}
       />
 
       {/* Shown only on narrow viewports */}
@@ -589,7 +592,7 @@ export function Index() {
       {tab !== "followed" && (
         <>
           {loading && <p className="index-status">Loading…</p>}
-          {error && <p className="index-status index-status--error">{error}</p>}
+          {error && <ErrorCard title="Failed to load" message={error} />}
 
           {!loading && !error && combined.length === 0 && (
             <p className="index-status">No dumps yet. Be the first!</p>