Title: Changes Feed Widget

---

The Changes Feed Widget displays a chronological list of recent changes made within the platform. It is designed to keep users informed about activity across the system, showing who made changes, what was changed, and when.

Overview

The widget fetches and renders a live feed of change events, with support for relative timestamps localized to the user's current language. Each entry in the feed displays a user avatar (color-coded by name), a summary of the change, and the time elapsed since the change occurred.

Supported languages for relative timestamps: German (de), English (en), Spanish (es), French (fr), Italian (it), Polish (pl).

Configuration

Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| showHeader | boolean | true | Controls whether the widget's title and description header is rendered. Set to false when embedding the widget in a context that already provides a header, or when you want a more compact layout. |

Usage

Default (with header)

Use the widget in its default form to display the full widget including the title and description:

<ChangesFeedWidget />

Embedded (without header)

Set showHeader to false to suppress the built-in title and description. This is useful when embedding the widget inside a panel, card, or layout that already provides its own heading:

<ChangesFeedWidget showHeader={false} />

States

The widget handles the following states automatically:
Loading — Displays an animated skeleton placeholder (three rows) while change data is being fetched.
Error — Displays an error alert if the feed fails to load.
Empty — Indicates when no changes are available.
Populated — Renders the list of change feed entries with avatars, summaries, and relative timestamps.

Avatar Colors

User avatars are color-coded deterministically based on the user's display name. The following DaisyUI theme colors are used in rotation:
bg-primary
bg-secondary
bg-accent
bg-info
bg-success
bg-warning

This ensures that the same user always receives the same avatar color within a session, providing visual consistency across the feed.

Localization

Relative timestamps (e.g., "2 minutes ago") are rendered using date-fns and respect the application's current language setting via the i18n store. If the current language does not have a matching locale, German (de) is used as the fallback.

Related
Widget System — Overview of the widget architecture.