feat: add boards management page (#55)

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

@@ -0,0 +1,28 @@
+"use client";
+
+import React from "react";
+
+import { clientApi } from "@homarr/api/client";
+import { useI18n } from "@homarr/translation/client";
+import { Button } from "@homarr/ui";
+
+import { revalidatePathAction } from "~/app/revalidatePathAction";
+
+export const CreateBoardButton = () => {
+  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]);
+
+  return (
+    <Button onClick={onClick} loading={isPending}>
+      {t("management.page.board.button.create")}
+    </Button>
+  );
+};

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

@@ -0,0 +1,34 @@
+"use client";
+
+import React from "react";
+
+import { clientApi } from "@homarr/api/client";
+import { useI18n } from "@homarr/translation/client";
+import { Button } from "@homarr/ui";
+
+import { revalidatePathAction } from "~/app/revalidatePathAction";
+
+interface Props {
+  id: string;
+}
+
+export const DeleteBoardButton = ({ id }: Props) => {
+  const t = useI18n();
+  const { mutateAsync, isPending } = clientApi.board.delete.useMutation({
+    onSettled: async () => {
+      await revalidatePathAction("/manage/boards");
+    },
+  });
+
+  const onClick = React.useCallback(async () => {
+    await mutateAsync({
+      id,
+    });
+  }, [id, mutateAsync]);
+
+  return (
+    <Button onClick={onClick} loading={isPending} color="red">
+      {t("management.page.board.button.delete")}
+    </Button>
+  );
+};

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

@@ -0,0 +1,38 @@
+import React from "react";
+
+import { getScopedI18n } from "@homarr/translation/server";
+import { Card, Grid, GridCol, Text, Title } from "@homarr/ui";
+
+import { api } from "~/trpc/server";
+import { CreateBoardButton } from "./_components/create-board-button";
+import { DeleteBoardButton } from "./_components/delete-board-button";
+
+export default async function ManageBoardsPage() {
+  const t = await getScopedI18n("management.page.board");
+
+  const boards = await api.board.getAll.query();
+
+  return (
+    <>
+      <Title>{t("title")}</Title>
+
+      <CreateBoardButton />
+
+      <Grid>
+        {boards.map((board) => (
+          <GridCol span={{ xs: 12, md: 4 }} key={board.id}>
+            <Card>
+              <Text fw={500}>{board.name}</Text>
+
+              <Text size="sm" my="md" style={{ lineBreak: "anywhere" }}>
+                {JSON.stringify(board)}
+              </Text>
+
+              <DeleteBoardButton id={board.id} />
+            </Card>
+          </GridCol>
+        ))}
+      </Grid>
+    </>
+  );
+}