From 54c155bcefe4ed01aaba4a8e8e8980a9e20650f7 Mon Sep 17 00:00:00 2001 From: openhands Date: Sun, 26 Jul 2026 16:59:41 +0200 Subject: [PATCH] beautify /me page with decorative cards, hover effects, and consistent styling --- src/app/(site)/me/page.tsx | 577 ++++++++++++------------------------- 1 file changed, 177 insertions(+), 400 deletions(-) diff --git a/src/app/(site)/me/page.tsx b/src/app/(site)/me/page.tsx index ea02c398..52bf7767 100644 --- a/src/app/(site)/me/page.tsx +++ b/src/app/(site)/me/page.tsx @@ -226,7 +226,6 @@ export default async function MePage({ content = (
- {/* Feedback banners */} {claimed ? (
Woah! You have successfully claimed your reward — keep up the good work! @@ -238,353 +237,199 @@ export default async function MePage({
) : null} - {/* ── Profile header ── */} -
-
-
- {`${user.username} - - - Enter {hotelName} - -
-
-
- Rank {user.rank} +
+
+
+
+ + + + Enter {hotelName} + +
+
+
+ Rank {user.rank} +
+

+ {user.username} +

+

+ {user.motto || "No motto"} +

+
+ + Registered: {registered} + + + Last online: {lastOnlineDate} + +
-

- {user.username} -

-

- {user.motto || "No motto"} -

-
- {/* ── Hotel alert banner ── */} {alertRaw ? ( -
-

- {alertRaw} -

+
+

{alertRaw}

) : null} - {/* ── Stat tiles ── */} -
- {[ - { value: user.credits.toLocaleString(), label: "Credits" }, - { value: `Rank ${user.rank}`, label: "Hotel rank" }, - { value: (userSettings?.achievementScore ?? 0).toLocaleString(), label: "Achievement score" }, - { value: (userSettings?.respectsReceived ?? 0).toLocaleString(), label: "Respects received" }, - { value: friendCount.toLocaleString(), label: "Friends" }, - { value: lastLoginDate, label: "Last login" }, - ].map((s) => ( -
+
+ {[ + { value: user.credits.toLocaleString(), label: "Credits" }, + { value: `Rank ${user.rank}`, label: "Hotel rank" }, + { value: (userSettings?.achievementScore ?? 0).toLocaleString(), label: "Achievement score" }, + { value: (userSettings?.respectsReceived ?? 0).toLocaleString(), label: "Respects" }, + { value: friendCount.toLocaleString(), label: "Friends" }, + { value: lastLoginDate, label: "Last login" }, + ].map((s) => (
- {s.value} +
+ {s.value} +
+
+ {s.label} +
-
- {s.label} -
-
- ))} -
+ ))} +
- {/* ── Online friends ── */} -
-
-
-

- Online friends -

-

- {onlineFriends.length === 0 - ? "None of your friends are online right now" - : `${onlineFriends.length} of your ${friends.length} friends online`} -

+
+
+
+

Online friends

+

+ {onlineFriends.length === 0 ? "None of your friends are online right now" : `${onlineFriends.length} of your ${friends.length} friends online`} +

+
+ View all
- - View all - -
- {onlineFriends.length === 0 ? ( -
-

- No friends online right now. Check back later! -

-
- ) : ( -
- {onlineFriends.map((friend) => { - const avatar = avatarImageUrl(imager, friend.look, { - size: "s", - headOnly: true, - }); - return ( + {onlineFriends.length === 0 ? ( +
+

No friends online right now. Check back later!

+
+ ) : ( +
+ {onlineFriends.map((friend) => ( - {`${friend.username} +
-

- {friend.username} -

-

- {friend.motto || "No motto"} -

- - - Online +

{friend.username}

+

{friend.motto || "No motto"}

+ + Online
- ); - })} -
- )} -
- - - {/* ── Referral card ── */} - -
-
-

- Refer a friend ({referralTotal}/{needed}) -

-

- Refer new users and earn in-game rewards -

-
-
-

- {rewardAmount > 0 - ? `For every ${needed} users who register through your referral link you can claim a reward of ${rewardAmount.toLocaleString()} ${rewardCurrency}!` - : `Invite ${needed} users through your referral link to claim a reward!`} -

- -
- ⚠️ Boosting referrals by making your own accounts will lead to removal of all progress, currency, inventory and a potential ban. -
- -
- -
- - + ))}
-
- - {canClaim ? ( -
- -
- ) : ( - )}
-
- {/* ── Recent rooms ── */} + + +
+
+

Refer a friend ({referralTotal}/{needed})

+

Refer new users and earn in-game rewards

+
+
+

+ {rewardAmount > 0 + ? `For every ${needed} users who register through your referral link you can claim a reward of ${rewardAmount.toLocaleString()} ${rewardCurrency}!` + : `Invite ${needed} users through your referral link to claim a reward!`} +

+
+ Boosting referrals by making your own accounts will lead to removal of all progress, currency, inventory and a potential ban. +
+
+ +
+ + +
+
+ {canClaim ? ( +
+ +
+ ) : ( + + )} +
+
+ + {recentRooms.length > 0 && ( -
+
-

- Recent rooms -

-

- Newest rooms in the hotel -

+

Recent rooms

+

Newest rooms in the hotel

- - View all - + View all
{recentRooms.map((room) => ( - -

- {room.name} -

-

- {room.ownerName} · {room.users}/{room.usersMax} -

+

{room.name}

+

{room.ownerName} · {room.users}/{room.usersMax}

))}
@@ -594,35 +439,14 @@ export default async function MePage({ {badges.length > 0 && ( -
+
-

- Badges -

-

- {badges.length} badge{badges.length !== 1 ? "s" : ""} equipped -

+

Badges

+

{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped

{badges.map((badge) => ( - {badge.badgeCode} + {badge.badgeCode} ))}
@@ -630,74 +454,27 @@ export default async function MePage({ )} -
-
-

- Quick links -

-
+
+

Quick links

- - Messages - {unreadCount > 0 && ( - - {unreadCount > 99 ? "99+" : unreadCount} - - )} - - - My profile - - - Settings - - - Shop - + {[ + { href: "/messages", label: "Messages", badge: unreadCount }, + { href: `/u/${user.username}`, label: "My profile", badge: 0 }, + { href: "/settings", label: "Settings", badge: 0 }, + { href: "/shop", label: "Shop", badge: 0 }, + ].map((link) => ( + + {link.label} + {link.badge > 0 && ( + + {link.badge > 99 ? "99+" : link.badge} + + )} + + ))}