Add board table edit and delete actions

src/app/(main)/boards/BoardDeleteButton.tsx

@@ -0,0 +1,46 @@
+import { ConfirmationForm } from '@/components/common/ConfirmationForm';
+import { useDeleteQuery, useMessages } from '@/components/hooks';
+import { Trash } from '@/components/icons';
+import { DialogButton } from '@/components/input/DialogButton';
+
+export function BoardDeleteButton({
+  boardId,
+  name,
+  onSave,
+}: {
+  boardId: string;
+  name: string;
+  onSave?: () => void;
+}) {
+  const { t, labels, messages, getErrorMessage } = useMessages();
+  const { mutateAsync, isPending, error, touch } = useDeleteQuery(`/boards/${boardId}`);
+
+  const handleConfirm = async (close: () => void) => {
+    await mutateAsync(null, {
+      onSuccess: () => {
+        touch('boards');
+        onSave?.();
+        close();
+      },
+    });
+  };
+
+  return (
+    <DialogButton icon={<Trash />} title={t(labels.confirm)} variant="quiet" width="400px">
+      {({ close }) => (
+        <ConfirmationForm
+          message={t.rich(messages.confirmRemove, {
+            target: name,
+            b: chunks => <b>{chunks}</b>,
+          })}
+          isLoading={isPending}
+          error={getErrorMessage(error)}
+          onConfirm={handleConfirm.bind(null, close)}
+          onClose={close}
+          buttonLabel={t(labels.delete)}
+          buttonVariant="danger"
+        />
+      )}
+    </DialogButton>
+  );
+}

src/app/(main)/boards/BoardEditButton.tsx

@@ -0,0 +1,22 @@
+import { Icon } from '@umami/react-zen';
+import { LinkButton } from '@/components/common/LinkButton';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { Edit } from '@/components/icons';
+
+export function BoardEditButton({ boardId }: { boardId: string }) {
+  const { t, labels } = useMessages();
+  const { renderUrl } = useNavigation();
+
+  return (
+    <LinkButton
+      href={renderUrl(`/boards/${boardId}/edit`)}
+      title={t(labels.edit)}
+      aria-label={t(labels.edit)}
+      variant="quiet"
+    >
+      <Icon>
+        <Edit />
+      </Icon>
+    </LinkButton>
+  );
+}

src/app/(main)/boards/BoardsTable.tsx

@@ -1,18 +1,19 @@
 import { DataColumn, DataTable, type DataTableProps, Row } from '@umami/react-zen';
-import Board from 'next/link';
+import Link from 'next/link';
 import { DateDistance } from '@/components/common/DateDistance';
-import { useMessages, useNavigation, useSlug } from '@/components/hooks';
+import { useMessages, useNavigation } from '@/components/hooks';
+import { BoardDeleteButton } from './BoardDeleteButton';
+import { BoardEditButton } from './BoardEditButton';
 
 export function BoardsTable(props: DataTableProps) {
   const { t, labels } = useMessages();
-  const { websiteId, renderUrl } = useNavigation();
-  const { getSlugUrl } = useSlug('link');
+  const { renderUrl } = useNavigation();
 
   return (
     <DataTable {...props}>
       <DataColumn id="name" label={t(labels.name)}>
         {({ id, name }: any) => {
-          return <Board href={renderUrl(`/boards/${id}`)}>{name}</Board>;
+          return <Link href={renderUrl(`/boards/${id}`)}>{name}</Link>;
         }}
       </DataColumn>
       <DataColumn id="description" label={t(labels.description)} />
@@ -21,7 +22,12 @@ export function BoardsTable(props: DataTableProps) {
       </DataColumn>
       <DataColumn id="action" align="end" width="100px">
         {({ id, name }: any) => {
-          return <Row></Row>;
+          return (
+            <Row>
+              <BoardEditButton boardId={id} />
+              <BoardDeleteButton boardId={id} name={name} />
+            </Row>
+          );
         }}
       </DataColumn>
     </DataTable>