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

src/components/DumpCreateModal.tsx

@@ -18,6 +18,8 @@ import RichContentCard from "./RichContentCard.tsx";
 import { MediaPlayer } from "./MediaPlayer.tsx";
 import type { RichContent } from "../model.ts";
 import { PlaylistCreateForm } from "./PlaylistCreateForm.tsx";
+import { ErrorCard } from "./ErrorCard.tsx";
+import { friendlyFetchError } from "../utils/apiError.ts";
 
 const MAX_FILE_SIZE = 50 * 1024 * 1024;
 
@@ -219,8 +221,6 @@ export function DumpCreateModal({ onClose }: DumpCreateModalProps) {
         });
       }
 
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-
       const apiResponse = await res.json();
       if (apiResponse.success) {
         const dump = deserializeDump(apiResponse.data as RawDump);
@@ -244,14 +244,11 @@ export function DumpCreateModal({ onClose }: DumpCreateModalProps) {
       } else {
         setSubmitState({
           status: "error",
-          error: apiResponse.error.message,
+          error: apiResponse.error?.message ?? "Failed to create dump.",
         });
       }
     } catch (err) {
-      setSubmitState({
-        status: "error",
-        error: err instanceof Error ? err.message : "Failed to create dump.",
-      });
+      setSubmitState({ status: "error", error: friendlyFetchError(err) });
     }
   };
 
@@ -340,7 +337,10 @@ export function DumpCreateModal({ onClose }: DumpCreateModalProps) {
 
                 <form onSubmit={handleSubmit} className="dump-form">
                   {submitState.status === "error" && (
-                    <p className="form-error">{submitState.error}</p>
+                    <ErrorCard
+                      title="Failed to post"
+                      message={submitState.error}
+                    />
                   )}
 
                   {mode === "url"