# XWUIChatList

The left-rail conversation list used in the classic WhatsApp Web / Telegram / IG DM layout: an optional search box (`showSearch`, `searchPlaceholder`), an optional row of folder/category tabs (the `folders` conf_comp array driving `activeFolder`), and a scrollable column of `XWUIChatPreviewRow` instances built from the `entries` data array. Each entry carries the preview-row fields (`id`, `name`, `lastMessage`, `timestamp`, `unreadCount`, `pinned`, `muted`, `typing`, `presence`); the row matching `activeId` is rendered selected. Callbacks `onSelect`, `onSearchChange`, and `onFolderChange` report interaction, and `setActive()` / `setEntries()` update the list imperatively.

## Basic Usage

A three-conversation list with "All / Unread / Groups" folder tabs, the first chat active, plus per-entry unread counts, a pinned chat, and a muted "typing…" row.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Three-entry chat list with folder tabs, an active row, an unread badge, a pinned chat, and a muted typing row.
```

## Unread Folder Active

Folder tabs with the "Unread" tab selected, every row unread, and folder/select callbacks wired.

```example
file: examples/UnreadFolder.ts
title: Unread Folder Active
description: Chat list with the Unread folder tab active and onFolderChange / onSelect handlers.
```

## Plain List, No Search

A bare DM column with the search bar hidden - just preview rows with presence, pinned, and muted states.

```example
file: examples/NoSearchPlain.ts
title: Plain List, No Search
description: Search-less chat list showing presence dots, a pinned chat, and a muted thread.
```

```api
```
