fix: extract room quick-entry form into Client Component to fix Server Component event handler error
- Move inline form with onSubmit handler from top-header.tsx (Server Component) into new RoomQuickEntry Client Component - Add badges section to /me page showing equipped badges from users_badges - Add last website login timestamp from website_login_logs to /me page stats - Add search bar to top-header for user search - Add achievement score, respects received, friend count stats to /me page - Add quick links card to /me page with Messages/Profile/Settings/Shop - Clean up RoomQuickEntry: use form.elements.namedItem, remove unused ref, add aria-label
This commit is contained in:
openhands committed
1 parent
29cd09e458
commit
0869b82f5f
3 files changed
+209
-35
No files matched your search
+148
-2
@@ -69,7 +69,9 @@ export default async function MePage({
|
||||
|
||||
let content: ReactNode;
|
||||
try {
|
||||
const [user, imagerBase, hotelName, neededRaw, amountRaw, currencyRaw, alertRaw, recentRooms] =
|
||||
const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
|
||||
|
||||
const [user, imagerBase, hotelName, neededRaw, amountRaw, currencyRaw, alertRaw, recentRooms, badges, lastWebLogin, userSettings, friendCount, unreadCount] =
|
||||
await Promise.all([
|
||||
prisma.user.findUnique({
|
||||
where: { id: userId },
|
||||
@@ -123,6 +125,34 @@ export default async function MePage({
|
||||
take: 6,
|
||||
})
|
||||
.catch(() => []),
|
||||
prisma.usersBadges
|
||||
.findMany({
|
||||
where: { userId, slotId: { gt: 0 } },
|
||||
orderBy: { slotId: "asc" },
|
||||
select: { badgeCode: true, slotId: true },
|
||||
})
|
||||
.catch(() => []),
|
||||
prisma.websiteLoginLogs
|
||||
.findFirst({
|
||||
where: { userId },
|
||||
orderBy: { id: "desc" },
|
||||
select: { createdAt: true },
|
||||
})
|
||||
.catch(() => null),
|
||||
prisma.usersSettings
|
||||
.findUnique({
|
||||
where: { userId },
|
||||
select: { achievementScore: true, respectsReceived: true },
|
||||
})
|
||||
.catch(() => null),
|
||||
prisma.messengerFriendships
|
||||
.count({
|
||||
where: { OR: [{ userOneId: userId }, { userTwoId: userId }] },
|
||||
})
|
||||
.catch(() => 0),
|
||||
prisma.messengerOffline
|
||||
.count({ where: { userId } })
|
||||
.catch(() => 0),
|
||||
]);
|
||||
|
||||
if (!user) throw new Error("user-not-found");
|
||||
@@ -182,6 +212,9 @@ export default async function MePage({
|
||||
const lastLoginDate = user.lastLogin
|
||||
? new Date(user.lastLogin * 1000).toISOString().slice(0, 10)
|
||||
: "Never";
|
||||
const lastWebLoginDate = lastWebLogin?.createdAt
|
||||
? new Date(lastWebLogin.createdAt).toISOString().slice(0, 10)
|
||||
: null;
|
||||
const lastOnlineDate = user.lastOnline
|
||||
? new Date(user.lastOnline * 1000).toISOString().slice(0, 10)
|
||||
: "Never";
|
||||
@@ -314,10 +347,13 @@ export default async function MePage({
|
||||
|
||||
{/* ── Stat tiles ── */}
|
||||
<Reveal delay={0.1}>
|
||||
<div className="grid grid-cols-3 gap-4 stagger-children">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 stagger-children">
|
||||
{[
|
||||
{ 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) => (
|
||||
<div
|
||||
@@ -578,6 +614,116 @@ export default async function MePage({
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
|
||||
{badges.length > 0 && (
|
||||
<Reveal delay={0.3}>
|
||||
<div
|
||||
className="rounded-2xl border p-5"
|
||||
style={{
|
||||
background: "var(--color-surface)",
|
||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
|
||||
}}
|
||||
>
|
||||
<div className="mb-4">
|
||||
<h2
|
||||
className="text-lg font-black tracking-tight"
|
||||
style={{ color: "var(--color-text-readable)" }}
|
||||
>
|
||||
Badges
|
||||
</h2>
|
||||
<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
|
||||
{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{badges.map((badge) => (
|
||||
<Image
|
||||
key={badge.badgeCode}
|
||||
src={`${BADGE_IMG_BASE}/${badge.badgeCode}.gif`}
|
||||
alt={badge.badgeCode}
|
||||
width={40}
|
||||
height={40}
|
||||
className="rounded-md"
|
||||
unoptimized
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
)}
|
||||
|
||||
<Reveal delay={0.35}>
|
||||
<div
|
||||
className="rounded-2xl border p-5"
|
||||
style={{
|
||||
background: "var(--color-surface)",
|
||||
borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
|
||||
}}
|
||||
>
|
||||
<div className="mb-4">
|
||||
<h2
|
||||
className="text-lg font-black tracking-tight"
|
||||
style={{ color: "var(--color-text-readable)" }}
|
||||
>
|
||||
Quick links
|
||||
</h2>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||
<Link
|
||||
href="/messages"
|
||||
className="relative flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
|
||||
style={{
|
||||
background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
|
||||
borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
|
||||
color: "var(--color-text-readable)",
|
||||
}}
|
||||
>
|
||||
Messages
|
||||
{unreadCount > 0 && (
|
||||
<span
|
||||
className="absolute -top-1.5 -right-1.5 flex min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none"
|
||||
style={{ background: "var(--color-danger)", color: "white" }}
|
||||
>
|
||||
{unreadCount > 99 ? "99+" : unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
<Link
|
||||
href={`/u/${user.username}`}
|
||||
className="flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
|
||||
style={{
|
||||
background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
|
||||
borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
|
||||
color: "var(--color-text-readable)",
|
||||
}}
|
||||
>
|
||||
My profile
|
||||
</Link>
|
||||
<Link
|
||||
href="/settings"
|
||||
className="flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
|
||||
style={{
|
||||
background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
|
||||
borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
|
||||
color: "var(--color-text-readable)",
|
||||
}}
|
||||
>
|
||||
Settings
|
||||
</Link>
|
||||
<Link
|
||||
href="/shop"
|
||||
className="flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
|
||||
style={{
|
||||
background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
|
||||
borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
|
||||
color: "var(--color-text-readable)",
|
||||
}}
|
||||
>
|
||||
Shop
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</Reveal>
|
||||
</div>
|
||||
);
|
||||
} catch {
|
||||
|
||||
Reference in new issue
Block a user