---
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:

```svelte
<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:

```svelte
<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](https://date-fns.org/) 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](../widget-system/widgets.md) — Overview of the widget architecture.