A team timeline with a stacked weekly histogram on top: click a day bar to narrow to that day, toggle event types with counted chips and filter by people. Counts and bars recompute as filters combine, and entries cascade back in.
Maya Chen deployed api v2.41 to production
Deploy · 4:12 PMJonah Reyes resolved INC-311 checkout latency
Incident · 11:48 AMPriya Raman approved #1856 Audit log export
Review · 10:05 AMLeo Marsh pushed 6 commits to feat/billing-empty-states
Commit · 6:31 PMPriya Raman published SSO setup guide
Doc · 2:20 PMJonah Reyes opened INC-311 checkout latency
Incident · 9:02 AMMaya Chen requested changes on #1851 Dark mode tokens
Review · 5:44 PMKenji Watanabe merged #1849 Retry webhooks with backoff
Commit · 1:15 PMKenji Watanabe deployed worker v1.19 to staging
Deploy · 3:50 PMMaya Chen pushed 3 commits to fix/export-rate-limit
Commit · 11:27 AMLeo Marsh updated Billing FAQ
Doc · 4:03 PMKenji Watanabe approved #1842 Faster search index
Review · 10:40 AMPriya Raman merged #1842 Faster search index
Commit · 12:02 PMMaya Chen rolled back web v4.17
Deploy · 7:18 PM
npx shadcn@latest add https://hyperblur.dev/r/list-activity-filters.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/list-activity-filters.tsx.
import { ListActivityFilters } from "@/components/hyperblur/list-activity-filters"
<ListActivityFilters defaultFilters={{ types: ["deploy", "incident"] }} />| Prop | Type | Default | Description |
|---|---|---|---|
| events | ActivityEvent[] | 14 sample events | Events with id, type (code, review, deploy, incident, docs), actor, action, target, day index, time and optional detail. |
| dayLabels | string[] | ["Sun 1" ... "Sat 7"] | Labels for each day index in the histogram and separators. |
| accent | string | "#2f7bff" | Color for the selected day and person rings. |
| defaultFilters | { types?: ActivityType[]; people?: string[]; day?: number | null } | Initial filters. | |
| onFiltersChange | (filters: ActivityFilterState) => void | Called whenever a filter changes. | |
| maxHeight | number | 360 | Maximum height of the scrolling timeline in pixels. |