From bb374145c12ab8a4b070137ff3aa36cb877baf68 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 27 Jul 2026 14:43:53 +0300
Subject: [PATCH] Show set end time above match banner next to start time

---
 .../match-page/MatchBannerStartedAt.tsx       | 40 ++++++++++++++-----
 .../components/SendouQMatchBanner.tsx         |  9 ++++-
 .../components/TournamentMatchBanner.tsx      |  8 +++-
 3 files changed, 46 insertions(+), 11 deletions(-)

diff --git a/app/components/match-page/MatchBannerStartedAt.tsx b/app/components/match-page/MatchBannerStartedAt.tsx
index 53601cdb1..20347355a 100644
--- a/app/components/match-page/MatchBannerStartedAt.tsx
+++ b/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
 		/>
 	);
diff --git a/app/features/sendouq-match/components/SendouQMatchBanner.tsx b/app/features/sendouq-match/components/SendouQMatchBanner.tsx
index a488fee9a..de57439e8 100644
--- a/app/features/sendouq-match/components/SendouQMatchBanner.tsx
+++ b/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={{
diff --git a/app/features/tournament-match/components/TournamentMatchBanner.tsx b/app/features/tournament-match/components/TournamentMatchBanner.tsx
index 98b6cfd86..69403166b 100644
--- a/app/features/tournament-match/components/TournamentMatchBanner.tsx
+++ b/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 }} />
 			)}