<!-- source-hash: 5fc10ddb4837c0d5506138aed4e8345a -->
Reusable empty-state component for chat-list surfaces, rendering a muted icon above a title and optional description in a vertically centred layout.

## Key Components

### `ChatListEmptyState`
A client component that renders a centred empty state with three elements:
- **Icon** — a 24px muted glyph (`ods-text-secondary`) wrapped in a fixed `size-6` container
- **Title** — displayed as an `h4` paragraph
- **Description** — optional `h6` caption rendered below the title

### `ChatListEmptyStateProps`

| Prop | Type | Required | Description |
|---|---|---|---|
| `icon` | `React.ReactNode` | ✅ | Pre-sized 24px icon glyph |
| `title` | `React.ReactNode` | ✅ | Title line rendered as `h4` |
| `description` | `React.ReactNode` | ❌ | Optional caption rendered as `h6` |
| `className` | `string` | ❌ | Appended to root element |

## Usage Example

```typescript
import { ChatListEmptyState } from './chat-list-empty-state'
import { ChatsIcon } from '../icons'

// With title only
<ChatListEmptyState
  icon={<ChatsIcon size={24} />}
  title="No active chats"
/>

// With description
<ChatListEmptyState
  icon={<ChatsIcon size={24} />}
  title="No archived chats"
  description="Completed conversations will appear here."
  className="my-custom-class"
/>
```

> **Design note:** This component is shared between the "Current Chats" rail and the Chat Archive page (Figma node `113:60939`) to keep both surfaces visually consistent.

**Source:** [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/chat-list-empty-state.tsx)