simstack21 · sebastiankrll · Dec 15, 2025 · Dec 12, 2025 · Dec 12, 2025 · Dec 12, 2025
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -11,19 +11,33 @@ html {
 }
 
 :root {
+	--color-bg: white;
 	--color-main-text: rgb(77, 95, 131);
 	--color-light-text: rgb(183, 190, 206);
 	--color-light-grey: rgb(246, 248, 253);
 	--color-dark-grey: rgb(223, 227, 235);
 	--color-border: rgb(211, 214, 228);
 	--color-box-shadow: rgb(193, 194, 202);
 	--color-blue: rgb(60, 92, 255);
-	--color-light-blue: rgb(60, 177, 255);
-	--color-green: rgb(11, 211, 167);
-	--color-red: rgb(234, 89, 121);
+	--color-light-blue: #3cb1ff;
+	--color-green: #0bd3a7;
+	--color-red: #ea5979;
 	--color-yellow: rgb(255, 244, 43);
-	--color-orange: rgb(255, 138, 43);
+	--color-orange: #ff8a2b;
 	--color-magenta: rgb(222, 89, 234);
+	--color-glass-bg: rgba(255, 255, 255, 0.5);
+	--color-hover: rgb(77, 95, 131);
+}
+
+[data-theme="dark"] {
+	--color-bg: rgb(21, 27, 39);
+	--color-main-text: rgb(194, 201, 218);
+	--color-dark-grey: rgb(46, 52, 66);
+	--color-light-grey: rgb(46, 52, 66);
+	--color-border: rgb(113, 121, 153);
+	--color-box-shadow: rgb(59, 61, 70);
+	--color-glass-bg: rgba(80, 80, 80, 0.3);
+	--color-hover: rgb(105, 124, 165);
 }
 
 button {
@@ -36,3 +50,9 @@ a {
 	text-decoration: none;
 	color: inherit;
 }
+
+fieldset {
+	border: none;
+	padding: 0;
+	margin: 0;
+}
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Manrope } from "next/font/google";
 import "./globals.css";
 import "@/assets/images/sprites/freakflags.css";
+import { ThemeProvider } from "next-themes";
 import Footer from "@/components/Footer/Footer";
 import Header from "@/components/Header/Header";
 import Loader from "@/components/Loader/Loader";
@@ -24,13 +25,15 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="en" className={manrope.className}>
+		<html lang="en" className={manrope.className} suppressHydrationWarning>
 			<body>
-				<Header />
-				<Loader />
-				<OMap />
-				<BasePanel>{children}</BasePanel>
-				<Footer />
+				<ThemeProvider>
+					<Header />
+					<Loader />
+					<OMap />
+					<BasePanel>{children}</BasePanel>
+					<Footer />
+				</ThemeProvider>
 			</body>
 		</html>
 	);

diff --git a/apps/web/app/settings/page.tsx b/apps/web/app/settings/page.tsx
@@ -0,0 +1,5 @@
+import SettingsPanel from "@/components/Panels/Settings/SettingsPanel";
+
+export default function Page() {
+	return <SettingsPanel />;
+}
diff --git a/...eb/components/Header/components/Clock.tsx → apps/web/components/Footer/Clock.tsx b/...eb/components/Header/components/Clock.tsx → apps/web/components/Footer/Clock.tsx
@@ -26,7 +26,7 @@ export default function Clock() {
 	}, []);
 
 	return (
-		<div id="header-clock" suppressHydrationWarning>
+		<div id="footer-clock" suppressHydrationWarning>
 			{getTime(time)}
 			<span>UTC</span>
 		</div>

diff --git a/apps/web/components/Footer/Footer.css b/apps/web/components/Footer/Footer.css
@@ -15,7 +15,7 @@ footer {
 }
 
 .footer-item {
-	background: white;
+	background: var(--color-bg);
 	height: 100%;
 	border-left: 1px solid var(--color-border);
 	border-right: 1px solid var(--color-border);
@@ -53,6 +53,16 @@ footer {
 	}
 }
 
+#footer-clock {
+	color: var(--color-main-text);
+}
+
+#footer-clock span {
+	font-size: 0.625rem;
+	margin-left: 0.25rem;
+	color: var(--color-light-text);
+}
+
 #footer-github,
 #footer-version {
 	background: none;

diff --git a/apps/web/components/Footer/Footer.tsx b/apps/web/components/Footer/Footer.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import useSWR from "swr";
 import { fetchApi } from "@/utils/api";
 import { wsClient } from "@/utils/ws";
+import Clock from "./Clock";
 
 interface Metrics {
 	connectedClients: number;
@@ -18,7 +19,7 @@ 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`;
+	return new Date(date).toISOString().split("T")[1].split(".")[0];
 }
 
 export default function Footer() {
@@ -50,12 +51,15 @@ export default function Footer() {
 	return (
 		<footer>
 			<div className="footer-item" id="footer-clients">
-				<span>{isLoading ? "..." : (metrics?.connectedClients ?? "0")}</span>visitors online
+				<span>{isLoading ? "..." : metrics?.connectedClients ? metrics.connectedClients + 1 : 1}</span>visitors online
 			</div>
 			<div className="footer-item" id="footer-timestamp">
 				<span style={{ background: stale ? "var(--color-red)" : "", animationDuration: stale ? "1s" : "" }}></span>
 				{timestamp}
 			</div>
+			<div className="footer-item" id="footer-clock">
+				<Clock />
+			</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">

diff --git a/apps/web/components/Header/Header.css b/apps/web/components/Header/Header.css
@@ -28,32 +28,20 @@ header {
 	justify-content: center;
 }
 
-.header-item {
-	background-color: white;
-	border: 1px solid var(--color-border);
-	height: 3.5rem;
+#header-search-wrapper {
+	background-color: var(--color-bg);
+	height: 2rem;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	padding: 0rem 1rem;
-	box-sizing: border-box;
-}
-
-#header-clock {
-	color: var(--color-main-text);
-}
-
-#header-clock span {
-	font-size: 0.625rem;
-	margin-left: 0.25rem;
-	color: var(--color-light-text);
+	border: 1px solid var(--color-border);
 }
 
 #header-search {
-	line-height: 2rem;
 	border: none;
 	width: 20rem;
-	height: 2rem;
+	height: 100%;
 	box-sizing: border-box;
 	background-color: transparent;
 	color: var(--color-light-text);
@@ -63,3 +51,14 @@ header {
 #header-search::placeholder {
 	color: var(--color-light-text);
 }
+
+#header-vatsim-login {
+	height: 2rem;
+	background: var(--color-blue);
+	color: white;
+	padding: 0rem 1rem;
+}
+
+#header-vatsim-login:hover {
+	background: var(--color-green);
+}
diff --git a/apps/web/components/Header/Header.tsx b/apps/web/components/Header/Header.tsx
@@ -1,5 +1,4 @@
-import Clock from "./components/Clock";
-import Search from "./components/Search";
+import Search from "./Search";
 import "./Header.css";
 import Image from "next/image";
 import simradar24Logo from "@/assets/images/simradar24_logo.svg";
@@ -10,12 +9,12 @@ export default function Header() {
 			<figure id="header-logo">
 				<Image src={simradar24Logo} alt="simradar24 logo" height={40} width={200} priority />
 			</figure>
-			<div className="header-item">
-				<Clock />
-			</div>
-			<div className="header-item">
+			<div id="header-search-wrapper">
 				<Search />
 			</div>
+			<button type="button" id="header-vatsim-login">
+				Login with VATSIM
+			</button>
 		</header>
 	);
 }
diff --git a/...b/components/Header/components/Search.tsx → apps/web/components/Header/Search.tsx b/...b/components/Header/components/Search.tsx → apps/web/components/Header/Search.tsx
diff --git a/apps/web/components/Map/Map.tsx b/apps/web/components/Map/Map.tsx
@@ -3,14 +3,33 @@
 import { useEffect } from "react";
 import "./Map.css";
 import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
 import { ToastContainer } from "react-toastify";
+import { useSettingsStore } from "@/storage/zustand";
 import { MessageBoxCloseButton } from "../MessageBox/MessageBox";
+import MapControls from "./components/MapControls";
+import { setDataLayersSettings } from "./utils/dataLayers";
 import { onClick, onMoveEnd, onPointerMove, setNavigator } from "./utils/events";
-import { initMap } from "./utils/init";
+import { getMap, initMap, setMapTheme } from "./utils/init";
 import { animatePilotFeatures } from "./utils/pilotFeatures";
+import { setSunLayerSettings } from "./utils/sunLayer";
 
 export default function OMap() {
 	const router = useRouter();
+	const { theme } = useTheme();
+	const {
+		dayNightLayer,
+		dayNightLayerBrightness,
+		airportMarkers,
+		airportMarkerSize,
+		planeMarkerSize,
+		animatedPlaneMarkers,
+		sectorAreas,
+		traconColor,
+		traconTransparency,
+		firColor,
+		firTransparency,
+	} = useSettingsStore();
 
 	useEffect(() => {
 		setNavigator((href) => router.push(href));
@@ -20,6 +39,24 @@ export default function OMap() {
 		map.on("pointermove", onPointerMove);
 		map.on("click", onClick);
 
+		return () => {
+			map.un(["moveend"], onMoveEnd);
+			map.un("pointermove", onPointerMove);
+			map.un("click", onClick);
+			map.setTarget(undefined);
+		};
+	}, [router]);
+
+	useEffect(() => {
+		setMapTheme(theme === "dark");
+	}, [theme]);
+
+	useEffect(() => {
+		if (!animatedPlaneMarkers) return;
+
+		const map = getMap();
+		if (!map) return;
+
 		let animationFrameId = 0;
 		const animate = () => {
 			animatePilotFeatures(map);
@@ -28,17 +65,39 @@ export default function OMap() {
 		animationFrameId = window.requestAnimationFrame(animate);
 
 		return () => {
-			map.un(["moveend"], onMoveEnd);
-			map.un("pointermove", onPointerMove);
-			map.un("click", onClick);
-			map.setTarget(undefined);
 			window.cancelAnimationFrame(animationFrameId);
 		};
-	}, [router]);
+	}, [animatedPlaneMarkers]);
+
+	useEffect(() => {
+		setSunLayerSettings(dayNightLayer, dayNightLayerBrightness);
+		setDataLayersSettings(
+			airportMarkers,
+			airportMarkerSize,
+			planeMarkerSize,
+			sectorAreas,
+			traconColor,
+			traconTransparency,
+			firColor,
+			firTransparency,
+		);
+	}, [
+		dayNightLayer,
+		dayNightLayerBrightness,
+		airportMarkers,
+		airportMarkerSize,
+		planeMarkerSize,
+		sectorAreas,
+		traconColor,
+		traconTransparency,
+		firColor,
+		firTransparency,
+	]);
 
 	return (
 		<>
 			<ToastContainer closeButton={MessageBoxCloseButton} icon={false} theme="colored" />
+			<MapControls />
 			<div id="map" />
 		</>
 	);

diff --git a/apps/web/components/Map/components/MapControls.css b/apps/web/components/Map/components/MapControls.css
@@ -0,0 +1,27 @@
+#map-controls {
+	position: absolute;
+	right: 1rem;
+	top: 4.5rem;
+	display: flex;
+	flex-flow: column;
+	gap: 1rem;
+	background: var(--color-glass-bg);
+	backdrop-filter: blur(5px);
+	border: 1px solid var(--color-border);
+	padding: 0.5rem;
+}
+
+.map-control-item {
+	width: 2rem;
+	height: 2rem;
+	background: var(--color-bg);
+	box-shadow: 1px 1px 5px 1px var(--color-box-shadow);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.map-control-item:hover {
+	background: var(--color-hover);
+	color: white;
+}
diff --git a/apps/web/components/Map/components/MapControls.tsx b/apps/web/components/Map/components/MapControls.tsx
@@ -0,0 +1,22 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import "./MapControls.css";
+
+export default function MapControls() {
+	const router = useRouter();
+
+	return (
+		<div id="map-controls">
+			<button type="button" className="map-control-item">
+				+
+			</button>
+			<button type="button" className="map-control-item">
+				-
+			</button>
+			<button type="button" className="map-control-item" onClick={() => router.push("/settings")}>
+				S
+			</button>
+		</div>
+	);
+}