From 6367d94552e0c8e1b27e629d67fe9f45eca2c7ae Mon Sep 17 00:00:00 2001
From: Mike Cao <moocao@gmail.com>
Date: Mon, 19 Jan 2026 03:02:51 -0800
Subject: [PATCH] Add default row/column for new boards and prevent removing
 last column.

- New boards now start with one row containing one column
- Hide remove column button when only one column remains in a row

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/app/(main)/boards/BoardProvider.tsx       | 11 ++++---
 src/app/(main)/boards/[boardId]/BoardBody.tsx | 30 ++++++++++++-------
 2 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/app/(main)/boards/BoardProvider.tsx b/src/app/(main)/boards/BoardProvider.tsx
index 1d133166..5dc52d62 100644
--- a/src/app/(main)/boards/BoardProvider.tsx
+++ b/src/app/(main)/boards/BoardProvider.tsx
@@ -1,6 +1,7 @@
 'use client';
 import { Loading, useToast } from '@umami/react-zen';
 import { createContext, type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
+import { v4 as uuid } from 'uuid';
 import { useApi, useMessages, useModified, useNavigation } from '@/components/hooks';
 import { useBoardQuery } from '@/components/hooks/queries/useBoardQuery';
 import type { Board, BoardParameters } from '@/lib/types';
@@ -17,11 +18,13 @@ export interface BoardContextValue {
 
 export const BoardContext = createContext<BoardContextValue>(null);
 
-const defaultBoard: Partial<Board> = {
+const createDefaultBoard = (): Partial<Board> => ({
   name: '',
   description: '',
-  parameters: { rows: [] },
-};
+  parameters: {
+    rows: [{ id: uuid(), columns: [{ id: uuid(), component: null }] }],
+  },
+});
 
 export function BoardProvider({ boardId, children }: { boardId?: string; children: ReactNode }) {
   const { data, isFetching, isLoading } = useBoardQuery(boardId);
@@ -31,7 +34,7 @@ export function BoardProvider({ boardId, children }: { boardId?: string; childre
   const { formatMessage, labels, messages } = useMessages();
   const { router, renderUrl } = useNavigation();
 
-  const [board, setBoard] = useState<Partial<Board>>(data ?? defaultBoard);
+  const [board, setBoard] = useState<Partial<Board>>(data ?? createDefaultBoard());
   const layoutGetterRef = useRef<LayoutGetter | null>(null);
 
   const registerLayoutGetter = useCallback((getter: LayoutGetter) => {
diff --git a/src/app/(main)/boards/[boardId]/BoardBody.tsx b/src/app/(main)/boards/[boardId]/BoardBody.tsx
index c85fbbac..03034fbd 100644
--- a/src/app/(main)/boards/[boardId]/BoardBody.tsx
+++ b/src/app/(main)/boards/[boardId]/BoardBody.tsx
@@ -221,7 +221,11 @@ function BoardRow({
       {columns?.map((column, index) => (
         <Fragment key={column.id}>
           <Panel id={column.id} minSize={MIN_COLUMN_WIDTH} defaultSize={column.size}>
-            <BoardColumn {...column} onRemove={handleRemoveColumn} />
+            <BoardColumn
+              {...column}
+              onRemove={handleRemoveColumn}
+              canRemove={columns?.length > 1}
+            />
           </Panel>
           {index < columns?.length - 1 && <Separator />}
         </Fragment>
@@ -276,10 +280,12 @@ function BoardColumn({
   id,
   component,
   onRemove,
+  canRemove = true,
 }: {
   id: string;
   component?: ReactElement;
   onRemove?: (id: string) => void;
+  canRemove?: boolean;
 }) {
   const handleAddComponent = () => {};
 
@@ -294,16 +300,18 @@ function BoardColumn({
       backgroundColor="3"
       position="relative"
     >
-      <Box position="absolute" top="10px" right="20px" zIndex={100}>
-        <TooltipTrigger delay={0}>
-          <Button variant="quiet" onPress={() => onRemove?.(id)}>
-            <Icon size="sm">
-              <X />
-            </Icon>
-          </Button>
-          <Tooltip>Remove column</Tooltip>
-        </TooltipTrigger>
-      </Box>
+      {canRemove && (
+        <Box position="absolute" top="10px" right="20px" zIndex={100}>
+          <TooltipTrigger delay={0}>
+            <Button variant="quiet" onPress={() => onRemove?.(id)}>
+              <Icon size="sm">
+                <X />
+              </Icon>
+            </Button>
+            <Tooltip>Remove column</Tooltip>
+          </TooltipTrigger>
+        </Box>
+      )}
       <Button variant="outline" onPress={handleAddComponent}>
         <Icon>
           <Plus />