feat: add language switcher, theme switcher, logout, and hotel logo to client toolbar

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,7 +101,8 @@ 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">
+			<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"
@@ -181,6 +189,35 @@ export function ClientView({
 					</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"
+					>
+						<LogOut size={18} />
+					</ToolbarBtn>
+				</div>
+			</div>
+
 			<iframe
 				id="nitro"
 				src={clientSrc}

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}
 		/>
 	);