Files
Epicnabbo-Catalogus-Updated…/src/components/site-header.tsx
T
openhands 6cc45d7413 feat: harden atoms-nexst against review findings (37 items)
Second review pass covering security, performance, admin tooling and the
public/room flows. All HIGH and MEDIUM findings from the audit are resolved;
nothing in this commit changes the visible feature set.

Authentication & session security
- CSP is now set on the request headers in the proxy, which is what Next.js
  uses to derive the render nonce, so the nonce is effective.
- 2FA: an already-enabled user cannot re-enroll, the setup endpoint is
  rate-limited per account, and confirmed codes are persisted so the second
  secret no longer silently never applies.
- Password reset revokes the ticket, authTicket and all personal access
  tokens, and bumps the token version so existing sessions die. The same
  revocation is now wired into the staff-side password reset.
- /reset and /verify return a stable error code instead of raw text; the
  mail lookups are ordered by id so duplicates cannot vary between runs.
- Resending the verification mail gets a per-address cooldown on top of the
  per-user limit.
- Issue API tokens with the narrower radio/ticket ability set instead of "*".

Authorization & input handling
- Mid-rank staff can no longer keep dynamically granted non-view admin.*
  permissions: existing grants are revoked by migration and the grant lookup
  is restricted to "%.view". Rank guards use the dynamic super-admin check.
- Alerting a user is permission-checked and audited like the other tools.
- Material mutations (giveCredits/giveDuckets/giveDiamonds, the admin user
  actions route, bulk user actions) are capped and rank-guarded, and bulk
  ids are bounded.
- updateRoom / updateRoomItem write through a field allowlist, and items
  may only be edited through their own room.
- Classnames reaching the filesystem are validated before use so a crafted
  value cannot escape the asset directories.
- The word filter now also covers offline mails, guild forum threads and
  replies, and user mottos.
- Media uploads are validated by magic bytes, /api/media requires the page
  edit permission, APP_URL must be configured once mail is enabled, and the
  diagnostics error route checks the fetch site header.

Admin tooling
- Secret settings render masked and cannot be overwritten with a blank or
  an arbitrary raw key; radio credentials are new password inputs.
- Commandocentrum balance changes are audited.
- Admin list pagination reads the caller's per-page instead of the max, and
  the log exporter caps offset and search length.

Performance
- Catalog translations are cached per module, with a cheap revision hash;
  the public online count uses a stale window instead of hammering the DB.
- The cache warmup now primes the payload the home route actually reads.
- TopHeader batches its queries into one round trip, and LCP avatars load
  eagerly.
- motion/react and sonner are no longer part of the root layout; the nav
  dropdown and mobile nav panels are lazy client chunks. Anonymous visitors
  again get the navigation chrome, and public pages get an edge cacheable
  response.

Accessibility
- Nested <main> elements in phase pages became <section>; the page entrance
  and route progress animations are pure CSS that respect reduced motion.
2026-10-09 16:19:48 +02:00

141 lines
4.1 KiB
TypeScript

import Image from "next/image";
import Link from "@/components/link";
import { LiveOnlineCount } from "@/components/live-online-count";
import { resolveHotelName } from "@/lib/hotel-name";
import { cachedOnlineCount } from "@/lib/services/public-counters";
import { siteSettings } from "@/lib/services/site-settings";
export async function SiteHeader() {
const [hotelName, header, logo] = await Promise.all([
resolveHotelName(),
siteSettings.get("cms_header", "/assets/images/background.png"),
siteSettings.get("cms_logo", ""),
]);
let online: number;
try {
online = await cachedOnlineCount();
} catch {
online = 0;
}
const bannerUrl =
header && header !== "/assets/images/background.png"
? header
: "/assets/images/background.png";
return (
<div
className="site-header relative w-full overflow-hidden"
style={{ minHeight: "clamp(10rem, 25vw, 18rem)" }}
>
{/* Background image */}
<div
className="absolute inset-0"
style={{ background: `url(${bannerUrl}) center/cover no-repeat` }}
/>
{/* Gradient overlays */}
<div
className="absolute inset-0"
style={{
background:
"linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.15) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.7) 100%)",
}}
/>
{/* Subtle dot pattern */}
<div
className="absolute inset-0 opacity-[0.04]"
style={{
backgroundImage:
"radial-gradient(rgba(255,255,255,0.5) 1px, transparent 1px)",
backgroundSize: "20px 20px",
}}
/>
{/* Decorative glows */}
<div
className="absolute -top-24 -right-24 w-64 h-64 sm:w-96 sm:h-96 rounded-full opacity-[0.12] blur-[120px]"
style={{ background: "var(--color-primary)" }}
/>
<div
className="absolute -bottom-24 -left-24 w-48 h-48 sm:w-72 sm:h-72 rounded-full opacity-[0.08] blur-[100px]"
style={{ background: "var(--color-primary)" }}
/>
{/* Content */}
<div className="relative flex flex-col items-center justify-center px-3 py-6 sm:px-4 sm:py-8 md:py-12 min-h-[clamp(10rem,25vw,18rem)]">
<Link
href="/"
className="transition-transform duration-300 hover:scale-105 mb-5 sm:mb-8"
>
{logo ? (
<Image
className="drop-shadow-2xl block"
src={logo}
alt={hotelName}
width={200}
height={120}
style={{
maxHeight: "clamp(60px, 15vw, 120px)",
width: "auto",
height: "auto",
}}
unoptimized
/>
) : (
<div className="text-center">
<h1
className="font-black tracking-tight leading-none text-primary-foreground"
style={{
fontFamily: "var(--font-nunito)",
fontSize: "clamp(2rem, 7vw, 5.5rem)",
textShadow:
"0 2px 20px rgba(0,0,0,0.4), 0 8px 40px rgba(0,0,0,0.2)",
letterSpacing: "0.04em",
}}
>
{hotelName}
</h1>
<p
className="text-xs sm:text-sm md:text-base font-bold tracking-[0.15em] uppercase mt-1"
style={{
color: "color-mix(in srgb, var(--color-primary) 70%, white)",
textShadow: "0 2px 12px rgba(0,0,0,0.5)",
letterSpacing: "0.2em",
}}
>
Hotel
</p>
</div>
)}
</Link>
{/* Online badge */}
<div
className="flex items-center gap-2 sm:gap-3 px-4 sm:px-6 py-2 sm:py-3 rounded-full"
style={{
background: "rgba(255,255,255,0.08)",
backdropFilter: "blur(16px)",
WebkitBackdropFilter: "blur(16px)",
border: "1px solid rgba(255,255,255,0.10)",
boxShadow: "0 4px 24px rgba(0,0,0,0.12)",
}}
>
<span className="relative flex h-2 w-2 sm:h-2.5 sm:w-2.5">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 sm:h-2.5 sm:w-2.5 bg-primary" />
</span>
<span
className="text-xs sm:text-sm font-bold tracking-wide"
style={{ color: "rgba(255,255,255,0.9)" }}
>
<LiveOnlineCount initial={online} hotelName={hotelName} />
</span>
</div>
</div>
</div>
);
}