Time Tracker Navbar Block for React

The Timer component counts up from the task's starting time, once a second while it runs. The starting times (12:48, 41:05 and 0:00) and the task list are constants at the top of the file. Times are kept in the page's memory while you switch tasks and are lost on reload. To save them, send the stop time from press to your API.

The play button is named Start timer or Stop timer and reports whether it is pressed. A polite status line speaks only when the timer starts, stops or the task changes ("Stopped Design review at 0:12:50."); the ticking digits don't speak. The digits are a timer region read in left-to-right order, also in a right-to-left page.

The running task stops at the time shown, that time is remembered for the task, and the new task opens at its own time, stopped. The line says "Stopped Write release notes at 0:41:07. Now on Design review." Pick the first task again and its time is where you left it.

From sm it is a Select in the bar: Enter or Space opens the list, the arrow keys move, Enter chooses, and Escape closes it and returns focus to the trigger. On a phone the same choice is a native select in the sheet, because a native picker is the better control there; the bar shows the task's name.

Below lg the links leave the bar and a menu button opens a sheet from the top with the links, the task select and the account. The tracker stays in the bar at every width, the wordmark is its icon and the avatar hides below sm, and at 320 pixels the bar is the icon, the play button, the time, the task's name and the menu button. Escape closes the sheet and returns focus to the menu button.

Only the digits move, as the clock runs, and the play button fills when it is pressed. Stopping is always one press away. Links and the button change colour with a short transition, instant with reduced motion.