ConversationList

import { state } from '@kerf-js/core'import {  ConversationList,  Stack,  Text} from '@kerf-js/veneer'import type { ChatConversation } from '@kerf-js/veneer'export function Inbox() {  const open = state('incidents')  const name = () =>    CONVERSATIONS.find((c) => c.id === open.value)!.name  return (    <Stack gap="related">      <ConversationList        title={<Text role="label">Messages</Text>}        items={CONVERSATIONS}        value={open}      />      <Text subtle>Open: {name()}</Text>    </Stack>  )}const CONVERSATIONS: ChatConversation[] = [  {    id: 'incidents',    name: '# incidents',    color: 3,    channel: true,    preview: 'Sam: Rolled back, 5xx are dropping',    time: '15:41',    unread: 3,    pinned: true,  },  {    id: 'deploys',    name: '# deploys',    color: 5,    channel: true,    preview: 'storefront is live',    time: '16:42',    unread: 1,  },  {    id: 'jun',    name: 'Jun Tanaka',    color: 2,    preview: 'You: thanks, merging now',    time: '14:30',    online: true,  },  {    id: 'web',    name: '# web',    color: 4,    channel: true,    preview: 'Priya: new image cache is in',    time: '12:05',  },  {    id: 'lena',    name: 'Lena Fischer',    color: 5,    preview: 'Ranking v2 is building',    time: 'Thu',  },  {    id: 'random',    name: '# random',    color: 8,    channel: true,    preview: 'Tomás pinned a message',    time: 'Wed',    muted: true,  },]