feat: make panel border color configurable via theme editor

- Add panel_border_color to THEME_COLOR_KEYS and base palettes
- Register panel-border-color CSS variable
- Fetch and inject panel_border_color in ThemeVars
- Add Panel border field to admin theme page
- Replace hardcoded #e9b124 with var(--panel-border-color) in UserView

src/components/home/user-view.tsx

@@ -9,12 +9,14 @@ interface UserViewProps {
 	userId: number;
 	username: string;
 	look: string;
+	motto?: string | null;
 }
 
 export default async function UserView({
 	userId,
 	username,
 	look,
+	motto,
 }: UserViewProps) {
 	const t = await getTranslations("pages.home");
 	const hotelName = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
@@ -53,7 +55,7 @@ export default async function UserView({
 	return (
 		<div className="flex flex-col gap-6 md:flex-row">
 			<div className="flex w-full flex-col gap-6 md:w-3/4">
-				<div className="relative flex h-[200px] items-end overflow-hidden rounded-lg">
+				<div className="relative flex h-[340px] items-start overflow-hidden rounded-lg">
 					<div
 						className="absolute inset-0"
 						style={{
@@ -78,22 +80,54 @@ export default async function UserView({
 						className="absolute -top-10 -left-10 w-48 h-48 rounded-full opacity-[0.08] blur-[60px]"
 						style={{ background: "var(--color-primary)" }}
 					/>
-					<div className="relative z-10 flex w-full items-end justify-between px-6 pb-2">
-						<Link
-							href={`/u/${username}`}
-							className="transition-transform duration-300 hover:scale-105 -mb-8"
-						>
-							<Image
-								src={avatarImageUrl(imager, look, { size: "l", direction: 2 })}
-								alt={username}
-								width={64}
-								height={110}
-								className="drop-shadow-2xl"
-								style={{ imageRendering: "pixelated" }}
-								unoptimized
-							/>
-						</Link>
-						<div className="flex items-center mb-4">
+					<div className="relative z-10 mx-auto mt-8 flex w-[95%] max-w-3xl items-center justify-between rounded-2xl px-8 py-6"
+						style={{
+							background: "linear-gradient(135deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.2) 100%)",
+							border: "2px solid var(--panel-border-color)",
+							boxShadow: "0 8px 32px rgba(0,0,0,0.3)",
+						}}
+					>
+						<div className="flex items-center gap-6">
+							<Link
+								href={`/u/${username}`}
+								className="transition-transform duration-300 hover:scale-105"
+							>
+								<div
+									className="rounded-full p-[3px]"
+									style={{
+										border: "3px solid var(--color-primary)",
+										boxShadow:
+											"0 0 24px color-mix(in srgb, var(--color-primary) 50%, transparent)",
+									}}
+								>
+									<Image
+										src={avatarImageUrl(imager, look, { size: "l", direction: 2 })}
+										alt={username}
+										width={110}
+										height={190}
+										className="drop-shadow-2xl"
+										style={{ imageRendering: "pixelated" }}
+										unoptimized
+									/>
+								</div>
+							</Link>
+							<div className="flex flex-col gap-1.5 rounded-xl px-4 py-2"
+								style={{
+									background: "linear-gradient(135deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.3) 100%)",
+								}}
+							>
+								<Link
+									href={`/u/${username}`}
+									className="text-2xl font-bold text-white drop-shadow-lg hover:underline"
+								>
+									{username}
+								</Link>
+								<p className="text-sm text-white/90 drop-shadow-md max-w-[240px] leading-tight">
+									{motto || "Welcome back!"}
+								</p>
+							</div>
+						</div>
+						<div className="flex items-center">
 							<Link
 								href="/client"
 								target="_blank"
@@ -144,7 +178,7 @@ export default async function UserView({
 				>
 					<div
 						className="relative flex items-center justify-center rounded p-2 text-sm font-semibold"
-						style={{ backgroundColor: "#e9b124" }}
+						style={{ backgroundColor: "var(--panel-border-color)" }}
 					>
 						<span className="relative text-white">{t("onlineFriends")}</span>
 					</div>

src/components/theme-vars.tsx

@@ -36,6 +36,7 @@ export async function ThemeVars() {
 		linkColor,
 		linkHover,
 		borderColor,
+		panelBorderColor,
 		gradientFrom,
 		gradientTo,
 		borderRadius,
@@ -75,6 +76,7 @@ export async function ThemeVars() {
 		g("link_color", "#eeb425"),
 		g("link_hover_color", "#cf9d15"),
 		g("border_color", "#eeb425"),
+		g("panel_border_color", "#e9b124"),
 		g("gradient_from", "#f59e0b"),
 		g("gradient_to", "#10b981"),
 		g("border_radius", "12"),
@@ -122,6 +124,7 @@ export async function ThemeVars() {
 		link_color: safe(linkColor, "#eeb425"),
 		link_hover_color: safe(linkHover, "#cf9d15"),
 		border_color: safe(borderColor, "#eeb425"),
+		panel_border_color: safe(panelBorderColor, "#e9b124"),
 		gradient_from: safe(gradientFrom, "#f59e0b"),
 		gradient_to: safe(gradientTo, "#10b981"),
 	} satisfies ThemePalette;