v3: code quality and visual consistency pass (refactored all forms across the app), fixed filename-related upload bug

src/components/form/FormError.tsx

@@ -0,0 +1,16 @@
+import { t } from "@lingui/core/macro";
+import { useFormState } from "react-hook-form";
+
+import { ErrorCard } from "../ErrorCard.tsx";
+
+/**
+ * Renders the form's root error (set by {@link useApiForm}'s `submit` on a
+ * thrown/failed request) through the shared {@link ErrorCard}. One consistent
+ * place for server/submit errors across every form.
+ */
+export function FormError({ title }: { title?: string }) {
+  const { errors } = useFormState();
+  const message = errors.root?.message;
+  if (!message) return null;
+  return <ErrorCard title={title ?? t`Something went wrong`} message={message} />;
+}