feat: improve translation coverage (#1427)

Improves translation coverage across the app.

packages/ui/primitives/form/form-error-message.tsx

@@ -1,3 +1,4 @@
+import { useLingui } from '@lingui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 
 import { cn } from '../../lib/utils';
@@ -12,6 +13,15 @@ const isErrorWithMessage = (error: unknown): error is { message?: string } => {
 };
 
 export const FormErrorMessage = ({ error, className }: FormErrorMessageProps) => {
+  const { i18n } = useLingui();
+
+  let errorMessage = isErrorWithMessage(error) ? error.message : '';
+
+  // Checks to see if there's a translation for the string, since we're passing IDs for Zod errors.
+  if (typeof errorMessage === 'string' && i18n.t(errorMessage)) {
+    errorMessage = i18n.t(errorMessage);
+  }
+
   return (
     <AnimatePresence>
       {isErrorWithMessage(error) && (
@@ -30,7 +40,7 @@ export const FormErrorMessage = ({ error, className }: FormErrorMessageProps) =>
           }}
           className={cn('text-xs text-red-500', className)}
         >
-          {error.message}
+          {errorMessage}
         </motion.p>
       )}
     </AnimatePresence>

packages/ui/primitives/form/form.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { useLingui } from '@lingui/react';
 import type * as LabelPrimitive from '@radix-ui/react-label';
 import { Slot } from '@radix-ui/react-slot';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -136,13 +137,21 @@ const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
+  const { i18n } = useLingui();
+
   const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
+
+  let body = error ? String(error?.message) : children;
 
   if (!body) {
     return null;
   }
 
+  // Checks to see if there's a translation for the string, since we're passing IDs for Zod errors.
+  if (typeof body === 'string' && i18n.t(body)) {
+    body = i18n.t(body);
+  }
+
   return (
     <AnimatePresence>
       <motion.div