ActivityFeed
Audit log or activity feed built on Timeline, with actor/action/target rows, relative timestamps, and optional day grouping.
Component behavior
ActivityFeed composes Timeline rows in actor/action/target format. It renders timestamps with RelativeTime and can group entries by Today, Yesterday, or date in the reader’s timezone.
ActivityFeed inherits Timeline markers, connectors, row states, and layout. Timeline props such as variant, density, timePlacement, and --m-timeline-* custom properties also apply.
- Activity records with an actor, action, and target.
- Activity timestamps displayed relative to the current time.
- Long activity histories grouped by day.
Timeline: entries are general events, release stages, or status changes.
CommentThread: entries form a conversation with replies.
LogViewer: the content is a high-volume stream of log lines.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | ActivityItem[] | — | Items to display, newest first. |
groupByDay | boolean | — | Adds Today, Yesterday, and date headings using the client timezone after hydration. |
connector | boolean | true | Draw the vertical connector down the rail. |
density | "compact" | "normal" | "comfortable" | "normal" | Row density. Timeline's, passed through. |
variant | "rail" | "cards" | "minimal" | "rail" | Timeline variant applied to feed rows. |
timePlacement | "inline" | "leading" | "none" | "inline" | Timestamp placement. Leading uses a separate column. |
emptyState | ReactNode | "No activity yet." | Shown when items is empty. |
onItemClick | (item: ActivityItem) => void | — | Renders rows as buttons. Do not include links or other interactive children in button rows. |
ActivityItem
| Prop | Type | Default | Description |
|---|---|---|---|
id | string | — | Stable key. |
actor | ReactNode | — | The actor, such as a user, service, or bot. Renders with the strongest text emphasis. |
action | ReactNode | — | The phrase that follows the actor: "deployed", "closed as duplicate". |
target | ReactNode | — | Target text rendered in monospace with the bright tone. |
time | Date | — | Rendered through RelativeTime, and what groupByDay buckets on. |
media | ReactNode | — | Avatar or icon on the rail, in place of the tone dot. |
tone | ToneProp | — | Marker color. Accepts tone names and aliases. |
detail | ReactNode | — | Content in a framed block below the event. |
meta | ReactNode | — | Dim line under the sentence. |
active | boolean | — | Applies active styling with a tinted background and emphasized marker. |
import { ActivityFeed } from "@solarius/onset";
import type { ActivityItem } from "@solarius/onset";Examples
Avatars on the rail
media replaces the tone dot with a supplied node, such as an Avatar, logo, or StatusDot. It maps to Timeline’s marker slot and retains rail alignment.
Days, density and frames
groupByDay inserts Today / Yesterday / date headings and starts a new block at each heading. density and variant pass straight through to the timeline: compact for a side panel, cards for a feed whose rows carry real bodies.
Selecting a row
onItemClick makes each row a real <button>, and active marks the focused row; use both when the feed sits beside a detail pane. Do not use onItemClick on rows that contain their own links.