Add board view/edit mode separation with cancel button.

/boards/[id] is now view mode (read-only) with an edit button.
/boards/[id]/edit is edit mode with save and cancel buttons.
Save navigates back to view, cancel discards changes.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/app/(main)/boards/[boardId]/BoardHeader.tsx

@@ -1,9 +1,38 @@
-import { Column, Grid, Heading, LoadingButton, Row, TextField } from '@umami/react-zen';
-import { useBoard, useMessages } from '@/components/hooks';
+import { Button, Column, Grid, Heading, LoadingButton, Row, TextField } from '@umami/react-zen';
+import { IconLabel } from '@/components/common/IconLabel';
+import { LinkButton } from '@/components/common/LinkButton';
+import { PageHeader } from '@/components/common/PageHeader';
+import { useBoard, useMessages, useNavigation } from '@/components/hooks';
+import { Edit } from '@/components/icons';
 
 export function BoardHeader() {
+  const { board, editing } = useBoard();
+
+  if (editing) {
+    return <BoardEditHeader />;
+  }
+
+  return <BoardViewHeader />;
+}
+
+function BoardViewHeader() {
+  const { board } = useBoard();
+  const { renderUrl } = useNavigation();
+  const { formatMessage, labels } = useMessages();
+
+  return (
+    <PageHeader title={board?.name} description={board?.description}>
+      <LinkButton href={renderUrl(`/boards/${board?.id}/edit`, false)}>
+        <IconLabel icon={<Edit />}>{formatMessage(labels.edit)}</IconLabel>
+      </LinkButton>
+    </PageHeader>
+  );
+}
+
+function BoardEditHeader() {
   const { board, updateBoard, saveBoard, isPending } = useBoard();
   const { formatMessage, labels } = useMessages();
+  const { router, renderUrl } = useNavigation();
   const defaultName = formatMessage(labels.untitled);
 
   const handleNameChange = (value: string) => {
@@ -14,8 +43,19 @@ export function BoardHeader() {
     updateBoard({ description: value });
   };
 
-  const handleSave = () => {
-    saveBoard();
+  const handleSave = async () => {
+    await saveBoard();
+    if (board.id) {
+      router.push(renderUrl(`/boards/${board.id}`));
+    }
+  };
+
+  const handleCancel = () => {
+    if (board.id) {
+      router.push(renderUrl(`/boards/${board.id}`));
+    } else {
+      router.push(renderUrl('/boards'));
+    }
   };
 
   return (
@@ -55,9 +95,14 @@ export function BoardHeader() {
         </Row>
       </Column>
       <Column justifyContent="center" alignItems="flex-end">
-        <LoadingButton variant="primary" onPress={handleSave} isLoading={isPending}>
-          {formatMessage(labels.save)}
-        </LoadingButton>
+        <Row gap="3">
+          <Button variant="quiet" onPress={handleCancel}>
+            {formatMessage(labels.cancel)}
+          </Button>
+          <LoadingButton variant="primary" onPress={handleSave} isLoading={isPending}>
+            {formatMessage(labels.save)}
+          </LoadingButton>
+        </Row>
       </Column>
     </Grid>
   );