Feature - User tags (#104)

public/ui-config.json.example

@@ -11,6 +11,7 @@
     "widget.dimmer.colorwheel": false,
     "avatar.wardrobe.max.slots": 10,
     "user.badges.max.slots": 5,
+    "user.tags.enabled": false,
     "camera.publish.disabled": false,
     "hc.disabled": false,
     "badge.descriptions.enabled": true,

src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss

@@ -106,6 +106,22 @@
                 font-style: italic;
             }
         }
+
+        .flex-tags
+        {
+            flex-wrap: wrap;
+            margin-bottom: -10px;
+
+            .text-tags
+            {
+                padding: 2px;
+                border-radius: 3px;
+                background: #333;
+                margin-right: 5px;
+                margin-bottom: 10px;
+                cursor: pointer;
+            }
+        }
     }
 
     .button-container {

src/components/room/widgets/avatar-info/AvatarInfoWidgetView.tsx

@@ -1,6 +1,6 @@
 import { RoomEngineEvent, RoomEnterEffect, RoomSessionDanceEvent } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
-import { AvatarInfoFurni, AvatarInfoPet, AvatarInfoRentableBot, AvatarInfoUser, GetSessionDataManager, RoomWidgetUpdateRentableBotChatEvent } from '../../../../api';
+import { AvatarInfoFurni, AvatarInfoPet, AvatarInfoRentableBot, AvatarInfoUser, GetConfiguration, GetSessionDataManager, RoomWidgetUpdateRentableBotChatEvent } from '../../../../api';
 import { Column } from '../../../../common';
 import { useAvatarInfoWidget, useRoom, useRoomEngineEvent, useRoomSessionManagerEvent, useUiEvent } from '../../../../hooks';
 import { AvatarInfoRentableBotChatView } from './AvatarInfoRentableBotChatView';
@@ -67,6 +67,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
                 case AvatarInfoUser.OWN_USER:
                 case AvatarInfoUser.PEER: {
                     const info = (avatarInfo as AvatarInfoUser);
+                    if (GetConfiguration('user.tags.enabled')) GetSessionDataManager().getUserTags(info.roomIndex);
 
                     if(info.isSpectatorMode) return null;
 
@@ -111,7 +112,7 @@ export const AvatarInfoWidgetView: FC<{}> = props =>
             case AvatarInfoRentableBot.RENTABLE_BOT:
                 return <InfoStandWidgetRentableBotView avatarInfo={ (avatarInfo as AvatarInfoRentableBot) } onClose={ () => setAvatarInfo(null) } />;
             case AvatarInfoPet.PET_INFO:
-                return <InfoStandWidgetPetView avatarInfo={ (avatarInfo as AvatarInfoPet) } onClose={ () => setAvatarInfo(null) } /> 
+                return <InfoStandWidgetPetView avatarInfo={ (avatarInfo as AvatarInfoPet) } onClose={ () => setAvatarInfo(null) } />
         }
     }
 

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx

@@ -0,0 +1,31 @@
+import { NavigatorSearchComposer } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { CreateLinkEvent, SendMessageComposer } from '../../../../../api';
+import { Flex, Text } from '../../../../../common';
+
+interface InfoStandWidgetUserTagsViewProps
+{
+    tags: string[];
+}
+
+const processAction = (tag: string) =>
+{
+    CreateLinkEvent(`navigator/search/${ tag }`);
+    SendMessageComposer(new NavigatorSearchComposer('hotel_view', `tag:${ tag }`));
+}
+
+export const InfoStandWidgetUserTagsView: FC<InfoStandWidgetUserTagsViewProps> = props =>
+{
+    const { tags = null } = props;
+
+    if(!tags || !tags.length) return null;
+
+    return (
+        <>
+            <hr className="m-0" />
+            <Flex className="flex-tags">
+                { tags && (tags.length > 0) && tags.map((tag, index) => <Text key={ index } variant="white" className="text-tags" onClick={ event => processAction(tag) }>{ tag }</Text>) }
+            </Flex>
+        </>
+    );
+}

src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx

@@ -5,6 +5,7 @@ import { AvatarInfoUser, CloneObject, GetConfiguration, GetGroupInformation, Get
 import { Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text, UserProfileIconView } from '../../../../../common';
 import { useMessageEvent, useRoom, useRoomSessionManagerEvent } from '../../../../../hooks';
 import { InfoStandWidgetUserRelationshipsView } from './InfoStandWidgetUserRelationshipsView';
+import { InfoStandWidgetUserTagsView } from './InfoStandWidgetUserTagsView';
 
 interface InfoStandWidgetUserViewProps
 {
@@ -35,7 +36,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
     const onMottoKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
     {
         event.stopPropagation();
-        
+
         switch(event.key)
         {
             case 'Enter':
@@ -49,7 +50,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
         if(!avatarInfo || (avatarInfo.webID !== event.userId)) return;
 
         const oldBadges = avatarInfo.badges.join('');
-        
+
         if(oldBadges === event.badges.join('')) return;
 
         setAvatarInfo(prevValue =>
@@ -108,10 +109,10 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
     {
         setIsEditingMotto(false);
         setMotto(avatarInfo.motto);
-        
+
         SendMessageComposer(new UserRelationshipsComposer(avatarInfo.webID));
 
-        return () => 
+        return () =>
         {
             setIsEditingMotto(false);
             setMotto(null);
@@ -203,6 +204,11 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                 <Column gap={ 1 }>
                     <InfoStandWidgetUserRelationshipsView relationships={ relationships } />
                 </Column>
+                { GetConfiguration('user.tags.enabled') &&
+                    <Column gap={ 1 } className="mt-1">
+                        <InfoStandWidgetUserTagsView tags={ GetSessionDataManager().tags } />
+                    </Column>
+                }
             </Column>
         </Column>
     );