feat: add language switcher, theme switcher, logout, and hotel logo to client toolbar
This commit is contained in:
openhands committed
1 parent
54c155bcef
commit
d010344423
2 files changed
+122
-83
No files matched your search
+119
-82
@@ -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>
|
||||
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user