src/EmailSummary.tsx

@@ -4,11 +4,9 @@ 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 = {
@@ -51,18 +49,17 @@ class EmailSummary extends React.Component<
 			return <Placeholder />;
 		}
 		return (
-			<Stack
+			<div className="p-2 border" key={this.props.emailId}>
-				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}>
-					<div>{stub.subject}</div>
+					<DateTime d={stub.receivedAt} />
+					<span>
+						{" - " +
+							(stub.from == null ? "?" : stub.from[0].name) +
+							" - " +
+							stub.subject}
+					</span>
 				</a>
-				<ButtonToolbar className="ms-auto">
+				<ButtonToolbar>
 					<ButtonGroup className="me-2">
 						<Button
 							onClick={() => {
@@ -77,7 +74,7 @@ class EmailSummary extends React.Component<
 						<Button>2</Button>
 					</ButtonGroup>
 				</ButtonToolbar>
-			</Stack>
+			</div>
 		);
 	}
 }

src/client/Client.tsx

@@ -241,7 +241,7 @@ export default class Client {
 						);
 					}
 					this.state.session.emailStubs[e.id] = {
-						from: e.from === null ? [] : e.from,
+						from: e.from,
 						id: e.id,
 						mailboxIds: e.mailboxIds,
 						receivedAt: e.receivedAt,
@@ -370,11 +370,8 @@ export default class Client {
 			.replace("{types}", "*")
 			.replace("{closeafter}", "no")
 			.replace("{ping}", "60");
-		this.jclient.subscribeToEvents(
+		this.jclient.subscribeToEvents(eventSourceUrl, (e) => {
-			eventSourceUrl,
+			console.log("Got an event!", e);
-			(type: string, message: PushMessage) => {
+		});
-				console.log("Got an event!", type, message);
-			},
-		);
 	}
 }

src/client/jmap-client-ts

@@ -1 +1 @@
-Subproject commit 5cf6129a517224b90f79cb96f212d57c5bceb51f
+Subproject commit 2ef5f5b7fa0a22a499bd32831ac24622f17e10e6

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>;
+	from: Array<client.IEmailAddress> | null;
 	id: string;
 	mailboxIds: MailboxIdMap;
 	receivedAt: string;

src/components/DateTime.tsx

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

@@ -1,20 +0,0 @@
-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,13 +1 @@
 @import '~bootstrap/scss/bootstrap';
-
-.email-summary {
-	.email-from {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		width: 200px;
-	}
-	.received {
-		width: 50px;
-	}
-}
-