fix: strip existing sso param from clientUrl, add aria roles to dropdowns, add x-pathname fallback, move .dropdown-menu into @layer components

This commit is contained in:
openhands committed 2026-07-03 16:17:42 +02:00
1 parent 7e616ca6b3
commit 187af2e147
4 files changed
+37 -37

No files matched your search

+3 -2
View File
@@ -81,8 +81,9 @@ export default function ClientPage() {
const getClientSrc = useCallback(() => {
if (!ticket) return "";
const sep = clientUrl.includes("?") ? "&" : "?";
return `${clientUrl}${sep}sso=${encodeURIComponent(ticket)}`;
const base = clientUrl.replace(/(\?|&)sso=[^&]*/, "");
const sep = base.includes("?") ? "&" : "?";
return `${base}${sep}sso=${encodeURIComponent(ticket)}`;
}, [clientUrl, ticket]);
if (loading) {
+22 -26
View File
@@ -146,6 +146,28 @@ body {
background-color: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary);
}
.dropdown-menu {
background-color: var(--color-dropdown);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
box-shadow: 0 8px 32px color-mix(in srgb, rgb(0, 0, 0) 20%, transparent);
transform-origin: top right;
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0;
transform: translateY(-8px) scale(0.95);
pointer-events: none;
}
details[open] > .dropdown-menu {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
@starting-style {
details[open] > .dropdown-menu {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
}
}
/* ── Atom icons / backgrounds (asset paths adapted to /assets) ── */
@@ -723,32 +745,6 @@ tbody tr:hover {
border-color: #f97316;
}
/* ── Dropdown menu (solid color + animation) ─────────────────── */
.dropdown-menu {
background-color: var(--color-dropdown);
border: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
box-shadow: 0 8px 32px color-mix(in srgb, rgb(0, 0, 0) 20%, transparent);
transform-origin: top right;
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0;
transform: translateY(-8px) scale(0.95);
pointer-events: none;
}
details[open] > .dropdown-menu {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
@starting-style {
details[open] > .dropdown-menu {
opacity: 0;
transform: translateY(-8px) scale(0.95);
}
}
/* ── Radio sidebar ──────────────────────────────────────────── */
.radio-layout {
display: flex;
+1 -1
View File
@@ -39,7 +39,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
const defaultDark = await siteSettings.getBool("default_dark", false);
const headersList = await headers();
const pathname = headersList.get("x-pathname") || "";
const pathname = headersList.get("x-pathname") || headersList.get("next-url") || "";
const isClient = pathname === "/client" || pathname.startsWith("/client/");
return (
<html lang={locale} className={`app ${nunito.variable}`}>
+11 -8
View File
@@ -67,15 +67,16 @@ export async function TopHeader() {
Administration
</summary>
<div
role="menu"
className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[180px] rounded-xl z-50 py-2"
>
<Link href="/admin" className="dropdown-item">
<Link href="/admin" className="dropdown-item" role="menuitem">
Admin panel
</Link>
<Link href="/admin/commandocentrum" className="dropdown-item">
<Link href="/admin/commandocentrum" className="dropdown-item" role="menuitem">
Commandocentrum
</Link>
<Link href="/admin/logs" className="dropdown-item">
<Link href="/admin/logs" className="dropdown-item" role="menuitem">
Logs
</Link>
</div>
@@ -89,21 +90,22 @@ export async function TopHeader() {
<span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>
</summary>
<div
role="menu"
className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
>
<Link href="/me" className="dropdown-item">
<Link href="/me" className="dropdown-item" role="menuitem">
My dashboard
</Link>
<Link href={`/u/${session.user.name}`} className="dropdown-item">
<Link href={`/u/${session.user.name}`} className="dropdown-item" role="menuitem">
My profile
</Link>
<Link href="/settings" className="dropdown-item">
<Link href="/settings" className="dropdown-item" role="menuitem">
User settings
</Link>
<Link href="/settings/2fa" className="dropdown-item">
<Link href="/settings/2fa" className="dropdown-item" role="menuitem">
Two-factor
</Link>
<Link href="/settings/sessions" className="dropdown-item">
<Link href="/settings/sessions" className="dropdown-item" role="menuitem">
Login activity
</Link>
<div className="h-px my-1 mx-3" style={{ backgroundColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
@@ -115,6 +117,7 @@ export async function TopHeader() {
>
<button
type="submit"
role="menuitem"
className="dropdown-item w-full text-center mx-1 rounded-lg"
style={{
backgroundColor: "color-mix(in srgb, var(--button-danger-color) 12%, transparent)",