feat: add i18n translated form errors (#509)

apps/nextjs/src/components/board/modals/board-rename-modal.tsx

@@ -3,10 +3,11 @@
 import { Button, Group, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useForm } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
-import type { validation, z } from "@homarr/validation";
+import type { z } from "@homarr/validation";
+import { validation } from "@homarr/validation";
 
 interface InnerProps {
   id: string;
@@ -26,7 +27,7 @@ export const BoardRenameModal = createModal<InnerProps>(
         void utils.board.getDefaultBoard.invalidate();
       },
     });
-    const form = useForm<FormType>({
+    const form = useZodForm(validation.board.rename.omit({ id: true }), {
       initialValues: {
         name: innerProps.previousName,
       },

apps/nextjs/src/components/board/sections/category/category-edit-modal.tsx

@@ -1,8 +1,9 @@
 import { Button, Group, Stack, TextInput } from "@mantine/core";
 
-import { useForm } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
+import { z } from "@homarr/validation";
 
 interface Category {
   id: string;
@@ -18,7 +19,7 @@ interface InnerProps {
 export const CategoryEditModal = createModal<InnerProps>(
   ({ actions, innerProps }) => {
     const t = useI18n();
-    const form = useForm({
+    const form = useZodForm(z.object({ name: z.string().min(1) }), {
       initialValues: {
         name: innerProps.category.name,
       },

apps/nextjs/src/components/icons/picker/icon-picker.tsx

@@ -1,3 +1,4 @@
+import type { FocusEventHandler } from "react";
 import { useState } from "react";
 import {
   Combobox,
@@ -15,9 +16,18 @@ import { useScopedI18n } from "@homarr/translation/client";
 interface IconPickerProps {
   initialValue?: string;
   onChange: (iconUrl: string) => void;
+  error?: string | null;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
 }
 
-export const IconPicker = ({ initialValue, onChange }: IconPickerProps) => {
+export const IconPicker = ({
+  initialValue,
+  onChange,
+  error,
+  onFocus,
+  onBlur,
+}: IconPickerProps) => {
   const [value, setValue] = useState<string>(initialValue ?? "");
   const [search, setSearch] = useState(initialValue ?? "");
 
@@ -76,13 +86,18 @@ export const IconPicker = ({ initialValue, onChange }: IconPickerProps) => {
             setSearch(event.currentTarget.value);
           }}
           onClick={() => combobox.openDropdown()}
-          onFocus={() => combobox.openDropdown()}
-          onBlur={() => {
+          onFocus={(event) => {
+            onFocus?.(event);
+            combobox.openDropdown();
+          }}
+          onBlur={(event) => {
+            onBlur?.(event);
             combobox.closeDropdown();
             setSearch(value || "");
           }}
           rightSectionPointerEvents="none"
           withAsterisk
+          error={error}
           label="Icon URL"
         />
       </Combobox.Target>

apps/nextjs/src/components/manage/boards/add-board-modal.tsx

@@ -1,10 +1,11 @@
 import { Button, Group, Stack, TextInput } from "@mantine/core";
 import { boardSchemas } from "node_modules/@homarr/validation/src/board";
 
-import { useForm, zodResolver } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { createModal } from "@homarr/modals";
 import { useI18n } from "@homarr/translation/client";
 import { z } from "@homarr/validation";
+import { createCustomErrorParams } from "@homarr/validation/form";
 
 interface InnerProps {
   boardNames: string[];
@@ -14,20 +15,21 @@ interface InnerProps {
 export const AddBoardModal = createModal<InnerProps>(
   ({ actions, innerProps }) => {
     const t = useI18n();
-    const form = useForm({
-      initialValues: {
-        name: "",
+    const form = useZodForm(
+      z.object({
+        name: boardSchemas.byName.shape.name.refine(
+          (value) => !innerProps.boardNames.includes(value),
+          {
+            params: createCustomErrorParams("boardAlreadyExists"),
+          },
+        ),
+      }),
+      {
+        initialValues: {
+          name: "",
+        },
       },
-      validate: zodResolver(
-        z.object({
-          name: boardSchemas.byName.shape.name.refine(
-            (value) => !innerProps.boardNames.includes(value),
-          ),
-        }),
-      ),
-      validateInputOnBlur: true,
-      validateInputOnChange: true,
-    });
+    );
 
     return (
       <form