From 58a3a294344572489bcdd22aa9cbf9f2ebfb6607 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCll?=
 <51778048+sebastiankrll@users.noreply.github.com>
Date: Fri, 12 Dec 2025 18:57:37 +0100
Subject: [PATCH 1/3] Init footer and styling

---
 apps/web/app/layout.tsx               |  4 +-
 apps/web/components/Footer/Footer.css | 75 +++++++++++++++++++++++++++
 apps/web/components/Footer/Footer.tsx | 25 +++++++++
 3 files changed, 103 insertions(+), 1 deletion(-)
 create mode 100644 apps/web/components/Footer/Footer.css
 create mode 100644 apps/web/components/Footer/Footer.tsx

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index d403b03..b738df5 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -2,13 +2,14 @@ import type { Metadata } from "next";
 import { Manrope } from "next/font/google";
 import "./globals.css";
 import "@/assets/images/sprites/freakflags.css";
+import Footer from "@/components/Footer/Footer";
 import Header from "@/components/Header/Header";
 import Loader from "@/components/Loader/Loader";
 import OMap from "@/components/Map/Map";
 import BasePanel from "@/components/Panels/BasePanel";
 
 export const metadata: Metadata = {
-	title: "simradar24",
+	title: "simradar21",
 	description: "VATSIM tracking service",
 };
 
@@ -29,6 +30,7 @@ export default function RootLayout({
 				<Loader />
 				<OMap />
 				<BasePanel>{children}</BasePanel>
+				<Footer />
 			</body>
 		</html>
 	);
diff --git a/apps/web/components/Footer/Footer.css b/apps/web/components/Footer/Footer.css
new file mode 100644
index 0000000..f32458e
--- /dev/null
+++ b/apps/web/components/Footer/Footer.css
@@ -0,0 +1,75 @@
+footer {
+	position: absolute;
+	left: 0rem;
+	right: 0rem;
+	bottom: 0rem;
+	height: 1.5rem;
+	display: flex;
+	align-items: center;
+	padding: 0 1rem;
+	box-sizing: border-box;
+	gap: 1rem;
+	background: linear-gradient(0deg, rgba(77, 95, 131, 0.3) 0%, rgba(77, 95, 131, 0) 120%);
+	border-top: 1px solid var(--color-border);
+	z-index: 1;
+}
+
+.footer-item {
+	background: white;
+	height: 100%;
+	border-left: 1px solid var(--color-border);
+	border-right: 1px solid var(--color-border);
+	box-sizing: border-box;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	padding: 0rem 10px;
+	font-size: 12px;
+}
+
+#footer-clients span {
+	font-weight: 700;
+	margin-right: 5px;
+}
+
+#footer-timestamp span {
+	margin-right: 8px;
+	height: 8px;
+	width: 8px;
+	background: var(--color-orange);
+	border-radius: 50%;
+	animation: connected-blink 1s infinite;
+}
+
+@keyframes connected-blink {
+	0%,
+	50%,
+	100% {
+		opacity: 1;
+	}
+	25%,
+	75% {
+		opacity: 0;
+	}
+}
+
+#footer-github,
+#footer-version {
+	background: none;
+	border: none;
+	color: white;
+	padding: 0rem;
+}
+
+#footer-github {
+	margin-left: auto;
+}
+
+#footer-github a {
+	font-weight: 700;
+	text-decoration: underline;
+}
+
+#footer-github a:hover {
+	color: var(--color-green);
+}
diff --git a/apps/web/components/Footer/Footer.tsx b/apps/web/components/Footer/Footer.tsx
new file mode 100644
index 0000000..c45ac14
--- /dev/null
+++ b/apps/web/components/Footer/Footer.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import "./Footer.css";
+
+export default function Footer() {
+	return (
+		<footer>
+			<div className="footer-item" id="footer-clients">
+				<span>1249</span>visitors online
+			</div>
+			<div className="footer-item" id="footer-timestamp">
+				<span></span>18:27:20z
+			</div>
+			<div className="footer-item" id="footer-github">
+				Report a bug, request a feature, or send ❤️ on&nbsp;
+				<a href="https://github.com/sebastiankrll/simradar21" rel="noopener noreferrer" target="_blank">
+					GitHub
+				</a>
+			</div>
+			<div className="footer-item" id="footer-version">
+				v0.0.1
+			</div>
+		</footer>
+	);
+}

From db568ad17fdb2f1e94a4d8514fd3d2e6f2359ef5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCll?=
 <51778048+sebastiankrll@users.noreply.github.com>
Date: Fri, 12 Dec 2025 19:31:20 +0100
Subject: [PATCH 2/3] Display live client metrics in Footer and add CORS to
 websocket server

---
 apps/web/components/Footer/Footer.tsx | 16 +++++++++++++++-
 apps/websocket/src/index.ts           | 23 +++++++++++++++++------
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/apps/web/components/Footer/Footer.tsx b/apps/web/components/Footer/Footer.tsx
index c45ac14..0a3e1f5 100644
--- a/apps/web/components/Footer/Footer.tsx
+++ b/apps/web/components/Footer/Footer.tsx
@@ -1,12 +1,26 @@
 "use client";
 
 import "./Footer.css";
+import useSWR from "swr";
+import { fetchApi } from "@/utils/api";
+
+interface Metrics {
+	connectedClients: number;
+	rateLimitedClients: number;
+	totalMessages: number;
+	avgMessagesPerClient: number;
+	timestamp: string;
+}
+
+const WS_URL = process.env.NEXT_PUBLIC_WEBSOCKET_URL || "ws://localhost:3002";
 
 export default function Footer() {
+	const { data: metrics, isLoading } = useSWR<Metrics>(`${WS_URL.replace("ws", "http")}/metrics`, fetchApi, { refreshInterval: 120_000 });
+
 	return (
 		<footer>
 			<div className="footer-item" id="footer-clients">
-				<span>1249</span>visitors online
+				<span>{isLoading ? "..." : (metrics?.connectedClients ?? "0")}</span>visitors online
 			</div>
 			<div className="footer-item" id="footer-timestamp">
 				<span></span>18:27:20z
diff --git a/apps/websocket/src/index.ts b/apps/websocket/src/index.ts
index fad4278..d4e5979 100644
--- a/apps/websocket/src/index.ts
+++ b/apps/websocket/src/index.ts
@@ -46,8 +46,21 @@ function checkRateLimit(clientContext: ClientContext): boolean {
 const PORT = Number(process.env.WS_PORT) || 3002;
 const HOST = process.env.WS_HOST || "localhost";
 
-// Create HTTP server first
+const setCorsHeaders = (res: any) => {
+	res.setHeader("Access-Control-Allow-Origin", "*");
+	res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS");
+	res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+};
+
 const server = createServer((req: any, res: any) => {
+	setCorsHeaders(res);
+
+	if (req.method === "OPTIONS") {
+		res.writeHead(204);
+		res.end();
+		return;
+	}
+
 	if (req.url === "/health" && req.method === "GET") {
 		res.writeHead(200, { "Content-Type": "application/json" });
 		res.end(JSON.stringify({ status: "ok", timestamp: new Date().toISOString() }));
@@ -112,7 +125,7 @@ wss.on("connection", (ws: WebSocket, _req: any) => {
 	};
 
 	clientContextMap.set(ws, clientContext);
-	// console.log(`✅ Client connected: ${clientId} from ${clientIp} (Total: ${clientContextMap.size})`);
+	// console.log(`✅ Client connected: ${clientId} (Total: ${clientContextMap.size})`);
 
 	ws.on("pong", () => {
 		clientContext.isAlive = true;
@@ -156,10 +169,7 @@ wss.on("connection", (ws: WebSocket, _req: any) => {
 
 	ws.on("close", () => {
 		clientContextMap.delete(ws);
-		// const duration = Date.now() - clientContext.connectedAt.getTime();
-		// console.log(
-		// 	`❌ Client disconnected: ${clientId} (connected for ${duration}ms, sent ${clientContext.messagesSent} messages, Total: ${clientContextMap.size})`,
-		// );
+		console.log(`❌ Client disconnected: ${clientId} (Total: ${clientContextMap.size})`);
 	});
 });
 
@@ -170,6 +180,7 @@ const heartbeatInterval = setInterval(() => {
 
 		if (!clientContext.isAlive) {
 			console.warn(`⏱️  Terminating inactive client: ${clientContext.id}`);
+			clientContextMap.delete(ws);
 			ws.terminate();
 			return;
 		}

From 8423a8da2c50650d2f4b113abc8ce909ce547600 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCll?=
 <51778048+sebastiankrll@users.noreply.github.com>
Date: Fri, 12 Dec 2025 19:57:19 +0100
Subject: [PATCH 3/3] Add timestamp to footer

---
 apps/ingestion/src/index.ts           |  1 +
 apps/web/components/Footer/Footer.css |  4 ++--
 apps/web/components/Footer/Footer.tsx | 33 ++++++++++++++++++++++++++-
 apps/websocket/src/index.ts           |  2 +-
 packages/types/src/vatsim.ts          |  1 +
 5 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/apps/ingestion/src/index.ts b/apps/ingestion/src/index.ts
index ce8e3be..f913c4b 100644
--- a/apps/ingestion/src/index.ts
+++ b/apps/ingestion/src/index.ts
@@ -50,6 +50,7 @@ async function fetchVatsimData(): Promise<void> {
 				pilots: getPilotDelta(),
 				airports: getAirportDelta(),
 				controllers: getControllerDelta(),
+				timestamp: new Date(vatsimData.general.update_timestamp),
 			};
 			const gzDelta = await gzipAsync(JSON.stringify(delta));
 			rdsPub("ws:delta", gzDelta.toString("base64"));
diff --git a/apps/web/components/Footer/Footer.css b/apps/web/components/Footer/Footer.css
index f32458e..f184e79 100644
--- a/apps/web/components/Footer/Footer.css
+++ b/apps/web/components/Footer/Footer.css
@@ -36,9 +36,9 @@ footer {
 	margin-right: 8px;
 	height: 8px;
 	width: 8px;
-	background: var(--color-orange);
+	background: var(--color-green);
 	border-radius: 50%;
-	animation: connected-blink 1s infinite;
+	animation: connected-blink 2s infinite;
 }
 
 @keyframes connected-blink {
diff --git a/apps/web/components/Footer/Footer.tsx b/apps/web/components/Footer/Footer.tsx
index 0a3e1f5..1c1bd83 100644
--- a/apps/web/components/Footer/Footer.tsx
+++ b/apps/web/components/Footer/Footer.tsx
@@ -1,8 +1,11 @@
 "use client";
 
 import "./Footer.css";
+import type { WsDelta } from "@sr24/types/vatsim";
+import { useEffect, useState } from "react";
 import useSWR from "swr";
 import { fetchApi } from "@/utils/api";
+import { wsClient } from "@/utils/ws";
 
 interface Metrics {
 	connectedClients: number;
@@ -14,16 +17,44 @@ interface Metrics {
 
 const WS_URL = process.env.NEXT_PUBLIC_WEBSOCKET_URL || "ws://localhost:3002";
 
+function getTimestamp(date: Date | string): string {
+	return `${new Date(date).toISOString().split("T")[1].split(".")[0]}z`;
+}
+
 export default function Footer() {
 	const { data: metrics, isLoading } = useSWR<Metrics>(`${WS_URL.replace("ws", "http")}/metrics`, fetchApi, { refreshInterval: 120_000 });
 
+	const [timestamp, setTimestamp] = useState<string>("");
+	const [stale, setStale] = useState<boolean>(false);
+
+	useEffect(() => {
+		setTimestamp(getTimestamp(new Date()));
+
+		let timeoutId: NodeJS.Timeout;
+		const handleMessage = (delta: WsDelta) => {
+			setTimestamp(getTimestamp(delta.timestamp));
+			setStale(false);
+
+			clearTimeout(timeoutId);
+			timeoutId = setTimeout(() => {
+				setStale(true);
+			}, 60_000);
+		};
+		wsClient.addListener(handleMessage);
+
+		return () => {
+			wsClient.removeListener(handleMessage);
+		};
+	}, []);
+
 	return (
 		<footer>
 			<div className="footer-item" id="footer-clients">
 				<span>{isLoading ? "..." : (metrics?.connectedClients ?? "0")}</span>visitors online
 			</div>
 			<div className="footer-item" id="footer-timestamp">
-				<span></span>18:27:20z
+				<span style={{ background: stale ? "var(--color-red)" : "", animationDuration: stale ? "1s" : "" }}></span>
+				{timestamp}
 			</div>
 			<div className="footer-item" id="footer-github">
 				Report a bug, request a feature, or send ❤️ on&nbsp;
diff --git a/apps/websocket/src/index.ts b/apps/websocket/src/index.ts
index d4e5979..14ea004 100644
--- a/apps/websocket/src/index.ts
+++ b/apps/websocket/src/index.ts
@@ -169,7 +169,7 @@ wss.on("connection", (ws: WebSocket, _req: any) => {
 
 	ws.on("close", () => {
 		clientContextMap.delete(ws);
-		console.log(`❌ Client disconnected: ${clientId} (Total: ${clientContextMap.size})`);
+		// console.log(`❌ Client disconnected: ${clientId} (Total: ${clientContextMap.size})`);
 	});
 });
 
diff --git a/packages/types/src/vatsim.ts b/packages/types/src/vatsim.ts
index 356ef45..4579df9 100644
--- a/packages/types/src/vatsim.ts
+++ b/packages/types/src/vatsim.ts
@@ -263,6 +263,7 @@ export interface WsDelta {
 	pilots: PilotDelta;
 	controllers: ControllerDelta;
 	airports: AirportDelta;
+	timestamp: Date;
 }
 
 export interface VatsimEventData {