Display

Conversation Item

An inbox row with avatar, title, time, preview, unread badge, pinned and muted flags and an active state.

<script>
  import { Avatar, ConversationItem } from "@codeatlasdev/ui";
</script>

<ConversationItem title="Maria Souza" time="14:32" preview="Sent it by email." unread={3} active>
  {#snippet avatar()}<Avatar alt="Maria Souza" size="lg" />{/snippet}
</ConversationItem>

The whole row is the hit area (at least 44px tall). With href it renders a link, otherwise a button. active sets aria-current; unread rows make the title and time bold; the count is capped at 99+ and announced as “3 unread messages”. typing replaces the preview.

#251

Inbox

Pinned, muted, unread, typing and the active row.

Reference #251 · Pick in the gallery

Code

<script lang="ts">
  import { Avatar, ConversationItem } from '@codeatlasdev/ui';

  let active = $state('maria');
  const rows = [
    { id: 'maria', title: 'Maria Souza', time: '14:32', preview: 'Sent it by email just now.', unread: 3 },
    { id: 'team', title: 'Design team', time: '13:10', preview: 'Carlos: new mocks are up', pinned: true },
    { id: 'ops', title: 'Ops alerts', time: 'Mon', preview: 'Deploy finished', muted: true },
    { id: 'ana', title: 'Ana Lima', time: '09:00', preview: '', typing: true },
  ];
</script>

<div class="inbox">
  {#each rows as row}
    <ConversationItem
      title={row.title}
      time={row.time}
      preview={row.preview}
      unread={row.unread}
      pinned={row.pinned}
      muted={row.muted}
      typing={row.typing}
      active={active === row.id}
      onclick={() => (active = row.id)}
    >
      {#snippet avatar()}<Avatar alt={row.title} size="lg" />{/snippet}
    </ConversationItem>
  {/each}
</div>

<style>
  .inbox { max-inline-size: 26rem; display: flex; flex-direction: column; }
</style>

Props

Prop	Type	Default	Description
`title`	`string`	–	Contact or group name.
`time`	`string`	–	Last activity time.
`preview`	`string`	–	One-line preview.
`previewIcon`	`Snippet`	–	Leading icon or ticks before the preview.
`avatar`	`Snippet`	–	Avatar slot.
`unread`	`number`	–	Unread count badge (99+ cap).
`pinned`	`boolean`	`false`	Shows the pin indicator.
`muted`	`boolean`	`false`	Shows the muted indicator and a quiet badge.
`active`	`boolean`	`false`	Selected row (aria-current).
`typing`	`boolean`	`false`	Shows a typing indicator instead of the preview.
`href`	`string`	–	Render as a link.
`onclick`	`(e: MouseEvent) => void`	–	Click handler.