Usage
@prepared911/ui/blocks/call-status-card from its subpath. Load @prepared911/ui/styles.css once at the document root.
CallStatusCard shows the state of one call as a card: the queue badge, the caller's device and number, a live elapsed timer, the caller's name, a visible status label, and a footer for actions or checks. Responder, console and wallboard use the same block, so the state-to-paint mapping, the queue badge and the timer are written once.
state is the only input to the card's paint. It picks the wash and the edge, and the card never takes a wash, an accent edge or any color as a prop.
| State | Wash | Edge |
|---|---|---|
IncomingEmergency | Destructive | Default |
IncomingNonEmergency | Informative | Default |
Connected | Accent | Default |
Held | None | Accent |
Idle | None | Default |
statusLabel is visible text in every state, so the wash and the edge never carry the state alone.
queue is { queueClass, label }. The class picks the badge intent (Emergency destructive, NonEmergency informative, Other neutral); the label is the badge text. Pass the class from the call data, never one derived from the queue's name.device is { type, label }. The type picks the glyph (Mobile, Landline, Voip); Unknown draws none. The glyph is decorative and the label is read before the number.number and callerName are data. Pass a DisplayValue, or a LocalizedMessage for copy such as the idle text. Both truncate with the full value in the title.timer is { startedAt, elapsedLabel, now?, locale? }. In Held, pass the moment the hold began. The digits use the TextType.Timer role.
The card is as tall in every state and with every optional part left out. Each row is always drawn, an absent caller name keeps its line, and the footer row holds at least the 40px control tier, so a ringing call without actions is as tall as one with them.
footer takes the actions on a ringing call or the checks on a live one. The block lays the row out and never styles what it holds.