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/BoardProvider.tsx

@@ -10,6 +10,7 @@ export type LayoutGetter = () => Partial<BoardParameters> | null;
 
 export interface BoardContextValue {
   board: Partial<Board>;
+  editing: boolean;
   updateBoard: (data: Partial<Board>) => void;
   saveBoard: () => Promise<Board>;
   isPending: boolean;
@@ -26,7 +27,15 @@ const createDefaultBoard = (): Partial<Board> => ({
   },
 });
 
-export function BoardProvider({ boardId, children }: { boardId?: string; children: ReactNode }) {
+export function BoardProvider({
+  boardId,
+  editing = false,
+  children,
+}: {
+  boardId?: string;
+  editing?: boolean;
+  children: ReactNode;
+}) {
   const { data, isFetching, isLoading } = useBoardQuery(boardId);
   const { post, useMutation } = useApi();
   const { touch } = useModified();
@@ -103,7 +112,7 @@ export function BoardProvider({ boardId, children }: { boardId?: string; childre
 
   return (
     <BoardContext.Provider
-      value={{ board, updateBoard, saveBoard, isPending, registerLayoutGetter }}
+      value={{ board, editing, updateBoard, saveBoard, isPending, registerLayoutGetter }}
     >
       {children}
     </BoardContext.Provider>

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

@@ -21,7 +21,7 @@ const BUTTON_ROW_HEIGHT = 60;
 const MAX_COLUMNS = 4;
 
 export function BoardBody() {
-  const { board, updateBoard, saveBoard, isPending, registerLayoutGetter } = useBoard();
+  const { board, editing, updateBoard, saveBoard, isPending, registerLayoutGetter } = useBoard();
   const rowGroupRef = useRef<GroupImperativeHandle>(null);
   const columnGroupRefs = useRef<Map<string, GroupImperativeHandle>>(new Map());
 
@@ -141,6 +141,7 @@ export function BoardBody() {
               rowId={row.id}
               rowIndex={index}
               rowCount={rows?.length}
+              editing={editing}
               onRemove={handleRemoveRow}
               onMoveUp={handleMoveRowUp}
               onMoveDown={handleMoveRowDown}
@@ -150,18 +151,20 @@ export function BoardBody() {
           {index < rows?.length - 1 && <Separator />}
         </Fragment>
       ))}
-      <Panel minSize={BUTTON_ROW_HEIGHT}>
-        <Row padding="3">
-          <TooltipTrigger delay={0}>
-            <Button variant="outline" onPress={handleAddRow}>
-              <Icon>
-                <Plus />
-              </Icon>
-            </Button>
-            <Tooltip placement="bottom">Add row</Tooltip>
-          </TooltipTrigger>
-        </Row>
-      </Panel>
+      {editing && (
+        <Panel minSize={BUTTON_ROW_HEIGHT}>
+          <Row padding="3">
+            <TooltipTrigger delay={0}>
+              <Button variant="outline" onPress={handleAddRow}>
+                <Icon>
+                  <Plus />
+                </Icon>
+              </Button>
+              <Tooltip placement="bottom">Add row</Tooltip>
+            </TooltipTrigger>
+          </Row>
+        </Panel>
+      )}
     </Group>
   );
 }
@@ -171,6 +174,7 @@ function BoardRow({
   rowIndex,
   rowCount,
   columns,
+  editing = false,
   onRemove,
   onMoveUp,
   onMoveDown,
@@ -180,6 +184,7 @@ function BoardRow({
   rowIndex: number;
   rowCount: number;
   columns: BoardColumnType[];
+  editing?: boolean;
   onRemove?: (id: string) => void;
   onMoveUp?: (id: string) => void;
   onMoveDown?: (id: string) => void;
@@ -223,6 +228,7 @@ function BoardRow({
           <Panel id={column.id} minSize={MIN_COLUMN_WIDTH} defaultSize={column.size}>
             <BoardColumn
               {...column}
+              editing={editing}
               onRemove={handleRemoveColumn}
               canRemove={columns?.length > 1}
             />
@@ -230,48 +236,50 @@ function BoardRow({
           {index < columns?.length - 1 && <Separator />}
         </Fragment>
       ))}
-      <Column alignSelf="center" padding="3" gap="1">
-        <TooltipTrigger delay={0}>
-          <Button variant="outline" onPress={() => onMoveUp?.(rowId)} isDisabled={rowIndex === 0}>
-            <Icon rotate={180}>
-              <ChevronDown />
-            </Icon>
-          </Button>
-          <Tooltip placement="top">Move row up</Tooltip>
-        </TooltipTrigger>
-        <TooltipTrigger delay={0}>
-          <Button
-            variant="outline"
-            onPress={handleAddColumn}
-            isDisabled={columns?.length >= MAX_COLUMNS}
-          >
-            <Icon>
-              <Plus />
-            </Icon>
-          </Button>
-          <Tooltip placement="left">Add column</Tooltip>
-        </TooltipTrigger>
-        <TooltipTrigger delay={0}>
-          <Button variant="outline" onPress={() => onRemove?.(rowId)}>
-            <Icon>
-              <Minus />
-            </Icon>
-          </Button>
-          <Tooltip placement="left">Remove row</Tooltip>
-        </TooltipTrigger>
-        <TooltipTrigger delay={0}>
-          <Button
-            variant="outline"
-            onPress={() => onMoveDown?.(rowId)}
-            isDisabled={rowIndex === rowCount - 1}
-          >
-            <Icon>
-              <ChevronDown />
-            </Icon>
-          </Button>
-          <Tooltip placement="bottom">Move row down</Tooltip>
-        </TooltipTrigger>
-      </Column>
+      {editing && (
+        <Column alignSelf="center" padding="3" gap="1">
+          <TooltipTrigger delay={0}>
+            <Button variant="outline" onPress={() => onMoveUp?.(rowId)} isDisabled={rowIndex === 0}>
+              <Icon rotate={180}>
+                <ChevronDown />
+              </Icon>
+            </Button>
+            <Tooltip placement="top">Move row up</Tooltip>
+          </TooltipTrigger>
+          <TooltipTrigger delay={0}>
+            <Button
+              variant="outline"
+              onPress={handleAddColumn}
+              isDisabled={columns?.length >= MAX_COLUMNS}
+            >
+              <Icon>
+                <Plus />
+              </Icon>
+            </Button>
+            <Tooltip placement="left">Add column</Tooltip>
+          </TooltipTrigger>
+          <TooltipTrigger delay={0}>
+            <Button variant="outline" onPress={() => onRemove?.(rowId)}>
+              <Icon>
+                <Minus />
+              </Icon>
+            </Button>
+            <Tooltip placement="left">Remove row</Tooltip>
+          </TooltipTrigger>
+          <TooltipTrigger delay={0}>
+            <Button
+              variant="outline"
+              onPress={() => onMoveDown?.(rowId)}
+              isDisabled={rowIndex === rowCount - 1}
+            >
+              <Icon>
+                <ChevronDown />
+              </Icon>
+            </Button>
+            <Tooltip placement="bottom">Move row down</Tooltip>
+          </TooltipTrigger>
+        </Column>
+      )}
     </Group>
   );
 }
@@ -279,11 +287,13 @@ function BoardRow({
 function BoardColumn({
   id,
   component,
+  editing = false,
   onRemove,
   canRemove = true,
 }: {
   id: string;
   component?: ReactElement;
+  editing?: boolean;
   onRemove?: (id: string) => void;
   canRemove?: boolean;
 }) {
@@ -297,10 +307,10 @@ function BoardColumn({
       height="100%"
       alignItems="center"
       justifyContent="center"
-      backgroundColor="3"
+      backgroundColor="surface-sunken"
       position="relative"
     >
-      {canRemove && (
+      {editing && canRemove && (
         <Box position="absolute" top="10px" right="20px" zIndex={100}>
           <TooltipTrigger delay={0}>
             <Button variant="quiet" onPress={() => onRemove?.(id)}>
@@ -312,11 +322,13 @@ function BoardColumn({
           </TooltipTrigger>
         </Box>
       )}
-      <Button variant="outline" onPress={handleAddComponent}>
-        <Icon>
-          <Plus />
-        </Icon>
-      </Button>
+      {editing && (
+        <Button variant="outline" onPress={handleAddComponent}>
+          <Icon>
+            <Plus />
+          </Icon>
+        </Button>
+      )}
     </Column>
   );
 }

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

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

@@ -5,9 +5,9 @@ import { BoardHeader } from '@/app/(main)/boards/[boardId]/BoardHeader';
 import { BoardProvider } from '@/app/(main)/boards/BoardProvider';
 import { PageBody } from '@/components/common/PageBody';
 
-export function BoardPage({ boardId }: { boardId: string }) {
+export function BoardPage({ boardId, editing = false }: { boardId?: string; editing?: boolean }) {
   return (
-    <BoardProvider boardId={boardId}>
+    <BoardProvider boardId={boardId} editing={editing}>
       <PageBody>
         <Column>
           <BoardHeader />

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

@@ -0,0 +1,12 @@
+import type { Metadata } from 'next';
+import { BoardPage } from '../BoardPage';
+
+export default async function ({ params }: { params: Promise<{ boardId: string }> }) {
+  const { boardId } = await params;
+
+  return <BoardPage boardId={boardId} editing />;
+}
+
+export const metadata: Metadata = {
+  title: 'Edit Board',
+};

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

@@ -3,8 +3,9 @@ import { BoardPage } from './BoardPage';
 
 export default async function ({ params }: { params: Promise<{ boardId: string }> }) {
   const { boardId } = await params;
+  const isCreate = boardId === 'create';
 
-  return <BoardPage boardId={boardId !== 'create' ? boardId : undefined} />;
+  return <BoardPage boardId={isCreate ? undefined : boardId} editing={isCreate} />;
 }
 
 export const metadata: Metadata = {