feat(i18n): wire header strings to translations across locales

src/components/navigation.tsx

@@ -24,6 +24,7 @@ import {
 
 export async function Navigation({ session }: { session: Session | null }) {
 	const t = await getTranslations("nav");
+	const headerT = await getTranslations("header");
 	const brandLabel = await resolveHotelName();
 	let showAdmin = false;
 	let showMod = false;
@@ -257,7 +258,7 @@ export async function Navigation({ session }: { session: Session | null }) {
 							<input
 								type="text"
 								name="q"
-								placeholder="Search users..."
+								placeholder={headerT("searchUsers")}
 								className="w-32 rounded-lg border px-2.5 py-1.5 text-xs font-medium transition-all focus:w-40"
 								style={{
 									background: "var(--color-background)",
@@ -448,7 +449,7 @@ export async function Navigation({ session }: { session: Session | null }) {
 				<Link
 					href="/"
 					className="ml-auto flex md:hidden items-center gap-2 shrink-0"
-					aria-label="Home"
+					aria-label={t("home")}
 				>
 					<Image
 						src="/assets/images/icons/navigation/home.png"

src/components/room-quick-entry.tsx

@@ -1,6 +1,9 @@
 "use client";
 
+import { useTranslations } from "next-intl";
+
 export function RoomQuickEntry() {
+	const t = useTranslations("header");
 	return (
 		<form
 			action="/client"
@@ -19,8 +22,8 @@ export function RoomQuickEntry() {
 			<input
 				type="number"
 				name="roomId"
-				placeholder="Room ID"
-				aria-label="Room ID"
+				placeholder={t("roomId")}
+				aria-label={t("roomId")}
 				min={1}
 				className="w-20 rounded-lg border px-2 py-1 text-xs font-medium"
 				style={{
@@ -39,7 +42,7 @@ export function RoomQuickEntry() {
 					color: "var(--color-primary-readable, var(--color-primary))",
 				}}
 			>
-				Go
+				{t("go")}
 			</button>
 		</form>
 	);

src/components/top-header.tsx

@@ -55,6 +55,7 @@ function Currency({
 export async function TopHeader({ session }: { session: Session | null }) {
 	if (!session?.user?.id) return null;
 	const notificationText = await getTranslations("pages.notifications");
+	const t = await getTranslations("header");
 	const id = Number(session.user.id);
 
 	let credits = 0;
@@ -205,17 +206,25 @@ export async function TopHeader({ session }: { session: Session | null }) {
 							height={14}
 							unoptimized
 						/>
-						Enter
+						{t("enter")}
 					</Link>
 
 					<RoomQuickEntry />
 
-					<Currency icon="nav-credit-icon" amount={credits} label="Credits" />
-					<Currency icon="nav-ducket-icon" amount={duckets} label="Duckets" />
+					<Currency
+						icon="nav-credit-icon"
+						amount={credits}
+						label={t("credits")}
+					/>
+					<Currency
+						icon="nav-ducket-icon"
+						amount={duckets}
+						label={t("duckets")}
+					/>
 					<Currency
 						icon="nav-diamond-icon"
 						amount={diamonds}
-						label="Diamonds"
+						label={t("diamonds")}
 					/>
 				</div>
 
@@ -228,7 +237,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 						<input
 							type="text"
 							name="q"
-							placeholder="Search users..."
+							placeholder={t("searchUsers")}
 							className="w-24 rounded-lg border px-2 py-1 text-xs font-medium transition-all focus:w-32"
 							style={{
 								background: "var(--color-background)",
@@ -254,7 +263,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 							strokeLinejoin="round"
 							style={{ color: textColor }}
 							role="img"
-							aria-label="Notifications"
+							aria-label={notificationText("title")}
 						>
 							<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
 							<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
@@ -278,8 +287,8 @@ export async function TopHeader({ session }: { session: Session | null }) {
 								className="list-none cursor-pointer font-semibold text-xs sm:text-sm [&::-webkit-details-marker]:hidden"
 								style={{ color: textColor }}
 							>
-								<span className="hidden sm:inline">Staff</span>
-								<span className="sm:hidden">Staff</span>
+								<span className="hidden sm:inline">{t("staff")}</span>
+								<span className="sm:hidden">{t("staff")}</span>
 							</summary>
 							<div
 								role="menu"
@@ -287,7 +296,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 							>
 								{showMod ? (
 									<Link href="/mod" className="dropdown-item" role="menuitem">
-										Mod panel
+										{t("modPanel")}
 									</Link>
 								) : null}
 								{showAdmin ? (
@@ -297,26 +306,26 @@ export async function TopHeader({ session }: { session: Session | null }) {
 											className="dropdown-item"
 											role="menuitem"
 										>
-											Admin panel
+											{t("adminPanel")}
 										</Link>
 										<Link
 											href="/admin/commandocentrum"
 											className="dropdown-item"
 											role="menuitem"
 										>
-											Commandocentrum
+											{t("commandCenter")}
 										</Link>
 										<Link
 											href="/admin/logs"
 											className="dropdown-item"
 											role="menuitem"
 										>
-											Logs
+											{t("logs")}
 										</Link>
 									</>
 								) : null}
 								<Link href="/logo" className="dropdown-item" role="menuitem">
-									Logo generator
+									{t("logoGenerator")}
 								</Link>
 							</div>
 						</details>
@@ -324,7 +333,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 
 					<details className="relative">
 						<summary
-							aria-label="User menu"
+							aria-label={t("userMenu")}
 							className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden"
 						>
 							<HeaderUserIdentity
@@ -338,14 +347,14 @@ export async function TopHeader({ session }: { session: Session | null }) {
 							className="dropdown-menu fixed sm:absolute right-2 sm:right-0 top-auto sm:top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
 						>
 							<Link href="/me" className="dropdown-item" role="menuitem">
-								My dashboard
+								{t("myDashboard")}
 							</Link>
 							<Link
 								href={`/u/${session.user.name}`}
 								className="dropdown-item"
 								role="menuitem"
 							>
-								My profile
+								{t("myProfile")}
 							</Link>
 							<Link
 								href="/notifications"
@@ -355,21 +364,21 @@ export async function TopHeader({ session }: { session: Session | null }) {
 								{notificationText("title")}
 							</Link>
 							<Link href="/settings" className="dropdown-item" role="menuitem">
-								User settings
+								{t("userSettings")}
 							</Link>
 							<Link
 								href="/settings/2fa"
 								className="dropdown-item"
 								role="menuitem"
 							>
-								Two-factor
+								{t("twoFactor")}
 							</Link>
 							<Link
 								href="/settings/sessions"
 								className="dropdown-item"
 								role="menuitem"
 							>
-								Login activity
+								{t("loginActivity")}
 							</Link>
 
 							{pendingFriendRequests > 0 && (
@@ -386,7 +395,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 											className="text-xs font-bold mb-1"
 											style={{ color: "var(--color-text-muted)" }}
 										>
-											Friend requests ({pendingFriendRequests})
+											{t("friendRequests")} ({pendingFriendRequests})
 										</p>
 										{friendRequestUsers.slice(0, 3).map((u) => (
 											<Link
@@ -407,7 +416,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 												className="text-xs mt-1 opacity-60"
 												style={{ color: textColor }}
 											>
-												+{friendRequestUsers.length - 3} more
+												{t("more", { count: friendRequestUsers.length - 3 })}
 											</p>
 										)}
 									</div>
@@ -435,7 +444,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 										width: "calc(100% - 8px)",
 									}}
 								>
-									Logout
+									{t("logout")}
 								</button>
 							</form>
 						</div>