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

src/pages/UserPublicProfile.tsx

@@ -24,6 +24,8 @@ import { deserializePlaylist } from "../model.ts";
 import { useFeedCache } from "../hooks/useFeedCache.ts";
 import { DumpCreateModal } from "../components/DumpCreateModal.tsx";
 import { FollowUserButton } from "../components/FollowButton.tsx";
+import { ErrorCard } from "../components/ErrorCard.tsx";
+import { friendlyFetchError } from "../utils/apiError.ts";
 
 const PAGE_SIZE = 20;
 
@@ -72,7 +74,7 @@ function InviteButton() {
       <button type="button" className="invite-btn" onClick={generate}>
         + Invite someone
       </button>
-      {error && <p className="form-error">{error}</p>}
+      {error && <ErrorCard title="Failed to generate invite" message={error} />}
     </div>
   );
 }
@@ -181,9 +183,7 @@ export function UserPublicProfile() {
         .catch((err) =>
           setState({
             status: "error",
-            error: err instanceof Error
-              ? err.message
-              : "Failed to load profile",
+            error: friendlyFetchError(err),
           })
         );
       return;
@@ -254,7 +254,7 @@ export function UserPublicProfile() {
       } catch (err) {
         setState({
           status: "error",
-          error: err instanceof Error ? err.message : "Failed to load profile",
+          error: friendlyFetchError(err),
         });
       }
     })();
@@ -551,7 +551,9 @@ export function UserPublicProfile() {
                 O.G.
               </p>
             )}
-          {avatarError && <p className="form-error">{avatarError}</p>}
+          {avatarError && (
+            <ErrorCard title="Failed to update avatar" message={avatarError} />
+          )}
           {!isOwnProfile && (
             <FollowUserButton
               targetUserId={profileUser.id}