🆙 Updated infostand & userpofile now mobile friendly and cards as background

This commit is contained in:
duckietm
2026-06-02 15:12:51 +02:00
parent 76ec66932b
commit c9ac6806dd
5 changed files with 177 additions and 34 deletions
@@ -1,6 +1,6 @@
import { GroupInformationComposer, GroupInformationEvent, GroupInformationParser, HabboGroupEntryData } from '@nitrots/nitro-renderer';
import { FC, useEffect, useState } from 'react';
import { LocalizeText, SendMessageComposer, ToggleFavoriteGroup } from '../../api';
import { LocalizeText, SanitizeHtml, SendMessageComposer, ToggleFavoriteGroup } from '../../api';
import { Column, GridProps, LayoutBadgeImageView, LayoutGridItem } from '../../common';
import { useMessageEvent } from '../../hooks';
import { GroupInformationView } from '../groups/views/GroupInformationView';
@@ -68,9 +68,7 @@ export const GroupsContainerView: FC<GroupsContainerViewProps> = props =>
return (
<div className="nitro-extended-profile-groups">
<div className="nitro-extended-profile-groups__sidebar">
<div className="nitro-extended-profile-groups__count">
{ LocalizeText('extendedprofile.groups.count', [ 'count' ], [ groups.length.toString() ]) }
</div>
<div className="nitro-extended-profile-groups__count" dangerouslySetInnerHTML={ { __html: SanitizeHtml(LocalizeText('extendedprofile.groups.count', [ 'count' ], [ groups.length.toString() ])) } } />
<div className="nitro-extended-profile-groups__list">
{ groups.map((group, index) =>
{
@@ -1,6 +1,6 @@
import { CreateLinkEvent, GetSessionDataManager, RelationshipStatusInfoMessageParser, RequestFriendComposer, UserProfileParser } from '@nitrots/nitro-renderer';
import { FC, useEffect, useMemo, useState } from 'react';
import { FriendlyTime, LocalizeText, SendMessageComposer } from '../../api';
import { FriendlyTime, LocalizeText, SanitizeHtml, SendMessageComposer } from '../../api';
import { LayoutAvatarImageView, LayoutBadgeImageView, Text, UserIdentityView } from '../../common';
import { badgeEmblemDefault } from '../../assets/images/leaderboard_badge';
import { level as profileLevelIcon, rooms as profileRoomsIcon } from '../../assets/images/user-profile';
@@ -61,10 +61,10 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
username={ userProfile.username } />
<p className="nitro-extended-profile__motto">{ userProfile.motto || '\u00A0' }</p>
<p className="nitro-extended-profile__meta">
<b>{ LocalizeText('extendedprofile.created').replace(/%\w+%/g, '').trim() }</b> { userProfile.registration }
<span dangerouslySetInnerHTML={ { __html: SanitizeHtml(LocalizeText('extendedprofile.created').replace(/%\w+%/g, '').trim()) } } /> { userProfile.registration }
</p>
<p className="nitro-extended-profile__meta">
<b>{ LocalizeText('extendedprofile.last.login').replace(/%\w+%/g, '').trim() }</b> { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) }
<span dangerouslySetInnerHTML={ { __html: SanitizeHtml(LocalizeText('extendedprofile.last.login').replace(/%\w+%/g, '').trim()) } } /> { FriendlyTime.format(userProfile.secondsSinceLastVisit, '.ago', 2) }
</p>
<p className="nitro-extended-profile__meta nitro-extended-profile__meta--strong">
<b>{ LocalizeText('extendedprofile.achievementscore') }</b> { userProfile.achievementPoints }
@@ -117,11 +117,11 @@ export const UserContainerView: FC<UserContainerViewProps> = props =>
<p
className="text-sm leading-none"
dangerouslySetInnerHTML={{
__html: LocalizeText(
__html: SanitizeHtml(LocalizeText(
'extendedprofile.friends.count',
['count'],
[userProfile.friendsCount.toString()]
)
))
}}
/>
<p className="nitro-extended-profile__relationships-label">{ LocalizeText('extendedprofile.relstatus') }</p>
@@ -30,8 +30,6 @@ export const UserProfileView: FC<{}> = () =>
{
if(!userProfile) return;
// Open the navigator AND run the owner search (the composer alone never
// showed the navigator window, so the button looked dead).
CreateLinkEvent(`navigator/search/hotel_view/owner:${ userProfile.username }`);
};
@@ -100,12 +98,15 @@ export const UserProfileView: FC<{}> = () =>
if(!userProfile) return null;
const cardBackgroundId = userProfile.cardBackgroundId ?? 0;
const cardBackgroundClass = cardBackgroundId ? `profile-card-background card-background-${ cardBackgroundId }` : '';
return (
<NitroCard className="nitro-extended-profile-window w-[600px] h-[600px] max-w-[96vw] max-h-[92vh]" uniqueKey="nitro-user-profile">
<NitroCard className="nitro-extended-profile-window w-[640px] h-[720px] max-w-[96vw] max-h-[92vh]" uniqueKey="nitro-user-profile">
<NitroCard.Header
headerText={ LocalizeText('extendedprofile.caption') }
onCloseClick={ onClose } />
<NitroCard.Content className="nitro-extended-profile-window__content overflow-hidden !p-0 flex flex-col">
<NitroCard.Content className={ `nitro-extended-profile-window__content overflow-hidden !p-0 flex flex-col ${ cardBackgroundClass }` }>
<div className="px-[10px] pt-[8px]">
<UserContainerView
userBadges={ userBadges }