refactor: smaller toolbar icons, remove language and theme switchers from client
This commit is contained in:
openhands committed
1 parent
f072a28aee
commit
2a727b2a71
1 file changed
+89
-98
@@ -4,8 +4,6 @@ import { LogOut } from "lucide-react";
|
|||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { signOut } from "next-auth/react";
|
import { signOut } from "next-auth/react";
|
||||||
import { type ReactNode, useCallback, useEffect, useState } from "react";
|
import { type ReactNode, useCallback, useEffect, useState } from "react";
|
||||||
import { LanguageSwitcher } from "@/components/language-switcher";
|
|
||||||
import { ThemeSwitcher } from "@/components/theme-switcher";
|
|
||||||
|
|
||||||
function ToolbarBtn({
|
function ToolbarBtn({
|
||||||
onClick,
|
onClick,
|
||||||
@@ -19,7 +17,7 @@ function ToolbarBtn({
|
|||||||
href?: string;
|
href?: string;
|
||||||
}) {
|
}) {
|
||||||
const cls =
|
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 = {
|
const style = {
|
||||||
borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
|
borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
|
||||||
background:
|
background:
|
||||||
@@ -98,104 +96,97 @@ export function ClientView({
|
|||||||
className="relative w-screen h-screen overflow-hidden"
|
className="relative w-screen h-screen overflow-hidden"
|
||||||
style={{ backgroundColor: "var(--color-background)" }}
|
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">
|
||||||
<ToolbarBtn href="/" title="Home">
|
<svg
|
||||||
<svg
|
width="14"
|
||||||
width="18"
|
height="14"
|
||||||
height="18"
|
viewBox="0 0 24 24"
|
||||||
viewBox="0 0 24 24"
|
fill="none"
|
||||||
fill="none"
|
stroke="currentColor"
|
||||||
stroke="currentColor"
|
strokeWidth="2"
|
||||||
strokeWidth="2"
|
strokeLinecap="round"
|
||||||
strokeLinecap="round"
|
strokeLinejoin="round"
|
||||||
strokeLinejoin="round"
|
role="img"
|
||||||
role="img"
|
aria-label="Home"
|
||||||
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"
|
|
||||||
>
|
>
|
||||||
<svg
|
<title>Home</title>
|
||||||
width="18"
|
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
||||||
height="18"
|
<polyline points="9 22 9 12 15 12 15 22" />
|
||||||
viewBox="0 0 24 24"
|
</svg>
|
||||||
fill="none"
|
</ToolbarBtn>
|
||||||
stroke="currentColor"
|
<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
|
||||||
strokeWidth="2"
|
<svg
|
||||||
strokeLinecap="round"
|
width="14"
|
||||||
strokeLinejoin="round"
|
height="14"
|
||||||
role="img"
|
viewBox="0 0 24 24"
|
||||||
aria-label="Online users"
|
fill="none"
|
||||||
>
|
stroke="currentColor"
|
||||||
<title>Online users</title>
|
strokeWidth="2"
|
||||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
|
strokeLinecap="round"
|
||||||
<circle cx="12" cy="7" r="4" />
|
strokeLinejoin="round"
|
||||||
</svg>
|
role="img"
|
||||||
<span className="text-xs font-bold">{onlineCount}</span>
|
aria-label="Reload"
|
||||||
</div>
|
|
||||||
<LanguageSwitcher variant="admin" />
|
|
||||||
<ToolbarBtn
|
|
||||||
onClick={() => signOut({ callbackUrl: "/" })}
|
|
||||||
title="Logout"
|
|
||||||
>
|
>
|
||||||
<LogOut size={18} />
|
<title>Reload</title>
|
||||||
</ToolbarBtn>
|
<polyline points="23 4 23 10 17 10" />
|
||||||
</div>
|
<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" />
|
||||||
<div className="flex items-center gap-1 sm:gap-2">
|
</svg>
|
||||||
<ThemeSwitcher variant="admin" />
|
</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>
|
</div>
|
||||||
|
<ToolbarBtn
|
||||||
|
onClick={() => signOut({ callbackUrl: "/" })}
|
||||||
|
title="Logout"
|
||||||
|
>
|
||||||
|
<LogOut size={14} />
|
||||||
|
</ToolbarBtn>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<iframe
|
<iframe
|
||||||
|
|||||||
Reference in new issue
Block a user