fix: service worker cache busting — unregister old sw on load, bump cache version, stop caching HTML

- Bump sw.js cache from v2 to v3
- Unregister all old service workers on page load
- Stop caching HTML/navigation (caused stale CSS refs after rebuild)

public/sw.js

@@ -1,5 +1,5 @@
-const CACHE = "atom-v2";
+const CACHE = "atom-v3";
-const API_CACHE = "atom-api-v2";
+const API_CACHE = "atom-api-v3";
 
 self.addEventListener("install", () => self.skipWaiting());
 
@@ -60,14 +60,6 @@ self.addEventListener("fetch", (event) => {
 	}
 
 	if (req.mode === "navigate") {
-		event.respondWith(
+		event.respondWith(fetch(req));
-			fetch(req)
-				.then((res) => {
-					const copy = res.clone();
-					caches.open(CACHE).then((c) => c.put(req, copy)).catch(() => {});
-					return res;
-				})
-				.catch(() => caches.match(req).then((hit) => hit || caches.match("/"))),
-		);
 	}
 });

src/app/(site)/login/page.tsx

@@ -125,7 +125,7 @@ export default async function LoginPage() {
 						</div>
 						<h1
 							className="text-xl font-black"
-							style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
+							style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
 						>
 							{t("welcomeBack")}
 						</h1>
@@ -150,7 +150,7 @@ export default async function LoginPage() {
 							}}
 						>
 							<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 								{th("online", { count: online, hotel: "" }).trim()}
 							</h3>
 						</div>
@@ -197,7 +197,7 @@ export default async function LoginPage() {
 							}}
 						>
 							<Image src="/assets/images/icons/friends.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 								Newest citizens
 							</h3>
 						</div>
@@ -254,7 +254,7 @@ export default async function LoginPage() {
 						}}
 					>
 						<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 							{t("title")}
 						</h2>
 					</div>

src/app/(site)/page.tsx

@@ -147,7 +147,7 @@ export default async function Home() {
 							</div>
 							<h1
 								className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
-								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
+								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
 							>
 								<TypewriterText text={tp("welcome", { hotelName })} />
 							</h1>
@@ -261,7 +261,7 @@ export default async function Home() {
 							}}
 						>
 							<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
-							<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 								Login
 							</h2>
 						</div>
@@ -274,7 +274,7 @@ export default async function Home() {
 						<div className="overflow-hidden rounded-xl border transition-all duration-200 group-hover:shadow-lg" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
 							<Image src="/assets/images/EnterHubbly.png" alt="Register" width={300} height={100} className="block w-full" unoptimized />
 						</div>
-						<span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white" style={{ marginLeft: "18px", fontFamily: "var(--font-pixel)", textShadow: "0 2px 8px rgba(0,0,0,0.6)" }}>
+						<span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white" style={{ marginLeft: "18px", fontFamily: "var(--font-nunito)", textShadow: "0 2px 8px rgba(0,0,0,0.6)" }}>
 							{tp("register")}
 						</span>
 					</Link>
@@ -288,7 +288,7 @@ export default async function Home() {
 								}}
 							>
 								<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-								<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+								<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 									{tp("latestUsers", { count: users.toLocaleString() })}
 								</h2>
 							</div>
@@ -326,7 +326,7 @@ export default async function Home() {
 						>
 							<div className="flex items-center gap-2.5">
 								<Image src="/assets/images/icons/article.gif" alt="" width={18} height={18} unoptimized />
-								<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+								<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 									{tp("latestNews")}
 								</h2>
 							</div>
@@ -399,7 +399,7 @@ export default async function Home() {
 						}}
 					>
 						<Image src="/assets/images/icons/star.gif" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 							{hotelName} Features
 						</h2>
 					</div>
@@ -446,7 +446,7 @@ export default async function Home() {
 							</div>
 						</div>
 						<div className="flex-1 text-center md:text-left">
-							<h3 className="text-lg font-extrabold mb-0.5" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
+							<h3 className="text-lg font-extrabold mb-0.5" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}>
 								{th("nitroClient")}
 							</h3>
 							<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
@@ -481,7 +481,7 @@ export default async function Home() {
 						>
 							<div className="flex items-center gap-2.5">
 								<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-								<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+								<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 									{tp("recentUsers")}
 								</h3>
 							</div>
@@ -525,7 +525,7 @@ export default async function Home() {
 						borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)",
 					}}
 				>
-					<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}>
+					<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}>
 						{tp("joinNow", { hotelName })}
 					</h2>
 					<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>
@@ -557,7 +557,7 @@ export default async function Home() {
 							}}
 						>
 							<Image src="/assets/images/icons/camera.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 								{tp("recentPhotos")}
 							</h3>
 						</div>

src/app/(site)/register/page.tsx

@@ -124,7 +124,7 @@ export default async function RegisterPage() {
 					</div>
 					<h1
 						className="text-xl font-black"
-						style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
+						style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
 					>
 						{tpr("title")} — {hotelName}
 					</h1>
@@ -149,7 +149,7 @@ export default async function RegisterPage() {
 							}}
 						>
 							<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 								{tpr("whoIsOnline")}
 							</h3>
 						</div>
@@ -201,7 +201,7 @@ export default async function RegisterPage() {
 							}}
 						>
 							<Image src="/assets/images/icons/friends.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 								Newest citizens
 							</h3>
 						</div>
@@ -263,7 +263,7 @@ export default async function RegisterPage() {
 						}}
 					>
 						<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 							{tpr("title")}
 						</h2>
 					</div>

src/app/(site)/settings/page.tsx

@@ -67,7 +67,7 @@ export default async function SettingsPage() {
 						<div>
 							<h1
 								className="text-lg font-black tracking-tight"
-								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-pixel)" }}
+								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
 							>
 								{t("accountSettings")}
 							</h1>
@@ -94,7 +94,7 @@ export default async function SettingsPage() {
 						}}
 					>
 						<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 							{t("publicProfile")}
 						</h2>
 					</div>
@@ -144,7 +144,7 @@ export default async function SettingsPage() {
 						}}
 					>
 						<Image src="/assets/images/icons/star.gif" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 							{t("changeMotto")}
 						</h2>
 					</div>
@@ -206,7 +206,7 @@ export default async function SettingsPage() {
 						}}
 					>
 						<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-pixel)" }}>
+						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
 							{t("securityTitle")}
 						</h2>
 					</div>

src/components/pwa-register.tsx

@@ -2,12 +2,19 @@
 
 import { useEffect } from "react";
 
-/** Registers the service worker (PWA) once, after hydration. No-op on failure. */
+const SW_VERSION = "3";
+
 export function PwaRegister() {
 	useEffect(() => {
-		if (typeof navigator !== "undefined" && "serviceWorker" in navigator) {
+		if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) return;
-			navigator.serviceWorker.register("/sw.js").catch(() => {});
+
-		}
+		navigator.serviceWorker.getRegistrations().then((regs) => {
+			for (const reg of regs) {
+				reg.unregister();
+			}
+		});
+
+		navigator.serviceWorker.register("/sw.js?" + SW_VERSION).catch(() => {});
 	}, []);
 	return null;
 }

src/components/site-header.tsx

@@ -89,7 +89,7 @@ export async function SiteHeader() {
 							<h1
 								className="font-black tracking-tight leading-none text-white"
 								style={{
-									fontFamily: "var(--font-pixel)",
+									fontFamily: "var(--font-nunito)",
 									fontSize: "clamp(2.8rem, 8vw, 5.5rem)",
 									textShadow:
 										"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",