feat(plan): create generic Checklist component and refactor Todo (#17741)

2026-04-29 06:25:16 -07:00 · 2026-01-29 13:13:18 -05:00
parent ac7687c1dd
commit 0e30055ae4
7 changed files with 395 additions and 148 deletions
@@ -0,0 +1,126 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import type React from 'react';
+import { Box, Text } from 'ink';
+import { theme } from '../semantic-colors.js';
+import { useMemo } from 'react';
+import { ChecklistItem, type ChecklistItemData } from './ChecklistItem.js';
+
+export interface ChecklistProps {
+  title: string;
+  items: ChecklistItemData[];
+  isExpanded: boolean;
+  toggleHint?: string;
+}
+
+const ChecklistTitleDisplay: React.FC<{
+  title: string;
+  items: ChecklistItemData[];
+  toggleHint?: string;
+}> = ({ title, items, toggleHint }) => {
+  const score = useMemo(() => {
+    let total = 0;
+    let completed = 0;
+    for (const item of items) {
+      if (item.status !== 'cancelled') {
+        total += 1;
+        if (item.status === 'completed') {
+          completed += 1;
+        }
+      }
+    }
+    return `${completed}/${total} completed`;
+  }, [items]);
+
+  return (
+    <Box flexDirection="row" columnGap={2} height={1}>
+      <Text color={theme.text.primary} bold aria-label={`${title} list`}>
+        {title}
+      </Text>
+      <Text color={theme.text.secondary}>
+        {score}
+        {toggleHint ? ` (${toggleHint})` : ''}
+      </Text>
+    </Box>
+  );
+};
+
+const ChecklistListDisplay: React.FC<{ items: ChecklistItemData[] }> = ({
+  items,
+}) => (
+  <Box flexDirection="column" aria-role="list">
+    {items.map((item, index) => (
+      <ChecklistItem
+        item={item}
+        key={`${index}-${item.label}`}
+        role="listitem"
+      />
+    ))}
+  </Box>
+);
+
+export const Checklist: React.FC<ChecklistProps> = ({
+  title,
+  items,
+  isExpanded,
+  toggleHint,
+}) => {
+  const inProgress: ChecklistItemData | null = useMemo(
+    () => items.find((item) => item.status === 'in_progress') || null,
+    [items],
+  );
+
+  const hasActiveItems = useMemo(
+    () =>
+      items.some(
+        (item) => item.status === 'pending' || item.status === 'in_progress',
+      ),
+    [items],
+  );
+
+  if (items.length === 0 || (!isExpanded && !hasActiveItems)) {
+    return null;
+  }
+
+  return (
+    <Box
+      borderStyle="single"
+      borderBottom={false}
+      borderRight={false}
+      borderLeft={false}
+      borderColor={theme.border.default}
+      paddingLeft={1}
+      paddingRight={1}
+    >
+      {isExpanded ? (
+        <Box flexDirection="column" rowGap={1}>
+          <ChecklistTitleDisplay
+            title={title}
+            items={items}
+            toggleHint={toggleHint}
+          />
+          <ChecklistListDisplay items={items} />
+        </Box>
+      ) : (
+        <Box flexDirection="row" columnGap={1} height={1}>
+          <Box flexShrink={0} flexGrow={0}>
+            <ChecklistTitleDisplay
+              title={title}
+              items={items}
+              toggleHint={toggleHint}
+            />
+          </Box>
+          {inProgress && (
+            <Box flexShrink={1} flexGrow={1}>
+              <ChecklistItem item={inProgress} wrap="truncate" />
+            </Box>
+          )}
+        </Box>
+      )}
+    </Box>
+  );
+};