Show set end time above match banner next to start time

app/components/match-page/MatchBannerStartedAt.tsx

@@ -1,21 +1,43 @@
 import { LocaleTime } from "~/components/LocaleTime";
+import { LocaleTimeRange } from "~/components/LocaleTimeRange";
+
+const FORMAT_OPTIONS: Intl.DateTimeFormatOptions = {
+	month: "numeric",
+	year: "2-digit",
+	day: "numeric",
+	hour: "numeric",
+	minute: "numeric",
+};
+
+const CLASS_NAME = "text-lighter font-semi-bold";
 
 interface MatchBannerStartedAtProps {
 	time: Date;
+	/** When given, the time the match ended, shown as a range together with the start time */
+	endTime?: Date | null;
 }
 
-export function MatchBannerStartedAt({ time }: MatchBannerStartedAtProps) {
+export function MatchBannerStartedAt({
+	time,
+	endTime,
+}: MatchBannerStartedAtProps) {
+	if (endTime) {
+		return (
+			<LocaleTimeRange
+				from={time}
+				to={endTime}
+				options={FORMAT_OPTIONS}
+				className={CLASS_NAME}
+				inline
+			/>
+		);
+	}
+
 	return (
 		<LocaleTime
 			date={time}
-			options={{
-				month: "numeric",
-				year: "2-digit",
-				day: "numeric",
-				hour: "numeric",
-				minute: "numeric",
-			}}
-			className="text-lighter font-semi-bold"
+			options={FORMAT_OPTIONS}
+			className={CLASS_NAME}
 			inline
 		/>
 	);

app/features/sendouq-match/components/SendouQMatchBanner.tsx

@@ -154,7 +154,14 @@ function SendouQMatchBannerTopRow({
 			}}
 		>
 			{data.match.isLocked || awaitingConfirmation ? (
-				<MatchBannerStartedAt time={startedAt} />
+				<MatchBannerStartedAt
+					time={startedAt}
+					endTime={
+						lastMapReportedAt
+							? databaseTimestampToDate(lastMapReportedAt)
+							: null
+					}
+				/>
 			) : (
 				<MatchBannerTimer
 					time={{

app/features/tournament-match/components/TournamentMatchBanner.tsx

@@ -245,6 +245,12 @@ function TournamentMatchBannerTopRow({
 	const startedAt = databaseTimestampToDate(data.match.startedAt);
 	const totalMinutes = differenceInMinutes(currentTime, startedAt);
 
+	const lastResultCreatedAt = data.results.at(-1)?.createdAt;
+	const endedAt =
+		typeof lastResultCreatedAt === "number"
+			? databaseTimestampToDate(lastResultCreatedAt)
+			: null;
+
 	const currentMinutes = resolveCurrentMinutes({
 		data,
 		tournament,
@@ -262,7 +268,7 @@ function TournamentMatchBannerTopRow({
 			}}
 		>
 			{data.matchIsOver ? (
-				<MatchBannerStartedAt time={startedAt} />
+				<MatchBannerStartedAt time={startedAt} endTime={endedAt} />
 			) : (
 				<MatchBannerTimer time={{ currentMinutes, totalMinutes }} />
 			)}