From 2a727b2a7185db569a94f53849649818e75eee50 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sun, 26 Jul 2026 17:29:18 +0200
Subject: [PATCH] refactor: smaller toolbar icons, remove language and theme
 switchers from client

---
 src/app/client/client-view.tsx | 187 ++++++++++++++++-----------------
 1 file changed, 89 insertions(+), 98 deletions(-)

diff --git a/src/app/client/client-view.tsx b/src/app/client/client-view.tsx
index 4f024017..e86b8139 100644
--- a/src/app/client/client-view.tsx
+++ b/src/app/client/client-view.tsx
@@ -4,8 +4,6 @@ import { LogOut } from "lucide-react";
 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,
@@ -19,7 +17,7 @@ function ToolbarBtn({
 	href?: string;
 }) {
 	const cls =
-		"w-9 h-9 sm:w-10 sm:h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0";
+		"w-7 h-7 sm:w-8 sm:h-8 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0";
 	const style = {
 		borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
 		background:
@@ -98,104 +96,97 @@ 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 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"
+			<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="14"
+						height="14"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						role="img"
+						aria-label="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="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>
-					<LanguageSwitcher variant="admin" />
-					<ToolbarBtn
-						onClick={() => signOut({ callbackUrl: "/" })}
-						title="Logout"
+						<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="14"
+						height="14"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						role="img"
+						aria-label="Reload"
 					>
-						<LogOut size={18} />
-					</ToolbarBtn>
-				</div>
-
-				<div className="flex items-center gap-1 sm:gap-2">
-					<ThemeSwitcher variant="admin" />
+						<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="14"
+						height="14"
+						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-7 sm:h-8 px-1.5 sm:px-2 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="14"
+						height="14"
+						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-[10px] sm:text-xs font-bold">{onlineCount}</span>
 				</div>
+				<ToolbarBtn
+					onClick={() => signOut({ callbackUrl: "/" })}
+					title="Logout"
+				>
+					<LogOut size={14} />
+				</ToolbarBtn>
 			</div>
 
 			<iframe