From d0103444236198169089e9ae6395d75e5ec56e36 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sun, 26 Jul 2026 17:17:56 +0200
Subject: [PATCH] feat: add language switcher, theme switcher, logout, and
 hotel logo to client toolbar

---
 src/app/client/client-view.tsx | 201 +++++++++++++++++++--------------
 src/app/client/page.tsx        |   4 +-
 2 files changed, 122 insertions(+), 83 deletions(-)

diff --git a/src/app/client/client-view.tsx b/src/app/client/client-view.tsx
index 0e9874c6..ed3f7e9e 100644
--- a/src/app/client/client-view.tsx
+++ b/src/app/client/client-view.tsx
@@ -1,7 +1,12 @@
 "use client";
 
+import { LogOut } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
+import { signOut } from "next-auth/react";
 import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { ThemeSwitcher } from "@/components/theme-switcher";
 
 function ToolbarBtn({
 	onClick,
@@ -47,11 +52,13 @@ export function ClientView({
 	ticket,
 	clientUrl,
 	hotelName,
+	logo,
 	initialOnline,
 }: {
 	ticket: string;
 	clientUrl: string;
 	hotelName: string;
+	logo: string | null;
 	initialOnline: number;
 }) {
 	const [_isFullscreen, setIsFullscreen] = useState(false);
@@ -94,90 +101,120 @@ export function ClientView({
 			className="relative w-screen h-screen overflow-hidden"
 			style={{ backgroundColor: "var(--color-background)" }}
 		>
-			<div className="fixed top-2 sm:top-4 left-2 sm:left-4 z-50 flex items-center gap-1 sm:gap-2">
-				<ToolbarBtn href="/" title="Home">
-					<svg
-						width="18"
-						height="18"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						role="img"
-						aria-label="Home"
+			<div className="fixed top-2 sm:top-4 left-2 sm:left-4 right-2 sm:right-4 z-50 flex items-center justify-between gap-1 sm:gap-2">
+				<div className="flex items-center gap-1 sm:gap-2">
+					<ToolbarBtn href="/" title="Home">
+						<svg
+							width="18"
+							height="18"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							role="img"
+							aria-label="Home"
+						>
+							<title>Home</title>
+							<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+							<polyline points="9 22 9 12 15 12 15 22" />
+						</svg>
+					</ToolbarBtn>
+					<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
+						<svg
+							width="18"
+							height="18"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							role="img"
+							aria-label="Reload"
+						>
+							<title>Reload</title>
+							<polyline points="23 4 23 10 17 10" />
+							<polyline points="1 20 1 14 7 14" />
+							<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+						</svg>
+					</ToolbarBtn>
+					<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
+						<svg
+							width="18"
+							height="18"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							role="img"
+							aria-label="Fullscreen"
+						>
+							<title>Fullscreen</title>
+							<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+						</svg>
+					</ToolbarBtn>
+					<div
+						className="h-9 sm:h-10 px-2 sm:px-3 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
+						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
+							background:
+								"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
+							color:
+								"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
+						}}
+						title="Online users"
 					>
-						<title>Home</title>
-						<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
-						<polyline points="9 22 9 12 15 12 15 22" />
-					</svg>
-				</ToolbarBtn>
-				<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
-					<svg
-						width="18"
-						height="18"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						role="img"
-						aria-label="Reload"
+						<svg
+							width="18"
+							height="18"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							role="img"
+							aria-label="Online users"
+						>
+							<title>Online users</title>
+							<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
+							<circle cx="12" cy="7" r="4" />
+						</svg>
+						<span className="text-xs font-bold">{onlineCount}</span>
+					</div>
+				</div>
+
+				<div className="flex items-center gap-1 sm:gap-2">
+					{logo ? (
+						<Image
+							src={logo}
+							alt={hotelName}
+							width={32}
+							height={32}
+							className="h-8 w-auto rounded-lg shadow-lg"
+							style={{ objectFit: "contain" }}
+						/>
+					) : (
+						<span
+							className="hidden sm:inline text-sm font-bold drop-shadow-lg px-2"
+							style={{ color: "var(--color-primary, #eeb425)" }}
+						>
+							{hotelName}
+						</span>
+					)}
+					<LanguageSwitcher variant="admin" />
+					<ThemeSwitcher variant="admin" />
+					<ToolbarBtn
+						onClick={() => signOut({ callbackUrl: "/" })}
+						title="Logout"
 					>
-						<title>Reload</title>
-						<polyline points="23 4 23 10 17 10" />
-						<polyline points="1 20 1 14 7 14" />
-						<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-					</svg>
-				</ToolbarBtn>
-				<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
-					<svg
-						width="18"
-						height="18"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						role="img"
-						aria-label="Fullscreen"
-					>
-						<title>Fullscreen</title>
-						<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
-					</svg>
-				</ToolbarBtn>
-				<div
-					className="h-9 sm:h-10 px-2 sm:px-3 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
-					style={{
-						borderColor:
-							"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
-						background:
-							"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
-						color:
-							"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
-					}}
-					title="Online users"
-				>
-					<svg
-						width="18"
-						height="18"
-						viewBox="0 0 24 24"
-						fill="none"
-						stroke="currentColor"
-						strokeWidth="2"
-						strokeLinecap="round"
-						strokeLinejoin="round"
-						role="img"
-						aria-label="Online users"
-					>
-						<title>Online users</title>
-						<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
-						<circle cx="12" cy="7" r="4" />
-					</svg>
-					<span className="text-xs font-bold">{onlineCount}</span>
+						<LogOut size={18} />
+					</ToolbarBtn>
 				</div>
 			</div>
 
diff --git a/src/app/client/page.tsx b/src/app/client/page.tsx
index c84b10af..33fcd4e2 100644
--- a/src/app/client/page.tsx
+++ b/src/app/client/page.tsx
@@ -16,9 +16,10 @@ export default async function ClientPage() {
 
 	const userId = Number(session.user.id);
 
-	const [hotelName, clientUrl] = await Promise.all([
+	const [hotelName, clientUrl, logo] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get("nitro_client_url", ""),
+		siteSettings.get("cms_logo", ""),
 	]);
 
 	const ip = (await headers()).get("x-real-client-ip") ?? "0.0.0.0";
@@ -33,6 +34,7 @@ export default async function ClientPage() {
 			ticket={ticket}
 			clientUrl={clientUrl || "/nitro-client/"}
 			hotelName={hotelName}
+			logo={logo}
 			initialOnline={onlineCount}
 		/>
 	);