refactor: smaller toolbar icons, remove language and theme switchers from client

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,12 +96,11 @@ 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="fixed top-2 sm:top-4 left-2 sm:left-4 z-50 flex items-center gap-1 sm:gap-2">
-				<div className="flex items-center gap-1 sm:gap-2">
 				<ToolbarBtn href="/" title="Home">
 					<svg
-							width="18"
+						width="14"
-							height="18"
+						height="14"
 						viewBox="0 0 24 24"
 						fill="none"
 						stroke="currentColor"
@@ -120,8 +117,8 @@ export function ClientView({
 				</ToolbarBtn>
 				<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
 					<svg
-							width="18"
+						width="14"
-							height="18"
+						height="14"
 						viewBox="0 0 24 24"
 						fill="none"
 						stroke="currentColor"
@@ -139,8 +136,8 @@ export function ClientView({
 				</ToolbarBtn>
 				<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
 					<svg
-							width="18"
+						width="14"
-							height="18"
+						height="14"
 						viewBox="0 0 24 24"
 						fill="none"
 						stroke="currentColor"
@@ -155,7 +152,7 @@ export function ClientView({
 					</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"
+					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)",
@@ -167,8 +164,8 @@ export function ClientView({
 					title="Online users"
 				>
 					<svg
-							width="18"
+						width="14"
-							height="18"
+						height="14"
 						viewBox="0 0 24 24"
 						fill="none"
 						stroke="currentColor"
@@ -182,22 +179,16 @@ export function ClientView({
 						<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>
+					<span className="text-[10px] sm:text-xs font-bold">{onlineCount}</span>
 				</div>
-					<LanguageSwitcher variant="admin" />
 				<ToolbarBtn
 					onClick={() => signOut({ callbackUrl: "/" })}
 					title="Logout"
 				>
-						<LogOut size={18} />
+					<LogOut size={14} />
 				</ToolbarBtn>
 			</div>
 
-				<div className="flex items-center gap-1 sm:gap-2">
-					<ThemeSwitcher variant="admin" />
-				</div>
-			</div>
-
 			<iframe
 				id="nitro"
 				src={clientSrc}