# Data Display

## Purpose

Tables, charts, badges, tags and stats.

## Decisions

- **Table rows:** 34px (the Medium height). Rows are separated by inset 1px lines with 8px rounded corners, as for settings and data rows.
- **Table header:** grey `#8c8c8c` 12px / 16px semibold text with a 1px line underneath. It has no fill of its own (it shows the container colour).
- **Selected row:** a violet tint `#1c1530` with a 1px violet `#7520ff` border and 8px corners, like a selected card. Hover is the light accent fill `#272523`.
- **Sorting:** a **chevron** on the column being sorted (up for ascending, down for descending). A column that **can be sorted but is not currently** shows a **double (up and down) chevron**. Unsortable columns show nothing.
- **Tags:** 24px high, pill-shaped, 12px / 16px text, 10px side padding, always a single line (never wrapping onto a second line). A coloured tag has a **coloured 1px border and a small 8px coloured dot, with the text staying soft white**. Neutral tags have the 1px accent border. Removable tags show a small grey ×.
- **Avatars:** sizes **28 / 34 / 40 / 64px**, matching the control heights (64px for profiles). Radius is one third of the size. With no photo, show the person's initials (semibold) on the lighter tier `#272523`. A status dot sits at the bottom right with a 2px ring in the container colour. In a group, avatars overlap by 8px with a 2px ring in the container colour, ending with a "+N" count.
- **Lists with content:**
  - **Two-line rows** with an avatar (title and detail, plus time at the right), 56px high: for chat messages and logs, meaning items that belong together in one stream.
  - **Single-line rows** with an icon, 34px high: for files.
  - **Separate small bordered cards**, each with its own border and 12px radius: for lists of separate items, such as a list of different chats.