A status line outside a card (kit.ui.statusLine()) #67

What's missing

A card's status line, the dot in its tone and then the text, is only made inside kit.ui.card(), through update({ status: { text, tone } }). There's no kit piece for one on its own.

Dropgate's desktop app needs one now in Settings > Servers: a row for each saved server says what its last check found, in the card tones ("Online · Dropgate 4.0.0 · End-to-End Encrypted", success; "Online · Dropgate 4.0.0 · Plain HTTP · Not Encrypted", warning; "Can't connect", danger; "Checking…", running; "Not checked yet", muted). A server row isn't a card: it's a settings row, with fields and buttons of its own.

What the app does until then

Dropgate builds the line itself from the kit's classes (kit-card-status, kit-tone-<tone>, kit-status-dot, kit-status-text), so it looks like a card's, and sets the text's title to its full text, as a card does. It has to know the kit's class names, and isn't held to CARD_TONES by the kit.

A possible shape

const line = kit.ui.statusLine({ text: "Not checked yet", tone: "muted" });
row.append(line.element);
line.set({ text: "Checking…", tone: "running" });   // the tone one of CARD_TONES, as card.update()'s
line.set({ text: "Can't connect", tone: "danger", title: "Connection failed. Check the URL, and that the server is running." });

• the same element and classes a card's status line is, so the two always look alike, running pulsing (still under reduced motion);
• set() checks the tone as card.update() does;
• title is the text in full unless one is given (a longer reason, for the tooltip).