@dyyz1993/create-agent 2.1.0 → 2.1.2

package/templates/agent/src/mainview/components/todo/TodoPanel.tsx

@@ -1,21 +1,21 @@
-import { useState, useEffect } from "react";
-import { useTranslation } from "react-i18next";
-import { Plus, Trash2, Circle, Clock, CheckCircle2, ListTodo } from "lucide-react";
-import { useTodoStore } from "../../stores/use-todo-store";
-import type { TodoStatus } from "@shared/modules/todo";
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Plus, Trash2, Circle, Clock, CheckCircle2, ListTodo } from 'lucide-react';
+import { useTodoStore } from '../../stores/use-todo-store';
+import type { TodoStatus } from '@shared/modules/todo';
 
 const nextStatus: Record<TodoStatus, TodoStatus> = {
-	pending: "in_progress",
-	in_progress: "completed",
-	completed: "pending",
+	pending: 'in_progress',
+	in_progress: 'completed',
+	completed: 'pending',
 };
 
-const statusFlow = ["pending", "in_progress", "completed"] as const;
+const statusFlow = ['pending', 'in_progress', 'completed'] as const;
 
 export function TodoPanel() {
 	const { t } = useTranslation();
 	const [showInput, setShowInput] = useState(false);
-	const [input, setInput] = useState("");
+	const [input, setInput] = useState('');
 	const items = useTodoStore((s) => s.items);
 	const fetchItems = useTodoStore((s) => s.fetchItems);
 	const addItem = useTodoStore((s) => s.addItem);
@@ -29,13 +29,13 @@ export function TodoPanel() {
 	const handleAdd = () => {
 		if (!input.trim()) return;
 		addItem(input.trim());
-		setInput("");
+		setInput('');
 		setShowInput(false);
 	};
 
 	const handleKeyDown = (e: React.KeyboardEvent) => {
-		if (e.key === "Enter") handleAdd();
-		if (e.key === "Escape") setShowInput(false);
+		if (e.key === 'Enter') handleAdd();
+		if (e.key === 'Escape') setShowInput(false);
 	};
 
 	const statusConfig: Record<
@@ -44,34 +44,34 @@ export function TodoPanel() {
 	> = {
 		pending: {
 			icon: Circle,
-			color: "text-gray-400",
-			label: t("todo.statusPending"),
-			circleColor: "border-gray-500",
+			color: 'text-[var(--color-text-tertiary)]',
+			label: t('todo.statusPending'),
+			circleColor: 'border-[var(--color-border-primary)]',
 		},
 		in_progress: {
 			icon: Clock,
-			color: "text-yellow-400",
-			label: t("todo.statusInProgress"),
-			circleColor: "border-yellow-400 bg-yellow-400/20",
+			color: 'text-yellow-400',
+			label: t('todo.statusInProgress'),
+			circleColor: 'border-yellow-400 bg-yellow-400/20',
 		},
 		completed: {
 			icon: CheckCircle2,
-			color: "text-green-400",
-			label: t("todo.statusCompleted"),
-			circleColor: "border-green-400 bg-green-400/20",
+			color: 'text-[var(--color-text-success)]',
+			label: t('todo.statusCompleted'),
+			circleColor: 'border-[var(--color-text-success)] bg-[var(--color-text-success)]/20',
 		},
 	};
 
 	return (
 		<div className="flex flex-col h-full">
 			<div className="p-3 border-b border-[var(--color-border-primary)] flex items-center justify-between">
-				<span className="text-sm text-[var(--color-text-secondary)]">{t("todo.title")}</span>
+				<span className="text-sm text-[var(--color-text-secondary)]">{t('todo.title')}</span>
 				<button
 					onClick={() => setShowInput(!showInput)}
 					className="flex items-center gap-1 px-2 py-1 text-xs bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)] rounded text-[var(--color-text-primary)]"
 				>
 					<Plus className="w-3 h-3" />
-					{t("todo.add")}
+					{t('todo.add')}
 				</button>
 			</div>
 
@@ -82,26 +82,26 @@ export function TodoPanel() {
 						value={input}
 						onChange={(e) => setInput(e.target.value)}
 						onKeyDown={handleKeyDown}
-						placeholder={t("todo.placeholder")}
+						placeholder={t('todo.placeholder')}
 						autoFocus
 						className="flex-1 bg-[var(--color-bg-primary)] text-[var(--color-text-secondary)] px-3 py-1.5 rounded text-sm border border-[var(--color-border-secondary)] focus:border-[var(--color-accent)] focus:outline-none"
 					/>
 					<button
 						onClick={handleAdd}
 						disabled={!input.trim()}
-						className="px-3 py-1 text-xs bg-green-600 hover:bg-green-500 disabled:opacity-40 rounded text-white"
+						className="px-3 py-1 text-xs bg-[var(--color-text-success)] hover:opacity-80 disabled:opacity-40 rounded text-white"
 					>
-						{t("todo.save")}
+						{t('todo.save')}
 					</button>
 				</div>
 			)}
 
 			<div className="flex-1 overflow-auto p-3">
 				{items.length === 0 ? (
-					<div className="flex flex-col items-center justify-center h-full text-gray-600">
+					<div className="flex flex-col items-center justify-center h-full text-[var(--color-text-tertiary)]">
 						<ListTodo className="w-12 h-12 mb-3 opacity-30" />
-						<span className="text-sm">{t("todo.empty")}</span>
-						<span className="text-xs mt-1">{t("todo.emptyHint")}</span>
+						<span className="text-sm">{t('todo.empty')}</span>
+						<span className="text-xs mt-1">{t('todo.emptyHint')}</span>
 					</div>
 				) : (
 					<div className="space-y-2.5">
@@ -123,27 +123,29 @@ export function TodoPanel() {
 										<div className="flex-1 min-w-0">
 											<p
 												className={`text-sm leading-relaxed ${
-													item.status === "completed"
-														? "text-[var(--color-text-placeholder)] line-through"
-														: "text-[var(--color-text-secondary)]"
+													item.status === 'completed'
+														? 'text-[var(--color-text-placeholder)] line-through'
+														: 'text-[var(--color-text-secondary)]'
 												}`}
 											>
 												{item.content}
 											</p>
 											<div className="flex items-center gap-1.5 mt-2 text-[11px] text-[var(--color-text-placeholder)]">
-												<span>{t("todo.status")}</span>
+												<span>{t('todo.status')}</span>
 												{statusFlow.map((s) => {
 													const sc = statusConfig[s]!;
 													const isActive = s === item.status;
 													return (
 														<span
 															key={s}
-															className={`inline-flex items-center gap-0.5 ${isActive ? sc.color + " font-medium" : ""}`}
+															className={`inline-flex items-center gap-0.5 ${isActive ? sc.color + ' font-medium' : ''}`}
 														>
 															{isActive && <sc.icon className="w-2.5 h-2.5" />}
 															{sc.label}
-															{s !== "completed" && (
-																<span className="text-gray-700 mx-0.5">&rarr;</span>
+															{s !== 'completed' && (
+																<span className="text-[var(--color-text-placeholder)] mx-0.5">
+																	&rarr;
+																</span>
 															)}
 														</span>
 													);
@@ -152,7 +154,7 @@ export function TodoPanel() {
 										</div>
 										<button
 											onClick={() => removeItem(item.id)}
-											className="text-gray-600 hover:text-[var(--color-text-error)] opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 self-start mt-0.5"
+											className="text-[var(--color-text-tertiary)] hover:text-[var(--color-text-error)] opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 self-start mt-0.5"
 										>
 											<Trash2 className="w-3.5 h-3.5" />
 										</button>

package/templates/agent/src/mainview/components/todo/__tests__/TodoPanel.test.tsx

@@ -1,91 +1,91 @@
-import { describe, it, expect, vi, afterEach } from "vitest";
-import { render, screen, cleanup, fireEvent } from "@testing-library/react";
-import React from "react";
+import { describe, it, expect, vi, afterEach } from 'vitest';
+import { render, screen, cleanup, fireEvent } from '@testing-library/react';
+import React from 'react';
 
 const mockAddItem = vi.fn();
 const mockUpdateItem = vi.fn();
 const mockRemoveItem = vi.fn();
 const mockFetchItems = vi.fn();
 
-vi.mock("../../../stores/use-todo-store", () => ({
-  useTodoStore: (selector: any) =>
-    selector({
-      items: [
-        { id: "1", content: "Buy milk", status: "pending" },
-        { id: "2", content: "Write code", status: "completed" },
-      ],
-      fetchItems: mockFetchItems,
-      addItem: mockAddItem,
-      updateItem: mockUpdateItem,
-      removeItem: mockRemoveItem,
-    }),
+vi.mock('../../../stores/use-todo-store', () => ({
+	useTodoStore: <T,>(selector: (s: Record<string, unknown>) => T) =>
+		selector({
+			items: [
+				{ id: '1', content: 'Buy milk', status: 'pending' },
+				{ id: '2', content: 'Write code', status: 'completed' },
+			],
+			fetchItems: mockFetchItems,
+			addItem: mockAddItem,
+			updateItem: mockUpdateItem,
+			removeItem: mockRemoveItem,
+		}),
 }));
 
-vi.mock("react-i18next", () => ({
-  useTranslation: () => ({ t: (k: string) => k }),
+vi.mock('react-i18next', () => ({
+	useTranslation: () => ({ t: (k: string) => k }),
 }));
 
-describe("TodoPanel", () => {
-  afterEach(() => {
-    cleanup();
-    vi.clearAllMocks();
-  });
+describe('TodoPanel', () => {
+	afterEach(() => {
+		cleanup();
+		vi.clearAllMocks();
+	});
 
-  it("should render todo title", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    expect(screen.getByText("todo.title")).toBeDefined();
-  });
+	it('should render todo title', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		expect(screen.getByText('todo.title')).toBeDefined();
+	});
 
-  it("should render add button", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    expect(screen.getByText("todo.add")).toBeDefined();
-  });
+	it('should render add button', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		expect(screen.getByText('todo.add')).toBeDefined();
+	});
 
-  it("should display todo items", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    expect(screen.getByText("Buy milk")).toBeDefined();
-    expect(screen.getByText("Write code")).toBeDefined();
-  });
+	it('should display todo items', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		expect(screen.getByText('Buy milk')).toBeDefined();
+		expect(screen.getByText('Write code')).toBeDefined();
+	});
 
-  it("should call fetchItems on mount", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    expect(mockFetchItems).toHaveBeenCalled();
-  });
+	it('should call fetchItems on mount', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		expect(mockFetchItems).toHaveBeenCalled();
+	});
 
-  it("should show input when add button is clicked", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    fireEvent.click(screen.getByText("todo.add"));
-    expect(screen.getByPlaceholderText("todo.placeholder")).toBeDefined();
-  });
+	it('should show input when add button is clicked', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		fireEvent.click(screen.getByText('todo.add'));
+		expect(screen.getByPlaceholderText('todo.placeholder')).toBeDefined();
+	});
 
-  it("should call addItem on input submit", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    fireEvent.click(screen.getByText("todo.add"));
-    const input = screen.getByPlaceholderText("todo.placeholder");
-    fireEvent.change(input, { target: { value: "New task" } });
-    fireEvent.click(screen.getByText("todo.save"));
-    expect(mockAddItem).toHaveBeenCalledWith("New task");
-  });
+	it('should call addItem on input submit', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		fireEvent.click(screen.getByText('todo.add'));
+		const input = screen.getByPlaceholderText('todo.placeholder');
+		fireEvent.change(input, { target: { value: 'New task' } });
+		fireEvent.click(screen.getByText('todo.save'));
+		expect(mockAddItem).toHaveBeenCalledWith('New task');
+	});
 
-  it("should hide input on Escape", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    render(<TodoPanel />);
-    fireEvent.click(screen.getByText("todo.add"));
-    const input = screen.getByPlaceholderText("todo.placeholder");
-    fireEvent.keyDown(input, { key: "Escape" });
-    expect(screen.queryByPlaceholderText("todo.placeholder")).toBeNull();
-  });
+	it('should hide input on Escape', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		render(<TodoPanel />);
+		fireEvent.click(screen.getByText('todo.add'));
+		const input = screen.getByPlaceholderText('todo.placeholder');
+		fireEvent.keyDown(input, { key: 'Escape' });
+		expect(screen.queryByPlaceholderText('todo.placeholder')).toBeNull();
+	});
 
-  it("should render status indicators for each item", async () => {
-    const { TodoPanel } = await import("../TodoPanel");
-    const _container = render(<TodoPanel />);
-    const statusTexts = screen.getAllByText("todo.status");
-    expect(statusTexts.length).toBeGreaterThan(0);
-  });
+	it('should render status indicators for each item', async () => {
+		const { TodoPanel } = await import('../TodoPanel');
+		const _container = render(<TodoPanel />);
+		const statusTexts = screen.getAllByText('todo.status');
+		expect(statusTexts.length).toBeGreaterThan(0);
+	});
 });