Component: TaskManager

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 TaskManager component provides a "Mission Protocols" module, a simple to-do list feature integrated into the application's main dashboard. Its purpose is to allow users to define and manage a small, focused set of tasks to accomplish during their Pomodoro sessions. The component is self-contained, managing its own state for tasks and persisting them to the browser's localStorage to ensure data is retained across sessions.

It is rendered within the main dashboard view of the application, alongside the Pomodoro and AudioPlayer components. The component's display language is controlled by a language prop passed down from the main App component.

Sources: src/components/TaskManager.tsx, src/App.tsx:613-615, README.md:27

State Management and Persistence

The TaskManager component manages its state locally using React's useState hook. Task data is automatically saved to and loaded from the browser's localStorage, providing persistence.

Sources: src/components/TaskManager.tsx

State Initialization

On component mount, the tasks state is initialized by attempting to read and parse data from localStorage under the key origin_terminal_tasks. If no data is found or if parsing fails, it defaults to an empty array.

// src/components/TaskManager.tsx:16-26
const [tasks, setTasks] = useState<Task[]>(() => {
  const saved = localStorage.getItem(STORAGE_KEY);
  if (saved) {
    try {
      return JSON.parse(saved);
    } catch (e) {
      console.error('Failed to load tasks', e);
    }
  }
  return [];
});

State Persistence

A useEffect hook listens for changes to the tasks state. Whenever the tasks array is modified (e.g., a task is added, toggled, or deleted), the hook serializes the entire array to a JSON string and saves it to localStorage.

This diagram illustrates the lifecycle of task data within the component.

Data Structure

All tasks are represented by the Task interface. This structure defines the properties for each task item managed by the component.

Sources: src/types.ts:74-79

Task Interface

The Task object has the following fields:

Field	Type	Description
id	string	A unique identifier, generated from Date.now().
text	string	The content of the task.
completed	boolean	The completion status of the task.
createdAt	number	A timestamp indicating when the task was created.

This ER diagram shows the structure of a Task entity.

Core Operations

The component exposes several functions to manipulate the list of tasks. All operations are triggered by user interactions within the UI.

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

Add Task (addTask)

This function adds a new task to the list. It performs two checks before adding:

1. Ensures the input value is not empty or just whitespace.
2. Verifies that the number of existing tasks is less than the MAX_TASKS limit, which is hardcoded to 6.

If both conditions are met, a new Task object is created and appended to the tasks state. The input field is then cleared.

This flowchart shows the logic for adding a new task.

Other Operations

Function	Description
toggleTask(id)	Toggles the completed boolean for a task matching the given id.
deleteTask(id)	Removes a task from the list by filtering the tasks array.
clearCompleted()	Removes all tasks where completed is true. This button is only visible if at least one task is completed.

Sources: src/components/TaskManager.tsx:49-59, src/components/TaskManager.tsx:132-136

UI and Rendering

The TaskManager is rendered inside a Panel component. Its UI is composed of an input form, a scrollable task list, and a footer section. The component's title and other text labels are internationalized using the useTranslation hook.

Sources: src/components/TaskManager.tsx:65-139

Key UI Elements

• Capacity Counter: Displays the current number of tasks versus the maximum allowed ({tasks.length}/{MAX_TASKS}). The count color changes to red when the capacity is full.
• Input Form: An Input field and a Button for adding new tasks. These are disabled when the task capacity is reached.
• Task List: An overflow-y-auto container that lists all tasks. Each task has a toggle button, its text, and a delete button that appears on hover (on desktop). Completed tasks are styled with reduced opacity and a line-through.
• Empty State: If no tasks exist, a placeholder message "NO ACTIVE OBJECTIVES" is displayed within a dashed border.
• Clear Button: A button to "PURGE COMPLETED" tasks appears in the footer only when there is at least one completed task.

Component Integration

The TaskManager is instantiated in App.tsx and receives the current application language as a prop. This prop is essential for the useTranslation hook to provide the correct UI strings.

The following sequence diagram shows how a language change in the application settings propagates to the TaskManager to update its UI text.

Conclusion

The TaskManager is a crucial utility component in the Endfield-Pomodoro application, providing users with a simple yet effective way to manage their objectives. It demonstrates robust, self-contained state management with localStorage persistence, a clear and responsive UI that adapts to its state, and seamless integration with the application's internationalization system. Its fixed capacity of six tasks reinforces the project's philosophy of focusing on a limited set of current goals.

Sources: README.md:27, src/components/TaskManager.tsx:12