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

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(() => router.refresh());
+		startTransition(async () => {
+			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:
-									"var(--color-navbar-text-readable, var(--color-text))",
+								color: "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>