Feature: Task Manager

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/TaskManager.tsx
• src/App.tsx
• src/types.ts
• src/utils/i18n.ts
• README.md

The Task Manager, referred to as "Mission Protocols" in the UI, is a core feature of the Endfield-Pomodoro application. It provides users with a simple interface to create, track, and manage a small, focused list of objectives. The manager is designed to be minimalistic, enforcing a limit on the number of active tasks to encourage focus on current goals.

The component is self-contained, managing its own state and persisting it to the browser's localStorage. It is integrated directly into the main dashboard view of the application, sitting alongside the Pomodoro and Audio Player modules. All user-facing text is internationalized, supporting both English and Chinese.

Sources: README.md, src/components/TaskManager.tsx, src/App.tsx:693-695, src/utils/i18n.ts:70-77

Architecture and Integration

The TaskManager is a React functional component that is rendered within the main App component. It receives the current application language as a prop to handle internationalization. It is architecturally independent for its state management but relies on shared UI components from ./ui.

Sources: src/components/TaskManager.tsx:13, src/App.tsx:694

The following diagram illustrates the component's position within the application's dashboard view.

State Management and Data Persistence

The TaskManager component manages its state locally using React hooks. The core state consists of the tasks array and the inputValue for the new task input field.

• tasks: An array of Task objects, initialized directly from localStorage.
• inputValue: A string representing the current value of the task input field.

Data persistence is achieved using the Web Storage API (localStorage).

1. Initialization: On component mount, the tasks state is initialized by attempting to parse a JSON string from localStorage using the key origin_terminal_tasks. If loading fails or no data is present, it defaults to an empty array.
2. Synchronization: A useEffect hook listens for any changes to the tasks state. When tasks is updated (e.g., a task is added, toggled, or deleted), the hook serializes the entire array to a JSON string and saves it back to localStorage.

Sources: src/components/TaskManager.tsx:12, 16-27, 30-33

This diagram shows the data flow for state initialization and persistence.

Configuration

The Task Manager has hardcoded configuration constants defined at the top of the file.

Constant	Value	Description
MAX_TASKS	6	The maximum number of tasks allowed in the list.
STORAGE_KEY	'origin_terminal_tasks'	The key used for storing tasks in localStorage.

Sources: src/components/TaskManager.tsx:11-12

Core Functionality

The component provides full CRUD (Create, Read, Update, Delete) functionality for tasks.

Sources: src/components/TaskManager.tsx:35-61

Task Data Model

Each task is an object conforming to the Task interface defined in src/types.ts.

// src/types.ts:70-75
export interface Task {
  id: string;
  text: string;
  completed: boolean;
  createdAt: number;
}

The following diagram describes the Task entity.

Adding a Task

A user can add a new task by typing in the input field and clicking the "ADD" button or pressing "Enter".

• The addTask function is called.
• It checks if the input is empty or if the task list has reached its MAX_TASKS capacity.
• If valid, a new Task object is created with a unique id (from Date.now()), the trimmed input text, completed: false, and a createdAt timestamp.
• The new task is appended to the tasks array, and the input field is cleared.

Sources: src/components/TaskManager.tsx:35-47

This sequence diagram illustrates the process of adding a task.

Toggling a Task

Users can toggle the completion status of a task by clicking the checkbox next to it.

• The toggleTask function is called with the task's id.
• It maps over the tasks array, finding the matching task and returning a new object with the completed property inverted.
• The UI reflects this change by dimming the task, adding a line-through style, and showing a checkmark.

Sources: src/components/TaskManager.tsx:49-51, 110-119

Deleting a Task

A task can be deleted by clicking the close icon (ri-close-line) that appears on hover.

• The deleteTask function is called with the task's id.
• It filters the tasks array, returning a new array that excludes the task with the matching id.

Sources: src/components/TaskManager.tsx:53-55, 120-126

Clearing Completed Tasks

If there is at least one completed task, a button to "[PURGE COMPLETED]" appears at the bottom of the list.

• The clearCompleted function is called on click.
• It filters the tasks array, keeping only the tasks where completed is false.

Sources: src/components/TaskManager.tsx:57-59, 129-133

UI and Internationalization

The Task Manager's UI is built using a Panel component and displays the title "MISSION PROTOCOLS". It includes a capacity counter ({tasks.length}/{MAX_TASKS}) that turns red when full. If no tasks are present, a placeholder message "NO ACTIVE OBJECTIVES" is shown.

All text is sourced from src/utils/i18n.ts via the useTranslation hook, which takes the language prop passed down from App.tsx.

Key (t(...))	English Text	Chinese Text
TASK_MODULE	MISSION PROTOCOLS	任务协议
ADD_TASK_PLACEHOLDER	Input objective parameters...	输入任务指令...
ADD_TASK	ADD	添加
NO_TASKS	NO ACTIVE OBJECTIVES	无当前任务
CAPACITY	CAPACITY	容量
CLEAR_COMPLETED	PURGE COMPLETED	清除已完成
TOGGLE_TASK	TOGGLE TASK	切换任务状态
DELETE_TASK	DELETE TASK	删除任务

Sources: src/components/TaskManager.tsx:14, 65-133, src/utils/i18n.ts:70-77, 150-157