shadcn.io is not affiliated with official shadcn/ui
Condensed Timeline Block for Svelte
A night patrol log of 26 dense rows in a scroll region under sticky hour heads, with 24 hour cells shaded by event count that scroll the log to an hour and focus its head, and the busiest hour marked.
Installation
Overview
Jump through a long log by the hour with this condensed timeline for Svelte with Ark UI. It is written for Vigilog, a fictional security patrol log. A hairline frame with a plus mark on each corner holds an hour strip and a log. The strip is 24 small cells, one per hour, shaded by how many events fell in it in four steps (none, 1 to 2, 3 to 4, 5 or more), each with its count in its name ("03:00, 6 events") and the busiest hour underlined. Under it the log is a scroll region of fixed height with 26 dense rows under sticky hour heads. Each row is a clock, what happened (check-in, door alarm, round complete, all clear, gate opened), the post and the guard's initials, on a minimal rail; an alarm has a heavier dot. Pressing an hour cell scrolls the region to that hour's head and focuses it, and a polite status line says where you are; an hour with nothing logged says so instead. The busiest hour's head carries the word "busiest". On a phone the strip scrolls sideways in its own region. It is built from Guides and CSS, with an entrance only. For patrol logs, audit logs, build logs and any record with many rows and a few hot spots. The events are example data.
FAQ
How do I change the events?
Edit PATROL at the top of the file. Each event has an id, an ISO time at in UTC, a kind (one of five constants that pair a word with a dot style), a post and a guard. The hour counts, the shading, the busiest hour and the heads are all derived from the times: add an event and its hour gets a head, a count and a darker cell.
How does pressing an hour work?
The handler finds that hour's group in the log and sets the region's scrollTop to the group's offset, which does not depend on the sticky head being stuck, then focuses the head without scrolling again. It never uses scrollIntoView, so the page itself never moves. There is no smooth scrolling, which keeps it right for people who prefer reduced motion.
What happens for an hour with nothing logged?
The cell is not disabled, so a keyboard user can still reach it, but it is marked aria-disabled and pressing it only says "Nothing was logged at 07:00." in the status line. Its name already says "0 events".
What stays in the page?
Only the scroll position and the status text. Nothing is saved or sent. For a long real log, load the hours you need and keep the strip as a summary computed on your server.
Is it accessible?
The log is a named, focusable region, so it scrolls with the keyboard, and each hour head is a heading. The strip is a second named region of buttons. Shade is never the only signal: every cell is named with its hour and count, and the busiest hour is underlined and written out. Times are time elements.