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>
   );

apps/nextjs/src/app/[locale]/manage/boards/page.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { getScopedI18n } from "@homarr/translation/server";
-import { Card, Grid, GridCol, Text, Title } from "@homarr/ui";
+import { Card, Grid, GridCol, Group, Text, Title } from "@homarr/ui";
 
 import { api } from "~/trpc/server";
 import { CreateBoardButton } from "./_components/create-board-button";
@@ -14,17 +14,25 @@ export default async function ManageBoardsPage() {
 
   return (
     <>
-      <Title>{t("title")}</Title>
-
-      <CreateBoardButton />
+      <Group justify="space-between">
+        <Title mb="md">{t("title")}</Title>
+        <CreateBoardButton boardNames={boards.map((board) => board.name)} />
+      </Group>
 
       <Grid>
         {boards.map((board) => (
           <GridCol span={{ xs: 12, md: 4 }} key={board.id}>
             <Card>
-              <Text fw={500}>{board.name}</Text>
+              <Text fw="bolder" tt="uppercase">
+                {board.name}
+              </Text>
 
-              <Text size="sm" my="md" style={{ lineBreak: "anywhere" }}>
+              <Text
+                size="sm"
+                my="md"
+                c="dimmed"
+                style={{ lineBreak: "anywhere" }}
+              >
                 {JSON.stringify(board)}
               </Text>
 

apps/nextjs/src/app/[locale]/modals.tsx

@@ -6,9 +6,11 @@ import { WidgetEditModal } from "@homarr/widgets";
 
 import { ItemSelectModal } from "~/components/board/items/item-select-modal";
 import { CategoryEditModal } from "~/components/board/sections/category/category-edit-modal";
+import { AddBoardModal } from "~/components/manage/boards/add-board-modal";
 
 export const [ModalsManager, modalEvents] = createModalManager({
   categoryEditModal: CategoryEditModal,
   widgetEditModal: WidgetEditModal,
   itemSelectModal: ItemSelectModal,
+  addBoardModal: AddBoardModal,
 });