refactor(todo): improve performance and readability of todo component (#12238)

packages/cli/src/ui/components/messages/Todo.tsx

@@ -28,7 +28,7 @@ const TodoTitleDisplay: React.FC<{ todos: TodoList }> = ({ todos }) => {
         }
       }
     }
-    return `${completed}/${total}`;
+    return `${completed}/${total} completed`;
   }, [todos]);
 
   return (
@@ -57,7 +57,7 @@ const TodoStatusDisplay: React.FC<{ status: TodoStatus }> = ({ status }) => {
       );
     case 'pending':
       return (
-        <Text color={theme.text.primary} aria-label="Pending">
+        <Text color={theme.text.secondary} aria-label="Pending">
           ☐
         </Text>
       );
@@ -71,20 +71,31 @@ const TodoStatusDisplay: React.FC<{ status: TodoStatus }> = ({ status }) => {
   }
 };
 
+const statusTextColor: Partial<Record<TodoStatus, string>> = {
+  in_progress: theme.text.accent,
+  completed: theme.text.secondary,
+  cancelled: theme.text.secondary,
+};
+
 const TodoItemDisplay: React.FC<{
   todo: Todo;
   wrap?: 'truncate';
   role?: 'listitem';
-}> = ({ todo, wrap, role: ariaRole }) => (
-  <Box flexDirection="row" columnGap={1} aria-role={ariaRole}>
-    <TodoStatusDisplay status={todo.status} />
-    <Box flexShrink={1}>
-      <Text color={theme.text.primary} wrap={wrap}>
-        {todo.description}
-      </Text>
+}> = ({ todo, wrap, role: ariaRole }) => {
+  const textColor = statusTextColor[todo.status] ?? theme.text.primary;
+  const strikethrough = todo.status === 'cancelled';
+
+  return (
+    <Box flexDirection="row" columnGap={1} aria-role={ariaRole}>
+      <TodoStatusDisplay status={todo.status} />
+      <Box flexShrink={1}>
+        <Text color={textColor} wrap={wrap} strikethrough={strikethrough}>
+          {todo.description}
+        </Text>
+      </Box>
     </Box>
-  </Box>
-);
+  );
+};
 
 export const TodoTray: React.FC = () => {
   const uiState = useUIState();

packages/cli/src/ui/components/messages/__snapshots__/Todo.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<TodoTray /> (showFullTodos: false) > renders a todo list with long descriptions that wrap when full view is on 1`] = `
 "──────────────────────────────────────────────────
- Todo  1/2 (ctrl+t to toggle) » This is a very l…"
+ Todo  1/2 completed (ctrl+t to toggle) » This i…"
 `;
 
 exports[`<TodoTray /> (showFullTodos: false) > renders full list when all todos are inactive 1`] = `""`;
@@ -13,22 +13,22 @@ exports[`<TodoTray /> (showFullTodos: false) > renders null when todo list is em
 
 exports[`<TodoTray /> (showFullTodos: false) > renders the most recent todo list when multiple write_todos calls are in history 1`] = `
 "────────────────────────────────────────────────────────────────────────────────────────────────────
- Todo  0/2 (ctrl+t to toggle) » Newer Task 2"
+ Todo  0/2 completed (ctrl+t to toggle) » Newer Task 2"
 `;
 
 exports[`<TodoTray /> (showFullTodos: false) > renders when todos exist and one is in progress 1`] = `
 "────────────────────────────────────────────────────────────────────────────────────────────────────
- Todo  1/3 (ctrl+t to toggle) » Task 2"
+ Todo  1/3 completed (ctrl+t to toggle) » Task 2"
 `;
 
 exports[`<TodoTray /> (showFullTodos: false) > renders when todos exist but none are in progress 1`] = `
 "────────────────────────────────────────────────────────────────────────────────────────────────────
- Todo  1/2 (ctrl+t to toggle)"
+ Todo  1/2 completed (ctrl+t to toggle)"
 `;
 
 exports[`<TodoTray /> (showFullTodos: true) > renders a todo list with long descriptions that wrap when full view is on 1`] = `
 "──────────────────────────────────────────────────
- Todo  1/2 (ctrl+t to toggle)
+ Todo  1/2 completed (ctrl+t to toggle)
 
  » This is a very long description for a pending
    task that should wrap around multiple lines
@@ -39,7 +39,7 @@ exports[`<TodoTray /> (showFullTodos: true) > renders a todo list with long desc
 
 exports[`<TodoTray /> (showFullTodos: true) > renders full list when all todos are inactive 1`] = `
 "────────────────────────────────────────────────────────────────────────────────────────────────────
- Todo  1/1 (ctrl+t to toggle)
+ Todo  1/1 completed (ctrl+t to toggle)
 
  ✓ Task 1
  ✗ Task 2"
@@ -51,7 +51,7 @@ exports[`<TodoTray /> (showFullTodos: true) > renders null when todo list is emp
 
 exports[`<TodoTray /> (showFullTodos: true) > renders the most recent todo list when multiple write_todos calls are in history 1`] = `
 "────────────────────────────────────────────────────────────────────────────────────────────────────
- Todo  0/2 (ctrl+t to toggle)
+ Todo  0/2 completed (ctrl+t to toggle)
 
  ☐ Newer Task 1
  » Newer Task 2"
@@ -59,7 +59,7 @@ exports[`<TodoTray /> (showFullTodos: true) > renders the most recent todo list
 
 exports[`<TodoTray /> (showFullTodos: true) > renders when todos exist and one is in progress 1`] = `
 "────────────────────────────────────────────────────────────────────────────────────────────────────
- Todo  1/3 (ctrl+t to toggle)
+ Todo  1/3 completed (ctrl+t to toggle)
 
  ☐ Pending Task
  » Task 2
@@ -69,7 +69,7 @@ exports[`<TodoTray /> (showFullTodos: true) > renders when todos exist and one i
 
 exports[`<TodoTray /> (showFullTodos: true) > renders when todos exist but none are in progress 1`] = `
 "────────────────────────────────────────────────────────────────────────────────────────────────────
- Todo  1/2 (ctrl+t to toggle)
+ Todo  1/2 completed (ctrl+t to toggle)
 
  ☐ Pending Task
  ✗ In Progress Task