focusFlow

FocusFlow is an app for organizing one main task into smaller, timed steps. You start by typing a main task, which becomes the current focus goal. From there you can add subtasks manually, each with a title and a duration in minutes. Subtasks can be marked complete, removed, or selected as the active focus item. The list shows how many steps are pending, the total remaining minutes across unfinished steps, and a progress bar based on completed items. A focus timer runs alongside the list. It starts from the total remaining minutes (or a 25-minute default when there are no pending steps) and can be started or paused. Selecting a subtask highlights it and starts the timer, but the timer itself is not tied to automatically finishing a step; it simply counts down and can be toggled on or off.

The app keeps the current task and history in local storage so your work persists between page loads. When you finish, you can mark the main task as completed or abandoned. A confirmation modal appears before ending a task. Finished tasks move into a history view that shows the task title, dates, status, and completion progress. The history panel can be opened from the top bar, closed, or cleared with confirmation. The interface also supports three languages, Simplified Chinese, English, and Traditional Chinese, via a language toggle in the navigation bar. The selected language is saved locally as well.

The layout has two main states. When no task is active, you see a welcome view with a short explanation and a single input to create a new goal. Once a task exists, the screen switches to a dashboard with a left column for the task list and controls, and a right column for the timer and a tips card. The design uses a dark theme, cards, icons, and subtle animations for modals and transitions. All data stays in the browser; there is no account system, no cloud sync, and no automatic task generation. The focus is on simple, manual planning: break a big goal into steps, estimate time for each step, and use the built-in timer while you work through the list.

Task creation is straightforward. You enter a main task title, press the button or hit Enter, and the main task appears with its creation date. Subtasks can be added one by one with a short title and a numeric duration field. The duration is stored per step and contributes to the total remaining time shown in the list header. Each step row includes controls to mark it complete, start focus for that step, or delete it.

Progress is calculated as the share of completed subtasks within the current task. The progress bar and percentage update as you check off steps. The main task can be ended at any time with either the completed or abandoned action. Ending a task clears the current task state, stops the timer, and records the task in history with its status and an end time. The history list shows each past task as a compact card with a status label, date range, and a small progress bar indicating how many steps were completed when the task ended.

The timer component is a simple countdown display with start and pause controls. It shows labels such as remaining time and a focusing state based on the current language. When it reaches zero, the app stops the timer but does not automatically mark subtasks as complete. You can choose any active subtask to focus on, and the currently focused step is highlighted in the list. The timer initial value is based on the sum of all unfinished step durations; if everything is done or there are no steps, the initial value is set to 25 minutes.