Email list

The mail listing. It is not a row engine of its own: since the listing canon was settled, the row is ItemList.Row (.il-*) and the mail family only decorates it — the star, the delivery mark, the sender, the date and the hover actions (.eml-* in apps/web/src/ds/email-list.css). React apps/web/src/components/mail/EmailList.tsx + EmailRow.tsx.

About half of email-list.css is dead: .eml-row, .eml-sender, .eml-body, .eml-subj, .eml-snip, .eml-ck, .eml-chip, .eml-att, .eml-name, .eml-count and .eml-line have no consumer left — they are the old row engine the migration replaced.

When to use

• The mailbox, and the mail tab of a person or a company.

When not to use

• A thread — that is the reader.
• Any other listing; the row belongs to Item list, and mail only adds its decorations.

Anatomy

• Tabs .eml-tabs / .eml-tab above the list (.active gets the accent underline).
• Row: ItemList.Row with state="read" for a message already seen.
• Lead: the star .eml-star (a control inside the row) and the delivery mark.
• Title: the subject; byline: the sender (.eml-who).
• Meta: the attachment icon .eml-preicon and the date .eml-date; hover actions live in .eml-actions.

Best practices

Do

• Keep the row an Item list row; anything mail-specific is decoration on top of it.
• Mark an unread message with tone, not with bold — weight is not how this system carries state.
• Keep the star inside the row's lead slot, where it is one tab stop away from the row itself.

Don't

• Bring the old .eml-* row classes back to life.
• Add a second density; the density belongs to Item list.
• Put the count of attachments in the subject.

Content

• The subject as it arrived; an empty one reads (bez předmětu).
• The sender is a person's name where the app knows it, otherwise the address.
• Dates are short (9:24, včera, 2. 9.).

Related

• item-list — the row underneath.
• timeline — mail inside an activity feed.
• Stories: components--email-list--default, --variants, --states, --composition.