From 6d4d7a3121e0748cdc1fe5150a9485c72e38f5ba Mon Sep 17 00:00:00 2001
From: Mike Cao <mike@mikecao.com>
Date: Sat, 14 Feb 2026 22:52:50 -0800
Subject: [PATCH] Mute disabled board row control icons

---
 .../(main)/boards/[boardId]/BoardEditRow.tsx  | 22 ++++++++++++++-----
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/app/(main)/boards/[boardId]/BoardEditRow.tsx b/src/app/(main)/boards/[boardId]/BoardEditRow.tsx
index e57be12c1..f6306ffa9 100644
--- a/src/app/(main)/boards/[boardId]/BoardEditRow.tsx
+++ b/src/app/(main)/boards/[boardId]/BoardEditRow.tsx
@@ -37,6 +37,9 @@ export function BoardEditRow({
 }) {
   const { board, updateBoard } = useBoard();
   const [showActions, setShowActions] = useState(false);
+  const moveUpDisabled = rowIndex === 0;
+  const addColumnDisabled = columns.length >= MAX_COLUMNS;
+  const moveDownDisabled = rowIndex === rowCount - 1;
 
   const handleGroupRef = (ref: GroupImperativeHandle | null) => {
     onRegisterRef(rowId, ref);
@@ -146,8 +149,13 @@ export function BoardEditRow({
           style={{ transform: 'translateY(-50%)' }}
         >
           <TooltipTrigger delay={0}>
-            <Button variant="outline" onPress={() => onMoveUp(rowId)} isDisabled={rowIndex === 0}>
-              <Icon rotate={180}>
+            <Button
+              variant="outline"
+              onPress={() => onMoveUp(rowId)}
+              isDisabled={moveUpDisabled}
+              style={moveUpDisabled ? { pointerEvents: 'none' } : undefined}
+            >
+              <Icon rotate={180} color={moveUpDisabled ? 'muted' : undefined}>
                 <ChevronDown />
               </Icon>
             </Button>
@@ -157,9 +165,10 @@ export function BoardEditRow({
             <Button
               variant="outline"
               onPress={handleAddColumn}
-              isDisabled={columns.length >= MAX_COLUMNS}
+              isDisabled={addColumnDisabled}
+              style={addColumnDisabled ? { pointerEvents: 'none' } : undefined}
             >
-              <Icon>
+              <Icon color={addColumnDisabled ? 'muted' : undefined}>
                 <Plus />
               </Icon>
             </Button>
@@ -177,9 +186,10 @@ export function BoardEditRow({
             <Button
               variant="outline"
               onPress={() => onMoveDown(rowId)}
-              isDisabled={rowIndex === rowCount - 1}
+              isDisabled={moveDownDisabled}
+              style={moveDownDisabled ? { pointerEvents: 'none' } : undefined}
             >
-              <Icon>
+              <Icon color={moveDownDisabled ? 'muted' : undefined}>
                 <ChevronDown />
               </Icon>
             </Button>