feat: configurable toolbar position (site setting + localStorage toggle + URL override)

src/app/client/client-view.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { LogOut } from "lucide-react";
+import { ChevronLeft, ChevronRight, LogOut } from "lucide-react";
 import Link from "next/link";
 import { signOut } from "next-auth/react";
 import {
@@ -56,11 +56,13 @@ export function ClientView({
 	clientUrl,
 	hotelName,
 	initialOnline,
+	defaultToolbarPosition = "right",
 }: {
 	ticket: string;
 	clientUrl: string;
 	hotelName: string;
 	initialOnline: number;
+	defaultToolbarPosition?: string;
 }) {
 	const [_isFullscreen, setIsFullscreen] = useState(false);
 	const [onlineCount, setOnlineCount] = useState(initialOnline);
@@ -98,10 +100,36 @@ export function ClientView({
 	const clientSrc = `${base}${sep}sso=${encodeURIComponent(ticket)}`;
 
 	const [mounted, setMounted] = useState(false);
+	const [position, setPosition] = useState<"left" | "right">("right");
+
 	useEffect(() => { setMounted(true); }, []);
 
+	useEffect(() => {
+		const params = new URLSearchParams(window.location.search);
+		const urlPos = params.get("toolbar");
+		if (urlPos === "left" || urlPos === "right") {
+			setPosition(urlPos);
+			return;
+		}
+		try {
+			const stored = localStorage.getItem("client_toolbar_position");
+			if (stored === "left" || stored === "right") {
+				setPosition(stored);
+				return;
+			}
+		} catch { /* private mode */ }
+		if (defaultToolbarPosition === "left" || defaultToolbarPosition === "right")
+			setPosition(defaultToolbarPosition as "left" | "right");
+	}, [defaultToolbarPosition]);
+
+	function togglePosition() {
+		const next = position === "left" ? "right" : "left";
+		setPosition(next);
+		try { localStorage.setItem("client_toolbar_position", next); } catch {}
+	}
+
 	const toolbar = (
-		<div className="fixed top-2 sm:top-4 right-2 sm:right-4 z-[9999] flex items-center gap-1 sm:gap-2">
+		<div className={`fixed top-2 sm:top-4 ${position === "left" ? "left-2 sm:left-4" : "right-2 sm:right-4"} z-[9999] flex items-center gap-1 sm:gap-2`}>
 			<ToolbarBtn href="/" title="Home">
 				<svg
 					width="14"
@@ -186,6 +214,9 @@ export function ClientView({
 				</svg>
 				<span className="text-[10px] sm:text-xs font-bold">{onlineCount}</span>
 			</div>
+			<ToolbarBtn onClick={togglePosition} title={`Move to ${position === "left" ? "right" : "left"}`}>
+				{position === "left" ? <ChevronRight size={14} /> : <ChevronLeft size={14} />}
+			</ToolbarBtn>
 			<ToolbarBtn
 				onClick={() => signOut({ callbackUrl: "/" })}
 				title="Logout"

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, defaultToolbarPosition] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get("nitro_client_url", ""),
+		siteSettings.get("client_toolbar_position", "right"),
 	]);
 
 	const ip = (await headers()).get("x-real-client-ip") ?? "0.0.0.0";
@@ -34,6 +35,7 @@ export default async function ClientPage() {
 			clientUrl={clientUrl || "/nitro-client/"}
 			hotelName={hotelName}
 			initialOnline={onlineCount}
+			defaultToolbarPosition={defaultToolbarPosition ?? "right"}
 		/>
 	);
 }