Space between when sent time, from, and subject in email summary

This is the first time I'm creating some custom style. There's probably
a way to do this with Bootstrap that I'm not expert enough to know
about.

For now I'm just scratching itches.

src/EmailSummary.tsx

@@ -4,9 +4,11 @@ import ButtonGroup from "react-bootstrap/ButtonGroup";
 import ButtonToolbar from "react-bootstrap/ButtonToolbar";
 import Placeholder from "react-bootstrap/Placeholder";
 import React from "react";
+import Stack from "react-bootstrap/Stack";
 
 import Client from "./client/Client";
 import DateTime from "./components/DateTime";
+import EmailFrom from "./components/EmailFrom";
 import { IAccount, IEmailStub, IMailbox } from "./client/types";
 
 type EmailSummaryProps = {
@@ -49,17 +51,18 @@ class EmailSummary extends React.Component<
 			return <Placeholder />;
 		}
 		return (
-			<div className="p-2 border" key={this.props.emailId}>
+			<Stack
+				direction="horizontal"
+				className="email-summary"
+				key={this.props.emailId}
+			>
+				<DateTime className="received" d={stub.receivedAt} />
+				<EmailFrom froms={stub.from} />
+				<div>{stub.from == null ? "?" : stub.from[0].name}</div>
 				<a className="btn" href={href}>
-					<DateTime d={stub.receivedAt} />
+					<div>{stub.subject}</div>
-					<span>
-						{" - " +
-							(stub.from == null ? "?" : stub.from[0].name) +
-							" - " +
-							stub.subject}
-					</span>
 				</a>
-				<ButtonToolbar>
+				<ButtonToolbar className="ms-auto">
 					<ButtonGroup className="me-2">
 						<Button
 							onClick={() => {
@@ -74,7 +77,7 @@ class EmailSummary extends React.Component<
 						<Button>2</Button>
 					</ButtonGroup>
 				</ButtonToolbar>
-			</div>
+			</Stack>
 		);
 	}
 }

src/client/Client.tsx

@@ -241,7 +241,7 @@ export default class Client {
 						);
 					}
 					this.state.session.emailStubs[e.id] = {
-						from: e.from,
+						from: e.from === null ? [] : e.from,
 						id: e.id,
 						mailboxIds: e.mailboxIds,
 						receivedAt: e.receivedAt,

src/client/types.tsx

@@ -2,7 +2,7 @@ import * as client from "./jmap-client-ts/src/types";
 
 export type MailboxIdMap = { [mailboxId: string]: boolean };
 export interface IEmailStub {
-	from: Array<client.IEmailAddress> | null;
+	from: Array<client.IEmailAddress>;
 	id: string;
 	mailboxIds: MailboxIdMap;
 	receivedAt: string;

src/components/DateTime.tsx

@@ -4,16 +4,30 @@ type DateTimeProps = {
 	d: string;
 };
 
-const DateTime: React.FC<DateTimeProps> = ({ d }) => {
+const DateTime: React.FC<
-	const datetime = Date.parse(d);
+	DateTimeProps & React.HTMLAttributes<HTMLSpanElement>
+> = (props) => {
+	const datetime = Date.parse(props.d);
 	const now = Date.now();
 	const diff = (now - datetime) / 1000;
-	if (diff < 30) return <span>moments ago</span>;
+	if (diff < 30) return <span className={props.className}>moments ago</span>;
-	if (diff < 60) return <span>{diff}s</span>;
+	if (diff < 60) return <span className={props.className}>{diff}s</span>;
-	if (diff < 60 * 60) return <span>{Math.round(diff / 60)}m</span>;
+	if (diff < 60 * 60)
-	if (diff < 60 * 60 * 48) return <span>{Math.round(diff / (60 * 60))}h</span>;
+		return <span className={props.className}>{Math.round(diff / 60)}m</span>;
+	if (diff < 60 * 60 * 48)
+		return (
+			<span className={props.className}>{Math.round(diff / (60 * 60))}h</span>
+		);
 	if (diff < 60 * 60 * 24 * 365)
-		return <span>{Math.round(diff / (60 * 60 * 24))}d</span>;
+		return (
-	return <span>{Math.round(diff / (60 * 60 * 24 * 365))}y</span>;
+			<span className={props.className}>
+				{Math.round(diff / (60 * 60 * 24))}d
+			</span>
+		);
+	return (
+		<span className={props.className}>
+			{Math.round(diff / (60 * 60 * 24 * 365))}y
+		</span>
+	);
 };
 export default DateTime;

src/components/EmailFrom.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import * as client from "../client/jmap-client-ts/src/types";
+
+type EmailFromProps = {
+	froms: Array<client.IEmailAddress>;
+};
+
+const EmailFrom: React.FC<EmailFromProps> = ({ froms }) => {
+	if (froms.length === 0) {
+		return <span className="email-from">None</span>;
+	}
+	if (froms.length > 1) {
+		return <span className="email-from">MANY?</span>;
+	}
+	if (froms[0].name) {
+		return <span className="email-from">{froms[0].name}</span>;
+	}
+	return <span className="email-from">{froms[0].email}</span>;
+};
+export default EmailFrom;

src/style.scss

@@ -1 +1,13 @@
 @import '~bootstrap/scss/bootstrap';
+
+.email-summary {
+	.email-from {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		width: 200px;
+	}
+	.received {
+		width: 50px;
+	}
+}
+