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/app/admin/theme/page.tsx

@@ -87,6 +87,12 @@ const COLOR_FIELDS: {
 		def: "#eeb425",
 		desc: "Borders, dividers, outlines",
 	},
+	{
+		key: "panel_border_color",
+		label: "Panel border",
+		def: "#e9b124",
+		desc: "Border color of home page panels and cards",
+	},
 	{
 		key: "color_success",
 		label: "Success",

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;

src/lib/theme-css.ts

@@ -31,6 +31,7 @@ const CSS_VARIABLES: Record<keyof ThemePalette, string> = {
 	link_color: "link-color",
 	link_hover_color: "link-hover-color",
 	border_color: "border-color",
+	panel_border_color: "panel-border-color",
 	gradient_from: "gradient-from",
 	gradient_to: "gradient-to",
 };

src/lib/theme-presets.ts

@@ -73,6 +73,7 @@ export const THEME_COLOR_KEYS = [
 	"link_color",
 	"link_hover_color",
 	"border_color",
+	"panel_border_color",
 	"gradient_from",
 	"gradient_to",
 ] as const;
@@ -364,6 +365,7 @@ const LIGHT_BASE: ThemePalette = {
 	link_color: "#b77900",
 	link_hover_color: "#8a5b00",
 	border_color: "#eeb425",
+	panel_border_color: "#e9b124",
 	gradient_from: "#f59e0b",
 	gradient_to: "#10b981",
 };
@@ -397,6 +399,8 @@ function brandValues(source: Partial<ThemePalette>): Partial<ThemePalette> {
 		color_info: source.color_info,
 		button_primary_color: source.button_primary_color ?? source.color_primary,
 		border_color: source.border_color ?? source.color_primary,
+		panel_border_color:
+			source.panel_border_color ?? source.border_color ?? source.color_primary,
 		gradient_from: source.color_primary,
 		gradient_to: source.color_accent,
 		button_outline_color: source.border_color ?? source.color_primary,
@@ -412,6 +416,8 @@ function completePalette(
 		values.button_secondary_color ?? merged.color_accent;
 	merged.button_outline_color =
 		values.button_outline_color ?? merged.border_color;
+	merged.panel_border_color =
+		values.panel_border_color ?? merged.border_color;
 	merged.gradient_from = values.gradient_from ?? merged.color_primary;
 	merged.gradient_to = values.gradient_to ?? merged.color_accent;
 	return merged;