feat: add create board modal (#131)

apps/nextjs/src/app/[locale]/manage/boards/_components/create-board-button.tsx

@@ -4,24 +4,45 @@ import React from "react";
 
 import { clientApi } from "@homarr/api/client";
 import { useI18n } from "@homarr/translation/client";
-import { Button } from "@homarr/ui";
+import { Button, IconCategoryPlus } from "@homarr/ui";
 
+import { modalEvents } from "~/app/[locale]/modals";
 import { revalidatePathAction } from "~/app/revalidatePathAction";
 
-export const CreateBoardButton = () => {
+interface CreateBoardButtonProps {
+  boardNames: string[];
+}
+
+export const CreateBoardButton = ({ boardNames }: CreateBoardButtonProps) => {
   const t = useI18n();
+
   const { mutateAsync, isPending } = clientApi.board.create.useMutation({
     onSettled: async () => {
       await revalidatePathAction("/manage/boards");
     },
   });
 
-  const onClick = React.useCallback(async () => {
-    await mutateAsync({ name: "default" });
-  }, [mutateAsync]);
+  const onClick = React.useCallback(() => {
+    modalEvents.openManagedModal({
+      modal: "addBoardModal",
+      title: t("management.page.board.button.create"),
+      innerProps: {
+        onSuccess: async (values) => {
+          await mutateAsync({
+            name: values.name,
+          });
+        },
+        boardNames,
+      },
+    });
+  }, [mutateAsync, t, boardNames]);
 
   return (
-    <Button onClick={onClick} loading={isPending}>
+    <Button
+      leftSection={<IconCategoryPlus size="1rem" />}
+      onClick={onClick}
+      loading={isPending}
+    >
       {t("management.page.board.button.create")}
     </Button>
   );