<!-- source-hash: 995995dfe9715311703dcbbfc0fbba0b -->
Storybook stories for the `ChatTicketList` component, providing visual test cases across different ticket counts, statuses, and scroll/fade behaviors.

## Key Components

- **`meta`** — Storybook metadata registering the component under `Chat/ChatTicketList` with autodocs and a `ticketClicked` action handler
- **`mockTickets`** — 5-item fixture dataset covering all ticket statuses: `ACTIVE`, `ON_HOLD`, `TECH_REQUIRED`, and `RESOLVED`
- **`manyTickets`** — 15-item extended dataset (includes `mockTickets`) for testing scroll and fade overflow scenarios
- **`constrainedDecorator`** — Factory returning a story decorator that wraps the component in a max-width 600px container with an optional fixed height, used to simulate real layout constraints

## Exported Stories

| Story | Description |
|---|---|
| `Default` | 5 tickets, unconstrained height |
| `SingleTicket` | Only the first ticket rendered |
| `AllStatuses` | First 4 tickets showing each distinct status |
| `ScrollFading` | 15 tickets in a 400px container to demonstrate scroll fade |
| `ScrollFadingCompact` | 15 tickets in a 280px container for more pronounced fade |

## Usage Example

```typescript
// Replicate the ScrollFading story manually
import { ChatTicketList } from "../components/chat/chat-ticket-list";

<div style={{ maxWidth: 600, height: 400 }}>
  <ChatTicketList
    tickets={manyTickets}
    onTicketClick={(ticket) => console.log(ticket)}
  />
</div>
```