Fix real Biome bugs: inner declarations, dup keys, assign-in-expr, implicit any, cookie, a11y svg/keyboard, json

public/scripts/theme-init.js

@@ -1,14 +1,22 @@
 (() => {
+	let theme: string | null = null;
+	let defaultDark = false;
+	let navbarColor: string | null = null;
+	let navbarTextColor: string | null = null;
 	try {
-		var s = localStorage.getItem("theme");
+		theme = localStorage.getItem("theme");
-		var dd = document.querySelector('meta[name="theme-default-dark"]');
+		const dd = document.querySelector('meta[name="theme-default-dark"]');
-		var defaultDark = dd ? dd.getAttribute("content") === "true" : false;
+		defaultDark = dd ? dd.getAttribute("content") === "true" : false;
-		if (s === "dark" || (!s && defaultDark))
+		navbarColor = localStorage.getItem("navbarColor");
-			document.documentElement.classList.add("dark");
+		navbarTextColor = localStorage.getItem("navbarTextColor");
-		var nc = localStorage.getItem("navbarColor"),
-			nt = localStorage.getItem("navbarTextColor");
-		if (nc) document.documentElement.style.setProperty("--color-navbar", nc);
-		if (nt)
-			document.documentElement.style.setProperty("--color-navbar-text", nt);
 	} catch (_e) {}
+	if (theme === "dark" || (!theme && defaultDark))
+		document.documentElement.classList.add("dark");
+	if (navbarColor)
+		document.documentElement.style.setProperty("--color-navbar", navbarColor);
+	if (navbarTextColor)
+		document.documentElement.style.setProperty(
+			"--color-navbar-text",
+			navbarTextColor,
+		);
 })();

src/actions/set-locale.ts

@@ -0,0 +1,13 @@
+"use server";
+
+import { cookies } from "next/headers";
+
+export async function setLocaleCookie(code: string): Promise<void> {
+	const store = await cookies();
+	store.set("NEXT_LOCALE", code, {
+		path: "/",
+		maxAge: 31536000,
+		sameSite: "strict",
+		secure: true,
+	});
+}

src/app/admin/housekeeping/page.tsx

@@ -48,7 +48,9 @@ export default async function AdminHousekeeping({
 				.split(",")
 				.map((i) => Number(i.trim()))
 				.filter((i) => !Number.isNaN(i));
-			importIds.forEach((id) => selectedIds.add(id));
+			importIds.forEach((id) => {
+				selectedIds.add(id);
+			});
 		}
 	}
 

src/app/admin/polls/poll-form.tsx

@@ -41,7 +41,7 @@ export function PollForm({ defaultValues }: PollFormProps) {
 	// biome-ignore lint/suspicious/noExplicitAny: explicitly chosen here, see surrounding code
 	function onSubmit(data: any) {
 		if (isEditing) {
-			run(() => updatePoll({ id: defaultValues?.id!, ...data }), {
+			run(() => updatePoll({ id: defaultValues!.id, ...data }), {
 				successMessage: "Poll updated!",
 			});
 		} else {

src/app/admin/radio/api-keys/page.tsx

@@ -78,7 +78,7 @@ export default async function AdminRadioApiKeysPage() {
 				<Link href="/admin/radio/autodj">{t("autoDj")}</Link> ·{" "}
 				<Link href="/admin/radio/embed">{t("embed")}</Link> ·{" "}
 				<Link href="/admin/radio/points">{t("points")}</Link> ·{" "}
-				<Link href="/admin/radio/monitoring">{t("monitoring")}</Link>
+				<Link href="/admin/radio/monitoring">{t("monitoring.title")}</Link>
 			</nav>
 
 			<section className="mt-6">

src/app/admin/radio/autodj/page.tsx

@@ -137,7 +137,7 @@ export default async function AdminRadioAutoDjPage() {
 								htmlFor="new_title"
 								style={{ display: "block", fontWeight: 700 }}
 							>
-								{t("autoDjForm.title")}
+								{t("autoDjForm.trackTitle")}
 							</label>
 							<input
 								id="new_title"

src/app/api/paypal/capture/route.ts

@@ -9,11 +9,13 @@ import {
 	captureOrder,
 	creditsPerUnit,
 	isPayPalConfigured,
+	type CaptureResult,
 } from "@/lib/services/paypal";
 import {
 	authorizeTopupCapture,
 	claimTopupDelivery,
 	TopupCaptureError,
+	type AuthorizedTopup,
 } from "@/lib/services/paypal-topup";
 import { rcon } from "@/lib/services/rcon";
 import { sendCurrency } from "@/lib/services/send-currency";
@@ -72,7 +74,7 @@ export async function POST(req: Request): Promise<Response> {
 
 	// The create endpoint records ownership before returning the approval URL.
 	// Do not let a signed-in user submit somebody else's approved order id.
-	let authorized;
+	let authorized: AuthorizedTopup;
 	try {
 		authorized = await authorizeTopupCapture(
 			userId,
@@ -138,7 +140,7 @@ export async function POST(req: Request): Promise<Response> {
 		}
 	}
 
-	let result;
+	let result: CaptureResult;
 	try {
 		result = await captureOrder(orderId);
 	} catch (e) {

src/app/error.tsx

@@ -8,7 +8,7 @@ import { useEffect } from "react";
  * stays), shows a friendly card, and offers a reset. The raw error is logged to
  * the console, never shown to the user.
  */
-export default function Error({
+export default function ErrorPage({
 	error,
 	reset,
 }: {

src/app/globals.css

@@ -205,7 +205,9 @@ summary,
 		letter-spacing: 0.03em;
 		text-transform: uppercase;
 		white-space: nowrap;
-		transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
+		transition:
+			color 0.15s ease-in-out,
+			background-color 0.15s ease-in-out;
 		border-radius: 0.5rem;
 	}
 	.nav-item:hover {
@@ -223,7 +225,9 @@ summary,
 	.dropdown-item {
 		@apply block py-2.5 px-4 text-sm font-semibold rounded-lg mx-1;
 		color: var(--color-dropdown-text-readable, var(--color-text-readable));
-		transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out;
+		transition:
+			background-color 0.1s ease-in-out,
+			color 0.1s ease-in-out;
 	}
 	.dropdown-item:hover {
 		background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);

src/app/help/[category]/page.tsx

@@ -117,11 +117,12 @@ export default async function HelpCategoryPage({
 					/>
 				) : null}
 
-				{/* content is author-supplied HTML — sanitised server-side. */}
+			{/* content is author-supplied HTML — sanitised server-side. */}
-				<div
+			{/* biome-ignore lint/security/noDangerouslySetInnerHtml: sanitised article body */}
-					style={{ lineHeight: 1.7 }}
+			<div
-					dangerouslySetInnerHTML={{ __html: sanitize(content) }}
+				style={{ lineHeight: 1.7 }}
-				/>
+				dangerouslySetInnerHTML={{ __html: sanitize(content) }}
+			/>
 
 				{hasButton ? (
 					<div style={{ clear: "both", marginTop: "1rem" }}>

src/app/me/page.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import type { CSSProperties } from "react";
+import type { CSSProperties, ReactNode } from "react";
 import { claimReferral } from "@/actions/referral";
 import {
 	ContentCard,
@@ -70,7 +70,7 @@ export default async function MePage({
 
 	const { claimed, error } = await searchParams;
 
-	let content;
+	let content: ReactNode;
 	try {
 		// --- Account + reward config -----------------------------------------
 		const [user, imagerBase, neededRaw, amountRaw, currencyRaw] =

src/components/language-switcher.tsx

@@ -5,6 +5,7 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useLocale } from "next-intl";
 import { useEffect, useMemo, useRef, useState, useTransition } from "react";
+import { setLocaleCookie } from "@/actions/set-locale";
 
 const LOCALES: { code: string; label: string; lang: string }[] = [
 	{ code: "nl", label: "Nederlands", lang: "nl" },
@@ -66,8 +67,10 @@ export function LanguageSwitcher() {
 
 	function switchLocale(code: string) {
 		if (code === locale) return;
-		document.cookie = `NEXT_LOCALE=${code};path=/;max-age=31536000;samesite=strict;secure`;
+		startTransition(async () => {
-		startTransition(() => router.refresh());
+			await setLocaleCookie(code);
+			router.refresh();
+		});
 		setOpen(false);
 	}
 

src/components/mobile-nav.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { type ReactNode, useRef } from "react";
 import Image from "next/image";
-import Link from "next/link";
+import { type ReactNode, useRef } from "react";
 
 interface MobileNavProps {
 	children: ReactNode;
@@ -37,7 +36,7 @@ export function MobileNav({
 					hover:bg-[color-mix(in_srgb,var(--color-primary)_12%,transparent)]
 					active:scale-[0.96]
 					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary-readable,var(--color-primary))] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-navbar)]"
-				aria-label={"Menu"}
+				aria-label={menuLabel}
 			>
 				<svg
 					className="w-6 h-6 details-open:hidden"
@@ -97,8 +96,7 @@ export function MobileNav({
 						<span
 							className="text-sm font-extrabold uppercase tracking-wide"
 							style={{
-								color:
+								color: "var(--color-navbar-text-readable, var(--color-text))",
-									"var(--color-navbar-text-readable, var(--color-text))",
 							}}
 						>
 							{brandLabel}

src/components/nav-dropdown.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { type ReactNode } from "react";
+import type { ReactNode } from "react";
 
 interface NavDropdownProps {
 	label: string;

src/components/top-header.tsx

@@ -14,7 +14,8 @@ function Currency({
 	amount: number;
 	label: string;
 }) {
-	const textColor = "var(--color-navbar-text-readable, var(--color-navbar-text))";
+	const textColor =
+		"var(--color-navbar-text-readable, var(--color-navbar-text))";
 	const valueColor =
 		"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))";
 
@@ -24,7 +25,10 @@ function Currency({
 				className={`h-[20px] w-[20px] sm:h-[25px] sm:w-[25px] rounded-full outline-offset-[3px] ${icon}`}
 			/>
 			<div style={{ color: textColor }}>
-				<span className="font-semibold text-xs sm:text-sm" style={{ color: valueColor }}>
+				<span
+					className="font-semibold text-xs sm:text-sm"
+					style={{ color: valueColor }}
+				>
 					{amount.toLocaleString()}
 				</span>{" "}
 				<span className="hidden sm:inline text-xs">{label}</span>

src/lib/foundation/database.ts

@@ -152,5 +152,5 @@ export class DbService {
 	}
 }
 
-export const db = globalForDb._db ?? (globalForDb._db = new DbService());
+export const db = globalForDb._db ?? new DbService();
 if (env.NODE_ENV !== "production") globalForDb._db = db;

src/lib/redis.ts

@@ -22,9 +22,8 @@ function createRedis(): Redis | null {
 }
 
 export const redis: Redis | null =
-	globalForRedis.redis !== undefined
+	globalForRedis.redis !== undefined ? globalForRedis.redis : createRedis();
-		? globalForRedis.redis
+if (globalForRedis.redis === undefined) globalForRedis.redis = redis;
-		: (globalForRedis.redis = createRedis());
 
 export async function withRedis<T>(
 	fallback: () => Promise<T>,

src/messages/en.json

@@ -1462,7 +1462,6 @@
 				"apiKeys": "API Keys",
 				"points": "Points",
 				"autoDj": "AutoDJ",
-				"monitoring": "Monitoring",
 				"user": "User",
 				"message": "Message",
 				"posted": "Posted",
@@ -1652,7 +1651,7 @@
 					"active": "Active",
 					"inactive": "Inactive",
 					"addTrack": "Add track",
-					"title": "Title",
+					"trackTitle": "Title",
 					"titlePlaceholder": "Track title",
 					"artist": "Artist",
 					"album": "Album",

src/messages/nl.json

@@ -1462,7 +1462,6 @@
 				"apiKeys": "API-sleutels",
 				"points": "Punten",
 				"autoDj": "AutoDJ",
-				"monitoring": "Monitoring",
 				"user": "User",
 				"message": "Message",
 				"posted": "Posted",
@@ -1652,7 +1651,7 @@
 					"active": "Active",
 					"inactive": "Inactive",
 					"addTrack": "Add track",
-					"title": "Title",
+					"trackTitle": "Title",
 					"titlePlaceholder": "Track title",
 					"artist": "Artist",
 					"album": "Album",