shadcn.io is not affiliated with official shadcn/ui
Time Tracker Navbar Block for Svelte
A project tracker navbar with a play button, a running elapsed time and a task select that start, stop and switch a timer.
Installation
Overview
A project tracker navbar for Svelte with Ark UI, the bar of Taskwright. A row of cells follows the wordmark: My tasks, Projects, Calendar and Reports (from lg), then a time tracker, then the account's initials. The tracker is a play button, the elapsed time of the chosen task, which opens at 00:12:48 and ticks while it runs, and a select that picks the task. Play starts it, the same button stops it, and a polite line says "Started Design review." or "Stopped Design review at 0:13:02." Switching task stops the running one, keeps its time for when you come back, and opens the new task at its own. The digits hold their width, and the time is only what this page counted: nothing is saved. Below lg the links and a native select for the task move into a sheet from the top, and the chip keeps the play button, the time and the task's name. The page's rails and top rule come from the Guides spine, and the bar stays 56 pixels high. It's built from Timer, Select, Native Select, Sheet, Button and Guides. For tracking, time-keeping and focus tools whose timer belongs in the header.
FAQ
How does the timer count, and is anything saved?
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.
What does a screen reader hear?
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.
What happens when I switch task while it runs?
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.
How does the task select work?
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.
How does it fit on a phone?
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.