From 79477ebadcb47436d268ab1e2a40cdecfcb12f49 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Tue, 2 May 2023 22:56:47 +0200
Subject: [PATCH 001/134] =?UTF-8?q?=F0=9F=92=84=20Make=20the=20wardrobe=20?=
 =?UTF-8?q?be=20more=20flash-alike?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/flash/wardrobe/hd.png              | Bin 0 -> 225 bytes
 src/assets/flash/wardrobe/head.png            | Bin 0 -> 330 bytes
 src/assets/flash/wardrobe/legs.png            | Bin 0 -> 231 bytes
 src/assets/flash/wardrobe/torso.png           | Bin 0 -> 247 bytes
 src/assets/flash/wardrobe/wardrobe.png        | Bin 0 -> 256 bytes
 .../avatar-editor/AvatarEditorView.scss       |  78 +++++++++++++++++-
 .../avatar-editor/AvatarEditorView.tsx        |  14 ++--
 .../views/AvatarEditorModelView.tsx           |   4 +-
 .../AvatarEditorFigureSetItemView.tsx         |  14 ++--
 9 files changed, 93 insertions(+), 17 deletions(-)
 create mode 100644 src/assets/flash/wardrobe/hd.png
 create mode 100644 src/assets/flash/wardrobe/head.png
 create mode 100644 src/assets/flash/wardrobe/legs.png
 create mode 100644 src/assets/flash/wardrobe/torso.png
 create mode 100644 src/assets/flash/wardrobe/wardrobe.png

diff --git a/src/assets/flash/wardrobe/hd.png b/src/assets/flash/wardrobe/hd.png
new file mode 100644
index 0000000000000000000000000000000000000000..307d6f799a28c8df46717d9f9c3f7e474c18f1f2
GIT binary patch
literal 225
zcmeAS@N?(olHy`uVBq!ia0vp^qChOh!VDzuu06#K5(w}Kadj{70W!ZGEeDbhXL|m5
z6T3!9yyMjMqd-1WNswPKg9C$q&k7)~($mE;q+(9(xzoHY20X5T{+x?n9ys+z*wTyf
zg9jsrxr4yp=?#a~a|EV|rx&Kq?0BKAH1FHbKWVb3pZXpDck#^GgzI}4o=)(H3b)Qa
zzIfHwX1{x9{)DHNJ!6?6yJ>yxnsv5sLv`=HZMdDfQ#Q%i=}2=hpXTq+=^IURSQX_u
UE|es%1v-Mk)78&qol`;+0Az|+#{d8T

literal 0
HcmV?d00001

diff --git a/src/assets/flash/wardrobe/head.png b/src/assets/flash/wardrobe/head.png
new file mode 100644
index 0000000000000000000000000000000000000000..977012d216225b6d6ff49e9841a7ff37cbcf94ad
GIT binary patch
literal 330
zcmV-Q0k!^#P)<h;3K|Lk000e1NJLTq001HY000&Q0{{R3SAtVY0000UP)t-sM{rC4
z007ByKGBU%0002;q+5_gAoaIxa5fyYS|^*Z;VS?D00MMUPE!Ct08fml0002lNkl<Z
zc${U>y$*sf5WsPKgeE=#e$E_1+)g}=GkPJcN-DDf*-Zy_b?|NNp{T^N&|m&d({r5H
zQsi`2uTK?G2bTVJ^`Kv1)(`No6%{da%J<~<Nk%2}h|}{4TbUd=<}yuUY!3}ej*}zb
zVc3cb(rm9kGJq=p%)$SYfWC6D64;MAP2e3EP%h8j%~;QXeMzQKBc1^4Y~tow1pBdW
zfD4<Lyf#FYY=J{`)Mjn=wW(he7BW1Frn%7zp|HT_q3$Ikjf$$O0l904YK>Ckd&Ksq
c*Z<7#2}<Bb6OT(al>h($07*qoM6N<$g0|p@-v9sr

literal 0
HcmV?d00001

diff --git a/src/assets/flash/wardrobe/legs.png b/src/assets/flash/wardrobe/legs.png
new file mode 100644
index 0000000000000000000000000000000000000000..5978a3af7891061e2070aae69b55a831b8ca0c15
GIT binary patch
literal 231
zcmeAS@N?(olHy`uVBq!ia0vp^qChOh!VDzuu06#Kq!a^uLR^8gdx4K_*K#1kq;k4J
ze$TA3sNGY`6@&7>9WBpvv)H$4haFIksU*lR*ny$#Rg*1{SM2HH7*a83?s;3T1_K_}
z2TkH1cp94)2mE;{cW`G_Ta);P3mYveSo5=!wsyQoYWwi<#02%0UCTrkmHEA1TWEZ{
zdhN2y*Mj_J*X&;}U>%XMv3i2Q0uQr`xfVRy&l!YHemc6!OYYN|KgN#^C;xeSI7a#W
bj?;W*;(AX{zGB!2w4TA!)z4*}Q$iB}^-)@=

literal 0
HcmV?d00001

diff --git a/src/assets/flash/wardrobe/torso.png b/src/assets/flash/wardrobe/torso.png
new file mode 100644
index 0000000000000000000000000000000000000000..a58918ba26e8d9d2ecfa5f5752dd3c34192584de
GIT binary patch
literal 247
zcmeAS@N?(olHy`uVBq!ia0vp^3P3Ez!VDyX%bUxAlxToYh^u>n50H60A^=Fft0}m6
z{^&weV;fz&O+Y?VNswPKg9C$q&k7)~-_yl0q+-s|3uk!`EAX%;gvTyeAuVD4+)PlC
zVeh@b2G$e*tgrlWIm=cl#BOJMlS4^qv&=%V%|4Hc&pq;<d^^}C?)RoVf&c4TCFNwC
z5;$_SH5z6vTp;?mfm5rBOJM87n$}rL@v=!W=iknn^z_EIBYc*T;oC1fzMSa&%`VQY
rUvk>N13Kvs=B-YY-5_7^?}_~DWd^S8&n**xPGj(N^>bP0l+XkKJWyIg

literal 0
HcmV?d00001

diff --git a/src/assets/flash/wardrobe/wardrobe.png b/src/assets/flash/wardrobe/wardrobe.png
new file mode 100644
index 0000000000000000000000000000000000000000..6913da7491b587a4d035a758cc8aba1e4bcb233c
GIT binary patch
literal 256
zcmeAS@N?(olHy`uVBq!ia0vp^T0ktv!VDx=uuZ%Sq=W)|LR^8gdw~y-JkcC^ZFBz8
zD9@6!2jqc#rjj7PU}J`+A1gS3yxE>Ejv*CuaxdNGZB^iDdwAVXL0aI8jzXS-@Q(im
z?1C%))Pz6r)XZf{6MOa0bG`OC%V~ZS1)7##zx(^M#Mgq~J~LmupSLo?^1Wl??qiY@
zESL_933*%h?)Z6l+S3&hH7j}+1-l8RiUdAuJ~e}1%xsN_No!=p(=!=H@!u|1?KL@h
zOD#KN@|3gNJ=ZJ7vd=C#^U3d~YOc+cSN7ST*thi<#iSkQcms4MgQu&X%Q~loCIEW)
BW7+@!

literal 0
HcmV?d00001

diff --git a/src/components/avatar-editor/AvatarEditorView.scss b/src/components/avatar-editor/AvatarEditorView.scss
index 2a042f5e4..05a497ef6 100644
--- a/src/components/avatar-editor/AvatarEditorView.scss
+++ b/src/components/avatar-editor/AvatarEditorView.scss
@@ -251,6 +251,10 @@
 .nitro-avatar-editor {
     width: $avatar-editor-width;
     height: $avatar-editor-height;
+    min-width: $avatar-editor-width;
+    min-height: $avatar-editor-height;
+    max-width: $avatar-editor-width;
+    max-height: $avatar-editor-height;
 
     .category-item {
         height: 40px;
@@ -309,7 +313,7 @@
 }
 
     .choose-clothing {
-        width: 298px;
+        width: 370px;
     }
 
     .color-picker-frame {
@@ -345,6 +349,40 @@
         position: relative;
         background-color: #1c3d4f !important;
 
+        .tab {
+            background-position-x: 0;
+            background-position-y: 0;
+            width: 34px;
+            height: 22px;
+        }
+
+        .hd {
+            background: url(@/assets/flash/wardrobe/hd.png) no-repeat center;
+        }
+
+        .head {
+            background: url(@/assets/flash/wardrobe/head.png) no-repeat center;
+        }
+
+        .torso {
+            background: url(@/assets/flash/wardrobe/torso.png) no-repeat center;
+        }
+
+        .legs {
+            background: url(@/assets/flash/wardrobe/legs.png) no-repeat center;
+        }
+
+        .tab-wardrobe {
+            width: 40px;
+            height: 28px;
+            background-size: 38px 28px;
+            background-image: url(@/assets/flash/wardrobe/wardrobe.png);
+            background-repeat: no-repeat;
+            background-position: center;
+            filter: contrast(1.2) brightness(1.05);
+        }
+
+
         .nav-tabs .nav-link {
             position: relative;
             border-image-source: url(@/assets/flash/boxes/card/tabs_avatareditor.png);
@@ -382,3 +420,41 @@
         border-image-slice: 6 6 6 6 fill;
         border-image-width: 6px 6px 6px 6px;
     }
+
+    .avatar-container {
+        padding: 3px;
+    }
+
+    .avatar-parts {
+        border: none !important;
+        height: 42px;
+        width: 42px;
+        background-position: center;
+        background-repeat: no-repeat;
+        border-radius: 2rem !important;
+        overflow: visible !important;
+        background-color: transparent;
+
+        &:hover {
+            box-shadow: 0 0 0 3px rgba(218, 218, 214, 0.76);
+            background-color: rgba(203, 201, 201, 0.58) !important;
+        }
+
+        &:active,
+        &.part-selected {
+            box-shadow: 0 0 0 3px #c5c3c0 !important;
+            background-color: #b1b1b1 !important;
+        }
+    }
+
+.avatar-parts-container {
+    height: 70%;
+}
+
+.avatar-color-palette-container {
+    height: 30%;
+}
+
+.action-buttons {
+    gap: 5px;
+}
diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index 33e28e4c5..4cdaa6dc8 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@@ -270,33 +270,31 @@ export const AvatarEditorView: FC<{}> = props =>
             <NitroCardTabsView className="avatar-editor-tabs">
                 { categories && (categories.size > 0) && Array.from(categories.keys()).map(category =>
                 {
+                    console.log(category)
                     const isActive = (activeCategory && (activeCategory.name === category));
 
                     return (
                         <NitroCardTabsItemView key={ category } isActive={ isActive } onClick={ event => selectCategory(category) }>
-                            { LocalizeText(`avatareditor.category.${ category }`) }
+                            <div className={`tab ${category}`}></div>
                         </NitroCardTabsItemView>
                     );
                 }) }
                 <NitroCardTabsItemView isActive={ isWardrobeVisible } onClick={ event => setIsWardrobeVisible(true) }>
-                    { LocalizeText('avatareditor.category.wardrobe') }
+                    <div className="tab-wardrobe"></div>
                 </NitroCardTabsItemView>
             </NitroCardTabsView>
             <NitroCardContentView>
                 <Grid>
-                    <Column size={ 6 } overflow="hidden">
+                    <Column size={ 7 } overflow="hidden">
                         { (activeCategory && !isWardrobeVisible) &&
                             <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } /> }
                         { isWardrobeVisible &&
                             <AvatarEditorWardrobeView figureData={ figureData } savedFigures={ savedFigures } setSavedFigures={ setSavedFigures } loadAvatarInEditor={ loadAvatarInEditor } /> }
                     </Column>
-                    <Column size={ 3 } overflow="hidden">
+                    <Column size={ 5 } overflow="hidden">
                         <AvatarEditorFigurePreviewView figureData={ figureData } />
-                        <Column className="randomize-container position-absolute">
-                            <i className="icon randomize-icon" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) } />
-                        </Column>
                         <Column grow gap={ 1 }>
-                            <ButtonGroup>
+                            <ButtonGroup className="action-buttons">
                                 <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
                                     <FaUndo className="fa-icon" />
                                 </Button>
diff --git a/src/components/avatar-editor/views/AvatarEditorModelView.tsx b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
index 237861753..b53e967b4 100644
--- a/src/components/avatar-editor/views/AvatarEditorModelView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
@@ -77,10 +77,10 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
                         );
                     }) }
                 </Flex>
-                <Column className="h-50" size={ 5 } overflow="hidden">
+                <Column className="avatar-parts-container" size={ 5 } overflow="hidden">
                     <AvatarEditorFigureSetView model={ model } category={ activeCategory } setMaxPaletteCount={ setMaxPaletteCount } />
                 </Column>
-                <Column size={ 5 } overflow="hidden" className="h-50">
+                <Column size={ 5 } overflow="hidden" className="avatar-color-palette-container">
                     { (maxPaletteCount >= 1) &&
                     <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(0) } paletteIndex={ 0 } /> }
                     { (maxPaletteCount === 2) &&
diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
index 2fcec3c7b..e96041378 100644
--- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetItemView.tsx
@@ -25,11 +25,13 @@ export const AvatarEditorFigureSetItemView: FC<AvatarEditorFigureSetItemViewProp
     }, [ partItem ]);
 
     return (
-        <LayoutGridItem itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } itemActive={ partItem.isSelected } { ...rest }>
-            { !hcDisabled && partItem.isHC && <i className="icon hc-icon position-absolute" /> }
-            { partItem.isClear && <AvatarEditorIcon icon="clear" /> }
-            { partItem.isSellable && <AvatarEditorIcon icon="sellable" position="absolute" className="end-1 bottom-1" /> }
-            { children }
-        </LayoutGridItem>
+        <div className="avatar-container">
+            <LayoutGridItem className={ `avatar-parts ${ partItem.isSelected ? 'part-selected' : '' }` } itemImage={ (partItem.isClear ? undefined : partItem.imageUrl) } { ...rest }>
+                { !hcDisabled && partItem.isHC && <i className="icon hc-icon position-absolute" /> }
+                { partItem.isClear && <AvatarEditorIcon icon="clear" /> }
+                { partItem.isSellable && <AvatarEditorIcon icon="sellable" position="absolute" className="end-1 bottom-1" /> }
+                { children }
+            </LayoutGridItem>
+        </div>
     );
 }

From db1971a165884f09166483bd02f005686d790787 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Thu, 4 May 2023 00:59:10 +0200
Subject: [PATCH 002/134] Design - Pet infostand

---
 src/assets/flash/infostand/pets/energy.png    | Bin 0 -> 263 bytes
 .../flash/infostand/pets/experience.png       | Bin 0 -> 230 bytes
 src/assets/flash/infostand/pets/happiness.png | Bin 0 -> 231 bytes
 src/assets/flash/infostand/pets/petting.png   | Bin 0 -> 228 bytes
 .../avatar-info/AvatarInfoWidgetView.scss     |  43 +++++++++++++
 .../infostand/InfoStandWidgetPetView.tsx      |  58 ++++++++++--------
 6 files changed, 74 insertions(+), 27 deletions(-)
 create mode 100644 src/assets/flash/infostand/pets/energy.png
 create mode 100644 src/assets/flash/infostand/pets/experience.png
 create mode 100644 src/assets/flash/infostand/pets/happiness.png
 create mode 100644 src/assets/flash/infostand/pets/petting.png

diff --git a/src/assets/flash/infostand/pets/energy.png b/src/assets/flash/infostand/pets/energy.png
new file mode 100644
index 0000000000000000000000000000000000000000..73de3159ec527a8c96ea7ca99136afc28f213906
GIT binary patch
literal 263
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+3?vf;>QaFeV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G~10G|-o|NsBHZ^-i4kmbH18z}bA^G6DhVl4^s3kFL4XZXF1FBmAmS>O>_
z%)r2R7=#&*=dS>%D)4l14ABVAoxsi4V!+{&_~!5VH-BdBIO$i?5}t9u@>)c1?&h!s
zISg+;De@F`{yKH+h<RXyz=pM|U+?^Jw9CK!*TzVrziN_#)~UCh`Jy)}Cu;xaIT(1`
zYvqe_#doh-&+IWis~Nv;LHt6-xhGjvU7zofh-6&KbK*t_&~64#S3j3^P6<r_hZSPe

literal 0
HcmV?d00001

diff --git a/src/assets/flash/infostand/pets/experience.png b/src/assets/flash/infostand/pets/experience.png
new file mode 100644
index 0000000000000000000000000000000000000000..6720f81ccbb3d784b3b666b6f6fa40f49a0ccd3a
GIT binary patch
literal 230
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+3?vf;>QaFeV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G}c0G|-o|NsBjq#OnE^e3#215(T-L4Lvi|1(@a#S2u+z**oCS<Jw|cNl~j
zkLRyQ0SbnDx;Tbt1eZ>5<YQ3eV2=Fv|HanJNj4e6jeHXqTwM{6<y3njK+)k)+l#me
z#~E8#m~X09ZTjtbS<LdTK=|RtbNW+u_)fc_QGHTj>UZ|m$Qz}4^B1>-l>Xmh!pN&<
Sa4{2T1%s!npUXO@geCwASWG7X

literal 0
HcmV?d00001

diff --git a/src/assets/flash/infostand/pets/happiness.png b/src/assets/flash/infostand/pets/happiness.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ff1a19af7d78bbce3ed998c3a352531cd139387
GIT binary patch
literal 231
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+3?vf;>QaFeV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G}c0G|-o|NsB{EZhy`HU5|R4y2e%g8YL2|7W;<iWjJsfwRCPvY3H^?=T26
z9?xHq0u+q!ba4#P2(F#L$ag@2<A}un`Yka#J$-t7S=Q}J)e~Z}34YW(O-rmPWAXDh
zOowN4$(&l`@O5G2t@}@X4hJt(Um5nZIyN!C<a4=Z!?EA3Z={meo<1MQ>^qZtMHR!}
U&g>=CKsy*bUHx3vIVCg!00)jwi~s-t

literal 0
HcmV?d00001

diff --git a/src/assets/flash/infostand/pets/petting.png b/src/assets/flash/infostand/pets/petting.png
new file mode 100644
index 0000000000000000000000000000000000000000..ec558e4f9895355c5b7069f30996f5e1f662a8ff
GIT binary patch
literal 228
zcmeAS@N?(olHy`uVBq!ia0vp@KrF<;3?#R2T>>N-7>k44ofy`glX(f`u%tWsIx;Y9
z?C1WI$O_~O1^9%x0_im>djHK_|35Q(-v{I|#K}F40#a-xL4LviL4aZN{w4c?BAf*t
zk;M!Qe1}1p@p%4<6riA|r;B5VMEKl3OTGgJJcpm$`1OCfw`%Y%kriq}cBzX}oOg(I
zo_^>hmZNC0$Y5zu`C^k`r?f@#WoPeN$A5npzsUNz|7!O$|IB_fJ}zcrSQ-8E0MJkd
MPgg&ebxsLQ055Y*K>z>%

literal 0
HcmV?d00001

diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
index 14ee7156c..75fd8fced 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
+++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
@@ -62,6 +62,49 @@
             cursor: pointer;
         }
 
+        .icon-petting {
+            background: url('@/assets/flash/infostand/pets/petting.png');
+            width: 13px;
+            height: 18px;
+            float: right;
+            margin-left: 4px;
+            margin-top: -4px;
+        }
+
+        .icon-happiness {
+            background: url('@/assets/flash/infostand/pets/happiness.png');
+            background-repeat: no-repeat;
+            width: 18px !important;
+            height: 18px;
+            margin-top: 16px;
+            margin-left: 3px;
+            z-index: 1;
+        }
+
+        .icon-experience {
+            background: url('@/assets/flash/infostand/pets/experience.png');
+            background-repeat: no-repeat;
+            width: 18px !important;
+            height: 18px;
+            margin-top: 16px;
+            margin-left: 3px;
+            z-index: 1;
+        }
+
+        .icon-energy {
+            background: url('@/assets/flash/infostand/pets/energy.png');
+            background-repeat: no-repeat;
+            width: 18px !important;
+            height: 18px;
+            margin-top: 16px;
+            margin-left: 3px;
+            z-index: 1;
+        }
+
+        .height-bar {
+            height: 17px;
+        }
+
         .body-image {
             display: flex;
             align-items: center;
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
index a70b739c5..5362120b1 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
@@ -1,8 +1,7 @@
 import { PetRespectComposer, PetType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import {FaPlus, FaTimes} from 'react-icons/fa';
-import { AvatarInfoPet, ConvertSeconds, CreateLinkEvent, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Base, Button, Column, Flex, LayoutCounterTimeView, LayoutPetImageView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../../common';
+import { AvatarInfoPet, CreateLinkEvent, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../../../api';
+import { Base, Column, Flex, LayoutPetImageView, Text } from '../../../../../common';
 import { useRoom, useSessionInfo } from '../../../../../hooks';
 
 interface InfoStandWidgetPetViewProps
@@ -78,62 +77,67 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
             <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
                 <Column gap={ 1 }>
                     <Flex alignItems="center" justifyContent="between" gap={ 1 }>
-                        <Text variant="white" small wrap>{ avatarInfo.name }</Text>
-                        <FaPlus className="fa-icon" onClick={ onClose } />
+                        &nbsp;
+                        <Text variant="white" center bold small wrap>{ avatarInfo.name }</Text>
+                        <Base className="infostand-close" onClick={ onClose } />
                     </Flex>
-                    <Text variant="white" small wrap>{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
-                    <hr className="m-0" />
+                    <Text variant="white" center small wrap>{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
                 </Column>
                 <Column gap={ 1 }>
-                    <Flex gap={ 1 }>
+                    <Flex justifyContent="between">
                         <Column fullWidth overflow="hidden" className="body-image pet p-1">
                             <LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
                         </Column>
+                        <Text variant="white" center small wrap className="px-2">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
+                    </Flex>
+                    <Flex gap={ 1 }>
                         <Column grow gap={ 1 }>
-                            <Text variant="white" center small wrap>{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
                             <Column alignItems="center" gap={ 1 }>
                                 <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
-                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
+                                <Flex fit position="absolute">
+                                    <Base className="icon-happiness" />
+                                </Flex>
+                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
                                     <Flex fit center position="absolute">
                                         <Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
                                     </Flex>
-                                    <Base className="bg-info rounded pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
+                                    <Base className="bg-info pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
                                 </Base>
                             </Column>
                             <Column alignItems="center" gap={ 1 }>
                                 <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
-                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
+                                <Flex fit position="absolute">
+                                    <Base className="icon-experience" />
+                                </Flex>
+                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
                                     <Flex fit center position="absolute">
                                         <Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
                                     </Flex>
-                                    <Base className="bg-purple rounded pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
+                                    <Base className="bg-purple pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
                                 </Base>
                             </Column>
                             <Column alignItems="center" gap={ 1 }>
                                 <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
-                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
+                                <Flex fit position="absolute">
+                                    <Base className="icon-energy" />
+                                </Flex>
+                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
                                     <Flex fit center position="absolute">
                                         <Text variant="white" small>{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }</Text>
                                     </Flex>
-                                    <Base className="bg-success rounded pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
+                                    <Base className="bg-success pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
                                 </Base>
                             </Column>
                         </Column>
                     </Flex>
-                    <hr className="m-0" />
                 </Column>
-                <Column gap={ 1 }>
-                    <Text variant="white" small wrap>{ LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }</Text>
+                <Column gap={ 1 } className="mt-4" alignItems="center" justifyContent="center">
+                    <Text variant="white" small wrap>
+                        { LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }
+                        <Base className="icon-petting" />
+                    </Text>
                     <Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
-                    <hr className="m-0" />
-                </Column>
-                <Column gap={ 1 }>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <UserProfileIconView userId={ avatarInfo.ownerId } />
-                        <Text variant="white" small wrap>
-                            { LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) }
-                        </Text>
-                    </Flex>
+                    <Text variant="white" small wrap>{ LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) }</Text>
                 </Column>
             </Column>
         </Column>

From 0420f93b659dec3efb8ebe6f6c7434eef44a6295 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Thu, 4 May 2023 01:22:33 +0200
Subject: [PATCH 003/134] =?UTF-8?q?=F0=9F=92=84=20Update=20the=20highscore?=
 =?UTF-8?q?=20wired=20popup=20to=20look=20more=20flash-a-like?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../furniture/FurnitureHighScoreView.tsx      | 70 ++++++++++---------
 .../widgets/furniture/FurnitureWidgets.scss   | 54 +++++++++++++-
 2 files changed, 89 insertions(+), 35 deletions(-)

diff --git a/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx b/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
index e8b3fa975..d5bb5b033 100644
--- a/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
@@ -19,39 +19,45 @@ export const FurnitureHighScoreView: FC<{}> = props =>
             {
                 return (
                     <ObjectLocationView key={ index } objectId={ objectId } category={ RoomObjectCategory.FLOOR }>
-                        <Column className="nitro-widget-high-score nitro-context-menu" gap={ 0 }>
-                            <ContextMenuHeaderView>
-                                { LocalizeText('high.score.display.caption', [ 'scoretype', 'cleartype' ], [ LocalizeText(`high.score.display.scoretype.${ getScoreType(stuffData.scoreType) }`), LocalizeText(`high.score.display.cleartype.${ getClearType(stuffData.clearType) }`) ]) }
-                            </ContextMenuHeaderView>
-                            <ContextMenuListView overflow="hidden" gap={ 1 } className="h-100">
-                                <Column gap={ 1 }>
-                                    <Flex alignItems="center">
-                                        <Text center bold variant="white" className="col-8">
-                                            { LocalizeText('high.score.display.users.header') }
-                                        </Text>
-                                        <Text center bold variant="white" className="col-4">
-                                            { LocalizeText('high.score.display.score.header') }
-                                        </Text>
+                        <div className="high-score-wired">
+                            <Column className="nitro-widget-high-score nitro-context-menu" gap={ 0 }>
+                                <ContextMenuHeaderView className="header">
+                                    <Flex alignItems="center" className="mt-1">
+                                        { LocalizeText('high.score.display.caption', [ 'scoretype', 'cleartype' ], [ LocalizeText(`high.score.display.scoretype.${ getScoreType(stuffData.scoreType) }`), LocalizeText(`high.score.display.cleartype.${ getClearType(stuffData.clearType) }`) ]) }
                                     </Flex>
-                                    <hr className="m-0" />
-                                </Column>
-                                <Column overflow="auto" gap={ 1 } className="overflow-y-scroll">
-                                    { stuffData.entries.map((entry, index) =>
-                                    {
-                                        return (
-                                            <Flex key={ index } alignItems="center">
-                                                <Text center variant="white" className="col-8">
-                                                    { entry.users.join(', ') }
-                                                </Text>
-                                                <Text center variant="white" className="col-4">
-                                                    { entry.score }
-                                                </Text>
-                                            </Flex>
-                                        );
-                                    }) }
-                                </Column>
-                            </ContextMenuListView>
-                        </Column>
+                                </ContextMenuHeaderView>
+                                <ContextMenuListView overflow="hidden" gap={ 1 } className="h-100 mt-2">
+                                    <Column gap={ 1 }>
+                                        <Flex alignItems="center">
+                                            <Text variant="black" className="col-8 section-border rounded p-1">
+                                                { LocalizeText('high.score.display.users.header') }
+                                            </Text>
+                                            <Text variant="black" className="col-4 align-right section-border rounded p-1">
+                                                { LocalizeText('high.score.display.score.header') }
+                                            </Text>
+                                        </Flex>
+                                    </Column>
+                                    <Column overflow="auto" gap={ 1 } className="overflow-y-scroll high-score-content">
+                                        { stuffData.entries.map((entry, index) =>
+                                        {
+                                            return (
+                                                <Flex key={ index } alignItems="center">
+                                                    <Text center className="col-8 score-color">
+                                                        { entry.users.join(', ') }
+                                                    </Text>
+                                                    <Text center className="col-4 score-color">
+                                                        { entry.score }
+                                                    </Text>
+                                                </Flex>
+                                            );
+                                        }) }
+                                    </Column>
+                                    <Text center className="score-footer mb-1">
+                                        { LocalizeText('high.score.footer.congratulations') }
+                                    </Text>
+                                </ContextMenuListView>
+                            </Column>
+                        </div>
                     </ObjectLocationView>
                 );
             }) }
diff --git a/src/components/room/widgets/furniture/FurnitureWidgets.scss b/src/components/room/widgets/furniture/FurnitureWidgets.scss
index 65b6559fc..277c22fcf 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgets.scss
+++ b/src/components/room/widgets/furniture/FurnitureWidgets.scss
@@ -291,9 +291,57 @@
 }
 
 .nitro-widget-high-score {
-    width: 250px;
-    max-width: 250px;
-    height: 200px;
+    width: 280px;
+    max-width: 280px;
+    height: 320px;
+    background-color: #bab8b4;
+    border-radius: 0.3rem;
+    border: solid 1px #000;
+
+    .header {
+        border-image-source: none !important;
+        background-color: #40403e;
+        border-radius: 0.3rem 0.3rem 0 0;
+    }
+
+    .align-right {
+        text-align: right;
+    }
+
+    .section-border {
+        border: solid 1px #8c8a88;
+    }
+
+    .high-score-content {
+        height: 100%;
+        background-color: #000;
+    }
+
+    .score-color {
+        color: #bab8b4;
+    }
+
+    .score-footer {
+        color: #9a9896;
+        font-weight: bold;
+    }
+}
+
+.high-score-wired {
+    .nitro-context-menu:not(.name-only)::after {
+        border-bottom: solid 1px #000;
+        border-right: solid 1px #000;
+        content: "";
+        width: 11px;
+        height: 9px;
+        bottom: -5px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        background-image: none !important;
+        background-color: #bab8b4;
+        transform: rotate(42deg);
+    }
 }
 
 .youtube-tv-widget {

From dab99bc415235a8c02484736e054c084ec65e800 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Thu, 4 May 2023 01:23:18 +0200
Subject: [PATCH 004/134] =?UTF-8?q?=F0=9F=92=84=20Correct=20border=20radiu?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/room/widgets/furniture/FurnitureWidgets.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/room/widgets/furniture/FurnitureWidgets.scss b/src/components/room/widgets/furniture/FurnitureWidgets.scss
index 277c22fcf..aa7a84d5b 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgets.scss
+++ b/src/components/room/widgets/furniture/FurnitureWidgets.scss
@@ -315,6 +315,7 @@
     .high-score-content {
         height: 100%;
         background-color: #000;
+        border-radius: 0.3rem;
     }
 
     .score-color {

From c563b52b92e7db18d7da6cfdd8b3e7ea4676779f Mon Sep 17 00:00:00 2001
From: TrippyFox <77913129+Habbobba@users.noreply.github.com>
Date: Thu, 4 May 2023 10:10:49 -0400
Subject: [PATCH 005/134] Fixed bot image positioning in catalogue.

From
https://i.ibb.co/zr6fLfg/1.png
to
https://i.ibb.co/1G4Y1z4/2.png
---
 src/components/catalog/CatalogView.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index ffb9369ed..021ecc445 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -14,7 +14,7 @@
     }
 
     .avatar-image {
-        background-position: -2px -34px !important;
+        background-position: -27px -37px!important;
     }
 
     .catalog-default-image {

From f50da2edf27de46e21a701fa73dc38b43af2c6cf Mon Sep 17 00:00:00 2001
From: TrippyFox <77913129+Habbobba@users.noreply.github.com>
Date: Thu, 4 May 2023 10:39:57 -0400
Subject: [PATCH 006/134] Fixed furni preview image positioning in the cata.

From
https://i.ibb.co/jLsT15S/1.png
to
https://i.ibb.co/0QxzPjx/2.png
---
 src/common/index.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/common/index.scss b/src/common/index.scss
index 9c96a7240..6ab141772 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -465,7 +465,6 @@
         width: 100%;
         background-color: $black;
         background-repeat: no-repeat;
-        background-position: center;
         overflow: hidden;
 
         &.border-0 {

From 5a69e388ae852d04dcfe9185f52d248007401fb5 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Thu, 4 May 2023 19:48:15 +0200
Subject: [PATCH 007/134] Add tooltip in Toolbar

---
 src/components/toolbar/ToolbarView.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index c9264428a..09b424f65 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -1,6 +1,6 @@
 import { Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
-import { CreateLinkEvent, GetConfiguration, GetSessionDataManager, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
+import { CreateLinkEvent, GetConfiguration, GetSessionDataManager, LocalizeText, MessengerIconState, OpenMessengerChat, VisitDesktop } from '../../api';
 import { Base, Flex, LayoutAvatarImageView, LayoutItemCountView, TransitionAnimation, TransitionAnimationTypes } from '../../common';
 import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useRoomEngineEvent, useSessionInfo } from '../../hooks';
 import { ToolbarMeView } from './ToolbarMeView';
@@ -78,31 +78,31 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
                         { leftSideCollapsed &&
                         <Flex gap={ 2 }>
                             { isInRoom &&
-                            <Base pointer className="navigation-item icon icon-habbo" onClick={ event => VisitDesktop() } /> }
+                            <Base pointer className="navigation-item icon icon-habbo" title={ LocalizeText('toolbar.icon.tooltip.exitroom.hotelview') } onClick={ event => VisitDesktop() } /> }
                             { !isInRoom &&
-                            <Base pointer className="navigation-item icon icon-house" onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
-                            <Base pointer className="navigation-item icon icon-rooms" onClick={ event => CreateLinkEvent('navigator/toggle') } />
-                            { GetConfiguration('game.center.enabled') && <Base pointer className="navigation-item icon icon-game" onClick={ event => CreateLinkEvent('games/toggle') } /> }
+                            <Base pointer className="navigation-item icon icon-house" title={ LocalizeText('toolbar.icon.tooltip.exitroom.home') } onClick={ event => CreateLinkEvent('navigator/goto/home') } /> }
+                            <Base pointer className="navigation-item icon icon-rooms" title={ LocalizeText('toolbar.icon.label.navigator') } onClick={ event => CreateLinkEvent('navigator/toggle') } />
+                            { GetConfiguration('game.center.enabled') && <Base pointer className="navigation-item icon icon-game" title={ LocalizeText('toolbar.icon.label.games') } onClick={ event => CreateLinkEvent('games/toggle') } /> }
                         </Flex> }
-                        <Base pointer className="navigation-item icon icon-catalog" onClick={ event => CreateLinkEvent('catalog/toggle') } />
-                        <Base pointer className="navigation-item icon icon-inventory" onClick={ event => CreateLinkEvent('inventory/toggle') }>
+                        <Base pointer className="navigation-item icon icon-catalog" title={ LocalizeText('tooltip.shop') } onClick={ event => CreateLinkEvent('catalog/toggle') } />
+                        <Base pointer className="navigation-item icon icon-inventory" title={ LocalizeText('toolbar.icon.label.inventory') } onClick={ event => CreateLinkEvent('inventory/toggle') }>
                             { (getFullCount > 0) &&
                                 <LayoutItemCountView count={ getFullCount } /> }
                         </Base>
-                        <Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } onClick={ event => setMeExpanded(!isMeExpanded) }>
+                        <Flex center pointer className={ 'navigation-item item-avatar ' + (isMeExpanded ? 'active ' : '') } title={ LocalizeText('toolbar.icon.label.memenu') } onClick={ event => setMeExpanded(!isMeExpanded) }>
                             <LayoutAvatarImageView figure={ userFigure } direction={ 2 } position="absolute" />
                             { (getTotalUnseen > 0) &&
                                 <LayoutItemCountView count={ getTotalUnseen } /> }
                         </Flex>
                         { isInRoom &&
-                            <Base pointer className="navigation-item icon icon-camera" onClick={ event => CreateLinkEvent('camera/toggle') } /> }
+                            <Base pointer className="navigation-item icon icon-camera" title={ LocalizeText('camera.interface.title') } onClick={ event => CreateLinkEvent('camera/toggle') } /> }
                         { isMod &&
                             <Base pointer className="navigation-item icon icon-modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
                     </Flex>
                 </Flex>
                 <Flex alignItems="center" gap={ 2 }>
                     <Flex gap={ 2 }>
-                        <Base pointer className="navigation-item icon icon-friendall" onClick={ event => CreateLinkEvent('friends/toggle') }>
+                        <Base pointer className="navigation-item icon icon-friendall" title={ LocalizeText('friend.bar.friends.title') } onClick={ event => CreateLinkEvent('friends/toggle') }>
                             { (requests.length > 0) &&
                                 <LayoutItemCountView count={ requests.length } /> }
                         </Base>

From 027060c3bb75e3a74003021d7e040398a70e9d9c Mon Sep 17 00:00:00 2001
From: Live <41640774+LiveZX@users.noreply.github.com>
Date: Thu, 4 May 2023 19:51:14 +0200
Subject: [PATCH 008/134] Update README

---
 README.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e3a3e01b8..33fd5450e 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,7 @@ Thanks to everyone that has helped out contributing to this UI:
 - Laynester
 - Dennis
 - Object
+- Habbobba
 
 # Nitro Client installation
 
@@ -70,5 +71,5 @@ To build a production version of Nitro just run the following command
 yarn build:prod
 ```
 
--   A `build` folder will be generated, these are the files that must be uploaded to your webserver
+-   A `dist` folder will be generated, these are the files that must be uploaded to your webserver
 -   Consult your CMS documentation for compatibility with Nitro and how to add the production files

From ed93dfb106dea391ac020281611643172cf75578 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Thu, 4 May 2023 20:41:06 +0200
Subject: [PATCH 009/134] Changed the order of categories in inventory

---
 src/components/inventory/InventoryView.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index 0df5e4a30..6c8d1d2be 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -1,6 +1,6 @@
 import { BadgePointLimitsEvent, ILinkEventTracker, IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { AddEventLinkTracker, GetLocalization, GetRoomEngine, isObjectMoverRequested, LocalizeText, RemoveLinkEventTracker, setObjectMoverRequested, UnseenItemCategory } from '../../api';
+import { AddEventLinkTracker, GetLocalization, GetRoomEngine, LocalizeText, RemoveLinkEventTracker, UnseenItemCategory, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useRoomEngineEvent, useRoomSessionManagerEvent } from '../../hooks';
 import { InventoryBadgeView } from './views/badge/InventoryBadgeView';
@@ -13,8 +13,8 @@ const TAB_FURNITURE: string = 'inventory.furni';
 const TAB_BOTS: string = 'inventory.bots';
 const TAB_PETS: string = 'inventory.furni.tab.pets';
 const TAB_BADGES: string = 'inventory.badges';
-const TABS = [ TAB_FURNITURE, TAB_BOTS, TAB_PETS, TAB_BADGES ];
-const UNSEEN_CATEGORIES = [ UnseenItemCategory.FURNI, UnseenItemCategory.BOT, UnseenItemCategory.PET, UnseenItemCategory.BADGE ];
+const TABS = [ TAB_FURNITURE, TAB_PETS, TAB_BADGES, TAB_BOTS ];
+const UNSEEN_CATEGORIES = [ UnseenItemCategory.FURNI, UnseenItemCategory.PET, UnseenItemCategory.BADGE, UnseenItemCategory.BOT ];
 
 export const InventoryView: FC<{}> = props =>
 {
@@ -135,12 +135,12 @@ export const InventoryView: FC<{}> = props =>
                     <NitroCardContentView>
                         { (currentTab === TAB_FURNITURE ) &&
                             <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
-                        { (currentTab === TAB_BOTS ) &&
-                            <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
                         { (currentTab === TAB_PETS ) && 
                             <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
                         { (currentTab === TAB_BADGES ) && 
                             <InventoryBadgeView /> }
+                        { (currentTab === TAB_BOTS ) &&
+                            <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
                     </NitroCardContentView>
                 </> }
             { isTrading &&

From 5d4eaa94456335d12e1ab8692cf4088f0d100276 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Thu, 4 May 2023 21:26:17 +0200
Subject: [PATCH 010/134] =?UTF-8?q?=F0=9F=92=84=20Finish=20wardrobe=20layo?=
 =?UTF-8?q?ut,=20so=20it=20now=20mimic=20flash?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.scss                                  |  4 +-
 src/common/layout/LayoutAvatarImageView.tsx   |  8 +-
 .../avatar-editor/AvatarEditorView.scss       | 60 ++++++++++---
 .../avatar-editor/AvatarEditorView.tsx        | 87 ++++++++++---------
 .../views/AvatarEditorWardrobeView.tsx        | 54 +++++++++---
 5 files changed, 143 insertions(+), 70 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 1fb9ec31b..79f7e8304 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -21,8 +21,8 @@ $toolbar-height: 55px;
 $achievement-width: 375px;
 $achievement-height: 405px;
 
-$avatar-editor-width: 660px;
-$avatar-editor-height: 470px;
+$avatar-editor-width: 500px;
+$avatar-editor-height: 520px;
 
 $catalog-width: 570px;
 $catalog-height: 635px;
diff --git a/src/common/layout/LayoutAvatarImageView.tsx b/src/common/layout/LayoutAvatarImageView.tsx
index d127bd993..51ee9a214 100644
--- a/src/common/layout/LayoutAvatarImageView.tsx
+++ b/src/common/layout/LayoutAvatarImageView.tsx
@@ -49,19 +49,19 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
     useEffect(() =>
     {
         const avatarImage = GetAvatarRenderManager().createAvatarImage(figure, AvatarScaleType.LARGE, gender, {
-            resetFigure: figure => 
+            resetFigure: figure =>
             {
                 if(isDisposed.current) return;
 
                 setRandomValue(Math.random());
             },
-            dispose: () => 
+            dispose: () =>
             {},
             disposed: false
         }, null);
 
         if(!avatarImage) return;
-        
+
         let setType = AvatarSetType.FULL;
 
         if(headOnly) setType = AvatarSetType.HEAD;
@@ -84,6 +84,6 @@ export const LayoutAvatarImageView: FC<LayoutAvatarImageViewProps> = props =>
             isDisposed.current = true;
         }
     }, []);
-        
+
     return <Base classNames={ getClassNames } style={ getStyle } { ...rest } />;
 }
diff --git a/src/components/avatar-editor/AvatarEditorView.scss b/src/components/avatar-editor/AvatarEditorView.scss
index 05a497ef6..7dd48de53 100644
--- a/src/components/avatar-editor/AvatarEditorView.scss
+++ b/src/components/avatar-editor/AvatarEditorView.scss
@@ -212,6 +212,48 @@
     }
 }
 
+.saved-outfit-container {
+    display: flex;
+    width: 100% !important;
+    height: 100%;
+
+    .avatar-image {
+        width: 30px !important;
+        z-index: 4;
+        transform: scale(0.4);
+    }
+
+    .nitro-avatar-editor-wardrobe-container {
+        background-color: #cacaca;
+        border-radius: 0.3rem;
+        border: solid 1px #000;
+        height: 100%;
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 10px;
+    }
+
+    .avatar-container {
+        height: 55px;
+        border-radius: 0.3rem;
+        background-color: #a7a6a2;
+        width: 30px;
+    }
+
+    .avatar-figure {
+        margin-top: -42px;
+        margin-left: -4px;
+    }
+
+    .saved-outfit-button {
+        margin-top: -3px;
+        background-color: transparent;
+        border: none;
+    }
+}
+
+
 .nitro-avatar-editor-wardrobe-figure-preview {
     border-image-source: url(@/assets/flash/avatareditor/wardrobe_user_bg.png);
     border-image-slice: 4 4 4 4 fill;
@@ -220,14 +262,6 @@
     overflow: hidden;
     z-index: 1;
 
-    .avatar-image {
-        position: absolute;
-        bottom: -15px;
-        margin: 0 auto;
-        z-index: 4;
-
-    }
-
     .avatar-shadow {
         position: absolute;
         left: 0;
@@ -249,7 +283,6 @@
 }
 
 .nitro-avatar-editor {
-    width: $avatar-editor-width;
     height: $avatar-editor-height;
     min-width: $avatar-editor-width;
     min-height: $avatar-editor-height;
@@ -312,6 +345,11 @@
     }
 }
 
+.nitro-avatar-editor.expanded {
+    max-width: $avatar-editor-width + 164px;
+    min-width: $avatar-editor-width + 164px;
+}
+
     .choose-clothing {
         width: 370px;
     }
@@ -436,8 +474,8 @@
         background-color: transparent;
 
         &:hover {
-            box-shadow: 0 0 0 3px rgba(218, 218, 214, 0.76);
-            background-color: rgba(203, 201, 201, 0.58) !important;
+            box-shadow: 0 0 0 3px #dbdad5 !important;
+            background-color: #cecdc8 !important;
         }
 
         &:active,
diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index 4cdaa6dc8..d9ffc6222 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@@ -2,7 +2,18 @@ import { AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessag
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { FaDice, FaTrash, FaUndo } from 'react-icons/fa';
 import { AddEventLinkTracker, AvatarEditorAction, AvatarEditorUtilities, BodyModel, FigureData, generateRandomFigure, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, HeadModel, IAvatarEditorCategoryModel, LegModel, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TorsoModel } from '../../api';
-import { Button, ButtonGroup, Column, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import {
+    Button,
+    ButtonGroup,
+    Column,
+    Flex,
+    Grid,
+    NitroCardContentView,
+    NitroCardHeaderView,
+    NitroCardTabsItemView,
+    NitroCardTabsView,
+    NitroCardView
+} from '../../common';
 import { useMessageEvent } from '../../hooks';
 import { AvatarEditorFigurePreviewView } from './views/AvatarEditorFigurePreviewView';
 import { AvatarEditorModelView } from './views/AvatarEditorModelView';
@@ -185,18 +196,8 @@ export const AvatarEditorView: FC<{}> = props =>
 
     useEffect(() =>
     {
-        if(!isWardrobeVisible) return;
-
-        setActiveCategory(null);
         SendMessageComposer(new GetWardrobeMessageComposer());
-    }, [ isWardrobeVisible ]);
-
-    useEffect(() =>
-    {
-        if(!activeCategory) return;
-
-        setIsWardrobeVisible(false);
-    }, [ activeCategory ]);
+    }, []);
 
     useEffect(() =>
     {
@@ -264,51 +265,59 @@ export const AvatarEditorView: FC<{}> = props =>
 
     if(!isVisible || !figureData) return null;
 
+    const avatarEditorClasses = `nitro-avatar-editor ${ isWardrobeVisible ? 'expanded' : '' }`;
+
     return (
-        <NitroCardView uniqueKey="avatar-editor" className="nitro-avatar-editor">
+        <NitroCardView uniqueKey="avatar-editor" className={ avatarEditorClasses }>
             <NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
             <NitroCardTabsView className="avatar-editor-tabs">
                 { categories && (categories.size > 0) && Array.from(categories.keys()).map(category =>
                 {
-                    console.log(category)
                     const isActive = (activeCategory && (activeCategory.name === category));
 
                     return (
                         <NitroCardTabsItemView key={ category } isActive={ isActive } onClick={ event => selectCategory(category) }>
-                            <div className={`tab ${category}`}></div>
+                            <div className={ `tab ${ category }` }></div>
                         </NitroCardTabsItemView>
                     );
                 }) }
-                <NitroCardTabsItemView isActive={ isWardrobeVisible } onClick={ event => setIsWardrobeVisible(true) }>
+                <NitroCardTabsItemView onClick={ event => setIsWardrobeVisible(!isWardrobeVisible) }>
                     <div className="tab-wardrobe"></div>
                 </NitroCardTabsItemView>
             </NitroCardTabsView>
             <NitroCardContentView>
                 <Grid>
-                    <Column size={ 7 } overflow="hidden">
-                        { (activeCategory && !isWardrobeVisible) &&
-                            <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } /> }
-                        { isWardrobeVisible &&
-                            <AvatarEditorWardrobeView figureData={ figureData } savedFigures={ savedFigures } setSavedFigures={ setSavedFigures } loadAvatarInEditor={ loadAvatarInEditor } /> }
+                    <Column size={ isWardrobeVisible ? 6 : 8 } overflow="hidden">
+                        { (activeCategory) &&
+                            <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } />
+                        }
                     </Column>
-                    <Column size={ 5 } overflow="hidden">
-                        <AvatarEditorFigurePreviewView figureData={ figureData } />
-                        <Column grow gap={ 1 }>
-                            <ButtonGroup className="action-buttons">
-                                <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
-                                    <FaUndo className="fa-icon" />
-                                </Button>
-                                <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
-                                    <FaTrash className="fa-icon" />
-                                </Button>
-                                <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
-                                    <FaDice className="fa-icon" />
-                                </Button>
-                            </ButtonGroup>
-                            <Button className="w-100" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
-                                { LocalizeText('avatareditor.save') }
-                            </Button>
-                        </Column>
+                    <Column size={ isWardrobeVisible ? 6 : 4 } overflow="hidden">
+                        <Flex gap={ 2 } className="w-100 h-100">
+                            <Flex column={ true } className="w-100">
+                                <AvatarEditorFigurePreviewView figureData={ figureData } />
+                                <Column grow gap={ 1 }>
+                                    <ButtonGroup className="action-buttons w-100">
+                                        <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
+                                            <FaUndo className="fa-icon" />
+                                        </Button>
+                                        <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
+                                            <FaTrash className="fa-icon" />
+                                        </Button>
+                                        <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
+                                            <FaDice className="fa-icon" />
+                                        </Button>
+                                    </ButtonGroup>
+                                    <Button className="w-10" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
+                                        { LocalizeText('avatareditor.save') }
+                                    </Button>
+                                </Column>
+                            </Flex>
+                            { isWardrobeVisible &&
+                                <Column overflow="hidden" className="w-100">
+                                    <AvatarEditorWardrobeView figureData={ figureData } savedFigures={ savedFigures } setSavedFigures={ setSavedFigures } loadAvatarInEditor={ loadAvatarInEditor } />
+                                </Column> }
+                        </Flex>
                     </Column>
                 </Grid>
             </NitroCardContentView>
diff --git a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
index e245bc1b2..82cf2ef40 100644
--- a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
@@ -1,7 +1,17 @@
 import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
 import { FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../api';
-import { AutoGrid, Base, Button, Flex, LayoutAvatarImageView, LayoutCurrencyIcon, LayoutGridItem } from '../../../common';
+import {
+    AutoGrid,
+    Base,
+    Button,
+    Column,
+    Flex,
+    LayoutAvatarImageView,
+    LayoutCurrencyIcon,
+    LayoutGridItem
+} from '../../../common';
+import {MdKeyboardArrowLeft, MdKeyboardArrowRight} from "react-icons/all";
 
 export interface AvatarEditorWardrobeViewProps
 {
@@ -54,17 +64,30 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
             if(figureContainer) clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender);
 
             items.push(
-                <LayoutGridItem key={ index } position="relative" overflow="hidden" className="nitro-avatar-editor-wardrobe-figure-preview">
-                    { figureContainer &&
-                    <LayoutAvatarImageView figure={ figureContainer.getFigureString() } gender={ gender } direction={ 2 } /> }
-                    <Base className="avatar-shadow" />
-                    { !hcDisabled && (clubLevel > 0) && <LayoutCurrencyIcon className="position-absolute top-1 start-1" type="hc" /> }
-                    <Flex gap={ 1 } className="button-container">
-                        <Button fullWidth onClick={ event => saveFigureAtWardrobeIndex(index) }>{ LocalizeText('avatareditor.wardrobe.save') }</Button>
-                        { figureContainer &&
-                        <Button fullWidth onClick={ event => wearFigureAtIndex(index) } disabled={ (clubLevel > GetClubMemberLevel()) }>{ LocalizeText('generic_usable.button.use') }</Button> }
+                <Flex key={ index } alignItems={ 'center' } justifyContent={ 'center' }>
+                    { !hcDisabled && clubLevel > 0 && (
+                        <LayoutCurrencyIcon className="position-absolute top-1 start-1" type="hc" />
+                    ) }
+                    <Flex gap={ 1 } column={ true } className="button-container">
+                        <button className="saved-outfit-button" onClick={ event => saveFigureAtWardrobeIndex(index) }>
+                            <MdKeyboardArrowRight />
+                        </button>
+                        { figureContainer && (
+                            <button
+                                className="saved-outfit-button"
+                                onClick={ event => wearFigureAtIndex(index) }
+                                disabled={ clubLevel > GetClubMemberLevel() }
+                            >
+                                <MdKeyboardArrowLeft />
+                            </button>
+                        ) }
                     </Flex>
-                </LayoutGridItem>
+                    <div className="avatar-container">
+                        { figureContainer && (
+                            <LayoutAvatarImageView className="avatar-figure" figure={ figureContainer.getFigureString() } gender={ gender } direction={ 4 } />
+                        ) }
+                    </div>
+                </Flex>
             );
         });
 
@@ -72,8 +95,11 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     }, [ savedFigures, hcDisabled, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
 
     return (
-        <AutoGrid columnCount={ 5 } columnMinWidth={ 80 } columnMinHeight={ 140 }>
-            { figures }
-        </AutoGrid>
+        <div className="saved-outfit-container">
+            <div className="nitro-avatar-editor-wardrobe-container">
+                { figures }
+            </div>
+        </div>
+
     );
 }

From 681e38337c532981faba1f8dd72e1b19a1526ea4 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Thu, 4 May 2023 21:48:10 +0200
Subject: [PATCH 011/134] Infostand user - Updated design like Habbo

---
 .../avatar-info/AvatarInfoWidgetView.scss     |  6 +++++
 .../infostand/InfoStandWidgetUserTagsView.tsx |  1 -
 .../infostand/InfoStandWidgetUserView.tsx     | 22 ++++++++-----------
 3 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
index 75fd8fced..12c7c8617 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
+++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
@@ -148,6 +148,11 @@
         .motto-content {
             min-height: 18px;
             font-family: Goldfish;
+            cursor: text;
+        }
+
+        .color-motto {
+            color: #9EA39D;
         }
 
         .motto-input {
@@ -165,6 +170,7 @@
 
             &:focus {
                 font-style: italic;
+                color: #9EA39D;
             }
         }
 
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx
index b5fc7036b..6478008b9 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserTagsView.tsx
@@ -22,7 +22,6 @@ export const InfoStandWidgetUserTagsView: FC<InfoStandWidgetUserTagsViewProps> =
 
     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>
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
index 3dab95bb3..d9c4a948f 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetUserView.tsx
@@ -1,6 +1,5 @@
 import { RelationshipStatusInfoEvent, RelationshipStatusInfoMessageParser, RoomSessionFavoriteGroupUpdateEvent, RoomSessionUserBadgesEvent, RoomSessionUserFigureUpdateEvent, UserRelationshipsComposer } from '@nitrots/nitro-renderer';
-import { Dispatch, FC, FocusEvent, KeyboardEvent, SetStateAction, useEffect, useState } from 'react';
-import { FaPencilAlt, FaTimes } from 'react-icons/fa';
+import { Dispatch, FC, KeyboardEvent, SetStateAction, useEffect, useState } from 'react';
 import { AvatarInfoUser, CloneObject, GetConfiguration, GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, SendMessageComposer } from '../../../../../api';
 import { Base, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, Text } from '../../../../../common';
 import { useMessageEvent, useRoom, useRoomSessionManagerEvent } from '../../../../../hooks';
@@ -31,8 +30,6 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
         setIsEditingMotto(false);
     }
 
-    const onMottoBlur = (event: FocusEvent<HTMLInputElement>) => saveMotto(event.target.value);
-
     const onMottoKeyDown = (event: KeyboardEvent<HTMLInputElement>) =>
     {
         event.stopPropagation();
@@ -129,9 +126,9 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                     <Flex alignItems="center" justifyContent="between">
                         <Flex alignItems="center" gap={ 1 }>
                             <i className="icon icon-profile-house cursor-pointer" onClick={ event => GetUserProfile(avatarInfo.webID) }/>
-                            <Text gfbold variant="white" className="infostand-name" onClick={ event => GetUserProfile(avatarInfo.webID) }>{ avatarInfo.name }</Text>
+                            <Text gfbold variant="white" className="infostand-name" title={ LocalizeText('guide.help.common.profile.tooltip') } onClick={ event => GetUserProfile(avatarInfo.webID) }>{ avatarInfo.name }</Text>
                         </Flex>
-                        <FaTimes className="cursor-pointer fa-icon" onClick={ onClose } />
+                        <Base className="infostand-close" onClick={ onClose } />
                     </Flex>
                     <hr className="m-0" />
                 </Column>
@@ -178,21 +175,20 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                             </Flex> }
                         { avatarInfo.type === AvatarInfoUser.OWN_USER &&
                             <Flex grow alignItems="center" gap={ 2 }>
-                                <FaPencilAlt className="small fa-icon" />
+                                <Base className="icon pencil-icon" />
                                 <Flex grow alignItems="center" className="motto-content">
                                     { !isEditingMotto &&
-                                        <Text fullWidth pointer wrap textBreak variant="white" onClick={ event => setIsEditingMotto(true) }>{ motto }&nbsp;</Text> }
+                                        <Text fullWidth wrap textBreak className={ motto?.length === 0 ? 'color-motto' : 'text-white' } onClick={ event => setIsEditingMotto(true) }>{ motto?.length === 0 ? LocalizeText('infostand.motto.change') : motto }&nbsp;</Text> }
                                     { isEditingMotto &&
-                                        <input type="text" className="motto-input" maxLength={ GetConfiguration<number>('motto.max.length', 38) } value={ motto } onChange={ event => setMotto(event.target.value) } onBlur={ onMottoBlur } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
+                                        <input type="text" className="motto-input" maxLength={ GetConfiguration<number>('motto.max.length', 38) } value={ motto } onChange={ event => setMotto(event.target.value) } onKeyDown={ onMottoKeyDown } autoFocus={ true } /> }
                                 </Flex>
                             </Flex> }
                     </Flex>
                     <hr className="m-0" />
                 </Column>
                 <Column gap={ 1 }>
-                    <Text gfbold variant="white" wrap>
-                        { LocalizeText('infostand.text.achievement_score') + ' ' + avatarInfo.achievementScore }
-                    </Text>
+                    <Text gfbold variant="white" wrap>{ LocalizeText('infostand.text.achievement_score') }</Text>
+                    <Text gfbold variant="white" wrap className="mt-1">{ avatarInfo.achievementScore }</Text>
                     { (avatarInfo.carryItem > 0) &&
                         <>
                             <hr className="m-0" />
@@ -201,7 +197,7 @@ export const InfoStandWidgetUserView: FC<InfoStandWidgetUserViewProps> = props =
                             </Text>
                         </> }
                 </Column>
-                <Column gap={ 1 }>
+                <Column gap={ 1 } className="mt-1">
                     <InfoStandWidgetUserRelationshipsView relationships={ relationships } />
                 </Column>
                 { GetConfiguration('user.tags.enabled') &&

From df0a32cb45861b3d7e2ea4616b02873802165bc3 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Thu, 4 May 2023 23:48:47 +0200
Subject: [PATCH 012/134] Avatar info - Removed arrows in context menu

---
 .../menu/AvatarInfoWidgetAvatarView.tsx           | 15 +--------------
 .../menu/AvatarInfoWidgetOwnAvatarView.tsx        | 10 +---------
 2 files changed, 2 insertions(+), 23 deletions(-)

diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetAvatarView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetAvatarView.tsx
index efb75f505..76e09d7e2 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetAvatarView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetAvatarView.tsx
@@ -1,6 +1,5 @@
 import { RoomControllerLevel, RoomObjectCategory, RoomObjectVariable, RoomUnitGiveHandItemComposer, SetRelationshipStatusComposer, TradingOpenComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { AvatarInfoUser, CreateLinkEvent, DispatchUiEvent, GetOwnRoomObject, GetSessionDataManager, GetUserProfile, LocalizeText, MessengerFriend, ReportType, RoomWidgetUpdateChatInputContentEvent, SendMessageComposer } from '../../../../../api';
 import { Base, Flex } from '../../../../../common';
 import { useFriends, useHelp, useRoom, useSessionInfo } from '../../../../../hooks';
@@ -203,7 +202,7 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
 
     return (
         <ContextMenuView objectId={ avatarInfo.roomIndex } category={ RoomObjectCategory.UNIT } userType={ avatarInfo.userType } onClose={ onClose } collapsable={ true }>
-            <ContextMenuHeaderView className="cursor-pointer" onClick={ event => GetUserProfile(avatarInfo.webID) }>
+            <ContextMenuHeaderView className="cursor-pointer" title={ LocalizeText('guide.help.common.profile.tooltip') } onClick={ event => GetUserProfile(avatarInfo.webID) }>
                 { avatarInfo.name }
             </ContextMenuHeaderView>
             { (mode === MODE_NORMAL) &&
@@ -225,7 +224,6 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                     { !canRequestFriend(avatarInfo.webID) &&
                         <ContextMenuListItemView onClick={ event => processAction('relationship') }>
                             { LocalizeText('infostand.link.relationship') }
-                            <FaChevronRight className="right fa-icon" />
                         </ContextMenuListItemView> }
                     { !avatarInfo.isIgnored &&
                         <ContextMenuListItemView onClick={ event => processAction('ignore') }>
@@ -240,12 +238,10 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                     </ContextMenuListItemView>
                     { moderateMenuHasContent &&
                         <ContextMenuListItemView onClick={ event => processAction('moderate') }>
-                            <FaChevronRight className="right fa-icon" />
                             { LocalizeText('infostand.link.moderate') }
                         </ContextMenuListItemView> }
                     { avatarInfo.isAmbassador &&
                         <ContextMenuListItemView onClick={ event => processAction('ambassador') }>
-                            <FaChevronRight className="right fa-icon" />
                             { LocalizeText('infostand.link.ambassador') }
                         </ContextMenuListItemView> }
                     { canGiveHandItem && <ContextMenuListItemView onClick={ event => processAction('pass_hand_item') }>
@@ -258,11 +254,9 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.kick') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('mute') }>
-                        <FaChevronRight className="right fa-icon" />
                         { LocalizeText('infostand.button.mute') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('ban') }>
-                        <FaChevronRight className="right fa-icon" />
                         { LocalizeText('infostand.button.ban') }
                     </ContextMenuListItemView>
                     { isShowGiveRights &&
@@ -274,7 +268,6 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                             { LocalizeText('infostand.button.removerights') }
                         </ContextMenuListItemView> }
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <FaChevronLeft className="left fa-icon" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -290,7 +283,6 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.perm_ban') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back_moderate') }>
-                        <FaChevronLeft className="left fa-icon" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -306,7 +298,6 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.mute_10min') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back_moderate') }>
-                        <FaChevronLeft className="left fa-icon" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -320,10 +311,8 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('ambassador_mute') }>
                         { LocalizeText('infostand.button.mute') }
-                        <FaChevronRight className="right fa-icon" />
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <FaChevronLeft className="left fa-icon" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -342,7 +331,6 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('infostand.button.mute_18hour') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back_ambassador') }>
-                        <FaChevronLeft className="left fa-icon" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
@@ -363,7 +351,6 @@ export const AvatarInfoWidgetAvatarView: FC<AvatarInfoWidgetAvatarViewProps> = p
                         { LocalizeText('avatar.widget.clear_relationship') }
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
-                        <FaChevronLeft className="left fa-icon" />
                         { LocalizeText('generic.back') }
                     </ContextMenuListItemView>
                 </> }
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
index cf24b8203..600e365d0 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
@@ -1,6 +1,5 @@
 import { AvatarAction, AvatarExpressionEnum, RoomControllerLevel, RoomObjectCategory, RoomUnitDropHandItemComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useState } from 'react';
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { AvatarInfoUser, CreateLinkEvent, DispatchUiEvent, GetCanStandUp, GetCanUseExpression, GetOwnPosture, GetUserProfile, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, PostureTypeEnum, SendMessageComposer } from '../../../../../api';
 import { Column, Flex, LayoutCurrencyIcon } from '../../../../../common';
 import { HelpNameChangeEvent } from '../../../../../events';
@@ -117,7 +116,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
     return (
         <ContextMenuView objectId={ avatarInfo.roomIndex } category={ RoomObjectCategory.UNIT } userType={ avatarInfo.userType } onClose={ onClose } collapsable={ true }>
 
-            <ContextMenuHeaderView className="cursor-pointer" onClick={ event => GetUserProfile(avatarInfo.webID) }>
+            <ContextMenuHeaderView className="cursor-pointer" title={ LocalizeText('guide.help.common.profile.tooltip') } onClick={ event => GetUserProfile(avatarInfo.webID) }>
                 { avatarInfo.name }
             </ContextMenuHeaderView>
             { !hide && (
@@ -139,14 +138,12 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('dance_menu') }>
                             <Flex gap={ 1 }>
                                 { LocalizeText('widget.memenu.dance') }
-                                <i className="icon icon-context-arrow-right mt-auto mb-auto"/>
                             </Flex>
                         </ContextMenuListItemView> }
                     { (!isDancing && !HasHabboClub() && !isRidingHorse) &&
                         <ContextMenuListItemView onClick={ event => processAction('dance') }>
                             <Flex gap={ 1 }>
                                 { LocalizeText('widget.memenu.dance') }
-                                <i className="icon icon-context-arrow-right mt-auto mb-auto"/>
                             </Flex>
                         </ContextMenuListItemView> }
                     { (isDancing && !HasHabboClub() && !isRidingHorse) &&
@@ -156,13 +153,11 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                     <ContextMenuListItemView onClick={ event => processAction('expressions') }>
                         <Flex gap={ 1 }>
                             { LocalizeText('infostand.link.expressions') }
-                            <i className="icon icon-context-arrow-right mt-auto mb-auto"/>
                         </Flex>
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('signs') }>
                         <Flex gap={ 1 }>
                             { LocalizeText('infostand.show.signs') }
-                            <i className="icon icon-context-arrow-right mt-auto mb-auto"/>
                         </Flex>
                     </ContextMenuListItemView>
                     { (avatarInfo.carryItem > 0) &&
@@ -190,7 +185,6 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
                         <Flex gap={ 1 }>
-                            <i className="icon icon-context-arrow-left mt-auto mb-auto"/>
                             { LocalizeText('generic.back') }
                         </Flex>
                     </ContextMenuListItemView>
@@ -224,7 +218,6 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                     </ContextMenuListItemView>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
                         <Flex gap={ 1 }>
-                            <i className="icon icon-context-arrow-left mt-auto mb-auto"/>
                             { LocalizeText('generic.back') }
                         </Flex>
                     </ContextMenuListItemView>
@@ -299,7 +292,6 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                     </Flex>
                     <ContextMenuListItemView onClick={ event => processAction('back') }>
                         <Flex gap={ 1 }>
-                            <i className="icon icon-context-arrow-left mt-auto mb-auto"/>
                             { LocalizeText('generic.back') }
                         </Flex>
                     </ContextMenuListItemView>

From 416d65e1b7ec827f879590ae75ff3aa0348bc8ee Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Fri, 5 May 2023 00:02:53 +0200
Subject: [PATCH 013/134] =?UTF-8?q?=F0=9F=92=84=20Fix=20misplaced=20HC=20i?=
 =?UTF-8?q?con=20within=20wardrobe=20&=20add=20hover=20effect=20to=20categ?=
 =?UTF-8?q?ory=20tabs?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../avatar-editor/AvatarEditorView.scss       | 15 +++++-
 .../views/AvatarEditorWardrobeView.tsx        | 46 +++++++++++++++----
 2 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/components/avatar-editor/AvatarEditorView.scss b/src/components/avatar-editor/AvatarEditorView.scss
index 7dd48de53..f399f6970 100644
--- a/src/components/avatar-editor/AvatarEditorView.scss
+++ b/src/components/avatar-editor/AvatarEditorView.scss
@@ -212,10 +212,15 @@
     }
 }
 
+.saved-outfits-title {
+    color: #a7a6a2;
+    font-weight: bold;
+}
+
 .saved-outfit-container {
     display: flex;
     width: 100% !important;
-    height: 100%;
+    height: 91.5%;
 
     .avatar-image {
         width: 30px !important;
@@ -232,10 +237,11 @@
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-gap: 10px;
+        padding: 10px 0;
     }
 
     .avatar-container {
-        height: 55px;
+        height: 50px;
         border-radius: 0.3rem;
         background-color: #a7a6a2;
         width: 30px;
@@ -430,8 +436,13 @@
             border-image-repeat: repeat repeat;
             margin-bottom: -2px;
             margin-left: -2px;
+
+            &:hover {
+                border-image-source: url(@/assets/flash/boxes/card/tabs_active.png);
+            }
         }
 
+
         .nav-tabs .nav-link.active {
             border-image-source: url(@/assets/flash/boxes/card/tabs_active.png);
         }
diff --git a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
index 82cf2ef40..28d076c6d 100644
--- a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
@@ -11,7 +11,7 @@ import {
     LayoutCurrencyIcon,
     LayoutGridItem
 } from '../../../common';
-import {MdKeyboardArrowLeft, MdKeyboardArrowRight} from "react-icons/all";
+import { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/all';
 
 export interface AvatarEditorWardrobeViewProps
 {
@@ -51,6 +51,22 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
         SendMessageComposer(new SaveWardrobeOutfitMessageComposer((index + 1), figure, gender));
     }, [ figureData, savedFigures, setSavedFigures ]);
 
+    const getClubLevel = useCallback(() =>
+    {
+        let highestClubLevel = 0;
+
+        savedFigures.forEach(([ figureContainer, gender ]) =>
+        {
+            if (figureContainer)
+            {
+                const clubLevel = GetAvatarRenderManager().getFigureClubLevel(figureContainer, gender);
+                highestClubLevel = Math.max(highestClubLevel, clubLevel);
+            }
+        });
+
+        return highestClubLevel;
+    }, [ savedFigures ]);
+
     const figures = useMemo(() =>
     {
         if(!savedFigures || !savedFigures.length) return [];
@@ -65,11 +81,11 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
 
             items.push(
                 <Flex key={ index } alignItems={ 'center' } justifyContent={ 'center' }>
-                    { !hcDisabled && clubLevel > 0 && (
-                        <LayoutCurrencyIcon className="position-absolute top-1 start-1" type="hc" />
-                    ) }
                     <Flex gap={ 1 } column={ true } className="button-container">
-                        <button className="saved-outfit-button" onClick={ event => saveFigureAtWardrobeIndex(index) }>
+                        <button
+                            className="saved-outfit-button"
+                            onClick={ event => saveFigureAtWardrobeIndex(index) }
+                            disabled={ clubLevel > GetClubMemberLevel() }>
                             <MdKeyboardArrowRight />
                         </button>
                         { figureContainer && (
@@ -92,14 +108,24 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
         });
 
         return items;
-    }, [ savedFigures, hcDisabled, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
+    }, [ savedFigures, saveFigureAtWardrobeIndex, wearFigureAtIndex ]);
 
     return (
-        <div className="saved-outfit-container">
-            <div className="nitro-avatar-editor-wardrobe-container">
-                { figures }
+        <div>
+            <div className="d-flex flex-column align-items-center">
+                <span className="saved-outfits-title">
+                    { LocalizeText('wardrobe.saved.outfits.title') }
+                </span>
+                <span className="mt-2">
+                    { !hcDisabled && getClubLevel() > 0 && (
+                        <LayoutCurrencyIcon type="hc" />
+                    ) }
+                </span>
+            </div>
+            <div className="saved-outfit-container mt-2">
+                <div className="nitro-avatar-editor-wardrobe-container">{ figures }</div>
             </div>
         </div>
-
     );
+
 }

From 5b24d3bdbc599064101ec94b5be88cf01ba156ff Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Fri, 5 May 2023 00:05:43 +0200
Subject: [PATCH 014/134] =?UTF-8?q?=F0=9F=92=84=20Correctly=20align=20gend?=
 =?UTF-8?q?er=20buttons=20within=20wardrobe?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/avatar-editor/views/AvatarEditorModelView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/avatar-editor/views/AvatarEditorModelView.tsx b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
index b53e967b4..9b1f961f5 100644
--- a/src/components/avatar-editor/views/AvatarEditorModelView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
@@ -54,7 +54,7 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
     return (
         <Grid>
             <Column className="choose-clothing overflow-auto">
-                <Flex justifyContent="center" gap={ 4 }>
+                <Flex className="px-3" gap={ 4 }>
                     { model.canSetGender &&
                     <>
                         <Flex center pointer className="category-item" gap={ 3 } onClick={ event => setGender(FigureData.MALE) }>

From 0faf282eb5ab9f041f7ea6b3a482fb5570ef063e Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Fri, 5 May 2023 00:16:57 +0200
Subject: [PATCH 015/134] =?UTF-8?q?=F0=9F=92=84=20Adjust=20badge=20hover?=
 =?UTF-8?q?=20tooltip=20to=20look=20replicate=20flash?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/index.scss                      | 16 +++-------------
 src/common/layout/LayoutBadgeImageView.tsx |  4 ++--
 2 files changed, 5 insertions(+), 15 deletions(-)

diff --git a/src/common/index.scss b/src/common/index.scss
index 6ab141772..3ba894ec6 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -64,7 +64,7 @@
             position: absolute;
             top: 1px;
             animation: MoveUpDown 1.7s linear infinite;
-            
+
             @keyframes MoveUpDown {
                 0%, 100% {
                   top: 1px;
@@ -361,6 +361,7 @@
     background-repeat: no-repeat;
     background-position: center;
 
+
     .badge-information {
         display: none;
     }
@@ -383,22 +384,11 @@
         bottom: -15px;
         z-index: 100;
         font-size: 9px;
+        min-height: 80px;
     }
 
     .badge-desc {
         font-family: Goldfish;
-
-        &:before {
-            position: absolute;
-            content: ' ';
-            width: 0;
-            height: 0;
-            border-left: 10px solid $white;
-            border-bottom: 10px solid transparent;
-            border-top: 10px solid transparent;
-            top: 10px;
-            right: -10px;
-        }
     }
 }
 
diff --git a/src/common/layout/LayoutBadgeImageView.tsx b/src/common/layout/LayoutBadgeImageView.tsx
index 665f0874d..0a52a8d2f 100644
--- a/src/common/layout/LayoutBadgeImageView.tsx
+++ b/src/common/layout/LayoutBadgeImageView.tsx
@@ -100,7 +100,7 @@ export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
         return (
             <Base className="badge-information text-black pt-2 px-2 pb-4">
                 <div className="mb-1 pb-1">{ title }</div>
-                <div className="badge-desc">{ description }</div>
+                <div className="badge-desc mt-3">{ description }</div>
             </Base>
         );
     };
@@ -110,7 +110,7 @@ export const LayoutBadgeImageView: FC<LayoutBadgeImageViewProps> = props =>
             { (showInfo && GetConfiguration<boolean>('badge.descriptions.enabled', true)) &&
                 <Base className="badge-information text-black p-2">
                     <Text gfbold className="mb-1">{ isGroup ? customTitle : LocalizeBadgeName(badgeCode) }</Text>
-                    <div className="badge-desc">{ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) }</div>
+                    <div className="badge-desc mt-3">{ isGroup ? LocalizeText('group.badgepopup.body') : LocalizeBadgeDescription(badgeCode) }</div>
                 </Base> }
             { children }
         </Base>

From 19ee263516d5d381136d7f9b4ae56e900dbc2317 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Fri, 5 May 2023 00:44:38 +0200
Subject: [PATCH 016/134] Navigator - New button create an event when you are
 in Events or My World

---
 src/assets/flash/navigator/promote_room.png | Bin 0 -> 1193 bytes
 src/components/navigator/NavigatorView.scss |  31 +++++++++++++-------
 src/components/navigator/NavigatorView.tsx  |  22 +++++++++-----
 3 files changed, 35 insertions(+), 18 deletions(-)
 create mode 100644 src/assets/flash/navigator/promote_room.png

diff --git a/src/assets/flash/navigator/promote_room.png b/src/assets/flash/navigator/promote_room.png
new file mode 100644
index 0000000000000000000000000000000000000000..3f912afd5c438454cf6e50ec2d586aa1966ae3e4
GIT binary patch
literal 1193
zcmb_a`7@gd82%hxRU<XKt`;?Gy2eqVJ5@L98d68qu~sQnYt&G(V#QI3qg%Tcon3Ww
z>zExIYOR~J84@7~i=qipXB;ac$47igh(z|Yf5W~r&-={#{P4W<zVrMP66~ja>FOl_
z0JKs5KA|v^VYpsYgS+}a0eF~HFrj{4K*xJy?zxua8RQ87-7mD{@fYA(9ugSt3$s$G
zlz}5M0Y$p=TDtv8vQ;Tw!yj|o#OuW}Aw|M2Kj!`^-Kvra2Bq7-9dig0cG(G!C|-Xi
zUMo77at0@Ff|GVUGQb-IM2tv2RSR0i2u6(#rrm^e3(<$K<)l(*=?R~DkrZdXfOQwI
z6@q`?5{&2_&iV<*Oht?+kZuVrrHWUc@+qnZQx1Y*9npNKfMzIS#t27EAl75ym|3C6
z<!TTOEu{&^&7+A<&~he7w*n_@#H)C40x4cAXh{N;(?QTux?PQqi1|Rd+bLq)7cstp
zSgFGC>!R5JXeAq*{8IEGT)g^JK+``zTm=^aQ+Q@*a2WiA|GR)NX~sP4uZi}L!T<n*
zb`BMK`kQY7Ky?x2;~D<gdto^V%dpce`Ocmn^;O7i=3I~TTA?aJM{*!lB4gH0vD=?d
ze$lOalG9YjsLR96+%u+ESXtPQ8m95By{C^O;`vQEEB$$Q`^l$fM6awSjl>2CtsL<%
z<K+a!5SQ6?wq-iPwwT|&r?u(VL_-Jo**V^E+k4TWiX2;YcH8r#v#To-GRkCgjRn!A
zIm~!+>|d2Fi&pjSnA`XB_ry+A!jYlL@3D{pyBhf@^I7gZFQ5QZbJN+&Wu6gsFtOmw
z4jnAtXpgj->Om;=-VxerO(;lmcY11S)^X<pjk<xtkDEulv0&K@LK#FQMc10RH&Xg~
z*TEreN32FKjk7q*pF5RfRXAJuu_P$sl(;S!(s-9?N-Iucu>^W#h7v#{mp$pt>B}j(
zB|{Qo{*Rl(DZCZQ^Ywkax}(&PR?K3q@NLLrN_Di*^0`JQ;q8)jZZ5GkhTB*b;h|QS
zSFt&Kw7;O`T2K$!2K`YJQPYOI;3&OHE9T5I;%>+ev!`=oQMPS3HAksFEG~Y=^?>@-
z&h%j~TZIdiBsIJ?NP$cN&L=Ib0t||K<f?(ombo?tniDp1MguXNuC?npc%dS>YG;7h
z_quH3WSLb_i`uIy8n`iAe@c-gR~1o`9h}6bDx7Lua~FAo=Y$Qula!2b;d;FCw{1g4
zDz2c@T9YP%UAP2e9>2D7;%()0LSq%@$}iT0!<mr8gYOsSS`OP|TDiLJag5fF$lhN`
zW<6?nMgw!<4FbQ?AvU0r65}+X<0q1xjuB^hR$fsg)dpAMHZyQpdx+7nU*A}|k#JYq
zVI+^uQ$UXGE)C;ge~Lmc&9Zx72GVuyap1csHrUma|Kgy8<ACi0eU(QBtD${iw@RTO
z@R3-FQL5!S3NbdMsh&VNW4`}%@$3=$Wf^X1$lOF|oAdLQDU-~!@7itlhGP$)e1m;D
IydD<)3tm*U+yDRo

literal 0
HcmV?d00001

diff --git a/src/components/navigator/NavigatorView.scss b/src/components/navigator/NavigatorView.scss
index 5ab079ad9..bd085c859 100644
--- a/src/components/navigator/NavigatorView.scss
+++ b/src/components/navigator/NavigatorView.scss
@@ -67,7 +67,7 @@
 
 
 .badge-empty {
-    background-image: url(@/assets/flash/navigator/badge_empty.png);
+    background-image: url('@/assets/flash/navigator/badge_empty.png');
     background-repeat: no-repeat;
     width: 40px;
     height: 19px;
@@ -75,7 +75,7 @@
 }
 
 .badge-success {
-    background-image: url(@/assets/flash/navigator/badge_success.png);
+    background-image: url('@/assets/flash/navigator/badge_success.png');
     background-repeat: no-repeat;
     width: 40px;
     height: 19px;
@@ -83,7 +83,7 @@
 }
 
 .badge-danger {
-    background-image: url(@/assets/flash/navigator/badge_danger.png);
+    background-image: url('@/assets/flash/navigator/badge_danger.png');
     background-repeat: no-repeat;
     width: 40px;
     height: 19px;
@@ -91,7 +91,7 @@
 }
 
 .badge-warning {
-    background-image: url(@/assets/flash/navigator/badge_warning.png);
+    background-image: url('@/assets/flash/navigator/badge_warning.png');
     background-repeat: no-repeat;
     width: 40px;
     height: 19px;
@@ -109,34 +109,34 @@
 }
 
 .minus-icon {
-    background-image: url(@/assets/flash/navigator/minus.png);
+    background-image: url('@/assets/flash/navigator/minus.png');
     background-repeat: no-repeat;
     width: 18px;
     height: 18px;
 }
 
 .plus-icon {
-    background-image: url(@/assets/flash/navigator/plus.png);
+    background-image: url('@/assets/flash/navigator/plus.png');
     background-repeat: no-repeat;
     width: 18px;
     height: 18px;
 }
 
 .nav-avatar-icon {
-    background-image: url(@/assets/flash/navigator/avatar_icon.png);
+    background-image: url('@/assets/flash/navigator/avatar_icon.png');
     background-repeat: no-repeat;
     height: 8px;
     width: 7px;
 }
 
 .nav-thumbnail {
-    border-image-source: url(@/assets/flash/navigator/thumbnail_bg.png);
+    border-image-source: url('@/assets/flash/navigator/thumbnail_bg.png');
     border-image-slice: 7 7 7 7 fill;
     border-image-width: 7px 7px 7px 7px;
 }
 
 .nav-create-room {
-    background-image: url(@/assets/flash/navigator/create_room.png);
+    background-image: url('@/assets/flash/navigator/create_room.png');
     background-repeat: no-repeat;
     height: 60px;
     width: 189px;
@@ -145,14 +145,23 @@
 }
 
 .nav-random-room {
-    background-image: url(@/assets/flash/navigator/random_room.png);
+    background-image: url('@/assets/flash/navigator/random_room.png');
     background-repeat: no-repeat;
     height: 60px;
     width: 189px;
     float: right;
     margin-left: 15px;
     cursor: pointer;
+}
 
+.nav-promote-room {
+    background-image: url('@/assets/flash/navigator/promote_room.png');
+    background-repeat: no-repeat;
+    height: 60px;
+    width: 189px;
+    float: right;
+    margin-left: 15px;
+    cursor: pointer;
 }
 
 .nav-bottom {
@@ -222,7 +231,7 @@
     image-rendering: pixelated;
 
     .room-info-bg {
-        border-image-source: url(@/assets/flash/navigator/white_bg.png);
+        border-image-source: url('@/assets/flash/navigator/white_bg.png');
         border-image-slice: 6 6 6 6 fill;
         border-image-width: 6px 6px 6px 6px;
     }
diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
index ab335c4a4..f0035e10e 100644
--- a/src/components/navigator/NavigatorView.tsx
+++ b/src/components/navigator/NavigatorView.tsx
@@ -1,7 +1,6 @@
 import { ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
-import { FaPlus } from 'react-icons/fa';
-import { AddEventLinkTracker, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TryVisitRoom } from '../../api';
+import { AddEventLinkTracker, CreateLinkEvent, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TryVisitRoom } from '../../api';
 import { Base, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../common';
 import { useNavigator, useRoomSessionManagerEvent } from '../../hooks';
 import { NavigatorDoorStateView } from './views/NavigatorDoorStateView';
@@ -225,11 +224,20 @@ export const NavigatorView: FC<{}> = props =>
                                         { LocalizeText('navigator.createroom.create') }
                                     </Text>
                                 </Flex>
-                                <Flex className="nav-random-room">
-                                    <Text variant="white" bold className="nav-bottom-buttons-text">
-                                        { LocalizeText('navigator.random.room') }
-                                    </Text>
-                                </Flex>
+                                { (searchResult.code !== 'myworld_view' && searchResult.code !== 'roomads_view') &&
+                                    <Flex className="nav-random-room">
+                                        <Text variant="white" bold className="nav-bottom-buttons-text">
+                                            { LocalizeText('navigator.random.room') }
+                                        </Text>
+                                    </Flex>
+                                }
+                                { (searchResult.code === 'myworld_view' || searchResult.code === 'roomads_view') &&
+                                    <Flex className="nav-promote-room" onClick={ () => CreateLinkEvent('catalog/open/room_event') }>
+                                        <Text variant="white" bold className="nav-bottom-buttons-text">
+                                            { LocalizeText('navigator.promote.room') }
+                                        </Text>
+                                    </Flex>
+                                }
                             </Flex>
                         </Flex>
                     </NitroCardContentView>

From 1bbe6efa46f07c3f99c7eb31c5cd4a810da2de3c Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Fri, 5 May 2023 00:49:52 +0200
Subject: [PATCH 017/134] Fix null searchresult

---
 src/components/navigator/NavigatorView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
index f0035e10e..8aac1cccb 100644
--- a/src/components/navigator/NavigatorView.tsx
+++ b/src/components/navigator/NavigatorView.tsx
@@ -224,14 +224,14 @@ export const NavigatorView: FC<{}> = props =>
                                         { LocalizeText('navigator.createroom.create') }
                                     </Text>
                                 </Flex>
-                                { (searchResult.code !== 'myworld_view' && searchResult.code !== 'roomads_view') &&
+                                { (searchResult?.code !== 'myworld_view' && searchResult?.code !== 'roomads_view') &&
                                     <Flex className="nav-random-room">
                                         <Text variant="white" bold className="nav-bottom-buttons-text">
                                             { LocalizeText('navigator.random.room') }
                                         </Text>
                                     </Flex>
                                 }
-                                { (searchResult.code === 'myworld_view' || searchResult.code === 'roomads_view') &&
+                                { (searchResult?.code === 'myworld_view' || searchResult?.code === 'roomads_view') &&
                                     <Flex className="nav-promote-room" onClick={ () => CreateLinkEvent('catalog/open/room_event') }>
                                         <Text variant="white" bold className="nav-bottom-buttons-text">
                                             { LocalizeText('navigator.promote.room') }

From eaf05fbf8276b3bb6993301ed65dbd4a881c3be2 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Fri, 5 May 2023 01:43:16 +0200
Subject: [PATCH 018/134] =?UTF-8?q?=F0=9F=92=84=20Make=20badge=20inventory?=
 =?UTF-8?q?=20look=20more=20like=20flash?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.scss                                  |  4 +-
 src/common/AutoGrid.tsx                       |  8 ++-
 src/common/index.scss                         | 20 ++++++
 src/components/inventory/InventoryView.scss   |  2 +-
 .../views/badge/InventoryBadgeItemView.tsx    |  2 +-
 .../views/badge/InventoryBadgeView.tsx        | 61 +++++++++++--------
 6 files changed, 63 insertions(+), 34 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 79f7e8304..c09d7027f 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -27,8 +27,8 @@ $avatar-editor-height: 520px;
 $catalog-width: 570px;
 $catalog-height: 635px;
 
-$inventory-width: 528px;
-$inventory-height: 320px;
+$inventory-width: 490px;
+$inventory-height: 315px;
 
 $navigator-width: 425px;
 $navigator-height: 560px;
diff --git a/src/common/AutoGrid.tsx b/src/common/AutoGrid.tsx
index c387892ad..b204eabd3 100644
--- a/src/common/AutoGrid.tsx
+++ b/src/common/AutoGrid.tsx
@@ -1,22 +1,24 @@
 import { CSSProperties, FC, useMemo } from 'react';
 import { Grid, GridProps } from './Grid';
+import {SpacingType} from "./types";
 
 export interface AutoGridProps extends GridProps
 {
     columnMinWidth?: number;
     columnMinHeight?: number;
+    gap?: SpacingType;
 }
 
 export const AutoGrid: FC<AutoGridProps> = props =>
 {
-    const { columnMinWidth = 40, columnMinHeight = 40, columnCount = 0, fullHeight = false, maxContent = true, overflow = 'auto', style = {}, ...rest } = props;
+    const { columnMinWidth = 40, columnMinHeight = 40, gap = 2, columnCount = 0, fullHeight = false, maxContent = true, overflow = 'auto', style = {}, ...rest } = props;
 
     const getStyle = useMemo(() =>
     {
         let newStyle: CSSProperties = {};
 
         newStyle['--nitro-grid-column-min-height'] = (columnMinHeight + 'px');
-        
+
         if(columnCount > 1) newStyle.gridTemplateColumns = `repeat(auto-fill, minmax(${ columnMinWidth }px, 1fr))`;
 
         if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
@@ -24,5 +26,5 @@ export const AutoGrid: FC<AutoGridProps> = props =>
         return newStyle;
     }, [ columnMinWidth, columnMinHeight, columnCount, style ]);
 
-    return <Grid columnCount={ columnCount } fullHeight={ fullHeight } overflow={ overflow } style={ getStyle } { ...rest } />;
+    return <Grid columnCount={ columnCount } gap={ gap } fullHeight={ fullHeight } overflow={ overflow } style={ getStyle } { ...rest } />;
 }
diff --git a/src/common/index.scss b/src/common/index.scss
index 3ba894ec6..34a8c2f5a 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -354,6 +354,26 @@
     color: #fff;
 }
 
+.badges-list {
+    height: 150px !important;
+}
+
+.badge-container {
+    background-color: #cacaca;
+    border-radius: 6px !important;
+    border: solid 1px #000 !important;
+    width: 42px;
+    height: 42px;
+    padding: 2px;
+
+    &.layout-grid-item.active {
+        background-color: #cacaca !important;
+        border: 1px solid #000 !important;
+        box-shadow: inset 0 0 0 2px white;
+        box-sizing: border-box;
+    }
+}
+
 .badge-image {
     position: relative;
     width: 40px;
diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index a27cad0cf..0f9506c30 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -1,6 +1,6 @@
 .nitro-inventory {
     width: $inventory-width;
-    height: $inventory-height;
+    min-height: $inventory-height;
     min-width: 326px;
     color: #000;
 
diff --git a/src/components/inventory/views/badge/InventoryBadgeItemView.tsx b/src/components/inventory/views/badge/InventoryBadgeItemView.tsx
index bb6c54aff..198c13d5c 100644
--- a/src/components/inventory/views/badge/InventoryBadgeItemView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeItemView.tsx
@@ -11,7 +11,7 @@ export const InventoryBadgeItemView: FC<PropsWithChildren<{ badgeCode: string }>
     const unseen = isUnseen(UnseenItemCategory.BADGE, getBadgeId(badgeCode));
 
     return (
-        <LayoutGridItem itemActive={ (selectedBadgeCode === badgeCode) } itemUnseen={ unseen } onMouseDown={ event => setSelectedBadgeCode(badgeCode) } onDoubleClick={ event => toggleBadge(selectedBadgeCode) } { ...rest }>
+        <LayoutGridItem className="badge-container" itemActive={ (selectedBadgeCode === badgeCode) } itemUnseen={ unseen } onMouseDown={ event => setSelectedBadgeCode(badgeCode) } onDoubleClick={ event => toggleBadge(selectedBadgeCode) } { ...rest }>
             <LayoutBadgeImageView badgeCode={ badgeCode } />
             { children }
         </LayoutGridItem>
diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index 96da219b4..ad6b13e45 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -1,7 +1,7 @@
 import { FC, useEffect, useState } from 'react';
-import { LocalizeBadgeName, LocalizeText, UnseenItemCategory } from '../../../../api';
+import { LocalizeBadgeName, LocalizeText, UnseenItemCategory} from '../../../../api';
 import { AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
-import { useInventoryBadges, useInventoryUnseenTracker } from '../../../../hooks';
+import {useAchievements, useInventoryBadges, useInventoryUnseenTracker} from '../../../../hooks';
 import { InventoryBadgeItemView } from './InventoryBadgeItemView';
 
 export const InventoryBadgeView: FC<{}> = props =>
@@ -9,6 +9,8 @@ export const InventoryBadgeView: FC<{}> = props =>
     const [ isVisible, setIsVisible ] = useState(false);
     const { badgeCodes = [], activeBadgeCodes = [], selectedBadgeCode = null, isWearingBadge = null, canWearBadges = null, toggleBadge = null, getBadgeId = null, activate = null, deactivate = null } = useInventoryBadges();
     const { isUnseen = null, removeUnseen = null } = useInventoryUnseenTracker();
+    const { achievementScore = 0 } = useAchievements();
+
 
     useEffect(() =>
     {
@@ -34,33 +36,38 @@ export const InventoryBadgeView: FC<{}> = props =>
     }, []);
 
     return (
-        <Grid>
-            <Column size={ 7 } overflow="hidden">
-                <AutoGrid columnCount={ 4 }>
-                    { badgeCodes && (badgeCodes.length > 0) && badgeCodes.map((badgeCode, index) =>
-                    {
-                        if(isWearingBadge(badgeCode)) return null;
+        <div>
+            <Grid gap={ 2 } className="badges-list">
+                <Column size={ 8 } overflow="hidden">
+                    <AutoGrid gap={ 1 } columnCount={ 5 }>
+                        { badgeCodes && (badgeCodes.length > 0) && badgeCodes.map((badgeCode, index) =>
+                        {
+                            if(isWearingBadge(badgeCode)) return null;
 
-                        return <InventoryBadgeItemView key={ index } badgeCode={ badgeCode } />
-                    }) }
-                </AutoGrid>
-            </Column>
-            <Column className="justify-content-between" size={ 5 } overflow="auto">
-                <Column overflow="hidden" gap={ 2 }>
-                    <Text>{ LocalizeText('inventory.badges.activebadges') }</Text>
-                    <AutoGrid columnCount={ 3 }>
-                        { activeBadgeCodes && (activeBadgeCodes.length > 0) && activeBadgeCodes.map((badgeCode, index) => <InventoryBadgeItemView key={ index } badgeCode={ badgeCode } />) }
+                            return <InventoryBadgeItemView key={ index } badgeCode={ badgeCode } />
+                        }) }
                     </AutoGrid>
                 </Column>
-                { !!selectedBadgeCode &&
-                    <Column grow justifyContent="end" gap={ 2 }>
-                        <Flex alignItems="center" gap={ 2 }>
-                            <LayoutBadgeImageView shrink badgeCode={ selectedBadgeCode } />
-                            <Text>{ LocalizeBadgeName(selectedBadgeCode) }</Text>
-                        </Flex>
-                        <Button disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
-                    </Column> }
-            </Column>
-        </Grid>
+                <Column className="justify-content-between" size={ 4 } overflow="auto">
+                    <Column overflow="hidden">
+                        <Text center bold>{ LocalizeText('inventory.badges.activebadges') }</Text>
+                        <AutoGrid gap={ 1 } columnCount={ 5 }>
+                            { activeBadgeCodes && (activeBadgeCodes.length > 0) && activeBadgeCodes.map((badgeCode, index) => <InventoryBadgeItemView key={ index } badgeCode={ badgeCode } />) }
+                        </AutoGrid>
+                    </Column>
+                </Column>
+            </Grid>
+            { !!selectedBadgeCode &&
+                <Flex className="bg-white py-1 px-2 rounded mt-2" justifyContent={ 'between' } alignItems={ 'end' } gap={ 2 }>
+                    <Flex alignItems="start" gap={ 2 }>
+                        <LayoutBadgeImageView shrink badgeCode={ selectedBadgeCode } />
+                        <Text className="font-bold">{ LocalizeBadgeName(selectedBadgeCode) }</Text>
+                    </Flex>
+                    <Button className="btn btn-primary" style={ { fontSize: '12px' } } disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
+                </Flex> }
+            <div className="nitro-progress-bar text-white mt-1">
+                <Text small center style={ { marginTop: '-1px' } }>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>
+            </div>
+        </div>
     );
 }

From bce096255e80f7a2113407453534d54269d86fcc Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Fri, 5 May 2023 02:07:16 +0200
Subject: [PATCH 019/134] =?UTF-8?q?=E2=9C=A8=20Add=20search=20field=20to?=
 =?UTF-8?q?=20badge=20inventory?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/badge/InventoryBadgeView.tsx        | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index ad6b13e45..0c5c5c953 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -1,8 +1,8 @@
-import { FC, useEffect, useState } from 'react';
-import { LocalizeBadgeName, LocalizeText, UnseenItemCategory} from '../../../../api';
-import { AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
+import {FC, useEffect, useState} from 'react';
+import {LocalizeBadgeName, LocalizeText, UnseenItemCategory} from '../../../../api';
+import {AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text} from '../../../../common';
 import {useAchievements, useInventoryBadges, useInventoryUnseenTracker} from '../../../../hooks';
-import { InventoryBadgeItemView } from './InventoryBadgeItemView';
+import {InventoryBadgeItemView} from './InventoryBadgeItemView';
 
 export const InventoryBadgeView: FC<{}> = props =>
 {
@@ -10,7 +10,20 @@ export const InventoryBadgeView: FC<{}> = props =>
     const { badgeCodes = [], activeBadgeCodes = [], selectedBadgeCode = null, isWearingBadge = null, canWearBadges = null, toggleBadge = null, getBadgeId = null, activate = null, deactivate = null } = useInventoryBadges();
     const { isUnseen = null, removeUnseen = null } = useInventoryUnseenTracker();
     const { achievementScore = 0 } = useAchievements();
+    const [ searchValue, setSearchValue ] = useState('');
 
+    let search = searchValue?.toLocaleLowerCase().replace(' ', '');
+
+    const filterBadgeCodes = () =>
+    {
+        return badgeCodes.filter((badgeCode) =>
+        {
+            return LocalizeBadgeName(badgeCode).toLocaleLowerCase().includes(search);
+        });
+    };
+
+
+    const filteredBadgeCodes = filterBadgeCodes();
 
     useEffect(() =>
     {
@@ -39,12 +52,17 @@ export const InventoryBadgeView: FC<{}> = props =>
         <div>
             <Grid gap={ 2 } className="badges-list">
                 <Column size={ 8 } overflow="hidden">
+                    <Flex gap={ 1 } className="position-relative">
+                        <Flex fullWidth alignItems="center" position="relative">
+                            <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+                        </Flex>
+                    </Flex>
                     <AutoGrid gap={ 1 } columnCount={ 5 }>
-                        { badgeCodes && (badgeCodes.length > 0) && badgeCodes.map((badgeCode, index) =>
+                        { filteredBadgeCodes && filteredBadgeCodes.length > 0 && filteredBadgeCodes.map((badgeCode, index) =>
                         {
-                            if(isWearingBadge(badgeCode)) return null;
+                            if (isWearingBadge(badgeCode)) return null;
 
-                            return <InventoryBadgeItemView key={ index } badgeCode={ badgeCode } />
+                            return <InventoryBadgeItemView key={ index } badgeCode={ badgeCode } />;
                         }) }
                     </AutoGrid>
                 </Column>

From c8ee768358da282cddcf0176e71f28eebe28b5af Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Fri, 5 May 2023 02:08:38 +0200
Subject: [PATCH 020/134] =?UTF-8?q?=F0=9F=9A=A8=20Fix=20linting=20warnings?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../inventory/views/badge/InventoryBadgeView.tsx       | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index 0c5c5c953..388be7be7 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -1,8 +1,8 @@
-import {FC, useEffect, useState} from 'react';
-import {LocalizeBadgeName, LocalizeText, UnseenItemCategory} from '../../../../api';
-import {AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text} from '../../../../common';
-import {useAchievements, useInventoryBadges, useInventoryUnseenTracker} from '../../../../hooks';
-import {InventoryBadgeItemView} from './InventoryBadgeItemView';
+import { FC, useEffect, useState } from 'react';
+import { LocalizeBadgeName, LocalizeText, UnseenItemCategory } from '../../../../api';
+import { AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from '../../../../common';
+import { useAchievements, useInventoryBadges, useInventoryUnseenTracker } from '../../../../hooks';
+import { InventoryBadgeItemView } from './InventoryBadgeItemView';
 
 export const InventoryBadgeView: FC<{}> = props =>
 {

From 48c6e56e94ceb7689b598906ac52e5b259303ce2 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Fri, 5 May 2023 02:14:16 +0200
Subject: [PATCH 021/134] =?UTF-8?q?=F0=9F=92=84=20Correct=20chatlog=20widt?=
 =?UTF-8?q?h?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/chat-history/ChatHistoryView.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/chat-history/ChatHistoryView.scss b/src/components/chat-history/ChatHistoryView.scss
index 2a0a9b498..0e58d9d30 100644
--- a/src/components/chat-history/ChatHistoryView.scss
+++ b/src/components/chat-history/ChatHistoryView.scss
@@ -6,7 +6,7 @@
     top: 0;
     height: 100%;
     left: 0;
-    width: 30vw;
+    width: 400px;
     border-right: 1px solid #000;
     -webkit-box-shadow: inset -2px 0px 0px 0px #34322d;
     box-shadow: inset -2px 0px 0px 0px #34322d;

From 73a6c4b2ebc2db0c87da25a54b377d9972043163 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Fri, 5 May 2023 02:34:17 +0200
Subject: [PATCH 022/134] =?UTF-8?q?=F0=9F=92=84=20Widen=20chat=20input=20a?=
 =?UTF-8?q?rea=20to=20it=20becomes=20easier=20to=20chat?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../room/widgets/chat-input/ChatInputView.scss  | 17 +++++++++--------
 .../room/widgets/chat-input/ChatInputView.tsx   |  2 +-
 src/components/toolbar/ToolbarView.tsx          |  6 +++---
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/room/widgets/chat-input/ChatInputView.scss b/src/components/room/widgets/chat-input/ChatInputView.scss
index ed322f1eb..c9e4a55a5 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.scss
+++ b/src/components/room/widgets/chat-input/ChatInputView.scss
@@ -2,9 +2,8 @@
     display: flex;
     align-items: center;
     position: absolute;
+    width: 50vw;
     bottom:65px;
-    left: 30vw;
-    right: 30vw;
     height: 38px;
     border-image-source: url(@/assets/flash/room/chatinput.png);
     border-image-slice:8 8 8 8 fill;
@@ -19,20 +18,22 @@
         display: flex;
         position: absolute;
         bottom: 70px;
-        left: calc(100% / 3);
-        width: 200px;
+        left: 30px;
+        width: 85vw;
     }
 
     .input-sizer {
-        display: inline-grid;
-        vertical-align: top;
-        height: 100%;
+        align-content: center;
+        display: flex;
         padding-right: 10px;
 
+        .chat-input {
+            width: 100%;
+        }
+
         &::after,
         input,
         textarea {
-            width: auto;
             min-width: 1em;
             grid-area: 1 / 2;
             margin: 0;
diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
index 1f50236b8..7344be32e 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -237,7 +237,7 @@ export const ChatInputView: FC<{}> = props =>
         createPortal(
             <div className="nitro-chat-input-container">
                 <ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
-                <div className="input-sizer align-items-center">
+                <div className="input-sizer w-100">
                     { !floodBlocked &&
                         <input ref={ inputRef } type="text" className="chat-input" placeholder={ LocalizeText('widgets.chatinput.default') } value={ chatValue } maxLength={ maxChatLength } onChange={ event => updateChatInput(event.target.value) } onMouseDown={ event => setInputFocus() } /> }
                     { floodBlocked &&
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index 09b424f65..41d52183d 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -18,7 +18,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
     const { requests = [] } = useFriends();
     const { iconState = MessengerIconState.HIDDEN } = useMessenger();
     const isMod = GetSessionDataManager().isModerator;
-    
+
     useMessageEvent<PerkAllowancesMessageEvent>(PerkAllowancesMessageEvent, event =>
     {
         const parser = event.getParser();
@@ -33,7 +33,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
             const target = (document.body.getElementsByClassName(iconName)[0] as HTMLElement);
 
             if(!target) return;
-            
+
             image.className = 'toolbar-icon-animation';
             image.style.visibility = 'visible';
             image.style.left = (x + 'px');
@@ -70,7 +70,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
             <TransitionAnimation type={ TransitionAnimationTypes.FADE_IN } inProp={ isMeExpanded } timeout={ 300 }>
                 <ToolbarMeView useGuideTool={ useGuideTool } unseenAchievementCount={ getTotalUnseen } setMeExpanded={ setMeExpanded } />
             </TransitionAnimation>
-            <Flex alignItems="center" id="toolbar-chat-input-container" />
+            <Flex alignItems="center" justifyContent="center" id="toolbar-chat-input-container" />
             <Flex alignItems="center" justifyContent="between" gap={ 2 } className="nitro-toolbar py-1 px-3">
                 <button className={ leftSideCollapsed ? 'toolbar-left-collapse' : 'toolbar-left-collapse-active' } onClick={ () => setLeftSideCollapsed((collapsed) => !collapsed) }/>
                 <Flex gap={ 2 } alignItems="center" className="toolbar-left-side">

From 228456211fd56c68e122385eaa27802ab0f28a0f Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Fri, 5 May 2023 02:49:49 +0200
Subject: [PATCH 023/134] =?UTF-8?q?=F0=9F=92=84=20Adjust=20chat=20size=20a?=
 =?UTF-8?q?=20little=20more?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/room/widgets/chat-input/ChatInputView.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/room/widgets/chat-input/ChatInputView.scss b/src/components/room/widgets/chat-input/ChatInputView.scss
index c9e4a55a5..8ca32318e 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.scss
+++ b/src/components/room/widgets/chat-input/ChatInputView.scss
@@ -2,7 +2,7 @@
     display: flex;
     align-items: center;
     position: absolute;
-    width: 50vw;
+    width: 40vw;
     bottom:65px;
     height: 38px;
     border-image-source: url(@/assets/flash/room/chatinput.png);

From e30515fad5400a212c6b82a71ac139111e20ce7f Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Fri, 5 May 2023 07:43:53 +0200
Subject: [PATCH 024/134] Icon info - Links to habbopages

---
 src/common/card/NitroCardHeaderView.tsx       |  7 ++++++-
 src/common/card/NitroCardView.scss            | 16 ++++++++++++++
 src/components/camera/CameraWidgetView.scss   | 21 +++++++++++++++++--
 .../camera/views/CameraWidgetCaptureView.tsx  |  8 +++----
 src/components/hc-center/HcCenterView.tsx     |  2 +-
 src/components/navigator/NavigatorView.tsx    |  2 +-
 .../NavigatorRoomSettingsView.tsx             |  4 ++--
 .../widgets/chat-input/ChatInputView.scss     | 18 +++++++++++++++-
 .../room/widgets/chat-input/ChatInputView.tsx | 13 ++++++++----
 9 files changed, 74 insertions(+), 17 deletions(-)

diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx
index 3af8bfcb1..06e0cee83 100644
--- a/src/common/card/NitroCardHeaderView.tsx
+++ b/src/common/card/NitroCardHeaderView.tsx
@@ -7,14 +7,16 @@ interface NitroCardHeaderViewProps extends ColumnProps
     headerText: string;
     isGalleryPhoto?: boolean;
     noCloseButton?: boolean;
+    isInfoToHabboPages?: boolean;
     hideButtonClose?: boolean;
     onReportPhoto?: (event: MouseEvent) => void;
+    onClickInfoHabboPages?: (event: MouseEvent) => void;
     onCloseClick: (event: MouseEvent) => void;
 }
 
 export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
 {
-    const { headerText = null, isGalleryPhoto = false, noCloseButton = false, hideButtonClose = false, onReportPhoto = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
+    const { headerText = null, isGalleryPhoto = false, noCloseButton = false, isInfoToHabboPages = false, hideButtonClose = false, onReportPhoto = null, onClickInfoHabboPages = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
 
     const getClassNames = useMemo(() =>
     {
@@ -40,6 +42,9 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
                         <FaFlag className="fa-icon" />
                     </Base>
                 }
+                { isInfoToHabboPages &&
+                    <Base position="absolute" className="end-6 nitro-card-header-info-habbopages" onClick={ onClickInfoHabboPages }></Base>
+                }
                 <Flex center position="absolute" className="end-2 nitro-card-header-close" onMouseDownCapture={ onMouseDown } onClick={ onCloseClick }>
                     { (!hideButtonClose) && <FaTimes className="fa-icon w-12 h-12" /> }
                 </Flex>
diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss
index 7ee695bbb..c8686089e 100644
--- a/src/common/card/NitroCardView.scss
+++ b/src/common/card/NitroCardView.scss
@@ -49,6 +49,22 @@ $nitro-card-tabs-height: 35px;
 
                 }
             }
+
+            .nitro-card-header-info-habbopages {
+                cursor: pointer;
+                background-image: url("@/assets/flash/boxes/card/questionmark.png");
+                width: 19px;
+                height: 20px;
+                right: 32px;
+
+                    &:hover {
+                        background-image: url("@/assets/flash/boxes/card/questionmark_hover.png");
+        
+                    &:active {
+                        background-image: url("@/assets/flash/boxes/card/questionmark_click.png");
+                    }
+                }
+            }
         }
 
         .nitro-card-tabs {
diff --git a/src/components/camera/CameraWidgetView.scss b/src/components/camera/CameraWidgetView.scss
index 53973c998..2f6cc2ccd 100644
--- a/src/components/camera/CameraWidgetView.scss
+++ b/src/components/camera/CameraWidgetView.scss
@@ -10,15 +10,32 @@
         height: 20px;
 
             &:hover {
-            background-image: url("@/assets/flash/boxes/card/close_hover.png");
+                background-image: url("@/assets/flash/boxes/card/close_hover.png");
 
             &:active {
-            background-image: url("@/assets/flash/boxes/card/close_click.png");
+                background-image: url("@/assets/flash/boxes/card/close_click.png");
             }
 
         }
     }
 
+    .info-camera {
+        top: 8px;
+        right: 32px;
+        cursor: pointer;
+        background-image: url("@/assets/flash/boxes/card/questionmark.png");
+        width: 19px;
+        height: 20px;
+
+            &:hover {
+                background-image: url("@/assets/flash/boxes/card/questionmark_hover.png");
+
+            &:active {
+                background-image: url("@/assets/flash/boxes/card/questionmark_click.png");
+            }
+        }
+    }
+
     .camera-area {
         position: absolute;
         top: 37px;
diff --git a/src/components/camera/views/CameraWidgetCaptureView.tsx b/src/components/camera/views/CameraWidgetCaptureView.tsx
index dc18859fc..e6bcd9fbe 100644
--- a/src/components/camera/views/CameraWidgetCaptureView.tsx
+++ b/src/components/camera/views/CameraWidgetCaptureView.tsx
@@ -1,7 +1,6 @@
 import { NitroRectangle, TextureUtils } from '@nitrots/nitro-renderer';
 import { FC, useRef } from 'react';
-import { FaTimes } from 'react-icons/fa';
-import { CameraPicture, GetRoomEngine, GetRoomSession, LocalizeText, PlaySound, SoundNames } from '../../../api';
+import { CameraPicture, CreateLinkEvent, GetRoomEngine, GetRoomSession, LocalizeText, PlaySound, SoundNames } from '../../../api';
 import { Column, DraggableWindow, Flex } from '../../../common';
 import { useCamera, useNotification } from '../../../hooks';
 
@@ -62,9 +61,8 @@ export const CameraWidgetCaptureView: FC<CameraWidgetCaptureViewProps> = props =
             <Column center className="nitro-camera-capture" gap={ 0 }>
                 { selectedPicture && <img alt="" className="camera-area" src={ selectedPicture.imageUrl } /> }
                 <div className="camera-canvas drag-handler">
-                    <div className="position-absolute header-close" onClick={ onClose }>
-                        <FaTimes className="fa-icon" />
-                    </div>
+                    <div className="position-absolute info-camera" onClick={ () => CreateLinkEvent('habbopages/camera') }></div>
+                    <div className="position-absolute header-close" onClick={ onClose }></div>
                     { !selectedPicture && <div ref={ elementRef } className="camera-area camera-view-finder" /> }
                     { selectedPicture &&
                         <div className="camera-area camera-frame">
diff --git a/src/components/hc-center/HcCenterView.tsx b/src/components/hc-center/HcCenterView.tsx
index 3a74ab0ba..89235510e 100644
--- a/src/components/hc-center/HcCenterView.tsx
+++ b/src/components/hc-center/HcCenterView.tsx
@@ -130,7 +130,7 @@ export const HcCenterView: FC<{}> = props =>
 
     return (
         <NitroCardView theme="primary" className="nitro-hc-center">
-            <NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } onCloseClick={ () => setIsVisible(false) } />
+            <NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } isInfoToHabboPages={ true } onClickInfoHabboPages={ () => CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['benefits.habbopage']) } onCloseClick={ () => setIsVisible(false) } />
             <Flex position="relative" className="bg-muted p-2 hc-logo">
                 <Column gap={ 1 } justifyContent="end" className="px-2">
                     <Flex>
diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
index 8aac1cccb..1e27c9996 100644
--- a/src/components/navigator/NavigatorView.tsx
+++ b/src/components/navigator/NavigatorView.tsx
@@ -197,7 +197,7 @@ export const NavigatorView: FC<{}> = props =>
         <>
             { isVisible &&
                 <NitroCardView uniqueKey="navigator" className="nitro-navigator">
-                    <NitroCardHeaderView headerText={ LocalizeText('navigator.title') } onCloseClick={ event => setIsVisible(false) } />
+                    <NitroCardHeaderView headerText={ LocalizeText('navigator.title') } isInfoToHabboPages={ true } onClickInfoHabboPages={ () => CreateLinkEvent('habbopages/navigator') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
                         { topLevelContexts && (topLevelContexts.length > 0) && topLevelContexts.map((context, index) =>
                         {
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
index bdda17798..874fd4ba7 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
@@ -1,6 +1,6 @@
 import { RoomBannedUsersComposer, RoomDataParser, RoomSettingsDataEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
-import { IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
+import { CreateLinkEvent, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../common';
 import { useMessageEvent } from '../../../../hooks';
 import { NavigatorRoomSettingsAccessTabView } from './NavigatorRoomSettingsAccessTabView';
@@ -182,7 +182,7 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
 
     return (
         <NitroCardView uniqueKey="nitro-room-settings" className="nitro-room-settings">
-            <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings') } onCloseClick={ onClose } />
+            <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings') } isInfoToHabboPages={ (currentTab === TABS[3]) ? true : false } onClickInfoHabboPages={ () => (currentTab === TABS[3]) ? CreateLinkEvent('habbopages/chat/options') : null }onCloseClick={ onClose } />
             <NitroCardTabsView>
                 { TABS.map(tab =>
                 {
diff --git a/src/components/room/widgets/chat-input/ChatInputView.scss b/src/components/room/widgets/chat-input/ChatInputView.scss
index 8ca32318e..ddc5a5dc6 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.scss
+++ b/src/components/room/widgets/chat-input/ChatInputView.scss
@@ -11,7 +11,6 @@
     background: #e4e4e4;
     border-radius: 9px;
     padding-right: 10px;
-    overflow: hidden;
     z-index: 31;
 
     @include media-breakpoint-down(sm) {
@@ -100,3 +99,20 @@
     border-image-width:9px 9px 9px 9px;
     margin-bottom: -13px;
 }
+
+.info-habbopages {
+    cursor: pointer;
+    background-image: url("@/assets/flash/boxes/card/questionmark.png");
+    width: 19px;
+    height: 20px;
+    right: -18px;
+    position: absolute;
+
+        &:hover {
+            background-image: url("@/assets/flash/boxes/card/questionmark_hover.png");
+
+        &:active {
+            background-image: url("@/assets/flash/boxes/card/questionmark_click.png");
+        }
+    }
+}
diff --git a/src/components/room/widgets/chat-input/ChatInputView.tsx b/src/components/room/widgets/chat-input/ChatInputView.tsx
index 7344be32e..ff1eafc13 100644
--- a/src/components/room/widgets/chat-input/ChatInputView.tsx
+++ b/src/components/room/widgets/chat-input/ChatInputView.tsx
@@ -1,8 +1,8 @@
 import { HabboClubLevelEnum, RoomControllerLevel } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { ChatMessageTypeEnum, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetUpdateChatInputContentEvent } from '../../../../api';
-import { Text } from '../../../../common';
+import { ChatMessageTypeEnum, CreateLinkEvent, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText, RoomWidgetUpdateChatInputContentEvent } from '../../../../api';
+import { Base, Text } from '../../../../common';
 import { useChatInputWidget, useRoom, useSessionInfo, useUiEvent } from '../../../../hooks';
 import { ChatInputStyleSelectorView } from './ChatInputStyleSelectorView';
 
@@ -11,6 +11,7 @@ export const ChatInputView: FC<{}> = props =>
     const [ chatValue, setChatValue ] = useState<string>('');
     const { chatStyleId = 0, updateChatStyleId = null } = useSessionInfo();
     const { selectedUsername = '', floodBlocked = false, floodBlockedSeconds = 0, setIsTyping = null, setIsIdle = null, sendChat = null } = useChatInputWidget();
+    const [ showInfoHabboPages, setShowInfohabboPages ] = useState<boolean>(false);
     const { roomSession = null } = useRoom();
     const inputRef = useRef<HTMLInputElement>();
 
@@ -235,7 +236,7 @@ export const ChatInputView: FC<{}> = props =>
 
     return (
         createPortal(
-            <div className="nitro-chat-input-container">
+            <div className="nitro-chat-input-container" onMouseEnter={ () => setShowInfohabboPages(true) } onMouseLeave={ () => setTimeout(() => setShowInfohabboPages(false), 100) }>
                 <ChatInputStyleSelectorView chatStyleId={ chatStyleId } chatStyleIds={ chatStyleIds } selectChatStyleId={ updateChatStyleId } />
                 <div className="input-sizer w-100">
                     { !floodBlocked &&
@@ -243,6 +244,10 @@ export const ChatInputView: FC<{}> = props =>
                     { floodBlocked &&
                         <Text variant="danger">{ LocalizeText('chat.input.alert.flood', [ 'time' ], [ floodBlockedSeconds.toString() ]) } </Text> }
                 </div>
-            </div>, document.getElementById('toolbar-chat-input-container'))
+                { (showInfoHabboPages) &&
+                    <Base className="info-habbopages" onClick={ () => CreateLinkEvent('habbopages/chat/chatting') }></Base>
+                }
+            </div>,
+            document.getElementById('toolbar-chat-input-container'))
     );
 }

From 04f53530e29351acd9190e0100247505ac379871 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 6 May 2023 00:51:12 +0200
Subject: [PATCH 025/134] Navigator room info - Updated design like Habbo

---
 src/App.scss                                  |   2 +-
 src/assets/flash/room/report-room.png         | Bin 0 -> 222 bytes
 .../images/icons/favourite-room-active.png    | Bin 0 -> 229 bytes
 .../images/icons/favourite-room-inactive.png  | Bin 0 -> 215 bytes
 src/assets/styles/icons.scss                  |  19 +++
 src/common/layout/LayoutMiniCameraView.tsx    |   4 +-
 src/components/navigator/NavigatorView.scss   |  14 +++
 .../navigator/views/NavigatorRoomInfoView.tsx | 108 +++++++++++-------
 src/hooks/navigator/useNavigator.ts           |  21 +++-
 9 files changed, 124 insertions(+), 44 deletions(-)
 create mode 100644 src/assets/flash/room/report-room.png
 create mode 100644 src/assets/images/icons/favourite-room-active.png
 create mode 100644 src/assets/images/icons/favourite-room-inactive.png

diff --git a/src/App.scss b/src/App.scss
index c09d7027f..d0d0c4dd5 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -75,7 +75,7 @@ $camera-editor-height: 500px;
 
 $camera-checkout-width: 350px;
 
-$room-info-width: 230px;
+$room-info-width: 236px;
 
 $nitro-group-creator-width: 383px;
 $nitro-mod-tools-width: 170px;
diff --git a/src/assets/flash/room/report-room.png b/src/assets/flash/room/report-room.png
new file mode 100644
index 0000000000000000000000000000000000000000..37672aa675d3229432c4d1d8934e21315e744d8f
GIT binary patch
literal 222
zcmeAS@N?(olHy`uVBq!ia0vp^!XV7S3?yCqj{O5tjKx9jP7LeL$-D$|SkfJR9T^xl
z_H+M9WCij$1AIbU|NsC0k3j;+JCd@_1xPWM1o;L3|Icv!6faOM180FpWHAE+-(e7D
zJf6QI1t{q6>Ealo5xjK5L0$$04(7(c?O{<`FRpvLROugJl33Yr=|reXiKvT}N#46Z
z+hzC;OniA{{_Xc+1^U}B*Z7{llX3rH0rOj@S7E_QX_jWUJ6NaaFzjbdI&>UpG=rzB
KpUXO@geCx!mr8;F

literal 0
HcmV?d00001

diff --git a/src/assets/images/icons/favourite-room-active.png b/src/assets/images/icons/favourite-room-active.png
new file mode 100644
index 0000000000000000000000000000000000000000..b892a7dd37b7f24db3033f192a31a61e452090a8
GIT binary patch
literal 229
zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh3?wzC-F*zC7>k44ofy`glX(f`u%tWsIx;Y9
z?C1WI$O_~O1^9%x>gpN(6J_|H<-KdymJ5PFQHEO{QXW8xtt7}V_&*3RY~H_QKTw3T
zz$3C4Xu)9+W;~w1A_XYu<>}%WA`z~8)=`W>fy2ph&7S{Le=pE$sMHPG?vk@IG*nJA
z@VSU<P~Q5K9kUaE>G<thHQkfZLe1f~W&4ls>n85(J5wQYYq4VAF8i718Bb?adbk2j
OW$<+Mb6Mw<&;$U3J51F8

literal 0
HcmV?d00001

diff --git a/src/assets/images/icons/favourite-room-inactive.png b/src/assets/images/icons/favourite-room-inactive.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b9f447569b9f6f786f8089ebb8360824b171ffa
GIT binary patch
literal 215
zcmeAS@N?(olHy`uVBq!ia0vp^JV4CN!3-p8*3HQUQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1``2&1HT+1uU@7}%p|Ns932Mz$mgu^w|ffQ>=kY6xR@IS-vZG6E%0nP%C
z$YKTtzQZ8Qcszea3Q*9&)5S4FBHXl(k?Vi~$B`@d{@>r@5_zzqaZy;%m5o7n%OVS;
z_|l}CA`BUi+?P;L>Sqz@-L4$lI5Rx&q<*=}Cq~D9M&5Hp410lQF?hQAxvX<aXaWFT
ClSQ`x

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index a310b9f09..13631dd24 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -345,12 +345,31 @@
         height: 14px;
     }
 
+    &.icon-favourite-room-active {
+        background: url('@/assets/images/icons/favourite-room-active.png');
+        width: 14px;
+        height: 14px;
+    }
+
+    &.icon-favourite-room-inactive {
+        background: url('@/assets/images/icons/favourite-room-inactive.png');
+        width: 12px;
+        height: 11px;
+    }
+
     &.icon-camera-small {
         background: url('@/assets/images/icons/camera-small.png');
         width: 17px;
         height: 15px;
     }
 
+    &.icon-report-room {
+        background: url('@/assets/flash/room/report-room.png');
+        width: 19px;
+        height: 19px;
+        margin-right: 10px;
+    }
+
     &.icon-small-room {
         background: url('@/assets/images/icons/small-room.png');
         width: 17px;
diff --git a/src/common/layout/LayoutMiniCameraView.tsx b/src/common/layout/LayoutMiniCameraView.tsx
index 90deb5abe..1b9d21aa6 100644
--- a/src/common/layout/LayoutMiniCameraView.tsx
+++ b/src/common/layout/LayoutMiniCameraView.tsx
@@ -2,8 +2,8 @@ import { NitroRectangle, NitroRenderTexture } from '@nitrots/nitro-renderer';
 import { FC, useRef } from 'react';
 import { GetRoomEngine, LocalizeText, PlaySound, SoundNames } from '../../api';
 import { Button } from '../Button';
-import { DraggableWindow } from '../draggable-window';
 import { Flex } from '../Flex';
+import { DraggableWindow } from '../draggable-window';
 
 interface LayoutMiniCameraViewProps
 {
@@ -35,7 +35,7 @@ export const LayoutMiniCameraView: FC<LayoutMiniCameraViewProps> = props =>
     return (
         <DraggableWindow handleSelector=".nitro-room-thumbnail-camera">
             <Flex className="nitro-room-thumbnail-camera pt-2 px-1">
-                <Flex ref={ elementRef } className={ 'camera-frame' } />
+                <div ref={ elementRef } className={ 'camera-frame' } />
                 <Flex gap={ 1 } className="align-items-end camera-buttons">
                     <Button variant="danger" onClick={ onClose }>{ LocalizeText('cancel') }</Button>
                     <Button variant="success" onClick={ takePicture }>{ LocalizeText('navigator.thumbeditor.save') }</Button>
diff --git a/src/components/navigator/NavigatorView.scss b/src/components/navigator/NavigatorView.scss
index bd085c859..0ce577145 100644
--- a/src/components/navigator/NavigatorView.scss
+++ b/src/components/navigator/NavigatorView.scss
@@ -47,6 +47,20 @@
 
 .nitro-room-info {
     width: $room-info-width;
+    resize: none;
+}
+
+.text-tag {
+    font-size: 10px;
+    background-color: #CEE9FA;
+}
+
+.text-tag:hover {
+    background-color: #449FCF;
+}
+
+.text-embed {
+    font-size: 10px;
 }
 
 .nitro-room-link {
diff --git a/src/components/navigator/views/NavigatorRoomInfoView.tsx b/src/components/navigator/views/NavigatorRoomInfoView.tsx
index 9f965c2bd..0af22a636 100644
--- a/src/components/navigator/views/NavigatorRoomInfoView.tsx
+++ b/src/components/navigator/views/NavigatorRoomInfoView.tsx
@@ -1,8 +1,7 @@
-import { GetCustomRoomFilterMessageComposer, NavigatorSearchComposer, RoomMuteComposer, RoomSettingsComposer, SecurityLevel, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
+import { AddFavouriteRoomMessageComposer, DeleteFavouriteRoomMessageComposer, GetCustomRoomFilterMessageComposer, NavigatorSearchComposer, RoomMuteComposer, RoomSettingsComposer, SecurityLevel, ToggleStaffPickMessageComposer, UpdateHomeRoomMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { FaLink } from 'react-icons/fa';
-import { CreateLinkEvent, DispatchUiEvent, GetGroupInformation, GetSessionDataManager, LocalizeText, ReportType, SendMessageComposer } from '../../../api';
-import { Base, Button, classNames, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView } from '../../../common';
+import { CreateLinkEvent, DispatchUiEvent, GetConfiguration, GetGroupInformation, GetSessionDataManager, GetUserProfile, LocalizeText, ReportType, SendMessageComposer } from '../../../api';
+import { Base, Button, Column, Flex, LayoutBadgeImageView, LayoutRoomThumbnailView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text, UserProfileIconView, classNames } from '../../../common';
 
 import { RoomWidgetThumbnailEvent } from '../../../events';
 import { useHelp, useNavigator } from '../../../hooks';
@@ -17,6 +16,7 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
     const { onCloseClick = null } = props;
     const [ isRoomPicked, setIsRoomPicked ] = useState(false);
     const [ isRoomMuted, setIsRoomMuted ] = useState(false);
+    const [ isOpenLink, setIsOpenLink ] = useState<boolean>(false);
     const { report = null } = useHelp();
     const { navigatorData = null } = useNavigator();
 
@@ -54,15 +54,14 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                 return;
             case 'open_room_thumbnail_camera':
                 DispatchUiEvent(new RoomWidgetThumbnailEvent(RoomWidgetThumbnailEvent.TOGGLE_THUMBNAIL));
+                onCloseClick();
                 return;
             case 'open_group_info':
                 GetGroupInformation(navigatorData.enteredGuestRoom.habboGroupId);
                 return;
-            case 'toggle_room_link':
-                CreateLinkEvent('navigator/toggle-room-link');
-                return;
             case 'open_room_settings':
                 SendMessageComposer(new RoomSettingsComposer(navigatorData.enteredGuestRoom.roomId));
+                onCloseClick();
                 return;
             case 'toggle_pick':
                 setIsRoomPicked(value => !value);
@@ -74,12 +73,21 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                 return;
             case 'room_filter':
                 SendMessageComposer(new GetCustomRoomFilterMessageComposer(navigatorData.enteredGuestRoom.roomId));
+                onCloseClick();
                 return;
             case 'open_floorplan_editor':
                 CreateLinkEvent('floor-editor/toggle');
+                onCloseClick();
                 return;
             case 'report_room':
                 report(ReportType.ROOM, { roomId: navigatorData.enteredGuestRoom.roomId, roomName: navigatorData.enteredGuestRoom.roomName });
+                onCloseClick();
+                return;
+            case 'set_favourite_room':
+                SendMessageComposer(new AddFavouriteRoomMessageComposer(navigatorData.enteredGuestRoom.roomId));    
+                return;
+            case 'set_unfavourite_room':
+                SendMessageComposer(new DeleteFavouriteRoomMessageComposer(navigatorData.enteredGuestRoom.roomId));    
                 return;
             case 'close':
                 onCloseClick();
@@ -109,40 +117,45 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                             <Column grow gap={ 1 } overflow="hidden">
                                 <Flex gap={ 1 }>
                                     <Column grow gap={ 1 }>
-                                        <Flex gap={ 1 }>
-                                            <i onClick={ () => processAction('set_home_room') } className={ classNames('flex-shrink-0 icon icon-house-small cursor-pointer', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } />
+                                        <Flex gap={ 1 } justifyContent="between">
                                             <Text bold>{ navigatorData.enteredGuestRoom.roomName }</Text>
+                                            <Flex>
+                                                <i title={ navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId ? LocalizeText('navigator.roominfo.makehome.tooltip') : '' } onClick={ () => processAction('set_home_room') } className={ classNames('flex-shrink-0 icon icon-house-small', ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'cursor-pointer'), ((navigatorData.homeRoomId !== navigatorData.enteredGuestRoom.roomId) && 'gray')) } />
+                                                { /* <Flex className={ navigatorData.enteredGuestRoom.ownerId !== GetSessionDataManager().userId ? 'ms-1' : 'ms-4' }>
+                                                    { (navigatorData.enteredGuestRoom.ownerId !== GetSessionDataManager().userId) &&
+                                                        <i onClick={ () => processAction('set_favourite_room') } className={ classNames('flex-shrink-0 icon icon-favourite-room-active cursor-pointer') } />
+                                                        <i onClick={ () => processAction('set_unfavourite_room') } className={ classNames('flex-shrink-0 icon icon-favourite-room-inactive cursor-pointer') } />
+                                                    }
+                                                </Flex> */ }
+                                            </Flex>
                                         </Flex>
                                         { navigatorData.enteredGuestRoom.showOwner &&
-                                            <Flex alignItems="center" gap={ 1 }>
+                                            <Flex pointer title={ LocalizeText('guide.help.common.profile.tooltip') } alignItems="center" gap={ 1 } onClick={ () => GetUserProfile(navigatorData.enteredGuestRoom.ownerId) }>
                                                 <Text small variant="muted">{ LocalizeText('navigator.roomownercaption') }</Text>
                                                 <Flex alignItems="center" gap={ 1 }>
                                                     <UserProfileIconView userId={ navigatorData.enteredGuestRoom.ownerId } />
                                                     <Text small>{ navigatorData.enteredGuestRoom.ownerName }</Text>
                                                 </Flex>
-                                            </Flex> }
+                                            </Flex>
+                                        }
                                         <Flex alignItems="center" gap={ 1 }>
                                             <Text small variant="muted">{ LocalizeText('navigator.roomrating') }</Text>
                                             <Text small>{ navigatorData.currentRoomRating }</Text>
                                         </Flex>
                                         { (navigatorData.enteredGuestRoom.tags.length > 0) &&
-                                            <Flex alignItems="center" gap={ 1 }>
+                                            <Flex className="mt-1" alignItems="center" gap={ 1 }>
                                                 { navigatorData.enteredGuestRoom.tags.map(tag =>
                                                 {
-                                                    return <Text key={ tag } pointer className="bg-muted rounded p-1" onClick={ event => processAction('navigator_search_tag', tag) }>#{ tag }</Text>
+                                                    return <Text key={ tag } pointer className="text-tag rounded p-1" onClick={ event => processAction('navigator_search_tag', tag) }>#{ tag }</Text>
                                                 }) }
-                                            </Flex> }
-                                    </Column>
-                                    <Column alignItems="center" gap={ 1 }>
-                                        { hasPermission('settings') &&
-                                            <i className="icon icon-cog cursor-pointer" title={ LocalizeText('navigator.room.popup.info.room.settings') } onClick={ event => processAction('open_room_settings') } /> }
-                                        <FaLink title={ LocalizeText('navigator.embed.caption') } className="cursor-pointer fa-icon" onClick={ event => CreateLinkEvent('navigator/toggle-room-link') } />
+                                            </Flex>
+                                        }
                                     </Column>
                                 </Flex>
-                                <Text small overflow="auto" style={ { maxHeight: 50 } }>{ navigatorData.enteredGuestRoom.description }</Text>
+                                <Text small overflow="auto" style={ { wordBreak: 'break-all' } }>{ navigatorData.enteredGuestRoom.description }</Text>
                                 <Flex justifyContent="center">
-                                    <LayoutRoomThumbnailView roomId={ navigatorData.enteredGuestRoom.roomId } customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef }>
-                                        { hasPermission('settings') && <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer top-0" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
+                                    <LayoutRoomThumbnailView title={ LocalizeText('tooltip.navigator.room.info.add.thumbnail') } roomId={ navigatorData.enteredGuestRoom.roomId } customUrl={ navigatorData.enteredGuestRoom.officialRoomPicRef }>
+                                        { hasPermission('settings') && <i className="icon icon-camera-small position-absolute cursor-pointer bottom-1 end-1" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
                                     </LayoutRoomThumbnailView>
                                 </Flex>
                                 { (navigatorData.enteredGuestRoom.habboGroupId > 0) &&
@@ -153,37 +166,52 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                                         </Text>
                                     </Flex>
                                 }
-                                <Flex gap={ 1 } className="w-100 room-tool-item" onClick={ () => processAction('toggle_room_link') }>
+                                <Flex gap={ 1 } className="w-100 room-tool-item" onClick={ () => setIsOpenLink(prevValue => !prevValue) }>
                                     <Base pointer title={ LocalizeText('room.like.button.text') } className="icon-width icon icon-link-room float-start" />
                                     <Text underline small >{ LocalizeText('navigator.embed.caption') }</Text>
                                 </Flex>
+                                { (isOpenLink) &&
+                                    <Column className="w-100">
+                                        <Text className="text-embed">{ LocalizeText('navigator.embed.info') }</Text>
+                                        <input type="text" readOnly className="form-control form-control-sm" value={ LocalizeText('navigator.embed.src', [ 'roomId' ], [ navigatorData.enteredGuestRoom.roomId.toString() ]).replace('${url.prefix}', GetConfiguration<string>('url.prefix', '')) } />
+                                    </Column>
+                                }
                             </Column>
                         </Flex>
                         <Column gap={ 1 }>
                             { hasPermission('staff_pick') &&
-                            <Button onClick={ () => processAction('toggle_pick') }>
-                                { LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }
-                            </Button> }
-                            <Button variant="danger" onClick={ () => processAction('report_room') }>
-                                { LocalizeText('help.emergency.main.report.room') }
-                            </Button>
+                                <Button onClick={ () => processAction('toggle_pick') }>
+                                    { LocalizeText(isRoomPicked ? 'navigator.staffpicks.unpick' : 'navigator.staffpicks.pick') }
+                                </Button>
+                            }
                             { hasPermission('settings') &&
-                            <>
-                                <Button onClick={ () => processAction('open_room_settings') }>
-                                    { LocalizeText('navigator.room.popup.info.room.settings') }
+                                <>
+                                    <Button onClick={ () => processAction('open_room_settings') }>
+                                        { LocalizeText('navigator.room.popup.info.room.settings') }
+                                    </Button>
+                                    <Button onClick={ () => processAction('room_filter') }>
+                                        { LocalizeText('navigator.roomsettings.roomfilter') }
+                                    </Button>
+                                    <Button onClick={ () => processAction('open_floorplan_editor') }>
+                                        { LocalizeText('open.floor.plan.editor') }
+                                    </Button>
+                                </>
+                            }
+                            <Flex justifyContent="center" alignItems="center">
+                                <Button className="col-10 mt-2 mb-2" onClick={ () => processAction('report_room') }>
+                                    <Base className="flex-shrink-0 icon icon-report-room" />
+                                    <Base className="vr" />
+                                    <b className="px-2">{ LocalizeText('help.emergency.main.report.room') }</b>
                                 </Button>
+                            </Flex>
+                            { hasPermission('settings') &&
                                 <Button onClick={ () => processAction('toggle_mute') }>
                                     { LocalizeText(isRoomMuted ? 'navigator.muteall_on' : 'navigator.muteall_off') }
                                 </Button>
-                                <Button onClick={ () => processAction('room_filter') }>
-                                    { LocalizeText('navigator.roomsettings.roomfilter') }
-                                </Button>
-                                <Button onClick={ () => processAction('open_floorplan_editor') }>
-                                    { LocalizeText('open.floor.plan.editor') }
-                                </Button>
-                            </> }
+                            }
                         </Column>
-                    </> }
+                    </>
+                }
 
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/hooks/navigator/useNavigator.ts b/src/hooks/navigator/useNavigator.ts
index 18d6ebdbb..119de67d1 100644
--- a/src/hooks/navigator/useNavigator.ts
+++ b/src/hooks/navigator/useNavigator.ts
@@ -1,4 +1,4 @@
-import { CanCreateRoomEventEvent, CantConnectMessageParser, DoorbellMessageEvent, FlatAccessDeniedMessageEvent, FlatCreatedEvent, FollowFriendMessageComposer, GenericErrorEvent, GetGuestRoomMessageComposer, GetGuestRoomResultEvent, GetUserEventCatsMessageComposer, GetUserFlatCatsMessageComposer, HabboWebTools, LegacyExternalInterface, NavigatorCategoryDataParser, NavigatorEventCategoryDataParser, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorOpenRoomCreatorEvent, NavigatorSearchEvent, NavigatorSearchResultSet, NavigatorTopLevelContext, RoomDataParser, RoomDoorbellAcceptedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomScoreEvent, RoomSettingsUpdatedEvent, SecurityLevel, UserEventCatsEvent, UserFlatCatsEvent, UserInfoEvent, UserPermissionsEvent } from '@nitrots/nitro-renderer';
+import { CanCreateRoomEventEvent, CantConnectMessageParser, DoorbellMessageEvent, FlatAccessDeniedMessageEvent, FlatCreatedEvent, FollowFriendMessageComposer, GenericErrorEvent, GetGuestRoomMessageComposer, GetGuestRoomResultEvent, GetUserEventCatsMessageComposer, GetUserFlatCatsMessageComposer, HabboWebTools, LegacyExternalInterface, NavigatorCategoryDataParser, NavigatorEventCategoryDataParser, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorOpenRoomCreatorEvent, NavigatorSearchEvent, NavigatorSearchResultSet, NavigatorTopLevelContext, RoomDataParser, RoomDoorbellAcceptedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomScoreEvent, RoomSettingsUpdatedEvent, SecurityLevel, ThumbnailStatusMessageEvent, UserEventCatsEvent, UserFlatCatsEvent, UserInfoEvent, UserPermissionsEvent } from '@nitrots/nitro-renderer';
 import { useState } from 'react';
 import { useBetween } from 'use-between';
 import { CreateLinkEvent, CreateRoomSession, DoorStateType, GetConfiguration, GetSessionDataManager, INavigatorData, LocalizeText, NotificationAlertType, SendMessageComposer, TryVisitRoom, VisitDesktop } from '../../api';
@@ -434,6 +434,25 @@ const useNavigatorState = () =>
         VisitDesktop();
     });
 
+    useMessageEvent<ThumbnailStatusMessageEvent>(ThumbnailStatusMessageEvent, event =>
+    {
+        const parser = event.getParser();
+    
+        if (!parser) return;
+
+        if (parser.ok)
+        {
+            simpleAlert(LocalizeText('navigator.thumbnail.camera.success'), NotificationAlertType.DEFAULT, null, null, LocalizeText('navigator.thumbnail.camera.title'));
+        }
+        else
+        {
+            if (parser.isRenderLimitHit)
+            {
+                simpleAlert(LocalizeText('camera.render.count.info'), NotificationAlertType.DEFAULT, null, null, LocalizeText('generic.alert.title'));
+            }
+        }
+    });
+
     useMessageEvent<NavigatorOpenRoomCreatorEvent>(NavigatorOpenRoomCreatorEvent, event => CreateLinkEvent('navigator/show'));
 
     return { categories, doorData, setDoorData, topLevelContext, topLevelContexts, searchResult, navigatorData };

From 50139bc727f6162222ef56779ca8ed441c734bdc Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Sat, 6 May 2023 18:27:18 +0200
Subject: [PATCH 026/134] =?UTF-8?q?=F0=9F=92=84=20Wardrobe=20improvements?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../avatar-editor/AvatarEditorView.scss       | 43 +++++++++++++------
 .../views/AvatarEditorModelView.tsx           |  6 ++-
 .../figure-set/AvatarEditorFigureSetView.tsx  |  2 +-
 .../AvatarEditorPaletteSetView.tsx            | 18 ++++++--
 4 files changed, 51 insertions(+), 18 deletions(-)

diff --git a/src/components/avatar-editor/AvatarEditorView.scss b/src/components/avatar-editor/AvatarEditorView.scss
index f399f6970..11263ff82 100644
--- a/src/components/avatar-editor/AvatarEditorView.scss
+++ b/src/components/avatar-editor/AvatarEditorView.scss
@@ -223,21 +223,28 @@
     height: 91.5%;
 
     .avatar-image {
-        width: 30px !important;
+        width: 40px !important;
         z-index: 4;
-        transform: scale(0.4);
+        transform: scale(0.5);
+    }
+
+    .avatar-figure {
+        margin-top: -46px;
+        margin-left: -9px;
+        image-rendering: auto !important;
     }
 
     .nitro-avatar-editor-wardrobe-container {
         background-color: #cacaca;
         border-radius: 0.3rem;
         border: solid 1px #000;
-        height: 100%;
+        height: 386px;
         width: 100%;
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-gap: 10px;
-        padding: 10px 0;
+        padding: 10px 12px 10px 0;
+        overflow-y: auto;
     }
 
     .avatar-container {
@@ -247,11 +254,6 @@
         width: 30px;
     }
 
-    .avatar-figure {
-        margin-top: -42px;
-        margin-left: -4px;
-    }
-
     .saved-outfit-button {
         margin-top: -3px;
         background-color: transparent;
@@ -357,15 +359,15 @@
 }
 
     .choose-clothing {
-        width: 370px;
+        width: 320px;
     }
 
     .color-picker-frame {
         border-image-source: url(@/assets/flash/avatareditor/color_frame.png);
         border-image-slice: 6 6 6 6 fill;
         border-image-width: 6px 6px 6px 6px;
-        width: 13px;
-        height: 19px;
+        width: 14px;
+        height: 21px;
         border-radius: 4px;
 
         &.active {
@@ -498,10 +500,27 @@
 
 .avatar-parts-container {
     height: 70%;
+    padding-left: 10px;
 }
 
 .avatar-color-palette-container {
     height: 30%;
+    width: 100%!important;
+    padding-left: 10px;
+}
+
+.dual-palette {
+    display: flex !important;
+    flex-direction: row !important;
+}
+
+.avatar-editor-palette-set-view {
+    padding-right: 15px !important;
+    flex-grow: 1;
+}
+
+.clothing-container {
+    padding-right: 15px !important;
 }
 
 .action-buttons {
diff --git a/src/components/avatar-editor/views/AvatarEditorModelView.tsx b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
index 9b1f961f5..8f1d22fbe 100644
--- a/src/components/avatar-editor/views/AvatarEditorModelView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
@@ -53,7 +53,7 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
 
     return (
         <Grid>
-            <Column className="choose-clothing overflow-auto">
+            <Column className="choose-clothing overflow-y-auto overflow-x-hidden">
                 <Flex className="px-3" gap={ 4 }>
                     { model.canSetGender &&
                     <>
@@ -80,7 +80,9 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
                 <Column className="avatar-parts-container" size={ 5 } overflow="hidden">
                     <AvatarEditorFigureSetView model={ model } category={ activeCategory } setMaxPaletteCount={ setMaxPaletteCount } />
                 </Column>
-                <Column size={ 5 } overflow="hidden" className="avatar-color-palette-container">
+                <Column overflow="hidden" className={
+                    maxPaletteCount === 2 ? 'avatar-color-palette-container dual-palette' : 'avatar-color-palette-container'
+                }>
                     { (maxPaletteCount >= 1) &&
                     <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(0) } paletteIndex={ 0 } /> }
                     { (maxPaletteCount === 2) &&
diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index 3755731c2..29684118f 100644
--- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -36,7 +36,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     }, [ model, category ]);
 
     return (
-        <AutoGrid innerRef={ elementRef } columnCount={ 3 } columnMinHeight={ 50 }>
+        <AutoGrid className="clothing-container" innerRef={ elementRef } columnCount={ 3 } columnMinHeight={ 50 }>
             { (category.parts.length > 0) && category.parts.map((item, index) =>
                 <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ event => selectPart(item) } />) }
         </AutoGrid>
diff --git a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
index 76e2d40ee..d505685a5 100644
--- a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
+++ b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
@@ -33,9 +33,21 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
     }, [ model, category ]);
 
     return (
-        <AutoGrid className="py-1" innerRef={ elementRef } gap={ 1 } columnCount={ 5 } columnMinWidth={ 13 }>
-            { (paletteSet.length > 0) && paletteSet.map((item, index) =>
-                <AvatarEditorPaletteSetItem key={ index } colorItem={ item } onClick={ event => selectColor(item) } />) }
+        <AutoGrid
+            className="py-1 avatar-editor-palette-set-view"
+            innerRef={ elementRef }
+            gap={ 1 }
+            columnCount={ 8 }
+            columnMinWidth={ 14 }
+        >
+            { paletteSet.length > 0 &&
+                paletteSet.map((item, index) => (
+                    <AvatarEditorPaletteSetItem
+                        key={ index }
+                        colorItem={ item }
+                        onClick={ (event) => selectColor(item) }
+                    />
+                )) }
         </AutoGrid>
     );
 }

From 7fcd62d27c7e9eb7aebd993d8fc6a762db9ceae8 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Sat, 6 May 2023 18:47:31 +0200
Subject: [PATCH 027/134] =?UTF-8?q?=E2=9C=A8=20Only=20disable=20saved=20ou?=
 =?UTF-8?q?tfit=20buttons=20when=20not=20HC=20if=20HC=20is=20enabled?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 154341fb1..985afd10a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -29,3 +29,5 @@ Thumbs.db
 .env
 public/renderer-config*
 public/ui-config*
+renderer-config*
+ui-config*

From dc2c70c76f11a06f79fef01cb7b2e3e0880090e7 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Sat, 6 May 2023 20:48:24 +0200
Subject: [PATCH 028/134] =?UTF-8?q?=F0=9F=90=9B=20Fix=20height=20issues=20?=
 =?UTF-8?q?with=20inventory?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../avatar-editor/views/AvatarEditorWardrobeView.tsx        | 4 ++--
 src/components/inventory/InventoryView.scss                 | 2 +-
 src/components/inventory/views/badge/InventoryBadgeView.tsx | 6 +++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
index 28d076c6d..c0dc49089 100644
--- a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
@@ -85,14 +85,14 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
                         <button
                             className="saved-outfit-button"
                             onClick={ event => saveFigureAtWardrobeIndex(index) }
-                            disabled={ clubLevel > GetClubMemberLevel() }>
+                            disabled={ clubLevel > GetClubMemberLevel() && !hcDisabled }>
                             <MdKeyboardArrowRight />
                         </button>
                         { figureContainer && (
                             <button
                                 className="saved-outfit-button"
                                 onClick={ event => wearFigureAtIndex(index) }
-                                disabled={ clubLevel > GetClubMemberLevel() }
+                                disabled={ clubLevel > GetClubMemberLevel() && !hcDisabled }
                             >
                                 <MdKeyboardArrowLeft />
                             </button>
diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index 0f9506c30..a27cad0cf 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -1,6 +1,6 @@
 .nitro-inventory {
     width: $inventory-width;
-    min-height: $inventory-height;
+    height: $inventory-height;
     min-width: 326px;
     color: #000;
 
diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index 388be7be7..b70c5f334 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -76,12 +76,12 @@ export const InventoryBadgeView: FC<{}> = props =>
                 </Column>
             </Grid>
             { !!selectedBadgeCode &&
-                <Flex className="bg-white py-1 px-2 rounded mt-2" justifyContent={ 'between' } alignItems={ 'end' } gap={ 2 }>
+                <Flex className="bg-white pb-1 px-2 rounded mt-2" style={ { height: '50px' } } justifyContent={ 'between' } alignItems={ 'end' } gap={ 2 }>
                     <Flex alignItems="start" gap={ 2 }>
                         <LayoutBadgeImageView shrink badgeCode={ selectedBadgeCode } />
-                        <Text className="font-bold">{ LocalizeBadgeName(selectedBadgeCode) }</Text>
+                        <Text className="font-bold mt-2">{ LocalizeBadgeName(selectedBadgeCode) }</Text>
                     </Flex>
-                    <Button className="btn btn-primary" style={ { fontSize: '12px' } } disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
+                    <Button className="btn btn-primary mb-1" style={ { fontSize: '12px' } } disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
                 </Flex> }
             <div className="nitro-progress-bar text-white mt-1">
                 <Text small center style={ { marginTop: '-1px' } }>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>

From 0f5e67fdfed70d21d5e622a3b84fa9cc5707d686 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 7 May 2023 01:31:04 +0200
Subject: [PATCH 029/134] Find friends - Feature added in friendbar and nav

---
 src/assets/flash/toolbar/findfriend-bg.png    | Bin 2039 -> 2034 bytes
 src/components/friends/FriendsView.scss       |   4 ++++
 .../views/friends-bar/FriendBarItemView.tsx   |  14 ++++++++++----
 src/components/navigator/NavigatorView.tsx    |   4 ++--
 src/hooks/friends/useFriends.ts               |  15 +++++++++++++--
 5 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/assets/flash/toolbar/findfriend-bg.png b/src/assets/flash/toolbar/findfriend-bg.png
index adb7aaf5480bd90a7ac94773fcd777a92752b941..dafdd3fd3d60bc5d3eb720250b0a4d7d12854236 100644
GIT binary patch
delta 479
zcmey)|A~KsWEwLA1H*JJQBfepSRCZ;#IWw1%u67LCEd~2k%3`jKlh(RRv@1zz$e5N
zNEhGw88UZ0kYQL`>kU#@666>B|Nnmm2d$M~fPBsZkH}&M1~C;7W}Gd0OoV}f?b}2v
ze<oh8iCy{3yj%(se>$-ODFubi){GaJOu<Yb&!!@`z}MHxBeS?9zo^m<CJdA)N=dT{
zPAx<dQkbmDvX@UmA4TX1%UMhz%gJw8r_`gUw9!X5&_*Ad-4Jyysl~}fnFS@8`FUX5
zAfiDoZa^MTpA}GNZfZ#)h-Y6>keHmETB4Aemtw0_q-1X=Qa#Nd7$`-to-U3d5$<nq
zY-D6m;9z!~^0#~%gYggFeVcb}5sG9DzI=&)vY1QIF0H+Py-n<nooD#@`_KH^-{0N_
z-`t*m-)<_9xsmbn|ATBg`tw(n$jX2Fy8GJ7$H$laX5X%0EU(}t$9RBc$uyu%44$rj
JF6*2UngByXl!gER

delta 496
zcmeyw|DAt=q#_#w1H*zZPt}1GXMsm#F$05`DhM-r2B~~tU|^d+vEH9iVd91S$xe(;
zn>!gVFi9!cROA-;`dWEp7MJ7~RoW@o6s4qD1*aC;P3~ja%cKvY#3vW9ZbLAYCKoWP
zPM*Y;U#|~Tt`AcWWTG1dmUBrhPA<wUD9OyvgDDSkaRV_ctbiJFQ%e$o9Q%rb#N_PM
z5{1;f6kDYtC3`!$(~m8I9{K0#;uumf=k1-1y@wn`TrYmtjXJo9S!GVZrCs$x8l5du
zUobct&TlZ4l6Gd(KD%4}a|M%k`I|S^M!`!vB=i?Z&6Irl)oIeV{o!9@XHVK<9ry3?
z&JV1IyZ2hhJxbpklCn%msq@|9_fe^7I?wXv`M2xa^V#KYy=S+!b;-qO{~uLT*%!Qz
zGJWcM=z8w0?KAJQu^%yat4W3sl?Wy=EVC|q^GnTDKEKT_)s{TJ%628uYL)8W-i-aX
zJF0BmwzRXlZG9bD_t4mQ-lM~ZmH#z32kifJUB}#y+wGN<>-k(@STK0H`njxgN@xNA
D9&*R%

diff --git a/src/components/friends/FriendsView.scss b/src/components/friends/FriendsView.scss
index 8aa06a17b..525d6e9fb 100644
--- a/src/components/friends/FriendsView.scss
+++ b/src/components/friends/FriendsView.scss
@@ -214,6 +214,10 @@
             }
         }
     }
+    
+    .search-content {
+        margin-left: -37px;
+    }
 }
 
 .nitro-friends-messenger {
diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
index 84ec6a674..129e011c7 100644
--- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx
+++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
@@ -1,7 +1,7 @@
-import { MouseEventType } from '@nitrots/nitro-renderer';
+import { FindNewFriendsMessageComposer, MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
-import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../api';
-import { Base, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
+import { GetUserProfile, LocalizeText, MessengerFriend, OpenMessengerChat, SendMessageComposer } from '../../../../api';
+import { Base, Button, LayoutAvatarImageView, LayoutBadgeImageView } from '../../../../common';
 import { useFriends } from '../../../../hooks';
 
 export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
@@ -33,9 +33,15 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
     if(!friend)
     {
         return (
-            <div ref={ elementRef } className="btn find-friends friend-bar-item friend-bar-search">
+            <div ref={ elementRef } className={ 'btn find-friends friend-bar-item friend-bar-search ' + (isVisible ? 'bottom-5 friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
                 <div className="friend-bar-item-head position-absolute"/>
                 <div className="friend-bar-text">{ LocalizeText('friend.bar.find.title') }</div>
+                { isVisible &&
+                    <div className="search-content mt-3">
+                        <div className="bg-white text-black">{ LocalizeText('friend.bar.find.text') }</div>
+                        <Button className="mt-2" variant="white" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>{ LocalizeText('friend.bar.find.button') }</Button>
+                    </div>
+                }
             </div>
         );
     }
diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
index 1e27c9996..93d566780 100644
--- a/src/components/navigator/NavigatorView.tsx
+++ b/src/components/navigator/NavigatorView.tsx
@@ -1,4 +1,4 @@
-import { ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomSessionEvent } from '@nitrots/nitro-renderer';
+import { ConvertGlobalRoomIdMessageComposer, FindNewFriendsMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { AddEventLinkTracker, CreateLinkEvent, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TryVisitRoom } from '../../api';
 import { Base, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../common';
@@ -225,7 +225,7 @@ export const NavigatorView: FC<{}> = props =>
                                     </Text>
                                 </Flex>
                                 { (searchResult?.code !== 'myworld_view' && searchResult?.code !== 'roomads_view') &&
-                                    <Flex className="nav-random-room">
+                                    <Flex className="nav-random-room" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>
                                         <Text variant="white" bold className="nav-bottom-buttons-text">
                                             { LocalizeText('navigator.random.room') }
                                         </Text>
diff --git a/src/hooks/friends/useFriends.ts b/src/hooks/friends/useFriends.ts
index 05437b2a8..c40f22c0e 100644
--- a/src/hooks/friends/useFriends.ts
+++ b/src/hooks/friends/useFriends.ts
@@ -1,8 +1,9 @@
-import { AcceptFriendMessageComposer, DeclineFriendMessageComposer, FollowFriendMessageComposer, FriendListFragmentEvent, FriendListUpdateComposer, FriendListUpdateEvent, FriendParser, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitComposer, MessengerInitEvent, NewFriendRequestEvent, RequestFriendComposer, SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
+import { AcceptFriendMessageComposer, DeclineFriendMessageComposer, FindFriendsProcessResultEvent, FollowFriendMessageComposer, FriendListFragmentEvent, FriendListUpdateComposer, FriendListUpdateEvent, FriendParser, FriendRequestsEvent, GetFriendRequestsComposer, MessengerInitComposer, MessengerInitEvent, NewFriendRequestEvent, RequestFriendComposer, SetRelationshipStatusComposer } from '@nitrots/nitro-renderer';
 import { useEffect, useMemo, useState } from 'react';
 import { useBetween } from 'use-between';
-import { CloneObject, GetSessionDataManager, MessengerFriend, MessengerRequest, MessengerSettings, SendMessageComposer } from '../../api';
+import { CloneObject, GetSessionDataManager, LocalizeText, MessengerFriend, MessengerRequest, MessengerSettings, SendMessageComposer } from '../../api';
 import { useMessageEvent } from '../events';
+import { useNotification } from '../notification';
 
 const useFriendsState = () =>
 {
@@ -11,6 +12,7 @@ const useFriendsState = () =>
     const [ sentRequests, setSentRequests ] = useState<number[]>([]);
     const [ dismissedRequestIds, setDismissedRequestIds ] = useState<number[]>([]);
     const [ settings, setSettings ] = useState<MessengerSettings>(null);
+    const { simpleAlert } = useNotification();
 
     const onlineFriends = useMemo(() =>
     {
@@ -248,6 +250,15 @@ const useFriendsState = () =>
         });
     });
 
+    useMessageEvent<FindFriendsProcessResultEvent>(FindFriendsProcessResultEvent, event =>
+    {
+        const parser = event.getParser();
+
+        if (!parser) return;
+
+        simpleAlert(LocalizeText(!parser.success ? 'friendbar.find.error.text' : 'friendbar.find.success.text'), '', '', '', LocalizeText(!parser.success ? 'friendbar.find.error.title' : 'friendbar.find.success.title'));
+    });
+
     useEffect(() =>
     {
         SendMessageComposer(new MessengerInitComposer());

From 31dfe7437e30cdc7c6c96b44db219661aadda85e Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 7 May 2023 20:51:48 +0200
Subject: [PATCH 030/134] Room promotes - Design like Habbo

---
 src/assets/images/icons/room-promote.png      | Bin 0 -> 592 bytes
 src/assets/styles/icons.scss                  |  18 +++++++++
 src/common/index.scss                         |  33 ++++++++++++++++
 src/common/layout/LayoutInputErrorView.tsx    |  18 +++++++++
 src/common/layout/index.ts                    |   3 +-
 .../NotificationCenterView.scss               |   2 +-
 src/components/right-side/RightSideView.tsx   |   2 +-
 src/components/room/widgets/RoomWidgets.scss  |  13 +++++++
 .../room-promotes/RoomPromotesWidgetView.tsx  |  36 ++++++++++++++----
 .../views/RoomPromoteEditWidgetView.tsx       |  19 +++++----
 .../views/RoomPromoteMyOwnEventWidgetView.tsx |  15 ++++----
 .../views/RoomPromoteOtherEventWidgetView.tsx |  20 ++++------
 12 files changed, 138 insertions(+), 41 deletions(-)
 create mode 100644 src/assets/images/icons/room-promote.png
 create mode 100644 src/common/layout/LayoutInputErrorView.tsx

diff --git a/src/assets/images/icons/room-promote.png b/src/assets/images/icons/room-promote.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc83666b8f13c8c5dd5412092afa2f460c33c805
GIT binary patch
literal 592
zcmeAS@N?(olHy`uVBq!ia0vp^0zfRx!3-qV?X3L^q!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>?+Wk<aRt)z=g&WW{CG=Ci+aTDgxFZ;O`pumcQ|eSq!}?cY0*`SvR&K%
z{WUM&X<5Fz>h6Edh&kK;{<SFEnY8eVRoQN<^4*ty{I9(8-+9ZY9smAWmF>Ft<Nxdr
zzh}Sytr<DjvV3R7-Ty9|Kb7D4Z(g?3s(hDO*-p!{UDfyg@A&&qBVtZiSlHgTKP=04
zZT<aw_Q$__-u^Hx-C<F>(`WsoSs(s5ZvB+H<XZBgYv$#<DuL!~`jourYUt!M;o;#x
zXLB;L8v-f2k|4j}|C9iRUB3&>Kn50gL>4nJ@ErzW#^d=bQh<V2JzX3_G=f9>Uk4pl
z5NPe+=<6twHThP>Vc+1S&b<}=p_TuyPg*)zex796_nP!}#+Joxc03k8=POvBZR_B7
zdz@qA<g`&?J_m!-GfiHL;OFAEUc7v|=7Gh6kYi`oe>rqw6631ZvuEzxyZidL##b|v
zS9Y9Qwnf`0>*N7Tp|_8#bj1%@mmCnb+<tS?N58Nm4OjBsKiQn``t_5P<AIw0+bYeE
zh0BY{HlJU1J-)r_*6sH!Os^Jw@4aeY`Q^`-3jb&suFe<29EJT~Pun$K_;}}N)t_9a
dH8-4pFvrJey609&EdhFv!PC{xWt~$(696>FJBk1R

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 13631dd24..6b7124e2a 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -357,6 +357,24 @@
         height: 11px;
     }
 
+    &.icon-room-promote {
+        background: url('@/assets/images/icons/room-promote.png');
+        width: 16px;
+        height: 19px;
+    }
+
+    &.icon-notification_arrow_left {
+        background: url('@/assets/flash/notifications/notification_arrow_left.png');
+        width: 18px;
+        height: 19px;
+    }
+
+    &.icon-notification_arrow_down {
+        background: url('@/assets/flash/notifications/notification_arrow_down.png');
+        width: 18px;
+        height: 19px;
+    }
+
     &.icon-camera-small {
         background: url('@/assets/images/icons/camera-small.png');
         width: 17px;
diff --git a/src/common/index.scss b/src/common/index.scss
index 34a8c2f5a..978e4c75e 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -702,4 +702,37 @@
 .notification-height {
     max-height: 85px;
 }
+
+.remove-outline {
+    outline: 0;
+}
+
+.input-error {
+    background-color: #F18F9B;
+}
+
+.nitro-input-error-popup {
+    user-select: none;
+    position: absolute;
+    width: auto;
+    height: 21px;
+    background: white;
+    text-align: center;
+    border-radius: 4px;
+    border: 1px solid black;
+    margin-left: 20px;
+    margin-top: -10px;
+    
+    &:before {
+        border: 10px solid white;
+        content: '';
+        border-left-color: transparent;
+        border-bottom-color: transparent;
+        border-right-color: transparent;
+        position: absolute;
+        bottom: -20px;
+        left: calc(50% - 15px);
+    }
+}
+
 @import './card/NitroCardView';
diff --git a/src/common/layout/LayoutInputErrorView.tsx b/src/common/layout/LayoutInputErrorView.tsx
new file mode 100644
index 000000000..e7aa128a3
--- /dev/null
+++ b/src/common/layout/LayoutInputErrorView.tsx
@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { Flex, Text } from '..';
+
+interface LayoutInputErrorViewProps
+{
+    text: string;
+}
+
+export const LayoutInputErrorView: FC<LayoutInputErrorViewProps> = props =>
+{
+    const { text = null } = props;
+    
+    return (
+        <Flex className="nitro-input-error-popup" alignItems="center" justifyContent="center">
+            <Text className="px-2">{ text }</Text>
+        </Flex>
+    );
+};
diff --git a/src/common/layout/index.ts b/src/common/layout/index.ts
index 3c4238e10..bdc611564 100644
--- a/src/common/layout/index.ts
+++ b/src/common/layout/index.ts
@@ -8,6 +8,7 @@ export * from './LayoutFurniImageView';
 export * from './LayoutGiftTagView';
 export * from './LayoutGridItem';
 export * from './LayoutImage';
+export * from './LayoutInputErrorView';
 export * from './LayoutItemCountView';
 export * from './LayoutLoadingSpinnerView';
 export * from './LayoutMiniCameraView';
@@ -19,5 +20,5 @@ export * from './LayoutRarityLevelView';
 export * from './LayoutRoomPreviewerView';
 export * from './LayoutRoomThumbnailView';
 export * from './LayoutTrophyView';
-export * from './limited-edition';
 export * from './UserProfileIconView';
+export * from './limited-edition';
diff --git a/src/components/notification-center/NotificationCenterView.scss b/src/components/notification-center/NotificationCenterView.scss
index 214c3ad2c..7f42b4391 100644
--- a/src/components/notification-center/NotificationCenterView.scss
+++ b/src/components/notification-center/NotificationCenterView.scss
@@ -62,7 +62,7 @@
     padding: 6px 5px;
     border-image-source: url(@/assets/flash/notifications/notifications_bg.png);
     border-image-slice: 9 9 9 9 fill;
-    border-image-width: 9px 9px 9px 9px;
+    border-image-width: 9px 9px 10px 9px;
     font-size: $font-size-sm;
     padding-right: 3px;
     padding-left: 0px;
diff --git a/src/components/right-side/RightSideView.tsx b/src/components/right-side/RightSideView.tsx
index 92e812905..671e63631 100644
--- a/src/components/right-side/RightSideView.tsx
+++ b/src/components/right-side/RightSideView.tsx
@@ -13,10 +13,10 @@ export const RightSideView: FC<{}> = props =>
         <div className="nitro-right-side">
             <Column position="relative" gap={ 1 }>
                 <PurseView />
+                <RoomPromotesWidgetView />
                 <GroupRoomInformationView />
                 <MysteryBoxExtensionView />
                 <OfferView/>
-                <RoomPromotesWidgetView />
                 <NotificationCenterView />
             </Column>
         </div>
diff --git a/src/components/room/widgets/RoomWidgets.scss b/src/components/room/widgets/RoomWidgets.scss
index 1ab39802e..bee6c5ad1 100644
--- a/src/components/room/widgets/RoomWidgets.scss
+++ b/src/components/room/widgets/RoomWidgets.scss
@@ -145,6 +145,19 @@
     margin-right: 4px;
 }
 
+.text-no-promote {
+    font-size: 13px;
+}
+
+.icon-style {
+    margin-top: 1px;
+    margin-left: 4px;
+}
+
+.arrow-right-style {
+    margin-right: 4px;
+}
+
 @import './avatar-info/AvatarInfoWidgetView';
 @import './chat/ChatWidgetView';
 @import './chat-input/ChatInputView';
diff --git a/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx b/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
index bfd66fa17..d95fbc483 100644
--- a/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
+++ b/src/components/room/widgets/room-promotes/RoomPromotesWidgetView.tsx
@@ -1,9 +1,8 @@
 import { DesktopViewEvent } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import { GetSessionDataManager } from '../../../../api';
+import { CreateLinkEvent, GetSessionDataManager, LocalizeText } from '../../../../api';
 import { Base, Column, Flex, Text } from '../../../../common';
-import { useMessageEvent, useRoomPromote } from '../../../../hooks';
+import { useMessageEvent, useNavigator, useRoomPromote } from '../../../../hooks';
 import { RoomPromoteEditWidgetView, RoomPromoteMyOwnEventWidgetView, RoomPromoteOtherEventWidgetView } from './views';
 
 export const RoomPromotesWidgetView: FC<{}> = props =>
@@ -11,6 +10,7 @@ export const RoomPromotesWidgetView: FC<{}> = props =>
     const [ isEditingPromote, setIsEditingPromote ] = useState<boolean>(false);
     const [ isOpen, setIsOpen ] = useState<boolean>(true);
     const { promoteInformation, setPromoteInformation } = useRoomPromote();
+    const { navigatorData } = useNavigator();
 
     useMessageEvent<DesktopViewEvent>(DesktopViewEvent, event =>
     {
@@ -21,13 +21,33 @@ export const RoomPromotesWidgetView: FC<{}> = props =>
 
     return (
         <>
+            { (promoteInformation?.data.adId === -1 && navigatorData?.enteredGuestRoom?.ownerId === GetSessionDataManager().userId) &&
+                <Base className="nitro-notification-bubble">
+                    <Column>
+                        <Flex className="grouproom-header" alignItems="center" justifyContent="between" pointer onClick={ event => CreateLinkEvent('catalog/open/room_event') }>
+                            <Flex className="icon-style">
+                                <Base className="icon icon-room-promote" />
+                            </Flex>
+                            <Text bold underline className="text-no-promote">{ LocalizeText('roomad.get.event') }</Text>
+                            <Flex className="arrow-right-style">
+                                <Base className="icon icon-notification_arrow_left" />
+                            </Flex>
+                        </Flex>
+                    </Column>
+                </Base>
+            }
             { promoteInformation.data.adId !== -1 &&
-                <Base className="nitro-notification-bubble rounded">
+                <Base className="nitro-notification-bubble">
                     <Column>
-                        <Flex alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
-                            <Text variant="white" overflow="hidden">{ promoteInformation.data.eventName }</Text>
-                            { isOpen && <FaChevronUp className="fa-icon" /> }
-                            { !isOpen && <FaChevronDown className="fa-icon" /> }
+                        <Flex className="grouproom-header" alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
+                            <Flex className="icon-style">
+                                <Base className="icon icon-room-promote" />
+                            </Flex>
+                            <Text bold variant="white" overflow="hidden">{ promoteInformation.data.eventName }</Text>
+                            <Flex className="arrow-right-style">
+                                { isOpen && <Base className="icon icon-notification_arrow_down" /> }
+                                { !isOpen && <Base className="icon icon-notification_arrow_left" /> }
+                            </Flex>
                         </Flex>
                         { (isOpen && GetSessionDataManager().userId !== promoteInformation.data.ownerAvatarId) &&
                             <RoomPromoteOtherEventWidgetView
diff --git a/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx b/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
index f9b84620f..1adcaa72c 100644
--- a/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
+++ b/src/components/room/widgets/room-promotes/views/RoomPromoteEditWidgetView.tsx
@@ -1,7 +1,7 @@
 import { EditEventMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Button, Column, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
+import { Column, LayoutInputErrorView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../common';
 
 interface RoomPromoteEditWidgetViewProps
 {
@@ -19,24 +19,23 @@ export const RoomPromoteEditWidgetView: FC<RoomPromoteEditWidgetViewProps> = pro
 
     const updatePromote = () =>
     {
+        if (!newEventName) return;
+        
         SendMessageComposer(new EditEventMessageComposer(eventId, newEventName, newEventDescription));
-        setIsEditingPromote(false);
     }
 
     return (
-        <NitroCardView className="nitro-guide-tool" theme="primary-slim">
+        <NitroCardView className="nitro-guide-tool no-resize" theme="primary">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.eventsettings.editcaption') } onCloseClick={ () => setIsEditingPromote(false) } />
             <NitroCardContentView className="text-black">
-                <Column>
+                <Column gap={ 0 }>
                     <Text bold>{ LocalizeText('navigator.eventsettings.name') }</Text>
-                    <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('navigator.eventsettings.name') } maxLength={ 64 } value={ newEventName } onChange={ event => setNewEventName(event.target.value) } />
+                    <input type="text" className={ `remove-outline ${ (newEventName.length < 3) ? 'input-error' : '' }` } maxLength={ 64 } value={ newEventName } onChange={ event => setNewEventName(event.target.value) } onBlur={ updatePromote } />
+                    { (newEventName.length < 3) && <LayoutInputErrorView text={ LocalizeText('navigator.eventsettings.nameerr') } /> }
                 </Column>
-                <Column>
+                <Column gap={ 0 }>
                     <Text bold>{ LocalizeText('navigator.eventsettings.desc') }</Text>
-                    <textarea className="form-control form-control-sm" placeholder={ LocalizeText('navigator.eventsettings.desc') } maxLength={ 64 } value={ newEventDescription } onChange={ event => setNewEventDescription(event.target.value) }></textarea>
-                </Column>
-                <Column>
-                    <Button fullWidth disabled={ !newEventName || !newEventDescription } variant={ (!newEventName || !newEventDescription) ? 'danger' : 'success' } onClick={ event => updatePromote() }>{ LocalizeText('navigator.eventsettings.edit') }</Button>
+                    <textarea className="remove-outline" rows={ 6 } maxLength={ 64 } value={ newEventDescription } onChange={ event => setNewEventDescription(event.target.value) } onBlur={ updatePromote }></textarea>
                 </Column>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx b/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx
index 169cc9b2d..4a9acc565 100644
--- a/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx
+++ b/src/components/room/widgets/room-promotes/views/RoomPromoteMyOwnEventWidgetView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { CreateLinkEvent, LocalizeText } from '../../../../../api';
-import { Button, Flex, Grid, Text } from '../../../../../common';
+import { Flex, Text } from '../../../../../common';
 import { useRoomPromote } from '../../../../../hooks';
 
 interface RoomPromoteMyOwnEventWidgetViewProps
@@ -22,14 +22,13 @@ export const RoomPromoteMyOwnEventWidgetView: FC<RoomPromoteMyOwnEventWidgetView
 
     return (
         <>
-            <Flex alignItems="center" gap={ 2 } style={ { overflowWrap: 'anywhere' } }>
-                <Text variant="white">{ eventDescription }</Text>
+            <Flex className="px-2 py-2" alignItems="center" gap={ 2 } style={ { overflowWrap: 'anywhere', overflow: 'hidden', height: '60px' } }>
+                <Text variant="white" dangerouslySetInnerHTML={ { __html: eventDescription.replace(/\n/g,'<br />') } } />
+            </Flex>
+            <Flex className="mb-1" alignItems="center" justifyContent="around">
+                <Text pointer underline onClick={ event => setIsEditingPromote(true) }>{ LocalizeText('navigator.roominfo.editevent') }</Text>
+                <Text pointer underline onClick={ event => extendPromote() }>{ LocalizeText('roomad.extend.event') }</Text>
             </Flex>
-            <br /><br />
-            <Grid className="d-flex align-items-center justify-content-end gap-2">
-                <Button className="btn btn-primary w-100 btn-sm" onClick={ event => setIsEditingPromote(true) }>{ LocalizeText('navigator.roominfo.editevent') }</Button>
-                <Button className="btn btn-success w-100 btn-sm" onClick={ event => extendPromote() }>{ LocalizeText('roomad.extend.event') }</Button>
-            </Grid>
         </>
     );
 };
diff --git a/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx b/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx
index 5adb51761..30d066c81 100644
--- a/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx
+++ b/src/components/room/widgets/room-promotes/views/RoomPromoteOtherEventWidgetView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../../api';
-import { Base, Column, Flex, Text } from '../../../../../common';
+import { Flex, Text } from '../../../../../common';
 
 interface RoomPromoteOtherEventWidgetViewProps
 {
@@ -13,18 +13,14 @@ export const RoomPromoteOtherEventWidgetView: FC<RoomPromoteOtherEventWidgetView
 
     return (
         <>
-            <Flex alignItems="center" gap={ 2 } style={ { overflowWrap: 'anywhere' } }>
-                <Text variant="white">{ eventDescription }</Text>
+            <Flex className="px-2 py-2" alignItems="center" gap={ 2 } style={ { overflowWrap: 'anywhere', overflow: 'hidden', height: '60px' } }>
+                <Text variant="white" dangerouslySetInnerHTML={ { __html: eventDescription.replace(/\n/g,'<br />') } } />
+            </Flex>
+            <Flex className="bg-light-dark rounded mt-4">
+                <Flex fit center>
+                    <Text variant="white" center>{ LocalizeText('navigator.eventinprogress') }</Text>
+                </Flex>
             </Flex>
-            <br /><br />
-            <Column alignItems="center" gap={ 1 }>
-                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark rounded">
-                    <Flex fit center position="absolute">
-                        <Text variant="white" center>{ LocalizeText('navigator.eventinprogress') }</Text>
-                    </Flex>
-                    <Text>&nbsp;</Text>
-                </Base>
-            </Column>
         </>
     );
 };

From 3a4f4652ba67fc9de1f4e7320d2c34646724d145 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 7 May 2023 21:48:46 +0200
Subject: [PATCH 031/134] Pet infostand - Added buttons below

---
 .../infostand/InfoStandWidgetPetView.tsx      | 152 +++++++++++-------
 1 file changed, 90 insertions(+), 62 deletions(-)

diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
index 5362120b1..63b36ca71 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
@@ -1,7 +1,7 @@
 import { PetRespectComposer, PetType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { AvatarInfoPet, CreateLinkEvent, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Base, Column, Flex, LayoutPetImageView, Text } from '../../../../../common';
+import { Base, Button, Column, Flex, LayoutPetImageView, Text } from '../../../../../common';
 import { useRoom, useSessionInfo } from '../../../../../hooks';
 
 interface InfoStandWidgetPetViewProps
@@ -73,73 +73,101 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
     }
 
     return (
-        <Column className="nitro-infostand rounded">
-            <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
-                <Column gap={ 1 }>
-                    <Flex alignItems="center" justifyContent="between" gap={ 1 }>
-                        &nbsp;
-                        <Text variant="white" center bold small wrap>{ avatarInfo.name }</Text>
-                        <Base className="infostand-close" onClick={ onClose } />
-                    </Flex>
-                    <Text variant="white" center small wrap>{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
-                </Column>
-                <Column gap={ 1 }>
-                    <Flex justifyContent="between">
-                        <Column fullWidth overflow="hidden" className="body-image pet p-1">
-                            <LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
-                        </Column>
-                        <Text variant="white" center small wrap className="px-2">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
-                    </Flex>
-                    <Flex gap={ 1 }>
-                        <Column grow gap={ 1 }>
-                            <Column alignItems="center" gap={ 1 }>
-                                <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
-                                <Flex fit position="absolute">
-                                    <Base className="icon-happiness" />
-                                </Flex>
-                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
-                                    <Flex fit center position="absolute">
-                                        <Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
-                                    </Flex>
-                                    <Base className="bg-info pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
-                                </Base>
+        <Column gap={ 1 } alignItems="end">
+            <Column className="nitro-infostand">
+                <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
+                    <Column gap={ 1 }>
+                        <Flex alignItems="center" justifyContent="between" gap={ 1 }>
+                            &nbsp;
+                            <Text variant="white" center bold small wrap>{ avatarInfo.name }</Text>
+                            <Base className="infostand-close" onClick={ onClose } />
+                        </Flex>
+                        <Text variant="white" center small wrap>{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Flex justifyContent="between">
+                            <Column fullWidth overflow="hidden" className="body-image pet p-1">
+                                <LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
                             </Column>
-                            <Column alignItems="center" gap={ 1 }>
-                                <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
-                                <Flex fit position="absolute">
-                                    <Base className="icon-experience" />
-                                </Flex>
-                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
-                                    <Flex fit center position="absolute">
-                                        <Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
+                            <Text variant="white" center small wrap className="px-2">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
+                        </Flex>
+                        <Flex gap={ 1 }>
+                            <Column grow gap={ 1 }>
+                                <Column alignItems="center" gap={ 1 }>
+                                    <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
+                                    <Flex className="start-0" position="absolute">
+                                        <Base className="icon-happiness" />
                                     </Flex>
-                                    <Base className="bg-purple pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
-                                </Base>
-                            </Column>
-                            <Column alignItems="center" gap={ 1 }>
-                                <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
-                                <Flex fit position="absolute">
-                                    <Base className="icon-energy" />
-                                </Flex>
-                                <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
-                                    <Flex fit center position="absolute">
-                                        <Text variant="white" small>{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }</Text>
+                                    <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
+                                        <Flex fit center position="absolute">
+                                            <Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
+                                        </Flex>
+                                        <Base className="bg-info pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
+                                    </Base>
+                                </Column>
+                                <Column alignItems="center" gap={ 1 }>
+                                    <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
+                                    <Flex className="start-0" position="absolute">
+                                        <Base className="icon-experience" />
                                     </Flex>
-                                    <Base className="bg-success pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
-                                </Base>
+                                    <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
+                                        <Flex fit center position="absolute">
+                                            <Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
+                                        </Flex>
+                                        <Base className="bg-purple pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
+                                    </Base>
+                                </Column>
+                                <Column alignItems="center" gap={ 1 }>
+                                    <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
+                                    <Flex className="start-0" position="absolute">
+                                        <Base className="icon-energy" />
+                                    </Flex>
+                                    <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
+                                        <Flex fit center position="absolute">
+                                            <Text variant="white" small>{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }</Text>
+                                        </Flex>
+                                        <Base className="bg-success pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
+                                    </Base>
+                                </Column>
                             </Column>
-                        </Column>
-                    </Flex>
-                </Column>
-                <Column gap={ 1 } className="mt-4" alignItems="center" justifyContent="center">
-                    <Text variant="white" small wrap>
-                        { LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }
-                        <Base className="icon-petting" />
-                    </Text>
-                    <Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
-                    <Text variant="white" small wrap>{ LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) }</Text>
+                        </Flex>
+                    </Column>
+                    <Column gap={ 1 } className="mt-4" alignItems="center" justifyContent="center">
+                        <Text variant="white" small wrap>
+                            { LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }
+                            <Base className="icon-petting" />
+                        </Text>
+                        <Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
+                        <Text variant="white" small wrap>{ LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) }</Text>
+                    </Column>
                 </Column>
             </Column>
+            <Flex gap={ 2 } justifyContent="end">
+                { (avatarInfo.petType !== PetType.MONSTERPLANT) &&
+                    <Button className="infostand-buttons px-2" onClick={ event => processButtonAction('buyfood') }>
+                        { LocalizeText('infostand.button.buyfood') }
+                    </Button> }
+                { avatarInfo.isOwner && (avatarInfo.petType !== PetType.MONSTERPLANT) &&
+                    <Button className="infostand-buttons px-2" onClick={ event => processButtonAction('train') }>
+                        { LocalizeText('infostand.button.train') }
+                    </Button> }
+                { !avatarInfo.dead && ((avatarInfo.energy / avatarInfo.maximumEnergy) < 0.98) && (avatarInfo.petType === PetType.MONSTERPLANT) &&
+                    <Button className="infostand-buttons px-2" onClick={ event => processButtonAction('treat') }>
+                        { LocalizeText('infostand.button.pettreat') }
+                    </Button> }
+                { roomSession?.isRoomOwner && (avatarInfo.petType === PetType.MONSTERPLANT) &&
+                    <Button className="infostand-buttons px-2" onClick={ event => processButtonAction('compost') }>
+                        { LocalizeText('infostand.button.compost') }
+                    </Button> }
+                { avatarInfo.isOwner &&
+                    <Button className="infostand-buttons px-2" onClick={ event => processButtonAction('pick_up') }>
+                        { LocalizeText('inventory.pets.pickup') }
+                    </Button> }
+                { (petRespectRemaining > 0) && (avatarInfo.petType !== PetType.MONSTERPLANT) &&
+                    <Button className="infostand-buttons px-2" onClick={ event => processButtonAction('respect') }>
+                        { LocalizeText('infostand.button.petrespect', [ 'count' ], [ petRespectRemaining.toString() ]) }
+                    </Button> }
+            </Flex>
         </Column>
     );
 }

From e681849187dbbd084fea428773e7e75aed2aebb9 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 7 May 2023 22:11:43 +0200
Subject: [PATCH 032/134] Pet training - Added icon habbopage & design tweak

---
 .../avatar-info/AvatarInfoPetTrainingPanelView.tsx   | 12 ++++++------
 .../widgets/avatar-info/AvatarInfoWidgetView.scss    |  4 ++++
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/room/widgets/avatar-info/AvatarInfoPetTrainingPanelView.tsx b/src/components/room/widgets/avatar-info/AvatarInfoPetTrainingPanelView.tsx
index 8e2e566c1..225b2951c 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoPetTrainingPanelView.tsx
+++ b/src/components/room/widgets/avatar-info/AvatarInfoPetTrainingPanelView.tsx
@@ -1,6 +1,6 @@
 import { IRoomUserData, PetTrainingMessageParser, PetTrainingPanelMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
-import { LocalizeText } from '../../../../api';
+import { CreateLinkEvent, LocalizeText } from '../../../../api';
 import { Button, Column, Flex, Grid, LayoutPetImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { useMessageEvent, useRoom, useSessionInfo } from '../../../../hooks';
 
@@ -35,21 +35,21 @@ export const AvatarInfoPetTrainingPanelView: FC<{}> = props =>
     if(!petData || !petTrainInformation) return null;
 
     return (
-        <NitroCardView uniqueKey="user-settings" className="user-settings-window no-resize" theme="primary-slim">
-            <NitroCardHeaderView headerText={ LocalizeText('widgets.pet.commands.title') } onCloseClick={ () => setPetTrainInformation(null) } />
+        <NitroCardView uniqueKey="pet-training" className="pet-training-window no-resize" theme="primary">
+            <NitroCardHeaderView headerText={ LocalizeText('widgets.pet.commands.title') } isInfoToHabboPages={ true } onClickInfoHabboPages={ () => CreateLinkEvent('habbopages/help/pets/training') } onCloseClick={ () => setPetTrainInformation(null) } />
             <NitroCardContentView className="text-black">
                 <Flex alignItems="center" justifyContent="center" gap={ 2 }>
                     <Grid columnCount={ 2 }>
                         <Column fullWidth overflow="hidden" className="body-image pet p-1">
                             <LayoutPetImageView figure={ petData.figure } posture={ 'std' } direction={ 2 } />
                         </Column>
-                        <Text variant="black" small wrap>{ petData.name }</Text>
+                        <Text className="mt-2 px-2" variant="black" small>{ petData.name }</Text>
                     </Grid>
                 </Flex>
-                <Grid columnCount={ 2 }>
+                <Grid gap={ 1 } className="mb-5" columnCount={ 2 }>
                     {
                         (petTrainInformation.commands && petTrainInformation.commands.length > 0) && petTrainInformation.commands.map((command, index) =>
-                            <Button key={ index } disabled={ !petTrainInformation.enabledCommands.includes(command) } onClick={ () => processPetAction(petData.name, LocalizeText(`pet.command.${ command }`)) }>{ LocalizeText(`pet.command.${ command }`) }</Button>
+                            <Button className="overflow-hidden text-nowrap" key={ index } disabled={ !petTrainInformation.enabledCommands.includes(command) } onClick={ () => processPetAction(petData.name, LocalizeText(`pet.command.${ command }`)) }>{ LocalizeText(`pet.command.${ command }`) }</Button>
                         )
                     }
                 </Grid>
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
index 12c7c8617..bc8f1c2fa 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
+++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
@@ -207,3 +207,7 @@
         color: #91c2ff !important;
     }
 }
+
+.pet-training-window {
+    width: 193px;
+}

From 950ef72ea0804f7d0df14a17c3da5495ca996ea1 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 7 May 2023 22:23:18 +0200
Subject: [PATCH 033/134] NavigatorRoomLinkView - Fix url.prefix

---
 src/components/navigator/views/NavigatorRoomLinkView.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/navigator/views/NavigatorRoomLinkView.tsx b/src/components/navigator/views/NavigatorRoomLinkView.tsx
index 7f0b9f789..de3e28b43 100644
--- a/src/components/navigator/views/NavigatorRoomLinkView.tsx
+++ b/src/components/navigator/views/NavigatorRoomLinkView.tsx
@@ -16,7 +16,7 @@ export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
     if(!navigatorData.enteredGuestRoom) return null;
     
     return (
-        <NitroCardView className="nitro-room-link" theme="primary">
+        <NitroCardView className="nitro-room-link no-resize" theme="primary">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.embed.title') } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black d-flex align-items-center">
                 <Flex gap={ 2 }>
@@ -25,7 +25,7 @@ export const NavigatorRoomLinkView: FC<NavigatorRoomLinkViewProps> = props =>
                         <Text bold fontSize={ 5 }>{ LocalizeText('navigator.embed.headline') }</Text>
                         <Text>{ LocalizeText('navigator.embed.info') }</Text>
                         <Text> { LocalizeText('navigator.embed.direct.info') }</Text>
-                        <input type="text" readOnly className="form-control form-control-sm" value={ LocalizeText('navigator.embed.src', [ 'roomId' ], [ navigatorData.enteredGuestRoom.roomId.toString() ]) } />
+                        <input type="text" readOnly className="form-control form-control-sm" value={ LocalizeText('navigator.embed.src', [ 'roomId' ], [ navigatorData.enteredGuestRoom.roomId.toString() ]).replace('${url.prefix}', GetConfiguration<string>('url.prefix', '')) } />
                     </Column>
                 </Flex>
             </NitroCardContentView>

From 1a6373b743d19b20af60cbda517cde0a54759932 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 7 May 2023 22:38:22 +0200
Subject: [PATCH 034/134] Added 'by' and tweaked design in tags

---
 src/components/room/widgets/RoomWidgets.scss           | 10 ++++++++++
 .../room/widgets/room-tools/RoomToolsWidgetView.tsx    |  4 ++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/room/widgets/RoomWidgets.scss b/src/components/room/widgets/RoomWidgets.scss
index bee6c5ad1..b9d9aab4d 100644
--- a/src/components/room/widgets/RoomWidgets.scss
+++ b/src/components/room/widgets/RoomWidgets.scss
@@ -158,6 +158,16 @@
     margin-right: 4px;
 }
 
+.tags {
+    background-color: #1B2834;
+    color: #1A75A6;
+    font-size: 10px;
+
+    &:hover {
+        color: #419AD2;
+    }
+}
+
 @import './avatar-info/AvatarInfoWidgetView';
 @import './chat/ChatWidgetView';
 @import './chat-input/ChatInputView';
diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
index 6907c7219..ccd8d44da 100644
--- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -179,11 +179,11 @@ export const RoomToolsWidgetView: FC<{}> = props =>
                                 <Column className="nitro-room-tools-info rounded py-2 px-3">
                                     <Column gap={ 1 }>
                                         <Text wrap variant="white" fontSize={ 4 }>{ roomName }</Text>
-                                        <Text variant="muted" fontSize={ 5 }>{ roomOwner }</Text>
+                                        <Text variant="muted" fontSize={ 5 }>{ LocalizeText('room.tool.room.owner.prefix') + ' ' + roomOwner }</Text>
                                     </Column>
                                     { roomTags && roomTags.length > 0 &&
                                         <Flex gap={ 2 }>
-                                            { roomTags.map((tag, index) => <Text key={ index } small pointer variant="white" className="rounded bg-primary p-1" onClick={ () => handleToolClick('navigator_search_tag', tag) }>#{ tag }</Text>) }
+                                            { roomTags.map((tag, index) => <Text key={ index } small pointer className="tags rounded p-1" onClick={ () => handleToolClick('navigator_search_tag', tag) }>#{ tag }</Text>) }
                                         </Flex> }
                                 </Column>
                             </Column>

From 317eb3e9e03fa019e77b35ebe8dda8f3dbe738f6 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 7 May 2023 22:54:25 +0200
Subject: [PATCH 035/134] Rightside - Added group icon and design tweak

---
 .../images/groups/icons/group_icon_room.png       | Bin 0 -> 411 bytes
 src/assets/styles/icons.scss                      |   6 ++++++
 .../groups/views/GroupRoomInformationView.tsx     |  12 ++++++++----
 3 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/images/groups/icons/group_icon_room.png

diff --git a/src/assets/images/groups/icons/group_icon_room.png b/src/assets/images/groups/icons/group_icon_room.png
new file mode 100644
index 0000000000000000000000000000000000000000..a3fa3a5826435e13afe6d1e4efe6d3a316c5649f
GIT binary patch
literal 411
zcmeAS@N?(olHy`uVBq!ia0vp^qChOb!3-qNu^bTxQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`69RlfT!D01s9%!1<M}1!TWj2|F5UWk*QqUC<_oF~@14p!x;g3B%VjT*
zC3o0F|Ns2%|I2&X`tE&ael_p?IAup!{k+teOYi=_dSH;*ob>3YsIFzlt3R9ezBH?t
z8nXVf_x!^^!<{BKb^$4ck|4j}|M&qzOpNqfpjyrXkH}&M20oy6zQc^i^H-z*1!s7=
zIEH8h=bmTeYgXW4y|8`}bE1*R%`1%G_b+u-l}er*RH68@VFve(H~o@<Q=V3y*sP;h
zlNGvAJ+*x4l3j_ubA`8y>YwY(=D7H7!mQ7|oc#Afy^eltdts%kx5~pl!+P!K*aH%&
zRhJSkH2XGoNGMic)(%Qvd-cbphvtswKI=@@JN?Mu@5{!;-!BETzmMfu$^0^TY5iTU
aLRM!}(MYX{D^!4PWbkzLb6Mw<&;$T}w7gIN

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 6b7124e2a..e3bf592af 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -375,6 +375,12 @@
         height: 19px;
     }
 
+    &.icon-group_icon_room {
+        background: url('@/assets/images/groups/icons/group_icon_room.png');
+        width: 21px;
+        height: 16px;
+    }
+
     &.icon-camera-small {
         background: url('@/assets/images/icons/camera-small.png');
         width: 17px;
diff --git a/src/components/groups/views/GroupRoomInformationView.tsx b/src/components/groups/views/GroupRoomInformationView.tsx
index dceceea3e..96a489dad 100644
--- a/src/components/groups/views/GroupRoomInformationView.tsx
+++ b/src/components/groups/views/GroupRoomInformationView.tsx
@@ -1,6 +1,5 @@
 import { DesktopViewEvent, GetGuestRoomResultEvent, GroupInformationComposer, GroupInformationEvent, GroupInformationParser, GroupRemoveMemberComposer, HabboGroupDeactivatedMessageEvent, RoomEntryInfoMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
 import { GetGroupInformation, GetGroupManager, GetSessionDataManager, GroupMembershipType, GroupType, LocalizeText, SendMessageComposer, TryJoinGroup } from '../../../api';
 import { Base, Button, Column, Flex, LayoutBadgeImageView, Text } from '../../../common';
 import { useMessageEvent, useNotification } from '../../../hooks';
@@ -108,9 +107,14 @@ export const GroupRoomInformationView: FC<{}> = props =>
         <Base className="nitro-notification-bubble">
             <Column>
                 <Flex className="grouproom-header" alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
-                    <Text bold small className="header-text p-1" variant="white">{ LocalizeText('group.homeroominfo.title') }</Text>
-                    { isOpen && <FaChevronUp className="fa-icon" /> }
-                    { !isOpen && <FaChevronDown className="fa-icon" /> }
+                    <Flex className="icon-style">
+                        <Base className="icon icon-group_icon_room" />
+                    </Flex>
+                    <Text bold variant="white" overflow="hidden">{ LocalizeText('group.homeroominfo.title') }</Text>
+                    <Flex className="arrow-right-style">
+                        { isOpen && <Base className="icon icon-notification_arrow_down" /> }
+                        { !isOpen && <Base className="icon icon-notification_arrow_left" /> }
+                    </Flex>
                 </Flex>
                 { isOpen &&
                     <>

From ffd768b001baff8be4fb3e3acf466b9a9f70f6e8 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 7 May 2023 23:49:51 +0200
Subject: [PATCH 036/134] Avatar info - Text underline in My clothe

---
 .../widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
index 600e365d0..6a5d5256c 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
@@ -131,7 +131,7 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         <ContextMenuListItemView onClick={ event => processAction('decorate') }>
                             { LocalizeText('widget.avatar.decorate') }
                         </ContextMenuListItemView> }
-                    <ContextMenuListItemView onClick={ event => processAction('change_looks') }>
+                    <ContextMenuListItemView className="text-decoration-underline" onClick={ event => processAction('change_looks') }>
                         { LocalizeText('widget.memenu.myclothes') }
                     </ContextMenuListItemView>
                     { (HasHabboClub() && !isRidingHorse) &&

From d9b947e83ad718bac70ce2db7ab0e5cff1958d76 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Mon, 8 May 2023 21:33:26 +0200
Subject: [PATCH 037/134] Rightside - User settings design like Habbo

---
 src/components/right-side/RightSideView.tsx   |  2 +
 .../user-settings/UserSettingsView.tsx        | 94 +++++-------------
 .../views/UserSettingsWidgetView.tsx          | 96 +++++++++++++++++++
 3 files changed, 122 insertions(+), 70 deletions(-)
 create mode 100644 src/components/user-settings/views/UserSettingsWidgetView.tsx

diff --git a/src/components/right-side/RightSideView.tsx b/src/components/right-side/RightSideView.tsx
index 671e63631..6349924ea 100644
--- a/src/components/right-side/RightSideView.tsx
+++ b/src/components/right-side/RightSideView.tsx
@@ -6,6 +6,7 @@ import { NotificationCenterView } from '../notification-center/NotificationCente
 import { PurseView } from '../purse/PurseView';
 import { MysteryBoxExtensionView } from '../room/widgets/mysterybox/MysteryBoxExtensionView';
 import { RoomPromotesWidgetView } from '../room/widgets/room-promotes/RoomPromotesWidgetView';
+import { UserSettingsView } from '../user-settings/UserSettingsView';
 
 export const RightSideView: FC<{}> = props =>
 {
@@ -13,6 +14,7 @@ export const RightSideView: FC<{}> = props =>
         <div className="nitro-right-side">
             <Column position="relative" gap={ 1 }>
                 <PurseView />
+                <UserSettingsView />
                 <RoomPromotesWidgetView />
                 <GroupRoomInformationView />
                 <MysteryBoxExtensionView />
diff --git a/src/components/user-settings/UserSettingsView.tsx b/src/components/user-settings/UserSettingsView.tsx
index bc3dbdc9d..bd44b9521 100644
--- a/src/components/user-settings/UserSettingsView.tsx
+++ b/src/components/user-settings/UserSettingsView.tsx
@@ -1,9 +1,9 @@
 import { ILinkEventTracker, NitroSettingsEvent, UserSettingsCameraFollowComposer, UserSettingsEvent, UserSettingsOldChatComposer, UserSettingsRoomInvitesComposer, UserSettingsSoundComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { FaVolumeDown, FaVolumeMute, FaVolumeUp } from 'react-icons/fa';
 import { AddEventLinkTracker, DispatchMainEvent, DispatchUiEvent, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../api';
-import { Button, classNames, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
+import { Column, LayoutNotificationBubbleView, Text } from '../../common';
 import { useCatalogPlaceMultipleItems, useCatalogSkipPurchaseConfirmation, useMessageEvent } from '../../hooks';
+import { UserSettingsWidgetView } from './views/UserSettingsWidgetView';
 
 export const UserSettingsView: FC<{}> = props =>
 {
@@ -11,6 +11,7 @@ export const UserSettingsView: FC<{}> = props =>
     const [ userSettings, setUserSettings ] = useState<NitroSettingsEvent>(null);
     const [ catalogPlaceMultipleObjects, setCatalogPlaceMultipleObjects ] = useCatalogPlaceMultipleItems();
     const [ catalogSkipPurchaseConfirmation, setCatalogSkipPurchaseConfirmation ] = useCatalogSkipPurchaseConfirmation();
+    const [ selectedSettings, setSelectedSettings ] = useState<'audio' | 'other'>(null);
 
     const processAction = (type: string, value?: boolean | number | string) =>
     {
@@ -22,6 +23,7 @@ export const UserSettingsView: FC<{}> = props =>
         {
             case 'close_view':
                 setIsVisible(false);
+                setSelectedSettings(null);
                 doUpdate = false;
                 return;
             case 'oldchat':
@@ -68,6 +70,12 @@ export const UserSettingsView: FC<{}> = props =>
         }
     }
 
+    const onSettings = (type: 'audio' | 'other') =>
+    {
+        setSelectedSettings(type);
+        setIsVisible(false);
+    }
+
     useMessageEvent<UserSettingsEvent>(UserSettingsEvent, event =>
     {
         const parser = event.getParser();
@@ -123,74 +131,20 @@ export const UserSettingsView: FC<{}> = props =>
         DispatchUiEvent(userSettings);
     }, [ userSettings ]);
 
-    if(!isVisible || !userSettings) return null;
-
+    if(!userSettings) return null;
+    
     return (
-        <NitroCardView uniqueKey="user-settings" className="user-settings-window" theme="settings">
-            <NitroCardHeaderView headerText={ LocalizeText('widget.memenu.settings.title') } onCloseClick={ event => processAction('close_view') } />
-            <NitroCardContentView gap={ 3 } className="text-white">
-                <Column gap={ 1 }>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="flash-form-check-input" type="checkbox" checked={ userSettings.oldChat } onChange={ event => processAction('oldchat', event.target.checked) } />
-                        <Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="flash-form-check-input" type="checkbox" checked={ userSettings.roomInvites } onChange={ event => processAction('room_invites', event.target.checked) } />
-                        <Text>{ LocalizeText('memenu.settings.other.ignore.room.invites') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="flash-form-check-input" type="checkbox" checked={ userSettings.cameraFollow } onChange={ event => processAction('camera_follow', event.target.checked) } />
-                        <Text>{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="flash-form-check-input" type="checkbox" checked={ catalogPlaceMultipleObjects } onChange={ event => setCatalogPlaceMultipleObjects(event.target.checked) } />
-                        <Text>{ LocalizeText('memenu.settings.other.place.multiple.objects') }</Text>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <input className="flash-form-check-input" type="checkbox" checked={ catalogSkipPurchaseConfirmation } onChange={ event => setCatalogSkipPurchaseConfirmation(event.target.checked) } />
-                        <Text>{ LocalizeText('memenu.settings.other.skip.purchase.confirmation') }</Text>
-                    </Flex>
-                </Column>
-                <Column>
-                    <Text center>{ LocalizeText('widget.memenu.settings.volume') }</Text>
-                    <Flex gap={ 2 }>
-                        <Text className="w-25">{ LocalizeText('widget.memenu.settings.volume.ui') }</Text>
-                        <Flex alignItems="center" gap={ 1 }>
-                            <i className={ (userSettings.volumeSystem > 1) ? 'icon icon-sound-off' : 'icon icon-sound-off-active' } />
-                            <Column gap={ 0 }>
-                                <Flex className="number-range" />
-                                <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={ userSettings.volumeSystem } onChange={ event => processAction('system_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
-                            </Column>
-                            <i className={ (userSettings.volumeSystem < 1) ? 'icon icon-sound-on' : 'icon icon-sound-on-active' } />
-                        </Flex>
-                    </Flex>
-                    <Flex gap={ 2 }>
-                        <Text className="w-25">{ LocalizeText('widget.memenu.settings.volume.furni') }</Text>
-                        <Flex alignItems="center" gap={ 1 }>
-                            <i className={ (userSettings.volumeFurni > 1) ? 'icon icon-sound-off' : 'icon icon-sound-off-active' } />
-                            <Column gap={ 0 }>
-                                <Flex className="number-range" />
-                                <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeFurni" value={ userSettings.volumeFurni } onChange={ event => processAction('furni_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
-                            </Column>
-                            <i className={ (userSettings.volumeFurni < 1) ? 'icon icon-sound-on' : 'icon icon-sound-on-active' } />
-                        </Flex>
-                    </Flex>
-                    <Flex gap={ 2 }>
-                        <Text className="w-25">{ LocalizeText('widget.memenu.settings.volume.trax') }</Text>
-                        <Flex alignItems="center" gap={ 1 }>
-                            <i className={ (userSettings.volumeTrax > 1) ? 'icon icon-sound-off' : 'icon icon-sound-off-active' } />
-                            <Column gap={ 0 }>
-                                <Flex className="number-range" />
-                                <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeTrax" value={ userSettings.volumeTrax } onChange={ event => processAction('trax_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
-                            </Column>
-                            <i className={ (userSettings.volumeTrax < 1) ? 'icon icon-sound-on' : 'icon icon-sound-on-active' } />
-                        </Flex>
-                    </Flex>
-                </Column>
-                <Flex alignItems="end">
-                    <Button onClick={ event => processAction('close_view') }>{ LocalizeText('generic.back') }</Button>
-                </Flex>
-            </NitroCardContentView>
-        </NitroCardView>
+        <>
+            { (isVisible) &&
+                <LayoutNotificationBubbleView fadesOut={ false } className="flex-column nitro-notification" onClose={ null }>
+                    <Column gap={ 1 } pointer className="mb-1">
+                        <Text>{ LocalizeText('widget.memenu.settings.character') }</Text>
+                        <Text onClick={ () => onSettings('audio') }>{ LocalizeText('widget.memenu.settings.audio') }</Text>
+                        <Text onClick={ () => onSettings('other') }>{ LocalizeText('widget.memenu.settings.other') }</Text>
+                    </Column>
+                </LayoutNotificationBubbleView>
+            }
+            { (selectedSettings) && <UserSettingsWidgetView userSettings={ userSettings } catalogPlaceMultipleObjects={ catalogPlaceMultipleObjects } catalogSkipPurchaseConfirmation={ catalogSkipPurchaseConfirmation } selectedSettings={ selectedSettings } setCatalogPlaceMultipleObjects={ setCatalogPlaceMultipleObjects } setCatalogSkipPurchaseConfirmation={ setCatalogSkipPurchaseConfirmation } saveRangeSlider={ saveRangeSlider } processAction={ processAction } /> }
+        </>
     );
 }
diff --git a/src/components/user-settings/views/UserSettingsWidgetView.tsx b/src/components/user-settings/views/UserSettingsWidgetView.tsx
new file mode 100644
index 000000000..79cf22e84
--- /dev/null
+++ b/src/components/user-settings/views/UserSettingsWidgetView.tsx
@@ -0,0 +1,96 @@
+import { NitroSettingsEvent } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { LocalizeText } from '../../../api';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+
+interface UserSettingsWidgetViewProps
+{
+    userSettings: NitroSettingsEvent;
+    catalogPlaceMultipleObjects: boolean;
+    catalogSkipPurchaseConfirmation: boolean;
+    selectedSettings: 'audio' | 'other';
+    setCatalogPlaceMultipleObjects: (value: boolean) => void;
+    setCatalogSkipPurchaseConfirmation: (value: boolean) => void;
+    saveRangeSlider: (type: string) => void;
+    processAction: (type: string, value?: any) => void;
+}
+
+export const UserSettingsWidgetView: FC<UserSettingsWidgetViewProps> = props =>
+{
+    const { userSettings = null, catalogPlaceMultipleObjects = null, catalogSkipPurchaseConfirmation = null, selectedSettings = null, setCatalogPlaceMultipleObjects = null, setCatalogSkipPurchaseConfirmation = null, saveRangeSlider = null, processAction = null } = props;
+
+    if(!userSettings) return null;
+    
+    return (
+        <NitroCardView uniqueKey="user-settings" className="user-settings-window no-resize" theme="settings">
+            <NitroCardHeaderView hideButtonClose headerText={ selectedSettings === 'other' ? LocalizeText('widget.memenu.settings.other') : LocalizeText('widget.memenu.settings.title') } onCloseClick={ null } />
+            <NitroCardContentView gap={ 3 } className="text-white">
+                { (selectedSettings === 'other') &&
+                    <Column gap={ 1 }>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <input className="flash-form-check-input" type="checkbox" checked={ userSettings.oldChat } onChange={ event => processAction('oldchat', event.target.checked) } />
+                            <Text>{ LocalizeText('memenu.settings.chat.prefer.old.chat') }</Text>
+                        </Flex>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <input className="flash-form-check-input" type="checkbox" checked={ userSettings.roomInvites } onChange={ event => processAction('room_invites', event.target.checked) } />
+                            <Text>{ LocalizeText('memenu.settings.other.ignore.room.invites') }</Text>
+                        </Flex>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <input className="flash-form-check-input" type="checkbox" checked={ userSettings.cameraFollow } onChange={ event => processAction('camera_follow', event.target.checked) } />
+                            <Text>{ LocalizeText('memenu.settings.other.disable.room.camera.follow') }</Text>
+                        </Flex>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <input className="flash-form-check-input" type="checkbox" checked={ catalogPlaceMultipleObjects } onChange={ event => setCatalogPlaceMultipleObjects(event.target.checked) } />
+                            <Text>{ LocalizeText('memenu.settings.other.place.multiple.objects') }</Text>
+                        </Flex>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <input className="flash-form-check-input" type="checkbox" checked={ catalogSkipPurchaseConfirmation } onChange={ event => setCatalogSkipPurchaseConfirmation(event.target.checked) } />
+                            <Text>{ LocalizeText('memenu.settings.other.skip.purchase.confirmation') }</Text>
+                        </Flex>
+                    </Column>
+                }
+                { (selectedSettings === 'audio') &&
+                    <Column>
+                        <Text center>{ LocalizeText('widget.memenu.settings.volume') }</Text>
+                        <Flex gap={ 2 }>
+                            <Text className="w-25">{ LocalizeText('widget.memenu.settings.volume.ui') }</Text>
+                            <Flex alignItems="center" gap={ 1 }>
+                                <i className={ (userSettings.volumeSystem > 1) ? 'icon icon-sound-off' : 'icon icon-sound-off-active' } />
+                                <Column gap={ 0 }>
+                                    <Flex className="number-range" />
+                                    <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeSystem" value={ userSettings.volumeSystem } onChange={ event => processAction('system_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
+                                </Column>
+                                <i className={ (userSettings.volumeSystem < 1) ? 'icon icon-sound-on' : 'icon icon-sound-on-active' } />
+                            </Flex>
+                        </Flex>
+                        <Flex gap={ 2 }>
+                            <Text className="w-25">{ LocalizeText('widget.memenu.settings.volume.furni') }</Text>
+                            <Flex alignItems="center" gap={ 1 }>
+                                <i className={ (userSettings.volumeFurni > 1) ? 'icon icon-sound-off' : 'icon icon-sound-off-active' } />
+                                <Column gap={ 0 }>
+                                    <Flex className="number-range" />
+                                    <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeFurni" value={ userSettings.volumeFurni } onChange={ event => processAction('furni_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
+                                </Column>
+                                <i className={ (userSettings.volumeFurni < 1) ? 'icon icon-sound-on' : 'icon icon-sound-on-active' } />
+                            </Flex>
+                        </Flex>
+                        <Flex gap={ 2 }>
+                            <Text className="w-25">{ LocalizeText('widget.memenu.settings.volume.trax') }</Text>
+                            <Flex alignItems="center" gap={ 1 }>
+                                <i className={ (userSettings.volumeTrax > 1) ? 'icon icon-sound-off' : 'icon icon-sound-off-active' } />
+                                <Column gap={ 0 }>
+                                    <Flex className="number-range" />
+                                    <input type="range" className="custom-range" min="0" max="100" step="1" id="volumeTrax" value={ userSettings.volumeTrax } onChange={ event => processAction('trax_volume', event.target.value) } onMouseUp={ () => saveRangeSlider('volume') }/>
+                                </Column>
+                                <i className={ (userSettings.volumeTrax < 1) ? 'icon icon-sound-on' : 'icon icon-sound-on-active' } />
+                            </Flex>
+                        </Flex>
+                    </Column>
+                }
+                <Flex alignItems="end">
+                    <Button onClick={ event => processAction('close_view') }>{ LocalizeText('widget.memenu.back') }</Button>
+                </Flex>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

From 0934ba2cf54703675c2e044e4b6f09bbbbacd957 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Wed, 10 May 2023 22:16:58 +0200
Subject: [PATCH 038/134] Pet infostand - Design for monsterplant

---
 src/assets/flash/infostand/pets/wellbeing.png | Bin 0 -> 282 bytes
 src/common/index.scss                         |   5 +
 src/common/layout/LayoutCounterTimeView.tsx   |  13 +-
 .../avatar-info/AvatarInfoWidgetView.scss     |  14 ++
 .../infostand/InfoStandWidgetPetView.tsx      | 146 ++++++++++++------
 5 files changed, 122 insertions(+), 56 deletions(-)
 create mode 100644 src/assets/flash/infostand/pets/wellbeing.png

diff --git a/src/assets/flash/infostand/pets/wellbeing.png b/src/assets/flash/infostand/pets/wellbeing.png
new file mode 100644
index 0000000000000000000000000000000000000000..9e8e52f91462e7b1f3a5ed29fee2d3e5f069c72d
GIT binary patch
literal 282
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+3?vf;>QaFeV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G}f0G|-o|NsBHZ^-i4kYzhP`plba?i;d!GRxLgYXB+sk|4iepaLLZkn(1B
z0}62#ctjR6Fz_7)VaDV6D^h@h)t)YnAsWG<6FB(}C~&Y?M*aW)<ec8NWiA~(-Ax;F
z5^q<xd)#(tU9rkXtYCubs@pm~HNs($45#dr6cb$TKE7kYeldL8oHt@x0zok^f?sZI
zj>%=axoS~R4#$gJr}vRh!u*qk{<0^9@uxhS$>~?<b|HL)V>(xp(c5cP46`;fr7PLF
RH3FT%;OXk;vd$@?2>^F!WMcpT

literal 0
HcmV?d00001

diff --git a/src/common/index.scss b/src/common/index.scss
index 978e4c75e..c77977b43 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -735,4 +735,9 @@
     }
 }
 
+.text-stroke {
+    color: black !important;
+    text-shadow: -1px -1px 1px #4d4d4d, 1px -1px 1px #4d4d4d, -1px 1px 1px #4d4d4d, 1px 1px 1px #4d4d4d;
+}
+
 @import './card/NitroCardView';
diff --git a/src/common/layout/LayoutCounterTimeView.tsx b/src/common/layout/LayoutCounterTimeView.tsx
index 7460b054e..81b1c64f3 100644
--- a/src/common/layout/LayoutCounterTimeView.tsx
+++ b/src/common/layout/LayoutCounterTimeView.tsx
@@ -27,15 +27,18 @@ export const LayoutCounterTimeView: FC<LayoutCounterTimeViewProps> = props =>
     return (
         <Flex gap={ 1 }>
             <Base classNames={ getClassNames } { ...rest }>
-                <div>{ day != '00' ? day : hour }{ day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') }</div>
+                <div>{ day != '00' ? day : hour }</div>
+                <div className="text-stroke">{ day != '00' ? LocalizeText('countdown_clock_unit_days') : LocalizeText('countdown_clock_unit_hours') }</div>
             </Base>
-            <Base style={ { marginTop: '3px' } }>:</Base>
+            <Base className="text-stroke" style={ { marginTop: '5px', color: 'black' } }>:</Base>
             <Base classNames={ getClassNames } { ...rest }>
-                <div>{ minutes }{ LocalizeText('countdown_clock_unit_minutes') }</div>
+                <div>{ minutes }</div>
+                <div className="text-stroke">{ LocalizeText('countdown_clock_unit_minutes') }</div>
             </Base>
-            <Base style={ { marginTop: '3px' } }>:</Base>
+            <Base className="text-stroke" style={ { marginTop: '5px', color: 'black' } }>:</Base>
             <Base classNames={ getClassNames } { ...rest }>
-                <div>{ seconds }{ LocalizeText('countdown_clock_unit_seconds') }</div>
+                <div>{ seconds }</div>
+                <div className="text-stroke">{ LocalizeText('countdown_clock_unit_seconds') }</div>
             </Base>
             { children }
         </Flex>
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
index bc8f1c2fa..aaaa11018 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
+++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
@@ -42,6 +42,10 @@
         font-family: Goldfish;
         font-size: 9px;
 
+        .size-pets {
+            font-size: 10px;
+        }
+
         .form-control-sm {
             height: 20px;
             min-height: 20px;
@@ -101,6 +105,16 @@
             z-index: 1;
         }
 
+        .icon-wellbeing {
+            background: url('@/assets/flash/infostand/pets/wellbeing.png');
+            background-repeat: no-repeat;
+            width: 18px !important;
+            height: 18px;
+            margin-top: 16px;
+            margin-left: 3px;
+            z-index: 1;
+        }
+
         .height-bar {
             height: 17px;
         }
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
index 63b36ca71..32001a91f 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetPetView.tsx
@@ -1,7 +1,7 @@
 import { PetRespectComposer, PetType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { AvatarInfoPet, CreateLinkEvent, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { Base, Button, Column, Flex, LayoutPetImageView, Text } from '../../../../../common';
+import { AvatarInfoPet, ConvertSeconds, CreateLinkEvent, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../../../api';
+import { Base, Button, Column, Flex, LayoutCounterTimeView, LayoutPetImageView, LayoutRarityLevelView, Text } from '../../../../../common';
 import { useRoom, useSessionInfo } from '../../../../../hooks';
 
 interface InfoStandWidgetPetViewProps
@@ -75,68 +75,112 @@ export const InfoStandWidgetPetView: FC<InfoStandWidgetPetViewProps> = props =>
     return (
         <Column gap={ 1 } alignItems="end">
             <Column className="nitro-infostand">
-                <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
+                <Column overflow="visible" className="container-fluid content-area size-pets" gap={ 1 }>
                     <Column gap={ 1 }>
                         <Flex alignItems="center" justifyContent="between" gap={ 1 }>
                             &nbsp;
-                            <Text variant="white" center bold small wrap>{ avatarInfo.name }</Text>
+                            <Text variant="white" center bold wrap>{ avatarInfo.name }</Text>
                             <Base className="infostand-close" onClick={ onClose } />
                         </Flex>
                         <Text variant="white" center small wrap>{ LocalizeText(`pet.breed.${ avatarInfo.petType }.${ avatarInfo.petBreed }`) }</Text>
                     </Column>
-                    <Column gap={ 1 }>
-                        <Flex justifyContent="between">
-                            <Column fullWidth overflow="hidden" className="body-image pet p-1">
-                                <LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
+                    { (avatarInfo.petType === PetType.MONSTERPLANT) &&
+                        <>
+                            <Column gap={ 1 }>
+                                <Flex justifyContent="between">
+                                    <Column fullWidth overflow="hidden" className="body-image pet p-1">
+                                        <LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
+                                    </Column>
+                                    { !avatarInfo.dead && 
+                                        <Text variant="white" center small wrap className="px-2">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
+                                    }
+                                </Flex>
+                                <Flex gap={ 1 }>
+                                    <Column grow gap={ 1 }>
+                                        <Column alignItems="center" gap={ 1 }>
+                                            <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.wellbeing') }</Text>
+                                            <Flex className="start-0" position="absolute">
+                                                <Base className="icon-wellbeing" />
+                                            </Flex>
+                                            <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
+                                                <Flex fit center position="absolute">
+                                                    <Text variant="white" small>{ avatarInfo.dead ? '00:00:00' : ConvertSeconds((remainingTimeToLive == 0 ? avatarInfo.remainingTimeToLive : remainingTimeToLive)).split(':')[1] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[2] + ':' + ConvertSeconds((remainingTimeToLive == null || remainingTimeToLive == undefined ? 0 : remainingTimeToLive)).split(':')[3] }</Text>
+                                                </Flex>
+                                                <Base className="bg-success rounded pet-stats" style={ { width: avatarInfo.dead ? '0' : Math.round((avatarInfo.maximumTimeToLive * 100) / (remainingTimeToLive)).toString() } } />
+                                            </Base>
+                                        </Column>
+                                        { remainingGrowTime != 0 && remainingGrowTime > 0 &&
+                                            <Column alignItems="center" gap={ 1 }>
+                                                <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.growth') }</Text>
+                                                <LayoutCounterTimeView className="top-2 end-2 mb-4" day={ ConvertSeconds(remainingGrowTime).split(':')[0] } hour={ ConvertSeconds(remainingGrowTime).split(':')[1] } minutes={ ConvertSeconds(remainingGrowTime).split(':')[2] } seconds={ ConvertSeconds(remainingGrowTime).split(':')[3] } />
+                                            </Column>
+                                        }
+                                        <Column alignItems="center" gap={ 1 }>
+                                            <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.raritylevel', [ 'level' ], [ LocalizeText(`infostand.pet.raritylevel.${ avatarInfo.rarityLevel }`) ]) }</Text>
+                                            <LayoutRarityLevelView className="top-2 end-2" level={ avatarInfo.rarityLevel } />
+                                        </Column>
+                                    </Column>
+                                </Flex>
                             </Column>
-                            <Text variant="white" center small wrap className="px-2">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
-                        </Flex>
-                        <Flex gap={ 1 }>
-                            <Column grow gap={ 1 }>
-                                <Column alignItems="center" gap={ 1 }>
-                                    <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
-                                    <Flex className="start-0" position="absolute">
-                                        <Base className="icon-happiness" />
-                                    </Flex>
-                                    <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
-                                        <Flex fit center position="absolute">
-                                            <Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
-                                        </Flex>
-                                        <Base className="bg-info pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
-                                    </Base>
+                        </>
+                    }
+                    { (avatarInfo.petType !== PetType.MONSTERPLANT) &&
+                        <Column gap={ 1 }>
+                            <Flex justifyContent="between">
+                                <Column fullWidth overflow="hidden" className="body-image pet p-1">
+                                    <LayoutPetImageView figure={ avatarInfo.petFigure } posture={ avatarInfo.posture } direction={ 4 } />
                                 </Column>
-                                <Column alignItems="center" gap={ 1 }>
-                                    <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
-                                    <Flex className="start-0" position="absolute">
-                                        <Base className="icon-experience" />
-                                    </Flex>
-                                    <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
-                                        <Flex fit center position="absolute">
-                                            <Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
+                                <Text variant="white" center small wrap className="px-2">{ LocalizeText('pet.level', [ 'level', 'maxlevel' ], [ avatarInfo.level.toString(), avatarInfo.maximumLevel.toString() ]) }</Text>
+                            </Flex>
+                            <Flex gap={ 1 }>
+                                <Column grow gap={ 1 }>
+                                    <Column alignItems="center" gap={ 1 }>
+                                        <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.happiness') }</Text>
+                                        <Flex className="start-0" position="absolute">
+                                            <Base className="icon-happiness" />
                                         </Flex>
-                                        <Base className="bg-purple pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
-                                    </Base>
-                                </Column>
-                                <Column alignItems="center" gap={ 1 }>
-                                    <Text variant="white" truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
-                                    <Flex className="start-0" position="absolute">
-                                        <Base className="icon-energy" />
-                                    </Flex>
-                                    <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
-                                        <Flex fit center position="absolute">
-                                            <Text variant="white" small>{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }</Text>
+                                        <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
+                                            <Flex fit center position="absolute">
+                                                <Text variant="white" small>{ avatarInfo.happyness + '/' + avatarInfo.maximumHappyness }</Text>
+                                            </Flex>
+                                            <Base className="bg-info pet-stats" style={ { width: (avatarInfo.happyness / avatarInfo.maximumHappyness) * 100 + '%' } } />
+                                        </Base>
+                                    </Column>
+                                    <Column alignItems="center" gap={ 1 }>
+                                        <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.experience') }</Text>
+                                        <Flex className="start-0" position="absolute">
+                                            <Base className="icon-experience" />
                                         </Flex>
-                                        <Base className="bg-success pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
-                                    </Base>
+                                        <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
+                                            <Flex fit center position="absolute">
+                                                <Text variant="white" small>{ avatarInfo.experience + '/' + avatarInfo.levelExperienceGoal }</Text>
+                                            </Flex>
+                                            <Base className="bg-purple pet-stats" style={ { width: (avatarInfo.experience / avatarInfo.levelExperienceGoal) * 100 + '%' } } />
+                                        </Base>
+                                    </Column>
+                                    <Column alignItems="center" gap={ 1 }>
+                                        <Text variant="white" small truncate>{ LocalizeText('infostand.pet.text.energy') }</Text>
+                                        <Flex className="start-0" position="absolute">
+                                            <Base className="icon-energy" />
+                                        </Flex>
+                                        <Base fullWidth overflow="hidden" position="relative" className="bg-light-dark border border-light border-left height-bar">
+                                            <Flex fit center position="absolute">
+                                                <Text variant="white" small>{ avatarInfo.energy + '/' + avatarInfo.maximumEnergy }</Text>
+                                            </Flex>
+                                            <Base className="bg-success pet-stats" style={ { width: (avatarInfo.energy / avatarInfo.maximumEnergy) * 100 + '%' } } />
+                                        </Base>
+                                    </Column>
                                 </Column>
-                            </Column>
-                        </Flex>
-                    </Column>
+                            </Flex>
+                        </Column>
+                    }
                     <Column gap={ 1 } className="mt-4" alignItems="center" justifyContent="center">
-                        <Text variant="white" small wrap>
-                            { LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }
-                            <Base className="icon-petting" />
-                        </Text>
+                        { (avatarInfo.petType !== PetType.MONSTERPLANT) &&
+                            <Text variant="white" small wrap>
+                                { LocalizeText('infostand.text.petrespect', [ 'count' ], [ avatarInfo.respect.toString() ]) }
+                                <Base className="icon-petting" />
+                            </Text>
+                        }
                         <Text variant="white" small wrap>{ LocalizeText('pet.age', [ 'age' ], [ avatarInfo.age.toString() ]) }</Text>
                         <Text variant="white" small wrap>{ LocalizeText('infostand.text.petowner', [ 'name' ], [ avatarInfo.ownerName ]) }</Text>
                     </Column>

From f148d35950ac9a182e7924315809fb4fbaaa0890 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Wed, 10 May 2023 23:57:52 +0200
Subject: [PATCH 039/134] Rightside - Fixed mysterybox design

---
 src/assets/styles/icons.scss                  |  6 +++
 .../mysterybox/MysteryBoxExtensionView.scss   | 17 ++++++++
 .../mysterybox/MysteryBoxExtensionView.tsx    | 42 ++++++++++---------
 3 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index e3bf592af..41cdfd0b2 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -375,6 +375,12 @@
         height: 19px;
     }
 
+    &.icon-nitro-card-header-close {
+        background: url('@/assets/flash/messenger/close.png');
+        width: 20px;
+        height: 20px;
+    }
+
     &.icon-group_icon_room {
         background: url('@/assets/images/groups/icons/group_icon_room.png');
         width: 21px;
diff --git a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.scss b/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.scss
index 254821ced..d6b9e0408 100644
--- a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.scss
+++ b/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.scss
@@ -49,4 +49,21 @@
         background-position: center;
         background-repeat: no-repeat;
     }
+
+    .button {
+        background-image: url('@/assets/flash/messenger/button.png');
+        background-repeat: no-repeat;
+        height: 20px;
+    }
+
+    .text-link {
+        color: #05A3D8;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+
+        &:hover {
+            color: #79b1d3;
+        }
+    }
 }
diff --git a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx b/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
index 83ae06cfe..54bb4ced6 100644
--- a/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
+++ b/src/components/room/widgets/mysterybox/MysteryBoxExtensionView.tsx
@@ -1,7 +1,6 @@
 import { MysteryBoxKeysUpdateEvent } from '@nitrots/nitro-renderer';
 import { FC, useState } from 'react';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import { ColorUtils, LocalizeText } from '../../../../api';
+import { ColorUtils, CreateLinkEvent, LocalizeText } from '../../../../api';
 import { Base, Column, Flex, LayoutGridItem, Text } from '../../../../common';
 import { useSessionDataManagerEvent } from '../../../../hooks';
 
@@ -38,28 +37,31 @@ export const MysteryBoxExtensionView: FC<{}> = props =>
     if(keyColor === '' && boxColor === '') return null;
 
     return (
-        <Base className="nitro-notification-bubble rounded mysterybox-extension">
+        <Base className="nitro-notification-bubble mysterybox-extension">
             <Column>
-                <Flex alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
-                    <Text variant="white">{ LocalizeText('mysterybox.tracker.title') }</Text>
-                    { isOpen && <FaChevronUp className="fa-icon" /> }
-                    { !isOpen && <FaChevronDown className="fa-icon" /> }
+                <Flex className="grouproom-header px-1" alignItems="center" justifyContent="between" pointer onClick={ event => setIsOpen(value => !value) }>
+                    <Text bold variant="white">{ LocalizeText('mysterybox.tracker.title') }</Text>
+                    <Base className="icon icon-nitro-card-header-close" />
                 </Flex>
                 { isOpen &&
                     <>
-                        <Text variant="white">{ LocalizeText('mysterybox.tracker.description') }</Text>
-                        <Flex justifyContent="center" alignItems="center" gap={ 2 }>
-                            <LayoutGridItem className="mysterybox-container">
-                                <div className="box-image flex-shrink-0" style={ { backgroundColor: getRgbColor(boxColor) } }>
-                                    <div className="chain-overlay-image" />
-                                </div>
-                            </LayoutGridItem>
-                            <LayoutGridItem className="mysterybox-container">
-                                <div className="key-image flex-shrink-0" style={ { backgroundColor: getRgbColor(keyColor ) } }>
-                                    <div className="key-overlay-image" />
-                                </div>
-                            </LayoutGridItem>
-                        </Flex>
+                        <Column className="px-2 pb-2">
+                            <Text variant="white">{ LocalizeText('mysterybox.tracker.description') }</Text>
+                            <Flex justifyContent="center" alignItems="center" gap={ 2 }>
+                                <LayoutGridItem className="mysterybox-container">
+                                    <div className="box-image flex-shrink-0" style={ { backgroundColor: getRgbColor(boxColor) } }>
+                                        <div className="chain-overlay-image" />
+                                    </div>
+                                </LayoutGridItem>
+                                <LayoutGridItem className="mysterybox-container">
+                                    <div className="key-image flex-shrink-0" style={ { backgroundColor: getRgbColor(keyColor ) } }>
+                                        <div className="key-overlay-image" />
+                                    </div>
+                                </LayoutGridItem>
+                            </Flex>
+                            <button className="report rounded px-2 overflow-hidden" onClick={ () => CreateLinkEvent('inventory/toggle') }>{ LocalizeText('mysterybox.tracker.return.button.text') }</button>
+                            <Text pointer className="text-link" onClick={ null }>{ LocalizeText('mysterybox.tracker.link') }</Text>
+                        </Column>
                     </> }
             </Column>
         </Base>

From 9b1fded90770cbde91d492a95f233a6dd30ce102 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Thu, 11 May 2023 23:10:23 +0200
Subject: [PATCH 040/134] Search Icon on Bottom Bar & details in design

---
 src/App.scss                                                 | 2 +-
 src/components/right-side/RightSideView.scss                 | 2 +-
 src/components/room/widgets/RoomWidgets.scss                 | 2 +-
 .../room/widgets/avatar-info/AvatarInfoWidgetView.scss       | 4 ++--
 src/components/toolbar/ToolbarView.tsx                       | 5 +++--
 5 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index d0d0c4dd5..cc33fa4d1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -16,7 +16,7 @@ $grid-border-color: $muted;
 $grid-active-bg-color: #ececec;
 $grid-active-border-color: $white;
 
-$toolbar-height: 55px;
+$toolbar-height: 51px;
 
 $achievement-width: 375px;
 $achievement-height: 405px;
diff --git a/src/components/right-side/RightSideView.scss b/src/components/right-side/RightSideView.scss
index a5977419d..6d70d2f9b 100644
--- a/src/components/right-side/RightSideView.scss
+++ b/src/components/right-side/RightSideView.scss
@@ -1,7 +1,7 @@
 .nitro-right-side {
     position: absolute;
     top: 0px;
-    right: 10px;
+    right: 3px;
     min-width: 200px;
     max-width: 200px;
     height: calc(100% - #{$toolbar-height});
diff --git a/src/components/room/widgets/RoomWidgets.scss b/src/components/room/widgets/RoomWidgets.scss
index b9d9aab4d..9fc0f2069 100644
--- a/src/components/room/widgets/RoomWidgets.scss
+++ b/src/components/room/widgets/RoomWidgets.scss
@@ -1,6 +1,6 @@
 .nitro-room-tools-container {
     position: absolute;
-    bottom: $toolbar-height + 15px;
+    bottom: $toolbar-height + 5px;
     left: 0;
 
     .nitro-room-tools {
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
index aaaa11018..882b3e545 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
+++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
@@ -24,8 +24,8 @@
 
 .nitro-infostand-container {
     position: absolute;
-    right: 10px;
-    bottom: $toolbar-height + 10px;
+    right: 4px;
+    bottom: $toolbar-height + 7px;
     pointer-events: none;
     z-index: $infostand-zindex;
     color: $white;
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index 41d52183d..b4d7d3d3d 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -100,12 +100,13 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
                             <Base pointer className="navigation-item icon icon-modtools" onClick={ event => CreateLinkEvent('mod-tools/toggle') } /> }
                     </Flex>
                 </Flex>
-                <Flex alignItems="center" gap={ 2 }>
-                    <Flex gap={ 2 }>
+                <Flex alignItems="center" gap={ 2 } className={ rightSideCollapsed ? 'toolbar-right-side' : '' }>
+                    <Flex gap={ 2 } className="pe-5">
                         <Base pointer className="navigation-item icon icon-friendall" title={ LocalizeText('friend.bar.friends.title') } onClick={ event => CreateLinkEvent('friends/toggle') }>
                             { (requests.length > 0) &&
                                 <LayoutItemCountView count={ requests.length } /> }
                         </Base>
+                        <Base pointer className="navigation-item icon icon-friendsearch" title={ LocalizeText('friendlist.tip.search') } onClick={ event => CreateLinkEvent('friends/toggle') }></Base>
                         { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
                             <Base pointer className={ `navigation-item icon icon-message ${ (iconState === MessengerIconState.UNREAD) && 'is-unseen' }` } onClick={ event => OpenMessengerChat() } /> }
                     </Flex>

From 97552e8d8a5b3278a9d26fe23a4287e5c0e75c60 Mon Sep 17 00:00:00 2001
From: Gizmo <77913129+Habbobba@users.noreply.github.com>
Date: Fri, 12 May 2023 11:32:34 -0400
Subject: [PATCH 041/134] Update App.scss

"Navigator" and "User Profile View" height corrections.
---
 src/App.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index cc33fa4d1..7e2ab894d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -31,7 +31,7 @@ $inventory-width: 490px;
 $inventory-height: 315px;
 
 $navigator-width: 425px;
-$navigator-height: 560px;
+$navigator-height: 500px;
 $navigator-min-height: 205px;
 
 $nitro-room-creator-width: 585px;
@@ -41,7 +41,7 @@ $chat-input-style-selector-widget-width: 210px;
 $chat-input-style-selector-widget-height: 500px;
 
 $user-profile-width: 470px;
-$user-profile-height: 460px;
+$user-profile-height: 538px;
 
 $nitro-widget-custom-stack-height-width: 275px;
 $nitro-widget-custom-stack-height-height: 220px;

From 720ab76271f9b07da95aac9068089c50a2c33db2 Mon Sep 17 00:00:00 2001
From: Gizmo <77913129+Habbobba@users.noreply.github.com>
Date: Fri, 12 May 2023 11:35:37 -0400
Subject: [PATCH 042/134] Update UserProfileVew.scss

Removed the min and max height class's and added just a height class. This solution fixed it perfectly and it is now the proper height.
---
 src/components/user-profile/UserProfileVew.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/user-profile/UserProfileVew.scss b/src/components/user-profile/UserProfileVew.scss
index b0e90a27c..a1931625e 100644
--- a/src/components/user-profile/UserProfileVew.scss
+++ b/src/components/user-profile/UserProfileVew.scss
@@ -1,7 +1,6 @@
 .user-profile {
     width: $user-profile-width;
-    min-height: $user-profile-height;
-    max-height: 515px;
+    height: $user-profile-height;
     color: $black;
     resize: none;
 

From 367036296ee0f9f7eab04287935fb76ecde3f4fa Mon Sep 17 00:00:00 2001
From: Gizmo <77913129+Habbobba@users.noreply.github.com>
Date: Fri, 12 May 2023 11:37:59 -0400
Subject: [PATCH 043/134] Update HotelView.scss

This adjusts the images on the hotel view to fit properly with the bottom bar update where it got smaller by 4 pixels. This left a 4 pixel black gap in-between the images and the bottom bar.
---
 src/components/hotel-view/HotelView.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/hotel-view/HotelView.scss b/src/components/hotel-view/HotelView.scss
index f7a2dcd69..d3e56b8f8 100644
--- a/src/components/hotel-view/HotelView.scss
+++ b/src/components/hotel-view/HotelView.scss
@@ -2,7 +2,7 @@
     display: block;
 	position: fixed;
 	width: 100%;
-	height: calc(100% - 55px);
+	height: calc(100% - 51px);
 	background: rgba($black, 1);
 	color:#fff;
 	

From a468af4222ae414faf0c4848a47a18ff66e6f189 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Fri, 12 May 2023 22:12:56 +0200
Subject: [PATCH 044/134] Feature - Trading

---
 src/assets/styles/icons.scss                  |  11 +-
 src/components/inventory/InventoryView.scss   |  10 +-
 src/components/inventory/InventoryView.tsx    |  46 ++-
 .../furniture/InventoryFurnitureItemView.tsx  |  15 +-
 .../furniture/InventoryFurnitureView.tsx      | 152 ++++++++-
 .../views/furniture/InventoryTradeView.tsx    | 299 +++++-------------
 6 files changed, 270 insertions(+), 263 deletions(-)

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 41cdfd0b2..03c3c656d 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -290,19 +290,26 @@
     }
 
     &.icon-lock-open {
-        background: url(@/assets/flash/inventory/lock_open.png);
+        background: url('@/assets/flash/inventory/lock_open.png');
         background-repeat: no-repeat;
         height: 43px;
         width: 29px;
     }
 
     &.icon-lock-locked {
-        background: url(@/assets/flash/inventory/lock_locked.png);
+        background: url('@/assets/flash/inventory/lock_locked.png');
         background-repeat: no-repeat;
         height: 44px;
         width: 36px;
     }
 
+    &.icon-confirmed {
+        background: url('@/assets/flash/inventory/confirmed.png');
+        background-repeat: no-repeat;
+        height: 18px;
+        width: 18px;
+    }
+
     &.icon-sign-heart {
         background: url('@/assets/images/icons/sign-heart.png');
         width: 15px;
diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index a27cad0cf..a2afd5de5 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -1,6 +1,5 @@
 .nitro-inventory {
     width: $inventory-width;
-    height: $inventory-height;
     min-width: 326px;
     color: #000;
 
@@ -11,7 +10,6 @@
 
     &.trading {
         width: 535px;
-        min-height: 505px;
 
         .trading-inventory {
             height: 200px;
@@ -32,8 +30,14 @@
     }
 
     .trade-bg {
-        border-image-source: url(@/assets/flash/inventory/trading_bg.png);
+        border-image-source: url('@/assets/flash/inventory/trading_bg.png');
         border-image-slice: 15 15 15 15 fill;
         border-image-width: 15px 15px 15px 15px;
     }
+
+    .credits-align {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 }
diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index 6c8d1d2be..1dbeb0554 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -9,11 +9,11 @@ import { InventoryFurnitureView } from './views/furniture/InventoryFurnitureView
 import { InventoryTradeView } from './views/furniture/InventoryTradeView';
 import { InventoryPetView } from './views/pet/InventoryPetView';
 
-const TAB_FURNITURE: string = 'inventory.furni';
+export const TAB_FURNITURE: string = 'inventory.furni';
 const TAB_BOTS: string = 'inventory.bots';
 const TAB_PETS: string = 'inventory.furni.tab.pets';
 const TAB_BADGES: string = 'inventory.badges';
-const TABS = [ TAB_FURNITURE, TAB_PETS, TAB_BADGES, TAB_BOTS ];
+export const TABS = [ TAB_FURNITURE, TAB_PETS, TAB_BADGES, TAB_BOTS ];
 const UNSEEN_CATEGORIES = [ UnseenItemCategory.FURNI, UnseenItemCategory.PET, UnseenItemCategory.BADGE, UnseenItemCategory.BOT ];
 
 export const InventoryView: FC<{}> = props =>
@@ -120,33 +120,29 @@ export const InventoryView: FC<{}> = props =>
     return (
         <NitroCardView uniqueKey={ 'inventory' } className={ isTrading ? 'nitro-inventory trading' : 'nitro-inventory' } theme={ isTrading ? 'primary' : '' } >
             <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
-            { !isTrading &&
-                <>
-                    <NitroCardTabsView>
-                        { TABS.map((name, index) =>
-                        {
-                            return (
-                                <NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } count={ getCount(UNSEEN_CATEGORIES[index]) }>
-                                    { LocalizeText(name) }
-                                </NitroCardTabsItemView>
-                            );
-                        }) }
-                    </NitroCardTabsView>
-                    <NitroCardContentView>
-                        { (currentTab === TAB_FURNITURE ) &&
+            <>
+                <NitroCardTabsView>
+                    { TABS.map((name, index) =>
+                    {
+                        return (
+                            <NitroCardTabsItemView key={ index } isActive={ (currentTab === name) } onClick={ event => setCurrentTab(name) } count={ getCount(UNSEEN_CATEGORIES[index]) }>
+                                { LocalizeText(name) }
+                            </NitroCardTabsItemView>
+                        );
+                    }) }
+                </NitroCardTabsView>
+                <NitroCardContentView>
+                    { (currentTab === TAB_FURNITURE ) &&
                             <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
-                        { (currentTab === TAB_PETS ) && 
+                    { (currentTab === TAB_PETS ) && 
                             <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
-                        { (currentTab === TAB_BADGES ) && 
+                    { (currentTab === TAB_BADGES ) && 
                             <InventoryBadgeView /> }
-                        { (currentTab === TAB_BOTS ) &&
+                    { (currentTab === TAB_BOTS ) &&
                             <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
-                    </NitroCardContentView>
-                </> }
-            { isTrading &&
-                <NitroCardContentView>
-                    <InventoryTradeView cancelTrade={ onClose } />
-                </NitroCardContentView> }
+                    { isTrading && <InventoryTradeView currentTab={ currentTab } setCurrentTab={ (e) => setCurrentTab(e) } cancelTrade={ onClose } /> }
+                </NitroCardContentView>
+            </>
         </NitroCardView>
     );
 }
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
index f5e848147..ec14df015 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
@@ -1,12 +1,12 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent, useState } from 'react';
-import { attemptItemPlacement, GroupItem } from '../../../../api';
+import { GroupItem, attemptItemPlacement } from '../../../../api';
 import { LayoutGridItem } from '../../../../common';
 import { useInventoryFurni } from '../../../../hooks';
 
-export const InventoryFurnitureItemView: FC<{ groupItem: GroupItem }> = props =>
+export const InventoryFurnitureItemView: FC<{ groupItem: GroupItem, isTrading: boolean, attemptItemOffer: (count: number) => void, setGroupItem: (item: GroupItem) => void }> = props =>
 {
-    const { groupItem = null, ...rest } = props;
+    const { groupItem = null, isTrading = null, attemptItemOffer = null, setGroupItem = null, ...rest } = props;
     const [ isMouseDown, setMouseDown ] = useState(false);
     const { selectedItem = null, setSelectedItem = null } = useInventoryFurni();
 
@@ -24,15 +24,18 @@ export const InventoryFurnitureItemView: FC<{ groupItem: GroupItem }> = props =>
             case MouseEventType.ROLL_OUT:
                 if(!isMouseDown || !(groupItem === selectedItem)) return;
 
-                attemptItemPlacement(groupItem);
+                if (!isTrading) attemptItemPlacement(groupItem);
                 return;
             case 'dblclick':
-                attemptItemPlacement(groupItem);
+                if (!isTrading) attemptItemPlacement(groupItem);
+                if (isTrading) (setGroupItem(groupItem), attemptItemOffer(1))
                 return;
         }
     }
 
     const count = groupItem.getUnlockedCount();
 
-    return <LayoutGridItem className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ groupItem.getUnlockedCount() } itemActive={ (groupItem === selectedItem) } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } onDoubleClick={ onMouseEvent } { ...rest } />;
+    if (!groupItem) return null;
+
+    return <LayoutGridItem className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ groupItem.getUnlockedCount() } itemActive={ (groupItem === selectedItem) } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onClick={ event => (count && setGroupItem(groupItem)) } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } onDoubleClick={ onMouseEvent } { ...rest } />;
 }
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index c563eecff..75073d512 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -1,17 +1,19 @@
-import { IRoomSession, RoomObjectVariable, RoomPreviewer, Vector3d } from '@nitrots/nitro-renderer';
+import { IObjectData, IRoomSession, RoomObjectVariable, RoomPreviewer, TradingListAddItemComposer, TradingListAddItemsComposer, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { attemptItemPlacement, DispatchUiEvent, FurniCategory, GetRoomEngine, GetSessionDataManager, GroupItem, LocalizeText, UnseenItemCategory } from '../../../../api';
+import { DispatchUiEvent, FurniCategory, GetRoomEngine, GetSessionDataManager, GroupItem, IFurnitureItem, LocalizeText, NotificationAlertType, SendMessageComposer, UnseenItemCategory, attemptItemPlacement, getGuildFurniType } from '../../../../api';
 import { AutoGrid, Button, Column, Grid, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
 import { CatalogPostMarketplaceOfferEvent } from '../../../../events';
-import { useInventoryFurni, useInventoryUnseenTracker } from '../../../../hooks';
+import { useInventoryFurni, useInventoryTrade, useInventoryUnseenTracker, useNotification } from '../../../../hooks';
 import { InventoryCategoryEmptyView } from '../InventoryCategoryEmptyView';
 import { InventoryFurnitureItemView } from './InventoryFurnitureItemView';
 import { InventoryFurnitureSearchView } from './InventoryFurnitureSearchView';
+import { MAX_ITEMS_TO_TRADE } from './InventoryTradeView';
 
 interface InventoryFurnitureViewProps
 {
     roomSession: IRoomSession;
     roomPreviewer: RoomPreviewer;
+    isTrading?: boolean;
 }
 
 const attemptPlaceMarketplaceOffer = (groupItem: GroupItem) =>
@@ -27,11 +29,121 @@ const attemptPlaceMarketplaceOffer = (groupItem: GroupItem) =>
 
 export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
 {
-    const { roomSession = null, roomPreviewer = null } = props;
+    const { roomSession = null, roomPreviewer = null, isTrading = null } = props;
     const [ isVisible, setIsVisible ] = useState(false);
     const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>([]);
+    const [ groupItem, setGroupItem ] = useState<GroupItem>(null);
+    const [ quantity, setQuantity ] = useState<number>(1);
     const { groupItems = [], selectedItem = null, activate = null, deactivate = null } = useInventoryFurni();
+    const { ownUser = null } = useInventoryTrade();
     const { resetItems = null } = useInventoryUnseenTracker();
+    const { simpleAlert = null } = useNotification();
+
+    const updateQuantity = (value: number, totalItemCount: number) =>
+    {
+        if(isNaN(Number(value)) || Number(value) < 0 || !value) value = 1;
+
+        value = Math.max(Number(value), 1);
+        value = Math.min(Number(value), totalItemCount);
+
+        if(value === quantity) return;
+
+        setQuantity(value);
+    }
+
+    const changeCount = (totalItemCount: number) =>
+    {
+        updateQuantity(quantity, totalItemCount);
+        attemptItemOffer(quantity);
+    }
+
+    const canTradeItem = (isWallItem: boolean, spriteId: number, category: number, groupable: boolean, stuffData: IObjectData) =>
+    {
+        if(!ownUser || ownUser.accepts || !ownUser.userItems) return false;
+
+        if(ownUser.userItems.length < MAX_ITEMS_TO_TRADE) return true;
+
+        if(!groupable) return false;
+
+        let type = spriteId.toString();
+
+        if(category === FurniCategory.POSTER)
+        {
+            type = ((type + 'poster') + stuffData.getLegacyString());
+        }
+        else
+        {
+            if(category === FurniCategory.GUILD_FURNI)
+            {
+                type = getGuildFurniType(spriteId, stuffData);
+            }
+            else
+            {
+                type = (((isWallItem) ? 'I' : 'S') + type);
+            }
+        }
+
+        return !!ownUser.userItems.getValue(type);
+    }
+
+    const attemptItemOffer = (count: number) =>
+    {
+        console.log('item', groupItem);
+        
+        if(!groupItem) return;
+
+        const tradeItems = groupItem.getTradeItems(count);
+
+        if(!tradeItems || !tradeItems.length) return;
+
+        let coreItem: IFurnitureItem = null;
+        const itemIds: number[] = [];
+
+        for(const item of tradeItems)
+        {
+            itemIds.push(item.id);
+
+            if(!coreItem) coreItem = item;
+        }
+
+        const ownItemCount = ownUser.userItems.length;
+
+        if((ownItemCount + itemIds.length) <= 1500)
+        {
+            if(!coreItem.isGroupable && (itemIds.length))
+            {
+                SendMessageComposer(new TradingListAddItemComposer(itemIds.pop()));
+            }
+            else
+            {
+                const tradeIds: number[] = [];
+
+                for(const itemId of itemIds)
+                {
+                    if(canTradeItem(coreItem.isWallItem, coreItem.type, coreItem.category, coreItem.isGroupable, coreItem.stuffData))
+                    {
+                        tradeIds.push(itemId);
+                    }
+                }
+
+                if(tradeIds.length)
+                {
+                    if(tradeIds.length === 1)
+                    {
+                        SendMessageComposer(new TradingListAddItemComposer(tradeIds.pop()));
+                    }
+                    else
+                    {
+                        SendMessageComposer(new TradingListAddItemsComposer(...tradeIds));
+                    }
+                }
+            }
+        }
+        else
+        {
+            simpleAlert(LocalizeText('trading.items.too_many_items.desc'), NotificationAlertType.DEFAULT, null, null, LocalizeText('trading.items.too_many_items.title'));
+        }
+    }
 
     useEffect(() =>
     {
@@ -81,6 +193,8 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                 roomPreviewer.addFurnitureIntoRoom(selectedItem.type, new Vector3d(90), selectedItem.stuffData, (furnitureItem.extra.toString()));
             }
         }
+
+        setGroupItem(selectedItem);
     }, [ roomPreviewer, selectedItem ]);
 
     useEffect(() =>
@@ -115,7 +229,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
             <Column size={ 7 } overflow="hidden">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
                 <AutoGrid columnCount={ 5 }>
-                    { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } />) }
+                    { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } isTrading={ isTrading } attemptItemOffer={ (e) => attemptItemOffer(e) } setGroupItem={ (e) => setGroupItem(e) } />) }
                 </AutoGrid>
             </Column>
             <Column size={ 5 } overflow="auto">
@@ -128,16 +242,26 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                 </Column>
                 { selectedItem &&
                     <Column grow justifyContent="between" gap={ 2 }>
-                        <Text grow truncate>{ selectedItem.name }</Text>
+                        <Text grow truncate bold>{ selectedItem.name }</Text>
                         <Column gap={ 1 }>
-                            { !!roomSession &&
-                                <Button onClick={ event => attemptItemPlacement(selectedItem) }>
-                                    { LocalizeText('inventory.furni.placetoroom') }
-                                </Button> }
-                            { (selectedItem && selectedItem.isSellable) &&
-                                <Button onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
-                                    { LocalizeText('inventory.marketplace.sell') }
-                                </Button> }
+                            { (!isTrading) &&
+                                <>
+                                    { !!roomSession &&
+                                        <Button onClick={ event => attemptItemPlacement(selectedItem) }>
+                                            { LocalizeText('inventory.furni.placetoroom') }
+                                        </Button> }
+                                    { (selectedItem && selectedItem.isSellable) &&
+                                        <Button onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
+                                            { LocalizeText('inventory.marketplace.sell') }
+                                        </Button> }
+                                </>
+                            }
+                            { (isTrading) &&
+                                <Column gap={ 1 } alignItems="start">
+                                    <input type="number" className="w-50 quantity-input remove-outline" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ selectedItem.getUnlockedCount() === 0 } value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
+                                    <Button variant="secondary" disabled={ selectedItem.getUnlockedCount() === 0 } onClick={ event => changeCount(selectedItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
+                                </Column>
+                            }
                         </Column>
                     </Column> }
             </Column>
diff --git a/src/components/inventory/views/furniture/InventoryTradeView.tsx b/src/components/inventory/views/furniture/InventoryTradeView.tsx
index 27382cfdd..a6b51561d 100644
--- a/src/components/inventory/views/furniture/InventoryTradeView.tsx
+++ b/src/components/inventory/views/furniture/InventoryTradeView.tsx
@@ -1,151 +1,38 @@
-import { IObjectData, TradingListAddItemComposer, TradingListAddItemsComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { FaChevronLeft, FaChevronRight, FaLock, FaUnlock } from 'react-icons/fa';
-import { FurniCategory, getGuildFurniType, GroupItem, IFurnitureItem, LocalizeText, NotificationAlertType, SendMessageComposer, TradeState } from '../../../../api';
+import { GroupItem, LocalizeText, TradeState } from '../../../../api';
 import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../common';
-import { useInventoryTrade, useNotification } from '../../../../hooks';
-import { InventoryFurnitureSearchView } from './InventoryFurnitureSearchView';
+import { useInventoryTrade } from '../../../../hooks';
+import { TABS, TAB_FURNITURE } from '../../InventoryView';
 
 interface InventoryTradeViewProps
 {
+    currentTab: string;
+    setCurrentTab: (value: string) => void;
     cancelTrade: () => void;
 }
 
-const MAX_ITEMS_TO_TRADE: number = 9;
+export const MAX_ITEMS_TO_TRADE: number = 9;
 
 export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 {
-    const { cancelTrade = null } = props;
-    const [ groupItem, setGroupItem ] = useState<GroupItem>(null);
+    const { currentTab = null, setCurrentTab = null, cancelTrade = null } = props;
     const [ ownGroupItem, setOwnGroupItem ] = useState<GroupItem>(null);
     const [ otherGroupItem, setOtherGroupItem ] = useState<GroupItem>(null);
-    const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>(null);
     const [ countdownTick, setCountdownTick ] = useState(3);
-    const [ quantity, setQuantity ] = useState<number>(1);
-    const { ownUser = null, otherUser = null, groupItems = [], tradeState = TradeState.TRADING_STATE_READY, progressTrade = null, removeItem = null, setTradeState = null } = useInventoryTrade();
-    const { simpleAlert = null } = useNotification();
-
-    const canTradeItem = (isWallItem: boolean, spriteId: number, category: number, groupable: boolean, stuffData: IObjectData) =>
-    {
-        if(!ownUser || ownUser.accepts || !ownUser.userItems) return false;
-
-        if(ownUser.userItems.length < MAX_ITEMS_TO_TRADE) return true;
-
-        if(!groupable) return false;
-
-        let type = spriteId.toString();
-
-        if(category === FurniCategory.POSTER)
-        {
-            type = ((type + 'poster') + stuffData.getLegacyString());
-        }
-        else
-        {
-            if(category === FurniCategory.GUILD_FURNI)
-            {
-                type = getGuildFurniType(spriteId, stuffData);
-            }
-            else
-            {
-                type = (((isWallItem) ? 'I' : 'S') + type);
-            }
-        }
-
-        return !!ownUser.userItems.getValue(type);
-    }
-
-    const attemptItemOffer = (count: number) =>
-    {
-        if(!groupItem) return;
-
-        const tradeItems = groupItem.getTradeItems(count);
-
-        if(!tradeItems || !tradeItems.length) return;
-
-        let coreItem: IFurnitureItem = null;
-        const itemIds: number[] = [];
-
-        for(const item of tradeItems)
-        {
-            itemIds.push(item.id);
-
-            if(!coreItem) coreItem = item;
-        }
-
-        const ownItemCount = ownUser.userItems.length;
-
-        if((ownItemCount + itemIds.length) <= 1500)
-        {
-            if(!coreItem.isGroupable && (itemIds.length))
-            {
-                SendMessageComposer(new TradingListAddItemComposer(itemIds.pop()));
-            }
-            else
-            {
-                const tradeIds: number[] = [];
-
-                for(const itemId of itemIds)
-                {
-                    if(canTradeItem(coreItem.isWallItem, coreItem.type, coreItem.category, coreItem.isGroupable, coreItem.stuffData))
-                    {
-                        tradeIds.push(itemId);
-                    }
-                }
-
-                if(tradeIds.length)
-                {
-                    if(tradeIds.length === 1)
-                    {
-                        SendMessageComposer(new TradingListAddItemComposer(tradeIds.pop()));
-                    }
-                    else
-                    {
-                        SendMessageComposer(new TradingListAddItemsComposer(...tradeIds));
-                    }
-                }
-            }
-        }
-        else
-        {
-            simpleAlert(LocalizeText('trading.items.too_many_items.desc'), NotificationAlertType.DEFAULT, null, null, LocalizeText('trading.items.too_many_items.title'));
-        }
-    }
+    const { ownUser = null, otherUser = null, tradeState = TradeState.TRADING_STATE_READY, progressTrade = null, removeItem = null, setTradeState = null } = useInventoryTrade();
 
     const getLockIcon = (accepts: boolean) =>
     {
         if(accepts)
         {
-            return <FaLock className="mt-auto pb-5 text-success fa-icon" />
+            return <Base className="mt-auto mb-5 pb-5 icon icon-lock-locked" />
         }
         else
         {
-            return <FaUnlock className="mt-auto pb-5 text-danger fa-icon" />
+            return <Base className="mt-auto mb-5 pb-5 icon icon-lock-open" />
         }
     }
 
-    const updateQuantity = (value: number, totalItemCount: number) =>
-    {
-        if(isNaN(Number(value)) || Number(value) < 0 || !value) value = 1;
-
-        value = Math.max(Number(value), 1);
-        value = Math.min(Number(value), totalItemCount);
-
-        if(value === quantity) return;
-
-        setQuantity(value);
-    }
-
-    const changeCount = (totalItemCount: number) =>
-    {
-        updateQuantity(quantity, totalItemCount);
-        attemptItemOffer(quantity);
-    }
-
-    useEffect(() =>
-    {
-        setQuantity(1);
-    }, [ groupItem ]);
-
     useEffect(() =>
     {
         if(tradeState !== TradeState.TRADING_STATE_COUNTDOWN) return;
@@ -178,102 +65,88 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 
     return (
         <Column>
-            <Flex>
-            <Column size={ 4 } fullWidth overflow="hidden" className="trading-inventory">
-                <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                <Flex column fullHeight fullWidth justifyContent="between" overflow="hidden" gap={ 2 }>
-                    <AutoGrid columnCount={ 3 }>
-                        { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) =>
-                        {
-                            const count = item.getUnlockedCount();
-
-                            return (
-                                <LayoutGridItem key={ index } className={ !count ? 'opacity-0-5 ' : '' } itemImage={ item.iconUrl } itemCount={ count } itemActive={ (groupItem === item) } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => (count && setGroupItem(item)) } onDoubleClick={ event => attemptItemOffer(1) }>
-                                    { ((count > 0) && (groupItem === item)) &&
-                                        <Button position="absolute" variant="success" className="trade-button bottom-1 end-1" onClick={ event => attemptItemOffer(1) }>
-                                            <FaChevronRight className="fa-icon" />
-                                        </Button>
-                                    }
-                                </LayoutGridItem>
-                            );
-                        }) }
-                    </AutoGrid>
-                    <Column gap={ 1 } alignItems="end">
-                        <Grid overflow="hidden">
-                            <Column size={ 6 } overflow="hidden">
-                                <input type="number" className="form-control form-control-sm quantity-input" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ !groupItem } value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
+            <Column fullWidth size={ 12 } overflow="hidden" className="trade-bg p-2">
+                { currentTab === TAB_FURNITURE &&
+                    <>
+                        <Text small>{ LocalizeText('inventory.trading.info.add') }</Text>
+                        <Grid overflow="hidden" className="px-2">
+                            <Column size={ 4 } overflow="hidden">
+                                <Flex>
+                                    { (ownUser.accepts) && <Base className="icon icon-confirmed" /> }
+                                    <Text className="px-2"><b>{ LocalizeText('inventory.trading.you') }</b> { LocalizeText('inventory.trading.areoffering') }</Text>
+                                </Flex>
+                                <AutoGrid columnCount={ 3 }>
+                                    { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                                    {
+                                        const item = (ownUser.userItems.getWithIndex(i) || null);
+
+                                        if(!item) return <LayoutGridItem key={ i } />;
+
+                                        return (
+                                            <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item) }>
+                                                { (ownGroupItem === item) &&
+                                                    <Base position="absolute" onClick={ event => removeItem(item) } /> }
+                                            </LayoutGridItem>
+                                        );
+                                    }) }
+                                </AutoGrid>
+                                <Column gap={ 0 } fullWidth>
+                                    <Text>{ LocalizeText('inventory.trading.info.itemcount', [ 'value' ], [ ownUser.itemCount.toString() ]) }</Text>
+                                    <Text className="credits-align">{ LocalizeText('inventory.trading.info.creditvalue.own', [ 'value' ], [ ownUser.userItems.length.toString() ]) }</Text>
+                                </Column>
                             </Column>
-                            <Column size={ 6 } overflow="hidden">
-                                <Button variant="secondary" disabled={ !groupItem } onClick={ event => changeCount(groupItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
+                            { getLockIcon(ownUser.accepts) }
+                            <Column size={ 4 } overflow="hidden">
+                                <Flex>
+                                    { (otherUser.accepts) && <Base className="icon icon-confirmed" /> }
+                                    <Text className="px-2"><b>{ otherUser.userName }</b> { LocalizeText('inventory.trading.isoffering') }</Text>
+                                </Flex>
+                                <AutoGrid columnCount={ 3 }>
+                                    { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
+                                    {
+                                        const item = (otherUser.userItems.getWithIndex(i) || null);
+
+                                        if(!item) return <LayoutGridItem key={ i } />;
+
+                                        return <LayoutGridItem key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
+                                    }) }
+                                </AutoGrid>
+                                <Column gap={ 0 } fullWidth>
+                                    <Text>{ LocalizeText('inventory.trading.info.itemcount', [ 'value' ], [ otherUser.itemCount.toString() ]) }</Text>
+                                    <Text>{ LocalizeText('inventory.trading.info.creditvalue', [ 'value' ], [ otherUser.userItems.length.toString() ]) }</Text>
+                                </Column>
                             </Column>
+                            { getLockIcon(otherUser.accepts) }
                         </Grid>
-                        <Base fullWidth className="badge bg-muted">
-                            { groupItem ? groupItem.name : LocalizeText('catalog_selectproduct') }
-                        </Base>
-                    </Column>
-                </Flex>
-            </Column>
-            </Flex>
-            <Column fullWidth size={ 8 } overflow="hidden" className="trade-bg p-2">
-                <Grid overflow="hidden">
-                    <Column size={ 4 } overflow="hidden">
-                        <Flex justifyContent="between" alignItems="center">
-                            <Text>{ LocalizeText('inventory.trading.you') } { LocalizeText('inventory.trading.areoffering') }:</Text>
-                        </Flex>
-                        <AutoGrid columnCount={ 3 }>
-                            { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
-                            {
-                                const item = (ownUser.userItems.getWithIndex(i) || null);
-
-                                if(!item) return <LayoutGridItem key={ i } />;
-
-                                return (
-                                    <LayoutGridItem key={ i } itemActive={ (ownGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOwnGroupItem(item) } onDoubleClick={ event => removeItem(item) }>
-                                        { (ownGroupItem === item) &&
-                                            <Button position="absolute" variant="danger" className="trade-button bottom-1 start-1" onClick={ event => removeItem(item) }>
-                                                <FaChevronLeft className="fa-icon" />
-                                            </Button> }
-                                    </LayoutGridItem>
-                                );
-                            }) }
-                        </AutoGrid>
-                        <Base fullWidth className="badge bg-muted">
-                            { ownGroupItem ? ownGroupItem.name : LocalizeText('catalog_selectproduct') }
-                        </Base>
-                    </Column>
-                    { getLockIcon(ownUser.accepts) }
-                    <Column size={ 4 } overflow="hidden">
-                        <Flex justifyContent="between" alignItems="center">
-                            <Text>{ otherUser.userName } { LocalizeText('inventory.trading.isoffering') }:</Text>
+                    </>
+                }
+                { currentTab !== TAB_FURNITURE &&
+                    <>
+                        <Flex className="px-2">
+                            <Base className="flex-shrink-0 icon icon-report-room" />
+                            <Text bold>{ LocalizeText('inventory.trading.minimized.trade_in_progress') }</Text>
                         </Flex>
-                        <AutoGrid columnCount={ 3 }>
-                            { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
-                            {
-                                const item = (otherUser.userItems.getWithIndex(i) || null);
-
-                                if(!item) return <LayoutGridItem key={ i } />;
-
-                                return <LayoutGridItem key={ i } itemActive={ (otherGroupItem === item) } itemImage={ item.iconUrl } itemCount={ item.getTotalCount() } itemUniqueNumber={ item.stuffData.uniqueNumber } onClick={ event => setOtherGroupItem(item) } />;
-                            }) }
-                        </AutoGrid>
-                        <Base fullWidth className="badge bg-muted w-100">
-                            { otherGroupItem ? otherGroupItem.name : LocalizeText('catalog_selectproduct') }
-                        </Base>
-                    </Column>
-                    { getLockIcon(otherUser.accepts) }
-                </Grid>
+                    </>
+                }
                 <Flex grow justifyContent="between">
+                    { (currentTab === TAB_FURNITURE) &&
+                        <>
+                            { (tradeState === TradeState.TRADING_STATE_READY) &&
+                                <Button variant="secondary" disabled={ (!ownUser.itemCount && !otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText('inventory.trading.accept') }</Button> }
+                            { (tradeState === TradeState.TRADING_STATE_RUNNING) &&
+                                <Button variant="secondary" disabled={ (!ownUser.itemCount && !otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText(ownUser.accepts ? 'inventory.trading.modify' : 'inventory.trading.accept') }</Button> }
+                            { (tradeState === TradeState.TRADING_STATE_COUNTDOWN) &&
+                                <Button variant="secondary" disabled>{ LocalizeText('inventory.trading.countdown', [ 'counter' ], [ countdownTick.toString() ]) }</Button> }
+                            { (tradeState === TradeState.TRADING_STATE_CONFIRMING) &&
+                                <Button variant="secondary" onClick={ progressTrade }>{ LocalizeText('inventory.trading.button.restore') }</Button> }
+                            { (tradeState === TradeState.TRADING_STATE_CONFIRMED) &&
+                                <Button variant="secondary">{ LocalizeText('inventory.trading.info.waiting') }</Button> }
+                        </>
+                    }
+                    { (currentTab !== TAB_FURNITURE) &&
+                        <Button variant="secondary" onClick={ () => setCurrentTab(TABS[0]) }>{ LocalizeText('inventory.trading.minimized.continue_trade') }</Button>
+                    }
                     <Button variant="danger" onClick={ cancelTrade }>{ LocalizeText('generic.cancel') }</Button>
-                    { (tradeState === TradeState.TRADING_STATE_READY) &&
-                        <Button variant="secondary" disabled={ (!ownUser.itemCount && !otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText('inventory.trading.accept') }</Button> }
-                    { (tradeState === TradeState.TRADING_STATE_RUNNING) &&
-                        <Button variant="secondary" disabled={ (!ownUser.itemCount && !otherUser.itemCount) } onClick={ progressTrade }>{ LocalizeText(ownUser.accepts ? 'inventory.trading.modify' : 'inventory.trading.accept') }</Button> }
-                    { (tradeState === TradeState.TRADING_STATE_COUNTDOWN) &&
-                        <Button variant="secondary" disabled>{ LocalizeText('inventory.trading.countdown', [ 'counter' ], [ countdownTick.toString() ]) }</Button> }
-                    { (tradeState === TradeState.TRADING_STATE_CONFIRMING) &&
-                        <Button variant="secondary" onClick={ progressTrade }>{ LocalizeText('inventory.trading.button.restore') }</Button> }
-                    { (tradeState === TradeState.TRADING_STATE_CONFIRMED) &&
-                        <Button variant="secondary">{ LocalizeText('inventory.trading.info.waiting') }</Button> }
                 </Flex>
             </Column>
         </Column>

From d0fb80dbab43f191b7ffd8d93b0a438c86e945bb Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Fri, 12 May 2023 22:34:59 +0200
Subject: [PATCH 045/134] Fix show input trading

---
 src/components/inventory/InventoryView.tsx                      | 2 +-
 .../inventory/views/furniture/InventoryFurnitureItemView.tsx    | 2 --
 .../inventory/views/furniture/InventoryFurnitureView.tsx        | 2 +-
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index 1dbeb0554..6f3f67ce5 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -133,7 +133,7 @@ export const InventoryView: FC<{}> = props =>
                 </NitroCardTabsView>
                 <NitroCardContentView>
                     { (currentTab === TAB_FURNITURE ) &&
-                            <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
+                            <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } /> }
                     { (currentTab === TAB_PETS ) && 
                             <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
                     { (currentTab === TAB_BADGES ) && 
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
index ec14df015..15b988fa9 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
@@ -35,7 +35,5 @@ export const InventoryFurnitureItemView: FC<{ groupItem: GroupItem, isTrading: b
 
     const count = groupItem.getUnlockedCount();
 
-    if (!groupItem) return null;
-
     return <LayoutGridItem className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ groupItem.getUnlockedCount() } itemActive={ (groupItem === selectedItem) } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onClick={ event => (count && setGroupItem(groupItem)) } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } onDoubleClick={ onMouseEvent } { ...rest } />;
 }
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index 75073d512..17616393d 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -13,7 +13,7 @@ interface InventoryFurnitureViewProps
 {
     roomSession: IRoomSession;
     roomPreviewer: RoomPreviewer;
-    isTrading?: boolean;
+    isTrading: boolean;
 }
 
 const attemptPlaceMarketplaceOffer = (groupItem: GroupItem) =>

From 398910eaaa7fd8373a98d7e4af9d2984e9706936 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Fri, 12 May 2023 23:17:20 +0200
Subject: [PATCH 046/134] Fixed error and moved constants in a folder

---
 src/components/inventory/InventoryView.tsx             | 10 ++--------
 .../inventory/constants/InventoryTabConstants.ts       |  9 +++++++++
 src/components/inventory/constants/index.ts            |  1 +
 .../views/furniture/InventoryFurnitureView.tsx         |  2 +-
 .../inventory/views/furniture/InventoryTradeView.tsx   |  4 +---
 5 files changed, 14 insertions(+), 12 deletions(-)
 create mode 100644 src/components/inventory/constants/InventoryTabConstants.ts
 create mode 100644 src/components/inventory/constants/index.ts

diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index 6f3f67ce5..c23f113f9 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -1,21 +1,15 @@
 import { BadgePointLimitsEvent, ILinkEventTracker, IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { AddEventLinkTracker, GetLocalization, GetRoomEngine, LocalizeText, RemoveLinkEventTracker, UnseenItemCategory, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
+import { AddEventLinkTracker, GetLocalization, GetRoomEngine, LocalizeText, RemoveLinkEventTracker, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useRoomEngineEvent, useRoomSessionManagerEvent } from '../../hooks';
+import { TABS, TAB_BADGES, TAB_BOTS, TAB_FURNITURE, TAB_PETS, UNSEEN_CATEGORIES } from './constants';
 import { InventoryBadgeView } from './views/badge/InventoryBadgeView';
 import { InventoryBotView } from './views/bot/InventoryBotView';
 import { InventoryFurnitureView } from './views/furniture/InventoryFurnitureView';
 import { InventoryTradeView } from './views/furniture/InventoryTradeView';
 import { InventoryPetView } from './views/pet/InventoryPetView';
 
-export const TAB_FURNITURE: string = 'inventory.furni';
-const TAB_BOTS: string = 'inventory.bots';
-const TAB_PETS: string = 'inventory.furni.tab.pets';
-const TAB_BADGES: string = 'inventory.badges';
-export const TABS = [ TAB_FURNITURE, TAB_PETS, TAB_BADGES, TAB_BOTS ];
-const UNSEEN_CATEGORIES = [ UnseenItemCategory.FURNI, UnseenItemCategory.PET, UnseenItemCategory.BADGE, UnseenItemCategory.BOT ];
-
 export const InventoryView: FC<{}> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
diff --git a/src/components/inventory/constants/InventoryTabConstants.ts b/src/components/inventory/constants/InventoryTabConstants.ts
new file mode 100644
index 000000000..859209787
--- /dev/null
+++ b/src/components/inventory/constants/InventoryTabConstants.ts
@@ -0,0 +1,9 @@
+import { UnseenItemCategory } from '../../../api/inventory/UnseenItemCategory';
+
+export const TAB_FURNITURE: string = 'inventory.furni';
+export const TAB_BOTS: string = 'inventory.bots';
+export const TAB_PETS: string = 'inventory.furni.tab.pets';
+export const TAB_BADGES: string = 'inventory.badges';
+export const TABS = [ TAB_FURNITURE, TAB_PETS, TAB_BADGES, TAB_BOTS ];
+export const UNSEEN_CATEGORIES = [ UnseenItemCategory.FURNI, UnseenItemCategory.PET, UnseenItemCategory.BADGE, UnseenItemCategory.BOT ];
+export const MAX_ITEMS_TO_TRADE: number = 9;
diff --git a/src/components/inventory/constants/index.ts b/src/components/inventory/constants/index.ts
new file mode 100644
index 000000000..825c6c357
--- /dev/null
+++ b/src/components/inventory/constants/index.ts
@@ -0,0 +1 @@
+export * from './InventoryTabConstants';
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index 17616393d..eda503812 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -4,10 +4,10 @@ import { DispatchUiEvent, FurniCategory, GetRoomEngine, GetSessionDataManager, G
 import { AutoGrid, Button, Column, Grid, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
 import { CatalogPostMarketplaceOfferEvent } from '../../../../events';
 import { useInventoryFurni, useInventoryTrade, useInventoryUnseenTracker, useNotification } from '../../../../hooks';
+import { MAX_ITEMS_TO_TRADE } from '../../constants';
 import { InventoryCategoryEmptyView } from '../InventoryCategoryEmptyView';
 import { InventoryFurnitureItemView } from './InventoryFurnitureItemView';
 import { InventoryFurnitureSearchView } from './InventoryFurnitureSearchView';
-import { MAX_ITEMS_TO_TRADE } from './InventoryTradeView';
 
 interface InventoryFurnitureViewProps
 {
diff --git a/src/components/inventory/views/furniture/InventoryTradeView.tsx b/src/components/inventory/views/furniture/InventoryTradeView.tsx
index a6b51561d..1a72d5f09 100644
--- a/src/components/inventory/views/furniture/InventoryTradeView.tsx
+++ b/src/components/inventory/views/furniture/InventoryTradeView.tsx
@@ -2,7 +2,7 @@ import { FC, useEffect, useState } from 'react';
 import { GroupItem, LocalizeText, TradeState } from '../../../../api';
 import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../common';
 import { useInventoryTrade } from '../../../../hooks';
-import { TABS, TAB_FURNITURE } from '../../InventoryView';
+import { MAX_ITEMS_TO_TRADE, TABS, TAB_FURNITURE } from '../../constants';
 
 interface InventoryTradeViewProps
 {
@@ -11,8 +11,6 @@ interface InventoryTradeViewProps
     cancelTrade: () => void;
 }
 
-export const MAX_ITEMS_TO_TRADE: number = 9;
-
 export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 {
     const { currentTab = null, setCurrentTab = null, cancelTrade = null } = props;

From 480e9841308c2b7316b8678a4b0b43cccd416237 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 13 May 2023 01:55:57 +0200
Subject: [PATCH 047/134] Finish design and trading

---
 src/components/inventory/InventoryView.scss   | 20 ++++++++++++++++++
 src/components/inventory/InventoryView.tsx    |  2 +-
 .../furniture/InventoryFurnitureView.tsx      | 15 ++++++++-----
 .../views/furniture/InventoryTradeView.tsx    | 21 ++++++++++++++-----
 4 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index a2afd5de5..96289fc54 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -39,5 +39,25 @@
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
+        width: 230px;
+    }
+
+    .quantity-input {
+        width: 49px;
+    }
+
+    .lock-design-left {
+        margin-left: 21px;
+        margin-right: 33px;
+    }
+
+    .lock-design-right {
+        margin-left: 21px;
+    }
+
+    .divisor {
+        height: 180px;
+        border-left: 2px solid #B4B4B4;
+        margin-top: 15px;
     }
 }
diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index c23f113f9..80bb92ce7 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -112,7 +112,7 @@ export const InventoryView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey={ 'inventory' } className={ isTrading ? 'nitro-inventory trading' : 'nitro-inventory' } theme={ isTrading ? 'primary' : '' } >
+        <NitroCardView uniqueKey={ 'inventory' } className={ `${ isTrading ? 'nitro-inventory trading' : 'nitro-inventory' } no-resize` } theme={ isTrading ? 'primary' : '' } >
             <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
             <>
                 <NitroCardTabsView>
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index eda503812..bf8fadd71 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -87,9 +87,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
     }
 
     const attemptItemOffer = (count: number) =>
-    {
-        console.log('item', groupItem);
-        
+    {        
         if(!groupItem) return;
 
         const tradeItems = groupItem.getTradeItems(count);
@@ -143,6 +141,8 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         {
             simpleAlert(LocalizeText('trading.items.too_many_items.desc'), NotificationAlertType.DEFAULT, null, null, LocalizeText('trading.items.too_many_items.title'));
         }
+
+        setGroupItem(selectedItem);
     }
 
     useEffect(() =>
@@ -222,6 +222,11 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         return () => setIsVisible(false);
     }, []);
 
+    useEffect(() =>
+    {
+        setQuantity(1);
+    }, [ filteredGroupItems ]);
+
     if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
 
     return (
@@ -258,8 +263,8 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                             }
                             { (isTrading) &&
                                 <Column gap={ 1 } alignItems="start">
-                                    <input type="number" className="w-50 quantity-input remove-outline" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ selectedItem.getUnlockedCount() === 0 } value={ quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
-                                    <Button variant="secondary" disabled={ selectedItem.getUnlockedCount() === 0 } onClick={ event => changeCount(selectedItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
+                                    <input type="number" className="quantity-input remove-outline" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ selectedItem.getUnlockedCount() === 0 } value={ !quantity ? '' : quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
+                                    <Button variant="secondary" disabled={ !quantity || selectedItem.getUnlockedCount() === 0 } onClick={ event => !quantity ? null : changeCount(selectedItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
                                 </Column>
                             }
                         </Column>
diff --git a/src/components/inventory/views/furniture/InventoryTradeView.tsx b/src/components/inventory/views/furniture/InventoryTradeView.tsx
index 1a72d5f09..cd121160e 100644
--- a/src/components/inventory/views/furniture/InventoryTradeView.tsx
+++ b/src/components/inventory/views/furniture/InventoryTradeView.tsx
@@ -1,3 +1,4 @@
+import { AdvancedMap } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { GroupItem, LocalizeText, TradeState } from '../../../../api';
 import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, Text } from '../../../../common';
@@ -31,6 +32,11 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
         }
     }
 
+    const getTotalCredits = (items: AdvancedMap<string, GroupItem>): number =>
+    {
+        return items.getValues().map( item => Number(item.iconUrl.split('/')[item.iconUrl.split('/').length - 1]?.split('_')[1]) * item.items.length ).reduce((acc, cur) => acc + (isNaN(cur) ? 0 : cur), 0); 
+    }
+
     useEffect(() =>
     {
         if(tradeState !== TradeState.TRADING_STATE_COUNTDOWN) return;
@@ -67,7 +73,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                 { currentTab === TAB_FURNITURE &&
                     <>
                         <Text small>{ LocalizeText('inventory.trading.info.add') }</Text>
-                        <Grid overflow="hidden" className="px-2">
+                        <Grid gap={ 0 } overflow="hidden" className="px-2">
                             <Column size={ 4 } overflow="hidden">
                                 <Flex>
                                     { (ownUser.accepts) && <Base className="icon icon-confirmed" /> }
@@ -90,10 +96,13 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                 </AutoGrid>
                                 <Column gap={ 0 } fullWidth>
                                     <Text>{ LocalizeText('inventory.trading.info.itemcount', [ 'value' ], [ ownUser.itemCount.toString() ]) }</Text>
-                                    <Text className="credits-align">{ LocalizeText('inventory.trading.info.creditvalue.own', [ 'value' ], [ ownUser.userItems.length.toString() ]) }</Text>
+                                    <Text className="credits-align">{ LocalizeText('inventory.trading.info.creditvalue.own', [ 'value' ], [ getTotalCredits(ownUser.userItems).toString() ]) }</Text>
                                 </Column>
                             </Column>
-                            { getLockIcon(ownUser.accepts) }
+                            <Flex className="lock-design-left">
+                                { getLockIcon(ownUser.accepts) }
+                            </Flex>
+                            <Flex className="divisor"></Flex>
                             <Column size={ 4 } overflow="hidden">
                                 <Flex>
                                     { (otherUser.accepts) && <Base className="icon icon-confirmed" /> }
@@ -111,10 +120,12 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                 </AutoGrid>
                                 <Column gap={ 0 } fullWidth>
                                     <Text>{ LocalizeText('inventory.trading.info.itemcount', [ 'value' ], [ otherUser.itemCount.toString() ]) }</Text>
-                                    <Text>{ LocalizeText('inventory.trading.info.creditvalue', [ 'value' ], [ otherUser.userItems.length.toString() ]) }</Text>
+                                    <Text>{ LocalizeText('inventory.trading.info.creditvalue', [ 'value' ], [ getTotalCredits(otherUser.userItems).toString() ]) }</Text>
                                 </Column>
                             </Column>
-                            { getLockIcon(otherUser.accepts) }
+                            <Flex className="lock-design-right">
+                                { getLockIcon(otherUser.accepts) }
+                            </Flex>
                         </Grid>
                     </>
                 }

From 8e5dca95b54bca09719167bd1c22a85b0ccac45b Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 13 May 2023 03:21:21 +0200
Subject: [PATCH 048/134] PurseView - Add 99 999 and hover the actual amount

---
 src/components/purse/views/CurrencyView.tsx | 4 ++--
 src/components/purse/views/SeasonalView.tsx | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/purse/views/CurrencyView.tsx b/src/components/purse/views/CurrencyView.tsx
index 5ba70a975..65f3d7552 100644
--- a/src/components/purse/views/CurrencyView.tsx
+++ b/src/components/purse/views/CurrencyView.tsx
@@ -18,7 +18,7 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
     {
         return (
             <Flex justifyContent="end" pointer gap={ 1 } className="nitro-purse-button rounded">
-                <Text bold truncate textEnd variant="white" grow>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
+                <Text bold truncate textEnd variant="white" grow title={ amount > 99999 ? LocalizeFormattedNumber(amount) : '' }>{ amount > 99999 ? '99 999' : (short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount)) }</Text>
                 <LayoutCurrencyIcon type={ type } />
             </Flex>);
     }, [ amount, short, type ]);
@@ -30,7 +30,7 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
             placement="left"
             overlay={
                 <Tooltip id={ `tooltip-${ type }` }>
-                    { LocalizeFormattedNumber(amount) }
+                    { amount > 99999 ? LocalizeFormattedNumber(amount) : '' }
                 </Tooltip>
             }>
             { element }
diff --git a/src/components/purse/views/SeasonalView.tsx b/src/components/purse/views/SeasonalView.tsx
index 260d68f24..24842c181 100644
--- a/src/components/purse/views/SeasonalView.tsx
+++ b/src/components/purse/views/SeasonalView.tsx
@@ -16,7 +16,7 @@ export const SeasonalView: FC<SeasonalViewProps> = props =>
         <Flex fullWidth justifyContent="between" className={ 'nitro-purse-seasonal-currency nitro-notification ' + GetConfiguration<boolean>('currency.seasonal.color') }>
             <Flex fullWidth>
                 <Text bold truncate fullWidth className="seasonal-padding seasonal-bold">{ LocalizeText(`purse.seasonal.currency.${ type }`) }</Text>
-                <Text bold truncate variant="white" className="seasonal-amount text-end">{ LocalizeFormattedNumber(amount) }</Text>
+                <Text bold truncate variant="white" className="seasonal-amount text-end" title={ amount > 99999 ? LocalizeFormattedNumber(amount) : '' }>{ amount > 99999 ? '99 999' : LocalizeFormattedNumber(amount) }</Text>
                 <Flex className="nitro-seasonal-box seasonal-padding">
                     <LayoutCurrencyIcon type={ type } />
                 </Flex>        

From 7cf8f01ba90b5d7f60d08d350161654229fb744a Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 13 May 2023 11:39:03 +0200
Subject: [PATCH 049/134] Context menu objects - Fixed design

---
 .../widgets/furniture/context-menu/FurnitureContextMenuView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx b/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
index 40e9579cf..43b4ac2cf 100644
--- a/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
+++ b/src/components/room/widgets/furniture/context-menu/FurnitureContextMenuView.tsx
@@ -52,7 +52,7 @@ export const FurnitureContextMenuView: FC<{}> = props =>
                 <FurnitureMysteryTrophyOpenDialogView objectId={ confirmingObjectId } onClose={ closeConfirm } /> }
             <FurnitureMysteryBoxOpenDialogView ownerId={ objectOwnerId } />
             { (objectId >= 0) && mode &&
-                <ContextMenuView objectId={ objectId } category={ RoomObjectCategory.FLOOR } onClose={ onClose } fades={ true }>
+                <ContextMenuView objectId={ objectId } category={ RoomObjectCategory.FLOOR } onClose={ onClose } fades={ true } collapsable={ true }>
                     { (mode === ContextMenuEnum.FRIEND_FURNITURE) &&
                         <>
                             <ContextMenuHeaderView>

From 7036eb2cecee3e8f768864426f2963470fdfbc28 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 13 May 2023 13:58:17 +0200
Subject: [PATCH 050/134] Camera - Design like Habbo

---
 .../flash/camera/camera_button_left.png       | Bin 0 -> 440 bytes
 .../flash/camera/camera_button_right.png      | Bin 0 -> 430 bytes
 src/assets/flash/camera/report.png            | Bin 0 -> 256 bytes
 src/assets/flash/camera/report_click.png      | Bin 0 -> 256 bytes
 src/assets/flash/camera/report_hover.png      | Bin 0 -> 257 bytes
 .../views/CameraWidgetShowPhotoView.tsx       |  44 +++++++-----
 .../furniture/FurnitureExternalImageView.tsx  |  15 ++--
 .../widgets/furniture/FurnitureWidgets.scss   |  64 +++++++++++++++---
 8 files changed, 89 insertions(+), 34 deletions(-)
 create mode 100644 src/assets/flash/camera/camera_button_left.png
 create mode 100644 src/assets/flash/camera/camera_button_right.png
 create mode 100644 src/assets/flash/camera/report.png
 create mode 100644 src/assets/flash/camera/report_click.png
 create mode 100644 src/assets/flash/camera/report_hover.png

diff --git a/src/assets/flash/camera/camera_button_left.png b/src/assets/flash/camera/camera_button_left.png
new file mode 100644
index 0000000000000000000000000000000000000000..dfc113040c65a01be8424a2d052a7c3bf70ae43d
GIT binary patch
literal 440
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!7>k44ofy`glX(f`u%tWsIx;Y9
z?C1WI$O`1M1^9%x{{R0U$P7JnxeiD%l?3?(|7Uo*-M|aT<1FxqEM{QfI}E~%$MaXD
z01edjba4!caDO|+Q><A*fc5cTec3i9#?0yqOTWfVk*muz`^VRLpXIFfZ_bshZN{_p
zUPnhr?$~leBysI#lN-BQLuYuIg+%E0uqHFJ7#*IukW;Di^NAB23mp#};Mu6R;Ozp|
zovaFx>lL%M#3h$7Zk>I+Nk(tKL73yMoBE-Qtv=_v*_szTd(8A{Q^R7G!k3n-8n*nH
zH>+XGAA3>8Ow0dYesV3@Z?jeW(!(0@fM1ILC8e&^ozQOEt@+dXF!z1tr+=lch~N96
zW@ofyo7xMuQ<B{aBv+($9mrTP<3w(viQ?1Q4(1$F-e@;1Sm^fJ)TMV?_6dhg_n6wm
zp1d;?ux9mRUKsemNWhcFy}i*P&1N?58u4X^mL-Tz3ku(GZKugQ(KS3dQJmMrCC<Is
gEg9rc{M6!~`DW(d^SLDxfuYIZ>FVdQ&MBb@078teUjP6A

literal 0
HcmV?d00001

diff --git a/src/assets/flash/camera/camera_button_right.png b/src/assets/flash/camera/camera_button_right.png
new file mode 100644
index 0000000000000000000000000000000000000000..5d78f71f91f0353646b6e46218ee63e43bf9e303
GIT binary patch
literal 430
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!7>k44ofy`glX(f`u%tWsIx;Y9
z?C1WI$O`1M1^9%x{{R0U$P7JnxeiD%l?3?(|7Uo*-M|aT<1FxqEM{QfI}E~%$MaXD
z01Z_3ba4!caDO|+QK&_MhvoYJ`YKi_UJs8ZnYYbCMwdh5{>V!0XVaVCW4^^IVjE9h
zC%>XnMa;wy#j=aB6J|My%$nH3`LRbP!g|33f%Iv5E9TsB5A)ODWaKu#qQ`ihF>B&=
zCX>^}ok6kh_lr+?*Zr^BQ7^kGXS)Vd+q5g?lFyhfCvfRF3l+RskS}f0czpr)oVLyb
z=`-}T&lJ9>Z{sSK`6bQMlej{kJEOk#nc`&Cx0&^a|2xE9HrrQ!+`e$mg4}PujEmbe
z6M{}QC7!w+&U*7eAbX>1$cekUO|H%>r#%;1I%~c++pMQs6IQt1OJv>}EnpHbscAyv
zsZI+v9uc8WZ_EVFn>717itM@=Ca}9A=8UKdOY>^sN3uH6$F_4u9Y{T2_=nNLo%#1V
TJNLD~Fl6v_^>bP0l+XkKyK<rf

literal 0
HcmV?d00001

diff --git a/src/assets/flash/camera/report.png b/src/assets/flash/camera/report.png
new file mode 100644
index 0000000000000000000000000000000000000000..db3867c83171fd31722ec1c446f247d080ec6020
GIT binary patch
literal 256
zcmeAS@N?(olHy`uVBq!ia0vp^!ayv-!3-oLy1%&rDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(ehe(g8jpu0VQ^mEI*slmGw!|9t-J-`~G~fB*je;yF;fy(^*tNO6_~`2_=I
z!GIyyzd{HkSl|&^%)r2R7=#&*=dVZs3PyUmIEH8hZ@u8i*I>Zm5?J7}<A0~@s@?^K
z4-f5Ec<DXc#G~a4hvKcp9eTD;@0uSjl$pyWqLbffnqGT)_2T|x3pSkfm^OdjvpMf9
n^|k*dFndq=Ju6slcmEAW))1!1^0t;npd}2Ru6{1-oD!M<#y4R=

literal 0
HcmV?d00001

diff --git a/src/assets/flash/camera/report_click.png b/src/assets/flash/camera/report_click.png
new file mode 100644
index 0000000000000000000000000000000000000000..763d2fcb0acc4121ab4de80c8a99c742d0853792
GIT binary patch
literal 256
zcmeAS@N?(olHy`uVBq!ia0vp^!ayv-!3-oLy1%&rDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(ehe(g8jpu0Xn1Tluh!!T<mNzdwKa@9*Egzkh#x_7o^?aa8dmkm4)}@(Tva
zf&oLYe}xc8u)rg-n1O-sFbFdq&tH)O6pZwAaSYK2-g?22ufc%BC9uF{$Nx^*RlN%e
zA0FDT@X~v>iAT#94#iuGJM?Uy-Zej5C^MH$L?^$|G`;rp>c#!X7Hl}{F>U_5XLH_J
o>TCZ^VD_H!dseXA?*1E$tRYO1<!vpEKuZ`rUHx3vIVCg!0FPi`_y7O^

literal 0
HcmV?d00001

diff --git a/src/assets/flash/camera/report_hover.png b/src/assets/flash/camera/report_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ba87577da6ad817b2fe1374314408e57eabc1481
GIT binary patch
literal 257
zcmeAS@N?(olHy`uVBq!ia0vp^!ayv-!3-oLy1%&rDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(ehe(g8jpu0Z;(i`oDG|9`!BcFw{0-`~Ig{`~&=@;OlaH~)`EK#H>@$S)YE
z01Oy{{VRk(f(0It#S9F5he4R}c>anMpkS1zi(`mJ@YD-|Tn!2$E`f88)%=bxT-@60
zCLb5@VS$3a>k>=HB{u4jo<H(mv@gHSaQwS&!Is$UJy);ZTQ^bRRHRF5+SHV_x6ZoF
qo_6++{<JlVRU?nzd1Cy#gZt`qrk4B6*Iol{VeoYIb6Mw<&;$TF+-9Nx

literal 0
HcmV?d00001

diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
index 8614695df..7ad1a993e 100644
--- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx
+++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
@@ -1,7 +1,7 @@
+import { RoomObjectCategory, RoomObjectVariable } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { FaArrowLeft, FaArrowRight } from 'react-icons/fa';
-import { GetUserProfile, IPhotoData, LocalizeText } from '../../../api';
-import { Flex, Grid, Text } from '../../../common';
+import { GetRoomEngine, GetUserProfile, IPhotoData, LocalizeText } from '../../../api';
+import { Base, Flex, Text } from '../../../common';
 
 export interface CameraWidgetShowPhotoViewProps
 {
@@ -40,6 +40,13 @@ export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = pro
         });
     }
 
+    const getUserData = (roomId: number, objectId: number, type: string): number | string =>
+    {
+        const roomObject = GetRoomEngine().getRoomObject(roomId, objectId, RoomObjectCategory.WALL);
+    
+        return type == 'username' ? roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_NAME) : roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
+    }
+
     useEffect(() =>
     {
         setImageIndex(currentIndex);
@@ -48,24 +55,27 @@ export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = pro
     if(!currentImage) return null;
 
     return (
-        <Grid style={ { display: 'flex', flexDirection: 'column' } }>
+        <Flex>
             <Flex center className="picture-preview border border-black" style={ currentImage.w ? { backgroundImage: 'url(' + currentImage.w + ')' } : {} }>
-                { !currentImage.w &&
-                    <Text bold>{ LocalizeText('camera.loading') }</Text> }
+                { !currentImage.w && <Text bold>{ LocalizeText('camera.loading') }</Text> }
+            </Flex>
+            { currentImage.m && currentImage.m.length && <Text center>{ currentImage.m }</Text> }
+            <Flex position="absolute" className="bottom-5 px-2">
+                <Text small>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text>
             </Flex>
-            { currentImage.m && currentImage.m.length &&
-                <Text center>{ currentImage.m }</Text> }
-            <Flex alignItems="center" justifyContent="between">
-                <Text>{ (currentImage.n || '') }</Text>
-                <Text>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text>
+            <Flex position="absolute" className="bottom-5 end-5 px-5">
+                <Text pointer small underline onClick={ () => GetUserProfile(Number(getUserData(currentImage.s, Number(currentImage.u), 'id'))) }>{ getUserData(currentImage.s, Number(currentImage.u), 'username') }</Text>
             </Flex>
             { (currentPhotos.length > 1) &&
-                <Flex className="picture-preview-buttons">
-                    <FaArrowLeft className="cursor-pointer picture-preview-buttons-previous fa-icon" onClick={ previous } />
-                    <Text underline className="cursor-pointer" onClick={ event => GetUserProfile(currentImage.oi) }>{ currentImage.o }</Text>
-                    <FaArrowRight className="cursor-pointer picture-preview-buttons-next fa-icon" onClick={ next } />
-                </Flex>
+                <>
+                    <Flex position="absolute" className="start-2 center-buttons">
+                        <Base className="icon nitro-camera-button-left" onClick={ previous } />
+                    </Flex>
+                    <Flex position="absolute" className="end-2 center-buttons">
+                        <Base className="icon nitro-camera-button-right" onClick={ next } />
+                    </Flex>
+                </>
             }
-        </Grid>
+        </Flex>
     );
 }
diff --git a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
index 3abaad7a6..ed28dc048 100644
--- a/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureExternalImageView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { GetSessionDataManager, ReportType } from '../../../../api';
-import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { Base, DraggableWindow, DraggableWindowPosition, Flex } from '../../../../common';
 import { useFurnitureExternalImageWidget, useHelp } from '../../../../hooks';
 import { CameraWidgetShowPhotoView } from '../../../camera/views/CameraWidgetShowPhotoView';
 
@@ -12,11 +12,14 @@ export const FurnitureExternalImageView: FC<{}> = props =>
     if((objectId === -1) || (currentPhotoIndex === -1)) return null;
 
     return (
-        <NitroCardView className="nitro-external-image-widget" theme="primary-slim">
-            <NitroCardHeaderView headerText="" isGalleryPhoto={ true } onReportPhoto={ () => report(ReportType.PHOTO, { extraData: currentPhotos[currentPhotoIndex].w, roomId: currentPhotos[currentPhotoIndex].s, reportedUserId: GetSessionDataManager().userId, roomObjectId: Number(currentPhotos[currentPhotoIndex].u) }) } onCloseClick={ onClose } />
-            <NitroCardContentView>
+        <DraggableWindow handleSelector=".nitro-camera" windowPosition={ DraggableWindowPosition.CENTER }>
+            <Flex className="nitro-camera nitro-external-image-widget">
+                <Flex position="absolute" className="top-0 end-0 px-2 py-2">
+                    <Base className="icon nitro-camera-report px-3" onClick={ () => report(ReportType.PHOTO, { extraData: currentPhotos[currentPhotoIndex].w, roomId: currentPhotos[currentPhotoIndex].s, reportedUserId: GetSessionDataManager().userId, roomObjectId: Number(currentPhotos[currentPhotoIndex].u) }) } />
+                    <Base className="icon nitro-card-header-close" onClick={ onClose } />
+                </Flex>
                 <CameraWidgetShowPhotoView currentIndex={ currentPhotoIndex } currentPhotos={ currentPhotos } />
-            </NitroCardContentView>
-        </NitroCardView>
+            </Flex>
+        </DraggableWindow>
     );
 }
diff --git a/src/components/room/widgets/furniture/FurnitureWidgets.scss b/src/components/room/widgets/furniture/FurnitureWidgets.scss
index aa7a84d5b..2e24a0a5f 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgets.scss
+++ b/src/components/room/widgets/furniture/FurnitureWidgets.scss
@@ -49,24 +49,66 @@
 }
 
 .nitro-external-image-widget {
+
+    border-top: 71px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 71px solid rgba(0, 0, 0, 0.5);
+    border-right: 84px solid rgba(0, 0, 0, 0.5);
+    border-left: 84px solid rgba(0, 0, 0, 0.5);
+    border-radius: 20px;
+
+    .nitro-card-header-close {
+        cursor: pointer;
+        background-image: url("@/assets/flash/boxes/card/close.png");
+        width: 19px;
+        height: 20px;
+
+        &:hover {
+            background-image: url("@/assets/flash/boxes/card/close_hover.png");
+
+            &:active {
+                background-image: url("@/assets/flash/boxes/card/close_click.png");
+            }
+
+        }
+    }
+
+    .nitro-camera-report {
+        cursor: pointer;
+        background-image: url("@/assets/flash/camera/report.png");
+        width: 19px;
+        height: 20px;
+
+        &:hover {
+            background-image: url("@/assets/flash/camera/report_hover.png");
+
+            &:active {
+                background-image: url("@/assets/flash/camera/report_click.png");
+            }
+
+        }
+    }
+
     .picture-preview {
         width: 320px;
         height: 320px;
     }
 
-    .picture-preview-buttons {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        color: black;
+    .center-buttons {
+        top: 45%;
     }
 
-    .picture-preview-buttons-previous,
-    .picture-preview-buttons-next {
-        color: #222;
-        background-color: white;
-        padding: 10px;
-        border-radius: 50%;
+    .nitro-camera-button-left {
+        cursor: pointer;
+        background-image: url("@/assets/flash/camera/camera_button_left.png");
+        width: 64px;
+        height: 64px;
+    }
+
+    .nitro-camera-button-right {
+        cursor: pointer;
+        background-image: url("@/assets/flash/camera/camera_button_right.png");
+        width: 64px;
+        height: 64px;
     }
 }
 

From 0338baf4ea3fbd11377cfc94572020f81ef526cc Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sun, 14 May 2023 20:12:03 +0200
Subject: [PATCH 051/134] Catalog - Habbo Club design

---
 src/components/catalog/CatalogView.scss       | 21 +++++
 .../page/layout/CatalogLayoutVipBuyView.tsx   | 87 +++++++++----------
 2 files changed, 60 insertions(+), 48 deletions(-)

diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 021ecc445..e45c29c5f 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -335,4 +335,25 @@
     }
 }
 
+.club-content {
+    height: 73px;
+    background-color: #DEDEDE;
+    border-radius: 12px;
+    border: 1px solid #959595;
+
+    .content-title {
+        height: 25px;
+        background-color: #959595;
+        border-radius: 6px;
+    
+        .margin-image {
+            margin-right: 27px;
+        }
+
+        .margin-text {
+            margin-top: -2px;
+        }
+    }
+}
+
 @import './views/targeted-offer/Offer.scss';
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
index 75b8c0543..dabea73f0 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
@@ -1,8 +1,8 @@
 import { ClubOfferData, GetClubOffersMessageComposer, PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { CatalogPurchaseState, LocalizeText, SendMessageComposer } from '../../../../../api';
-import { AutoGrid, Button, Column, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, LayoutLoadingSpinnerView, Text } from '../../../../../common';
-import { CatalogEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent } from '../../../../../events';
+import { CatalogPurchaseState, CreateLinkEvent, LocalizeText, SendMessageComposer } from '../../../../../api';
+import { AutoGrid, Base, Button, Column, Flex, LayoutCurrencyIcon, LayoutLoadingSpinnerView, Text } from '../../../../../common';
+import { CatalogEvent, CatalogPurchaseFailureEvent, CatalogPurchasedEvent } from '../../../../../events';
 import { useCatalog, usePurse, useUiEvent } from '../../../../../hooks';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
@@ -91,7 +91,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
 
     const setOffer = useCallback((offer: ClubOfferData) =>
     {
-        setPurchaseState(CatalogPurchaseState.NONE);
+        setPurchaseState(CatalogPurchaseState.CONFIRM);
         setPendingOffer(offer);
     }, []);
 
@@ -129,12 +129,12 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
     }, [ clubOffers ]);
 
     return (
-        <Column fullHeight>
-            <Flex fullHeight center overflow="hidden">
-                { currentPage.localization.getImage(1) && <img alt="" src={ currentPage.localization.getImage(1) } /> }
-                <Column className="px-2">
-                <Text bold>{LocalizeText('catalog.vip.extend.title')}</Text>
-                <Text small overflow="auto" dangerouslySetInnerHTML={ { __html: getSubscriptionDetails } } />
+        <Column fullHeight className="px-4" gap={ 0 }>
+            <Flex fullHeight overflow="hidden" gap={ 0 }>
+                { currentPage.localization.getImage(1) && <img alt="" src={ purse.clubDays > 0 ? currentPage.localization.getImage(1) : currentPage.localization.getImage(1).split('/').slice(0, -1).join('/') + '/clubcat_pic.gif' } /> }
+                <Column className="px-4 py-4" gap={ 0 }>
+                    <Text bold>{ purse.clubDays > 0 ? LocalizeText('catalog.vip.extend.title') : LocalizeText('catalog.vip.buy.title') }</Text>
+                    <Text small overflow="auto" dangerouslySetInnerHTML={ { __html: purse.clubDays > 0 ? getSubscriptionDetails : LocalizeText('catalog.vip.buy.info') } } />
                 </Column>
             </Flex>
             <Column fullHeight size={ 7 } overflow="hidden" justifyContent="between">
@@ -142,51 +142,42 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
                     { clubOffers && (clubOffers.length > 0) && clubOffers.map((offer, index) =>
                     {
                         return (
-                            <LayoutGridItem key={ index } column={ false } center={ false } alignItems="center" justifyContent="between" itemActive={ pendingOffer === offer } className="p-1" onClick={ () => setOffer(offer) }>
-                                <i className="icon-hc-banner" />
-                                <Column justifyContent="end" gap={ 0 }>
-                                    <Text textEnd>{ getOfferText(offer) }</Text>
-                                    <Flex justifyContent="end" gap={ 1 }>
-                                        { (offer.priceCredits > 0) &&
+                            <Column key={ index } fullWidth className="club-content px-1 py-1">
+                                <Column className="content-title px-2 py-1">
+                                    <Flex>
+                                        <Base className="icon icon-catalogue-hc_small px-2 margin-image" />
+                                        <Text bold variant="white" className="margin-text">{ getOfferText(offer) }</Text>
+                                    </Flex>
+                                </Column>
+                                <Column className="content-description">
+                                    <Flex alignItems="center" justifyContent="between">
                                         <Flex alignItems="center" justifyContent="end" gap={ 1 }>
-                                            <Text>{ offer.priceCredits }</Text>
-                                            <LayoutCurrencyIcon type={ -1 } />
-                                        </Flex> }
-                                        { (offer.priceActivityPoints > 0) &&
+                                            { (offer.priceCredits > 0) &&
+                                                <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                                                    <Text bold>{ offer.priceCredits }</Text>
+                                                    <LayoutCurrencyIcon type={ -1 } />
+                                                </Flex>
+                                            }
+                                            { (offer.priceActivityPoints > 0) && <Text bold className="px-1 py-1">+</Text> }
+                                            { (offer.priceActivityPoints > 0) &&
+                                                <Flex alignItems="center" justifyContent="end" gap={ 1 }>
+                                                    <Text bold>{ offer.priceActivityPoints }</Text>
+                                                    <LayoutCurrencyIcon type={ offer.priceActivityPointsType } />
+                                                </Flex>
+                                            }
+                                        </Flex>
                                         <Flex alignItems="center" justifyContent="end" gap={ 1 }>
-                                            <Text>{ offer.priceActivityPoints }</Text>
-                                            <LayoutCurrencyIcon type={ offer.priceActivityPointsType } />
-                                        </Flex> }
+                                            { (offer.giftable) && <Button variant="success">{ LocalizeText('catalog.purchase_confirmation.gift') }</Button> }
+                                            { (!pendingOffer || pendingOffer !== offer) && <Button variant="success" onClick={ () => setOffer(offer) }>{ LocalizeText('buy') }</Button> }
+                                            { (pendingOffer && pendingOffer === offer) && getPurchaseButton() }
+                                        </Flex>
                                     </Flex>
                                 </Column>
-                            </LayoutGridItem>
+                            </Column>
                         );
                     }) }
                 </AutoGrid>
-                            <Column size={ 5 } overflow="hidden">
-                { pendingOffer &&
-                    <Column fullWidth grow justifyContent="end">
-                        <Flex alignItems="end">
-                            <Column grow gap={ 0 }>
-                                <Text fontWeight="bold">{ getPurchaseHeader() }</Text>
-                                <Flex gap={ 1 }>
-                                { (pendingOffer.priceCredits > 0) &&
-                                    <Flex alignItems="center" justifyContent="end" gap={ 1 }>
-                                        <Text>{ pendingOffer.priceCredits }</Text>
-                                        <LayoutCurrencyIcon type={ -1 } />
-                                    </Flex> }
-                                { (pendingOffer.priceActivityPoints > 0) &&
-                                    <Flex alignItems="center" justifyContent="end" gap={ 1 }>
-                                        <Text>{ pendingOffer.priceActivityPoints }</Text>
-                                        <LayoutCurrencyIcon type={ pendingOffer.priceActivityPointsType } />
-                                    </Flex> }
-                                </Flex>  
-                            </Column>
-                            { getPurchaseButton() }
-                        </Flex>
-                    </Column> }
-            </Column>
-                <Text small center className="pb-2" dangerouslySetInnerHTML={ { __html: LocalizeText('catalog.vip.buy.hccenter') } }></Text>
+                <Text pointer small center underline className="pb-2" onClick={ () => CreateLinkEvent('habboUI/open/hccenter') } dangerouslySetInnerHTML={ { __html: LocalizeText('catalog.vip.buy.hccenter') } }></Text>
             </Column>
         </Column>
     );

From ca2ddd5f51163a6e9e4692bd616f006fc39e4349 Mon Sep 17 00:00:00 2001
From: Gizmo <77913129+Habbobba@users.noreply.github.com>
Date: Sun, 14 May 2023 20:47:54 -0400
Subject: [PATCH 052/134] Update CatalogLayoutBadgeDisplayView.tsx

Re-did the layout of the Catalogue Badge Display page to look more like habbo.

https://ibb.co/0sS7cZt
---
 .../layout/CatalogLayoutBadgeDisplayView.tsx  | 38 +++++++++++++------
 1 file changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
index 9b6ec6a8a..a3b4f2e51 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
@@ -20,19 +20,13 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutProps> = props =>
         <>
             <CatalogFirstProductSelectorWidgetView />
             <Grid>
-                <Column size={ 7 } overflow="hidden">
-                    <CatalogItemGridWidgetView shrink />
-                    <Column gap={ 1 } overflow="hidden">
-                        <Text truncate shrink fontWeight="bold">{ LocalizeText('catalog_selectbadge') }</Text>
-                        <CatalogBadgeSelectorWidgetView />
-                    </Column>
-                </Column>
-                <Column center={ !currentOffer } size={ 5 } overflow="hidden">
+                <Column center={ !currentOffer } size={ 12 }>
                     { !currentOffer &&
                         <>
                             { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
                             <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
-                        </> }
+                        </> 
+                    }
                     { currentOffer &&
                         <>
                             <Base position="relative" overflow="hidden">
@@ -40,13 +34,33 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutProps> = props =>
                             </Base>
                             <Column grow gap={ 1 }>
                                 <CatalogLimitedItemWidgetView fullWidth />
-                                <Text grow truncate>{ currentOffer.localizationName }</Text>
+                                <Text grow truncate>
+                                    { currentOffer.localizationName }
+                                </Text>
                                 <Flex justifyContent="end">
                                     <CatalogTotalPriceWidget alignItems="end" />
                                 </Flex>
-                                <CatalogPurchaseWidgetView />
                             </Column>
-                        </> }
+                        </>
+                    }
+                </Column>
+                <Column size={ 6 } overflow="auto" className="grid-bg p-2">
+                    <Column overflow="auto">
+                        <CatalogItemGridWidgetView shrink />
+                    </Column>
+                    <Text>
+                        { LocalizeText('catalog_selectproduct') }
+                    </Text>
+                </Column>
+                <Column size={ 6 } overflow="hidden">
+                    <Column gap={ 1 } overflow="hidden">
+                        <CatalogBadgeSelectorWidgetView />
+                    </Column>
+                </Column>
+                <Column size={ 12 } overflow="hidden">
+                    <Flex gap={ 2 } className="purchase-buttons align-items-end mt-2">
+                        <CatalogPurchaseWidgetView />
+                    </Flex>
                 </Column>
             </Grid>
         </>

From fbac19288659e69f34241b3f089c60d4833f3054 Mon Sep 17 00:00:00 2001
From: Gizmo <77913129+Habbobba@users.noreply.github.com>
Date: Sun, 14 May 2023 22:05:09 -0400
Subject: [PATCH 053/134] Update CatalogLayoutGuildFrontpageView.tsx

Fixed the groups buy page, it was printing off the header text into the body. The button was also under the image it needed to be on top.

The image illustrates the following -
Far Left Image: FlashUI Before
Middle Image: FlashUI After
Far Right Image: Official Habbo

https://i.ibb.co/fqYzSrX/groups.png
---
 .../views/page/layout/CatalogLayoutGuildFrontpageView.tsx      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildFrontpageView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildFrontpageView.tsx
index e3d3c48ec..8b4fc5eae 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutGuildFrontpageView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildFrontpageView.tsx
@@ -16,14 +16,13 @@ export const CatalogLayouGuildFrontpageView: FC<CatalogLayoutProps> = props =>
         <Column>
             <Column gap={ 4 } overflow="hidden" className="p-3">
                 <Text bold dangerouslySetInnerHTML={ { __html: page.localization.getText(2) } } />
-                <Text overflow="auto" dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
                 <Text dangerouslySetInnerHTML={ { __html: page.localization.getText(1) } } />
             </Column>
             <Column center size={ 5 } overflow="hidden">
-                <LayoutImage imageUrl={ page.localization.getImage(1) } />
                 <Button onClick={ () => CreateLinkEvent('groups/create') }>
                     { LocalizeText('catalog.start.guild.purchase.button') }
                 </Button>
+                <LayoutImage imageUrl={ page.localization.getImage(1) } />
             </Column>
         </Column>
     );

From 661af6047880d0c03ec668ca2564562bdfee05a6 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Mon, 15 May 2023 14:09:05 +0200
Subject: [PATCH 054/134] Navigator - Feature navigator saved searches

---
 .../navigator/saves-search/delete_search.png  | Bin 0 -> 215 bytes
 .../saves-search/delete_search_click.png      | Bin 0 -> 217 bytes
 .../saves-search/delete_search_hover.png      | Bin 0 -> 214 bytes
 .../navigator/saves-search/search_save.png    | Bin 0 -> 198 bytes
 src/assets/styles/icons.scss                  |   6 ++
 src/common/layout/LayoutSearchSavesView.tsx   |  26 ++++++
 src/common/layout/index.ts                    |   1 +
 src/components/navigator/NavigatorView.scss   |  33 ++++++++
 src/components/navigator/NavigatorView.tsx    |  75 ++++++++++--------
 .../search/NavigatorSearchResultView.tsx      |  35 +-------
 .../NavigatorSearchSavesResultItemView.tsx    |  47 +++++++++++
 .../search/NavigatorSearchSavesResultView.tsx |  30 +++++++
 .../views/search/NavigatorSearchView.tsx      |   5 +-
 src/hooks/navigator/useNavigator.ts           |  14 +++-
 14 files changed, 204 insertions(+), 68 deletions(-)
 create mode 100644 src/assets/flash/navigator/saves-search/delete_search.png
 create mode 100644 src/assets/flash/navigator/saves-search/delete_search_click.png
 create mode 100644 src/assets/flash/navigator/saves-search/delete_search_hover.png
 create mode 100644 src/assets/flash/navigator/saves-search/search_save.png
 create mode 100644 src/common/layout/LayoutSearchSavesView.tsx
 create mode 100644 src/components/navigator/views/search/NavigatorSearchSavesResultItemView.tsx
 create mode 100644 src/components/navigator/views/search/NavigatorSearchSavesResultView.tsx

diff --git a/src/assets/flash/navigator/saves-search/delete_search.png b/src/assets/flash/navigator/saves-search/delete_search.png
new file mode 100644
index 0000000000000000000000000000000000000000..4c35559c9e820d55bfaf442564c3ba1344b91991
GIT binary patch
literal 215
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G~10G|+7ApQUU|1)RK91!;dvYpQVUkapHOM?7@f#UxeesALg8N^xO5n0T@
zz;_sg8IR|$NC65uc)B=-XarB~cjRJF;9$A>?SFn=qUjeQQ}LOKM|d`{@jl~yRlvXR
zQG{n}$S1)qAH}+!7j*G)=Zf%b$Ow4;y^;5!E90i`S2!L6&0_F$^>bP0l+XkKogPHc

literal 0
HcmV?d00001

diff --git a/src/assets/flash/navigator/saves-search/delete_search_click.png b/src/assets/flash/navigator/saves-search/delete_search_click.png
new file mode 100644
index 0000000000000000000000000000000000000000..657ceb33321374416e87e58b21d402773d7e8542
GIT binary patch
literal 217
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G|^0G|+7ARQbWJY&X;1LA)F|NjSa6SoBl0x7nVAirRs2vBVE{w4c?BAf*t
zk;M!Qe1}1p@p%4<6riA;r;B5VM)1^rPd)|(jw23p|JUDa+wtINMt-h^fm$Tf<VvQa
zr;qJC^twSPQKP0s?9QPlmTQdUPj7gy@xn6xm5>z^-|G1`Yk?*)c)I$ztaD0e0st!S
BMt=YR

literal 0
HcmV?d00001

diff --git a/src/assets/flash/navigator/saves-search/delete_search_hover.png b/src/assets/flash/navigator/saves-search/delete_search_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..ad6ccf93165523851e0786972eddb8a2e824801c
GIT binary patch
literal 214
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G~10G|+7ApQUU{{!NFXU?1fvh_CQE(TJpB|(0{K=J<!zqj#$4B{;Ch%9Dc
z;5!V$jK}j=qyPo&JzX3_G=h^85)&Pm9OSs<HJFqn9x~{#Ju!A<R5o^DIK|2&#G>H#
wNVtJ<5$gk`fObQJ!;Bs64=qF9Z{EPbFkghxGUaA>56~zEPgg&ebxsLQ08f8A8vp<R

literal 0
HcmV?d00001

diff --git a/src/assets/flash/navigator/saves-search/search_save.png b/src/assets/flash/navigator/saves-search/search_save.png
new file mode 100644
index 0000000000000000000000000000000000000000..975fb78c0e91e321c161a5d5bea15962b58dedb6
GIT binary patch
literal 198
zcmeAS@N?(olHy`uVBq!ia0vp^LLkh+3?vf;>QaFeV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G}c0G|-o?<*Mo|Njr<{rGuN8b~ph1o;I61+Jgs1*&D>EbxddW?<ku48n}Z
z^H-z*1<gHO978mMlM|AX92gz!W^n}YcnNb$EHn{1Ad;lw)*;BVK!)Rh5(|sVOt(3Q
iKQQYwHp{j6_%JA@F&JJBoFoP`g2B_(&t;ucLK6TPtu<c&

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 03c3c656d..18762f857 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -874,6 +874,12 @@
         height: 38px;
     }
 
+    &.icon-search_save {
+        background-image: url('@/assets/flash/navigator/saves-search/search_save.png');
+        width: 18px;
+        height: 18px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/common/layout/LayoutSearchSavesView.tsx b/src/common/layout/LayoutSearchSavesView.tsx
new file mode 100644
index 000000000..42e2eeca2
--- /dev/null
+++ b/src/common/layout/LayoutSearchSavesView.tsx
@@ -0,0 +1,26 @@
+import { CSSProperties, FC, useMemo } from 'react';
+import { Base, BaseProps } from '../Base';
+
+export interface LayoutSearchSavesViewProps extends BaseProps<HTMLDivElement>
+{
+    title: string;
+    onClick?: () => void;
+}
+
+export const LayoutSearchSavesView: FC<LayoutSearchSavesViewProps> = props =>
+{
+    const { title = null, onClick = null, style = {}, } = props;
+
+    const getStyle = useMemo(() =>
+    {
+        let newStyle: CSSProperties = {};
+
+        if(Object.keys(style).length) newStyle = { ...newStyle, ...style };
+
+        return newStyle;
+    }, [ style ]);
+
+    return (
+        <Base className="icon icon-search_save" pointer title={ title } onClick={ onClick } style={ getStyle } />
+    );
+}
diff --git a/src/common/layout/index.ts b/src/common/layout/index.ts
index bdc611564..3e4d82266 100644
--- a/src/common/layout/index.ts
+++ b/src/common/layout/index.ts
@@ -19,6 +19,7 @@ export * from './LayoutProgressBar';
 export * from './LayoutRarityLevelView';
 export * from './LayoutRoomPreviewerView';
 export * from './LayoutRoomThumbnailView';
+export * from './LayoutSearchSavesView';
 export * from './LayoutTrophyView';
 export * from './UserProfileIconView';
 export * from './limited-edition';
diff --git a/src/components/navigator/NavigatorView.scss b/src/components/navigator/NavigatorView.scss
index 0ce577145..0e862146d 100644
--- a/src/components/navigator/NavigatorView.scss
+++ b/src/components/navigator/NavigatorView.scss
@@ -4,6 +4,11 @@
     max-width: $navigator-width;
     min-height: $navigator-min-height;
 
+    &.expanded {
+        max-width: $navigator-width + 153px;
+        min-width: $navigator-width + 153px;
+    }
+
     .nav-form {
         width: 275px;
     }
@@ -256,3 +261,31 @@
     right: 10px;
     top: 11px;
 }
+
+.nitro-navigator-search-saves-result {
+    background-color: #fff;
+    width: 141px;
+    min-height: 494px;
+    max-height: 350px;
+    border-radius: 10px;
+
+    .bg-orange {
+        background-color: #FAA700;
+    }
+}
+
+.nitro-navigator-search-delete {
+    cursor: pointer;
+    background-image: url("@/assets/flash/navigator/saves-search/delete_search.png");
+    width: 18px;
+    height: 18px;
+
+    &:hover {
+        background-image: url("@/assets/flash/navigator/saves-search/delete_search_hover.png");
+
+        &:active {
+            background-image: url("@/assets/flash/navigator/saves-search/delete_search_click.png");
+        }
+
+    }
+}
diff --git a/src/components/navigator/NavigatorView.tsx b/src/components/navigator/NavigatorView.tsx
index 93d566780..3f1b97b3d 100644
--- a/src/components/navigator/NavigatorView.tsx
+++ b/src/components/navigator/NavigatorView.tsx
@@ -1,7 +1,7 @@
 import { ConvertGlobalRoomIdMessageComposer, FindNewFriendsMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef, useState } from 'react';
 import { AddEventLinkTracker, CreateLinkEvent, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TryVisitRoom } from '../../api';
-import { Base, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../common';
+import { Base, Column, Flex, LayoutSearchSavesView, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView, Text } from '../../common';
 import { useNavigator, useRoomSessionManagerEvent } from '../../hooks';
 import { NavigatorDoorStateView } from './views/NavigatorDoorStateView';
 import { NavigatorRoomCreatorView } from './views/NavigatorRoomCreatorView';
@@ -9,6 +9,7 @@ import { NavigatorRoomInfoView } from './views/NavigatorRoomInfoView';
 import { NavigatorRoomLinkView } from './views/NavigatorRoomLinkView';
 import { NavigatorRoomSettingsView } from './views/room-settings/NavigatorRoomSettingsView';
 import { NavigatorSearchResultView } from './views/search/NavigatorSearchResultView';
+import { NavigatorSearchSavesResultView } from './views/search/NavigatorSearchSavesResultView';
 import { NavigatorSearchView } from './views/search/NavigatorSearchView';
 
 export const NavigatorView: FC<{}> = props =>
@@ -18,10 +19,11 @@ export const NavigatorView: FC<{}> = props =>
     const [ isCreatorOpen, setCreatorOpen ] = useState(false);
     const [ isRoomInfoOpen, setRoomInfoOpen ] = useState(false);
     const [ isRoomLinkOpen, setRoomLinkOpen ] = useState(false);
+    const [ isOpenSavesSearchs, setIsOpenSavesSearchs ] = useState(false);
     const [ isLoading, setIsLoading ] = useState(false);
     const [ needsInit, setNeedsInit ] = useState(true);
     const [ needsSearch, setNeedsSearch ] = useState(false);
-    const { searchResult = null, topLevelContext = null, topLevelContexts = null, navigatorData = null } = useNavigator();
+    const { searchResult = null, topLevelContext = null, topLevelContexts = null, navigatorData = null, navigatorSearches = null } = useNavigator();
     const pendingSearch = useRef<{ value: string, code: string }>(null);
     const elementRef = useRef<HTMLDivElement>();
 
@@ -196,9 +198,12 @@ export const NavigatorView: FC<{}> = props =>
     return (
         <>
             { isVisible &&
-                <NitroCardView uniqueKey="navigator" className="nitro-navigator">
+                <NitroCardView uniqueKey="navigator" className={ `nitro-navigator ${ isOpenSavesSearchs ? 'expanded' : '' }` }>
                     <NitroCardHeaderView headerText={ LocalizeText('navigator.title') } isInfoToHabboPages={ true } onClickInfoHabboPages={ () => CreateLinkEvent('habbopages/navigator') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView>
+                        <Base className="mt-1">
+                            <LayoutSearchSavesView style={ { marginRight: !isOpenSavesSearchs ? '11px' : '91px', marginLeft: '-2px', marginTop: '1px' } } title={ LocalizeText('navigator.tooltip.left.show.hide') } onClick={ () => setIsOpenSavesSearchs(prevValue => !prevValue) } />
+                        </Base>
                         { topLevelContexts && (topLevelContexts.length > 0) && topLevelContexts.map((context, index) =>
                         {
                             return (
@@ -209,37 +214,45 @@ export const NavigatorView: FC<{}> = props =>
                         }) }
                     </NitroCardTabsView>
                     <NitroCardContentView position="relative">
-                        { isLoading &&
-                            <Base fit position="absolute" className="top-0 start-0 z-index-1 bg-muted opacity-0-5" /> }
-                        <>
-                            <NavigatorSearchView sendSearch={ sendSearch } />
-                            <Column overflow="auto">
-                                { (searchResult && searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
-                            </Column>
-                        </>
-                        <Flex className="nav-bottom">
-                            <Flex className="nav-bottom-buttons position-absolute">
-                                <Flex className="nav-create-room" onClick={ (event) => setCreatorOpen(value => !value) }>
-                                    <Text variant="white" bold className="nav-bottom-buttons-text">
-                                        { LocalizeText('navigator.createroom.create') }
-                                    </Text>
-                                </Flex>
-                                { (searchResult?.code !== 'myworld_view' && searchResult?.code !== 'roomads_view') &&
-                                    <Flex className="nav-random-room" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>
-                                        <Text variant="white" bold className="nav-bottom-buttons-text">
-                                            { LocalizeText('navigator.random.room') }
-                                        </Text>
-                                    </Flex>
+                        { isLoading && <Base fit position="absolute" className="top-0 start-0 z-index-1 bg-muted opacity-0-5" /> }
+                        <Column overflow="hidden">
+                            <Flex fullWidth fullHeight>
+                                { isOpenSavesSearchs &&
+                                    <Column overflow="hidden" className="pe-5">
+                                        <NavigatorSearchSavesResultView searchs={ navigatorSearches } />
+                                    </Column>
                                 }
-                                { (searchResult?.code === 'myworld_view' || searchResult?.code === 'roomads_view') &&
-                                    <Flex className="nav-promote-room" onClick={ () => CreateLinkEvent('catalog/open/room_event') }>
-                                        <Text variant="white" bold className="nav-bottom-buttons-text">
-                                            { LocalizeText('navigator.promote.room') }
-                                        </Text>
+                                <Flex column={ true } className="w-100">
+                                    <NavigatorSearchView sendSearch={ sendSearch } />
+                                    <Column overflow="auto">
+                                        { (searchResult && searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
+                                    </Column>
+                                    <Flex className="nav-bottom">
+                                        <Flex className="position-absolute bottom-3">
+                                            <Flex className="nav-create-room" onClick={ (event) => setCreatorOpen(value => !value) }>
+                                                <Text variant="white" bold className="nav-bottom-buttons-text">
+                                                    { LocalizeText('navigator.createroom.create') }
+                                                </Text>
+                                            </Flex>
+                                            { (searchResult?.code !== 'myworld_view' && searchResult?.code !== 'roomads_view') &&
+                                                <Flex className="nav-random-room" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>
+                                                    <Text variant="white" bold className="nav-bottom-buttons-text">
+                                                        { LocalizeText('navigator.random.room') }
+                                                    </Text>
+                                                </Flex>
+                                            }
+                                            { (searchResult?.code === 'myworld_view' || searchResult?.code === 'roomads_view') &&
+                                                <Flex className="nav-promote-room" onClick={ () => CreateLinkEvent('catalog/open/room_event') }>
+                                                    <Text variant="white" bold className="nav-bottom-buttons-text">
+                                                        { LocalizeText('navigator.promote.room') }
+                                                    </Text>
+                                                </Flex>
+                                            }
+                                        </Flex>
                                     </Flex>
-                                }
+                                </Flex>
                             </Flex>
-                        </Flex>
+                        </Column>
                     </NitroCardContentView>
                 </NitroCardView> }
             { isCreatorOpen && <NavigatorRoomCreatorView /> }
diff --git a/src/components/navigator/views/search/NavigatorSearchResultView.tsx b/src/components/navigator/views/search/NavigatorSearchResultView.tsx
index f3de4637f..3ad8b4867 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultView.tsx
@@ -1,8 +1,8 @@
-import { NavigatorSearchComposer, NavigatorSearchResultList } from '@nitrots/nitro-renderer';
+import { NavigatorSearchComposer, NavigatorSearchResultList, NavigatorSearchSaveComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FaBars, FaMinus, FaPlus, FaTh, FaWindowMaximize, FaWindowRestore } from 'react-icons/fa';
 import { LocalizeText, NavigatorSearchResultViewDisplayMode, SendMessageComposer } from '../../../../api';
-import { AutoGrid, AutoGridProps, Column, Flex, Grid, Text } from '../../../../common';
+import { AutoGrid, AutoGridProps, Column, Flex, Grid, LayoutSearchSavesView } from '../../../../common';
 import { useNavigator } from '../../../../hooks';
 import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView';
 
@@ -70,6 +70,7 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
                     { (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) && <FaBars className="text-secondary fa-icon" onClick={ toggleDisplayMode } /> }
                     { (searchResult.action > 0) && (searchResult.action === 1) && <FaWindowMaximize className="text-secondary fa-icon" onClick={ showMore } /> }
                     { (searchResult.action > 0) && (searchResult.action !== 1) && <FaWindowRestore className="text-secondary fa-icon" onClick={ showMore } /> }
+                    { (topLevelContext.code !== 'official_view') && <LayoutSearchSavesView title={ LocalizeText('navigator.tooltip.add.saved.search') } onClick={ () => SendMessageComposer(new NavigatorSearchSaveComposer(getResultTitle(), searchResult.data)) } /> }
                 </Flex>
             </Flex> { isExtended &&
                 <>
@@ -83,35 +84,5 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
                 </>
             }
         </Column>
-        // <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
-        //     <div className="d-flex flex-column">
-        //         <div className="d-flex align-items-center px-2 py-1 text-black">
-        //             <i className={ 'text-secondary fas ' + (isExtended ? 'fa-minus' : 'fa-plus') } onClick={ toggleExtended }></i>
-        //             <div className="ms-2 flex-grow-1">{ LocalizeText(getResultTitle()) }</div>
-        //             <i className={ 'text-secondary fas ' + classNames({ 'fa-bars': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), 'fa-th': displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS })}></i>
-        //         </div>
-        //         { isExtended &&
-        //             <div className={ 'nitro-navigator-result-list row row-cols-' + classNames({ '1': (displayMode === NavigatorSearchResultViewDisplayMode.LIST), '2': (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) }) }>
-        //                 { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) =>
-        //                     {
-        //                         return <NavigatorSearchResultItemView key={ index } roomData={ room } />
-        //                     }) }
-        //             </div> }
-        //     </div>
-        // </div>
-        // <div className="nitro-navigator-result-list p-2">
-        //     <div className="d-flex mb-2 small cursor-pointer" onClick={ toggleList }>
-        //         <i className={ "fas " + classNames({ 'fa-plus': !isExtended, 'fa-minus': isExtended })}></i>
-        //         <div className="align-self-center w-100 ml-2">{ LocalizeText(getListCode()) }</div>
-        //         <i className={ "fas " + classNames({ 'fa-bars': displayMode === NavigatorResultListViewDisplayMode.LIST, 'fa-th': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS })} onClick={ toggleDisplayMode }></i>
-        //     </div>
-        //     <div className={ 'row mr-n2 row-cols-' + classNames({ '1': displayMode === NavigatorResultListViewDisplayMode.LIST, '2': displayMode >= NavigatorResultListViewDisplayMode.THUMBNAILS }) }>
-        //         { isExtended && resultList && resultList.rooms.map((room, index) =>
-        //             {
-        //                 return <NavigatorResultView key={ index } result={ room } />
-        //             })
-        //         }
-        //     </div>
-        // </div>
     );
 }
diff --git a/src/components/navigator/views/search/NavigatorSearchSavesResultItemView.tsx b/src/components/navigator/views/search/NavigatorSearchSavesResultItemView.tsx
new file mode 100644
index 000000000..6ed4b0cfa
--- /dev/null
+++ b/src/components/navigator/views/search/NavigatorSearchSavesResultItemView.tsx
@@ -0,0 +1,47 @@
+import { NavigatorDeleteSavedSearchComposer, NavigatorSavedSearch, NavigatorSearchComposer } from '@nitrots/nitro-renderer';
+import { FC, useState } from 'react';
+import { LocalizeText, SendMessageComposer } from '../../../../api';
+import { Base, Flex, Text } from '../../../../common';
+
+export interface NavigatorSearchSavesResultItemViewProps
+{
+    search: NavigatorSavedSearch
+}
+
+export const NavigatorSearchSavesResultItemView: FC<NavigatorSearchSavesResultItemViewProps> = props =>
+{
+    const { search = null } = props;
+    const [ isHoverText, setIsHoverText ] = useState<boolean>(false);
+    const [ currentIndex, setCurrentIndex ] = useState<number>(0);
+
+    const onHover = (searchId: number) =>
+    {
+        setCurrentIndex(searchId);
+        setIsHoverText(true);
+    }
+
+    const onLeave = () =>
+    {
+        setCurrentIndex(0);
+        setIsHoverText(false);
+    }
+
+    const getResultTitle = () =>
+    {
+        let name = search.code;
+
+        if(!name || !name.length || LocalizeText('navigator.searchcode.title.' + name) == ('navigator.searchcode.title.' + name)) return search.code;
+
+        if(name.startsWith('${')) return name.slice(2, (name.length - 1));
+
+        return ('navigator.searchcode.title.' + name);
+    }
+
+    return (
+        <Flex grow pointer alignItems="center" gap={ 1 } onMouseEnter={ () => onHover(search.id) } onMouseLeave={ () => onLeave() }>
+            { (isHoverText && currentIndex === search.id) &&
+            <Base className="icon nitro-navigator-search-delete" title={ LocalizeText('navigator.tooltip.remove.saved.search') } onClick={ () => SendMessageComposer(new NavigatorDeleteSavedSearchComposer(search.id)) } /> }
+            <Text small pointer variant="black" title={ LocalizeText('navigator.tooltip.open.saved.search') } onClick={ () => SendMessageComposer(new NavigatorSearchComposer(search.code.split('.').reverse()[0], search.filter)) }>{ LocalizeText(getResultTitle()) }</Text>
+        </Flex>
+    );
+}
diff --git a/src/components/navigator/views/search/NavigatorSearchSavesResultView.tsx b/src/components/navigator/views/search/NavigatorSearchSavesResultView.tsx
new file mode 100644
index 000000000..6d2eff178
--- /dev/null
+++ b/src/components/navigator/views/search/NavigatorSearchSavesResultView.tsx
@@ -0,0 +1,30 @@
+import { NavigatorSavedSearch } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { FaBolt } from 'react-icons/fa';
+import { LocalizeText } from '../../../../api';
+import { Column, Flex, Text } from '../../../../common';
+import { NavigatorSearchSavesResultItemView } from './NavigatorSearchSavesResultItemView';
+
+export interface NavigatorSearchSavesResultViewProps
+{
+    searchs: NavigatorSavedSearch[]
+}
+
+export const NavigatorSearchSavesResultView: FC<NavigatorSearchSavesResultViewProps> = props =>
+{
+    const { searchs = [] } = props;
+
+    return (
+        <Column className="nitro-navigator-search-saves-result">
+            <Flex className="badge p-1 bg-orange" gap={ 1 }>
+                <FaBolt color="white" />
+                <Text variant="white">{ LocalizeText('navigator.quick.links.title') }</Text>
+            </Flex>
+            <Column className="p-1" style={ { overflowX: 'hidden', overflowY: 'auto' } }>
+                { (searchs && searchs.length > 0) &&
+                    searchs.map((search: NavigatorSavedSearch) => <NavigatorSearchSavesResultItemView key={ search.id } search={ search } />)
+                }
+            </Column>
+        </Column>
+    );
+}
diff --git a/src/components/navigator/views/search/NavigatorSearchView.tsx b/src/components/navigator/views/search/NavigatorSearchView.tsx
index 51cb1bda4..844e8714d 100644
--- a/src/components/navigator/views/search/NavigatorSearchView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchView.tsx
@@ -1,7 +1,6 @@
 import { FC, KeyboardEvent, useEffect, useState } from 'react';
-import { FaSearch } from 'react-icons/fa';
 import { INavigatorSearchFilter, LocalizeText, SearchFilterOptions } from '../../../../api';
-import { Button, Flex } from '../../../../common';
+import { Flex } from '../../../../common';
 import { useNavigator } from '../../../../hooks';
 
 export interface NavigatorSearchViewProps
@@ -64,7 +63,7 @@ export const NavigatorSearchView: FC<NavigatorSearchViewProps> = props =>
     }, [ searchResult ]);
 
     return (
-        <Flex fullWidth gap={ 1 }>
+        <Flex fullWidth gap={ 1 } className="mb-2">
             <Flex shrink>
                 <select className="form-select form-select-sm" value={ searchFilterIndex } onChange={ event => setSearchFilterIndex(parseInt(event.target.value)) }>
                     { SearchFilterOptions.map((filter, index) =>
diff --git a/src/hooks/navigator/useNavigator.ts b/src/hooks/navigator/useNavigator.ts
index 119de67d1..459fe17a3 100644
--- a/src/hooks/navigator/useNavigator.ts
+++ b/src/hooks/navigator/useNavigator.ts
@@ -1,4 +1,4 @@
-import { CanCreateRoomEventEvent, CantConnectMessageParser, DoorbellMessageEvent, FlatAccessDeniedMessageEvent, FlatCreatedEvent, FollowFriendMessageComposer, GenericErrorEvent, GetGuestRoomMessageComposer, GetGuestRoomResultEvent, GetUserEventCatsMessageComposer, GetUserFlatCatsMessageComposer, HabboWebTools, LegacyExternalInterface, NavigatorCategoryDataParser, NavigatorEventCategoryDataParser, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorOpenRoomCreatorEvent, NavigatorSearchEvent, NavigatorSearchResultSet, NavigatorTopLevelContext, RoomDataParser, RoomDoorbellAcceptedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomScoreEvent, RoomSettingsUpdatedEvent, SecurityLevel, ThumbnailStatusMessageEvent, UserEventCatsEvent, UserFlatCatsEvent, UserInfoEvent, UserPermissionsEvent } from '@nitrots/nitro-renderer';
+import { CanCreateRoomEventEvent, CantConnectMessageParser, DoorbellMessageEvent, FlatAccessDeniedMessageEvent, FlatCreatedEvent, FollowFriendMessageComposer, GenericErrorEvent, GetGuestRoomMessageComposer, GetGuestRoomResultEvent, GetUserEventCatsMessageComposer, GetUserFlatCatsMessageComposer, HabboWebTools, LegacyExternalInterface, NavigatorCategoryDataParser, NavigatorEventCategoryDataParser, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorOpenRoomCreatorEvent, NavigatorSavedSearch, NavigatorSearchEvent, NavigatorSearchResultSet, NavigatorSearchesEvent, NavigatorTopLevelContext, RoomDataParser, RoomDoorbellAcceptedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomScoreEvent, RoomSettingsUpdatedEvent, SecurityLevel, ThumbnailStatusMessageEvent, UserEventCatsEvent, UserFlatCatsEvent, UserInfoEvent, UserPermissionsEvent } from '@nitrots/nitro-renderer';
 import { useState } from 'react';
 import { useBetween } from 'use-between';
 import { CreateLinkEvent, CreateRoomSession, DoorStateType, GetConfiguration, GetSessionDataManager, INavigatorData, LocalizeText, NotificationAlertType, SendMessageComposer, TryVisitRoom, VisitDesktop } from '../../api';
@@ -13,6 +13,7 @@ const useNavigatorState = () =>
     const [ topLevelContexts, setTopLevelContexts ] = useState<NavigatorTopLevelContext[]>(null);
     const [ doorData, setDoorData ] = useState<{ roomInfo: RoomDataParser, state: number }>({ roomInfo: null, state: DoorStateType.NONE });
     const [ searchResult, setSearchResult ] = useState<NavigatorSearchResultSet>(null);
+    const [ navigatorSearches, setNavigatorSearches ] = useState<NavigatorSavedSearch[]>(null);
     const [ navigatorData, setNavigatorData ] = useState<INavigatorData>({
         settingsReceived: false,
         homeRoomId: 0,
@@ -455,7 +456,16 @@ const useNavigatorState = () =>
 
     useMessageEvent<NavigatorOpenRoomCreatorEvent>(NavigatorOpenRoomCreatorEvent, event => CreateLinkEvent('navigator/show'));
 
-    return { categories, doorData, setDoorData, topLevelContext, topLevelContexts, searchResult, navigatorData };
+    useMessageEvent<NavigatorSearchesEvent>(NavigatorSearchesEvent, event =>
+    {
+        const parser = event.getParser();
+
+        if (!parser) return;
+
+        setNavigatorSearches(parser.searches);
+    });
+
+    return { categories, doorData, setDoorData, topLevelContext, topLevelContexts, searchResult, navigatorData, navigatorSearches };
 }
 
 export const useNavigator = () => useBetween(useNavigatorState);

From c1ca7dedb465eeb3c3d6c710b6f5a39670725d3a Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Mon, 15 May 2023 14:34:19 +0200
Subject: [PATCH 055/134] =?UTF-8?q?=F0=9F=90=9B=20Fix=20inventory=20height?=
 =?UTF-8?q?=20issues=20and=20trade=20view=20quirks=20after=20trade=20layou?=
 =?UTF-8?q?t=20update?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/index.scss                         | 37 +++++++++++--------
 src/components/inventory/InventoryView.scss   |  7 +++-
 src/components/inventory/InventoryView.tsx    |  8 ++--
 .../views/badge/InventoryBadgeView.tsx        |  2 +-
 .../furniture/InventoryFurnitureView.tsx      |  4 +-
 .../views/furniture/InventoryTradeView.tsx    | 14 +++----
 6 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/common/index.scss b/src/common/index.scss
index c77977b43..0db391547 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -354,26 +354,31 @@
     color: #fff;
 }
 
-.badges-list {
-    height: 150px !important;
-}
+.badge-wrapper {
+    overflow: hidden;
 
-.badge-container {
-    background-color: #cacaca;
-    border-radius: 6px !important;
-    border: solid 1px #000 !important;
-    width: 42px;
-    height: 42px;
-    padding: 2px;
+    .badges-list {
+        height: 65% !important;
+    }
 
-    &.layout-grid-item.active {
-        background-color: #cacaca !important;
-        border: 1px solid #000 !important;
-        box-shadow: inset 0 0 0 2px white;
-        box-sizing: border-box;
+    .badge-container {
+        background-color: #cacaca;
+        border-radius: 6px !important;
+        border: solid 1px #000 !important;
+        width: 42px;
+        height: 42px;
+        padding: 2px;
+
+        &.layout-grid-item.active {
+            background-color: #cacaca !important;
+            border: 1px solid #000 !important;
+            box-shadow: inset 0 0 0 2px white;
+            box-sizing: border-box;
+        }
     }
 }
 
+
 .badge-image {
     position: relative;
     width: 40px;
@@ -722,7 +727,7 @@
     border: 1px solid black;
     margin-left: 20px;
     margin-top: -10px;
-    
+
     &:before {
         border: 10px solid white;
         content: '';
diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index 96289fc54..0ddce03eb 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -1,6 +1,10 @@
 .nitro-inventory {
+    height: $inventory-height;
+    min-height: $inventory-height;
+    max-height: $inventory-height + 150px;
     width: $inventory-width;
-    min-width: 326px;
+    min-width: $inventory-width;
+    max-width: $inventory-width + 150px;
     color: #000;
 
     input {
@@ -10,6 +14,7 @@
 
     &.trading {
         width: 535px;
+        min-height: $inventory-height + 375px !important;
 
         .trading-inventory {
             height: 200px;
diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index 80bb92ce7..ba43f2c6f 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -67,7 +67,7 @@ export const InventoryView: FC<{}> = props =>
                 const parts = url.split('/');
 
                 if(parts.length < 2) return;
-        
+
                 switch(parts[1])
                 {
                     case 'show':
@@ -112,7 +112,7 @@ export const InventoryView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey={ 'inventory' } className={ `${ isTrading ? 'nitro-inventory trading' : 'nitro-inventory' } no-resize` } theme={ isTrading ? 'primary' : '' } >
+        <NitroCardView uniqueKey={ 'inventory' } className={ `${ isTrading ? 'nitro-inventory trading  no-resize' : 'nitro-inventory' }` } theme={ isTrading ? 'primary' : '' } >
             <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
             <>
                 <NitroCardTabsView>
@@ -128,9 +128,9 @@ export const InventoryView: FC<{}> = props =>
                 <NitroCardContentView>
                     { (currentTab === TAB_FURNITURE ) &&
                             <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } /> }
-                    { (currentTab === TAB_PETS ) && 
+                    { (currentTab === TAB_PETS ) &&
                             <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
-                    { (currentTab === TAB_BADGES ) && 
+                    { (currentTab === TAB_BADGES ) &&
                             <InventoryBadgeView /> }
                     { (currentTab === TAB_BOTS ) &&
                             <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index b70c5f334..399c2c324 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -49,7 +49,7 @@ export const InventoryBadgeView: FC<{}> = props =>
     }, []);
 
     return (
-        <div>
+        <div className="badge-wrapper">
             <Grid gap={ 2 } className="badges-list">
                 <Column size={ 8 } overflow="hidden">
                     <Flex gap={ 1 } className="position-relative">
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index bf8fadd71..f9dec037d 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -87,7 +87,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
     }
 
     const attemptItemOffer = (count: number) =>
-    {        
+    {
         if(!groupItem) return;
 
         const tradeItems = groupItem.getTradeItems(count);
@@ -263,7 +263,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                             }
                             { (isTrading) &&
                                 <Column gap={ 1 } alignItems="start">
-                                    <input type="number" className="quantity-input remove-outline" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ selectedItem.getUnlockedCount() === 0 } value={ !quantity ? '' : quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
+                                    <input type="number" className="quantity-input remove-outline form-control" placeholder={ LocalizeText('catalog.bundlewidget.spinner.select.amount') } disabled={ selectedItem.getUnlockedCount() === 0 } value={ !quantity ? '' : quantity } onChange={ event => setQuantity(event.target.valueAsNumber) } />
                                     <Button variant="secondary" disabled={ !quantity || selectedItem.getUnlockedCount() === 0 } onClick={ event => !quantity ? null : changeCount(selectedItem.getUnlockedCount()) }>{ LocalizeText('inventory.trading.areoffering') }</Button>
                                 </Column>
                             }
diff --git a/src/components/inventory/views/furniture/InventoryTradeView.tsx b/src/components/inventory/views/furniture/InventoryTradeView.tsx
index cd121160e..6b0eadd97 100644
--- a/src/components/inventory/views/furniture/InventoryTradeView.tsx
+++ b/src/components/inventory/views/furniture/InventoryTradeView.tsx
@@ -34,7 +34,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
 
     const getTotalCredits = (items: AdvancedMap<string, GroupItem>): number =>
     {
-        return items.getValues().map( item => Number(item.iconUrl.split('/')[item.iconUrl.split('/').length - 1]?.split('_')[1]) * item.items.length ).reduce((acc, cur) => acc + (isNaN(cur) ? 0 : cur), 0); 
+        return items.getValues().map( item => Number(item.iconUrl.split('/')[item.iconUrl.split('/').length - 1]?.split('_')[1]) * item.items.length ).reduce((acc, cur) => acc + (isNaN(cur) ? 0 : cur), 0);
     }
 
     useEffect(() =>
@@ -77,7 +77,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             <Column size={ 4 } overflow="hidden">
                                 <Flex>
                                     { (ownUser.accepts) && <Base className="icon icon-confirmed" /> }
-                                    <Text className="px-2"><b>{ LocalizeText('inventory.trading.you') }</b> { LocalizeText('inventory.trading.areoffering') }</Text>
+                                    <small className={ ownUser.accepts ? 'px-2' : '' }><b>{ LocalizeText('inventory.trading.you') }</b> { LocalizeText('inventory.trading.areoffering') }</small>
                                 </Flex>
                                 <AutoGrid columnCount={ 3 }>
                                     { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
@@ -95,8 +95,8 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                     }) }
                                 </AutoGrid>
                                 <Column gap={ 0 } fullWidth>
-                                    <Text>{ LocalizeText('inventory.trading.info.itemcount', [ 'value' ], [ ownUser.itemCount.toString() ]) }</Text>
-                                    <Text className="credits-align">{ LocalizeText('inventory.trading.info.creditvalue.own', [ 'value' ], [ getTotalCredits(ownUser.userItems).toString() ]) }</Text>
+                                    <small>{ LocalizeText('inventory.trading.info.itemcount', [ 'value' ], [ ownUser.itemCount.toString() ]) }</small>
+                                    <small className="credits-align">{ LocalizeText('inventory.trading.info.creditvalue.own', [ 'value' ], [ getTotalCredits(ownUser.userItems).toString() ]) }</small>
                                 </Column>
                             </Column>
                             <Flex className="lock-design-left">
@@ -106,7 +106,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                             <Column size={ 4 } overflow="hidden">
                                 <Flex>
                                     { (otherUser.accepts) && <Base className="icon icon-confirmed" /> }
-                                    <Text className="px-2"><b>{ otherUser.userName }</b> { LocalizeText('inventory.trading.isoffering') }</Text>
+                                    <small className={ otherUser.accepts ? 'px-2' : '' }><b>{ otherUser.userName }</b> { LocalizeText('inventory.trading.isoffering') }</small>
                                 </Flex>
                                 <AutoGrid columnCount={ 3 }>
                                     { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
@@ -119,8 +119,8 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                     }) }
                                 </AutoGrid>
                                 <Column gap={ 0 } fullWidth>
-                                    <Text>{ LocalizeText('inventory.trading.info.itemcount', [ 'value' ], [ otherUser.itemCount.toString() ]) }</Text>
-                                    <Text>{ LocalizeText('inventory.trading.info.creditvalue', [ 'value' ], [ getTotalCredits(otherUser.userItems).toString() ]) }</Text>
+                                    <small>{ LocalizeText('inventory.trading.info.itemcount', [ 'value' ], [ otherUser.itemCount.toString() ]) }</small>
+                                    <small>{ LocalizeText('inventory.trading.info.creditvalue', [ 'value' ], [ getTotalCredits(otherUser.userItems).toString() ]) }</small>
                                 </Column>
                             </Column>
                             <Flex className="lock-design-right">

From 3fa6892024ded674139b38fedc07e26f6eddaa01 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Mon, 15 May 2023 14:45:00 +0200
Subject: [PATCH 056/134] Remove resize icon from wardrobe

---
 src/components/avatar-editor/AvatarEditorView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index d9ffc6222..f35762f2a 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@@ -265,7 +265,7 @@ export const AvatarEditorView: FC<{}> = props =>
 
     if(!isVisible || !figureData) return null;
 
-    const avatarEditorClasses = `nitro-avatar-editor ${ isWardrobeVisible ? 'expanded' : '' }`;
+    const avatarEditorClasses = `nitro-avatar-editor no-resize ${ isWardrobeVisible ? 'expanded' : '' }`;
 
     return (
         <NitroCardView uniqueKey="avatar-editor" className={ avatarEditorClasses }>

From e061b02fc8e9bb3bd5f00ca1e540b3a8ebd93f98 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Mon, 15 May 2023 15:27:11 +0200
Subject: [PATCH 057/134] =?UTF-8?q?=F0=9F=92=84=20Trigger=20room=20info=20?=
 =?UTF-8?q?popover=20on=20click=20instead=20of=20hover=20and=20hide=20when?=
 =?UTF-8?q?=20clicked=20outside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/common/layout/UserProfileIconView.tsx     |  6 ++-
 .../NavigatorSearchResultItemInfoView.tsx     | 46 +++++++++++++++++--
 2 files changed, 47 insertions(+), 5 deletions(-)

diff --git a/src/common/layout/UserProfileIconView.tsx b/src/common/layout/UserProfileIconView.tsx
index d31fa66b4..b02c772c6 100644
--- a/src/common/layout/UserProfileIconView.tsx
+++ b/src/common/layout/UserProfileIconView.tsx
@@ -22,7 +22,11 @@ export const UserProfileIconView: FC<UserProfileIconViewProps> = props =>
     }, [ classNames ]);
 
     return (
-        <Base classNames={ getClassNames } pointer={ pointer } onClick={ event => GetUserProfile(userId) } { ... rest }>
+        <Base classNames={ getClassNames } pointer={ pointer } onClick={ event =>
+        {
+            event.stopPropagation();
+            GetUserProfile(userId)
+        } } { ... rest }>
             { children }
         </Base>
     );
diff --git a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
index 1bc60fb9c..6818d0825 100644
--- a/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
+++ b/src/components/navigator/views/search/NavigatorSearchResultItemInfoView.tsx
@@ -1,5 +1,5 @@
 import { RoomDataParser } from '@nitrots/nitro-renderer';
-import { FC, useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from 'react';
 import { Overlay, Popover } from 'react-bootstrap';
 import { FaUser } from 'react-icons/fa';
 import { LocalizeText } from '../../../../api';
@@ -15,6 +15,37 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
     const { roomData = null } = props;
     const [ isVisible, setIsVisible ] = useState(false);
     const elementRef = useRef<HTMLDivElement>();
+    const [ showProfile, setShowProfile ] = useState(false);
+
+    useEffect(() =>
+    {
+        if (showProfile)
+        {
+            setIsVisible(false);
+        }
+    }, [ showProfile ]);
+
+    useEffect(() =>
+    {
+        // add when mounted
+        document.addEventListener('mousedown', handleClick);
+        // return function to be called when unmounted
+        return () =>
+        {
+            document.removeEventListener('mousedown', handleClick);
+        };
+    }, []);
+
+    const handleClick = e =>
+    {
+        if (elementRef.current.contains(e.target))
+        {
+            // inside click
+            return;
+        }
+        // outside click
+        setIsVisible(false);
+    };
 
     const getUserCounterColor = () =>
     {
@@ -40,8 +71,12 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
 
     return (
         <>
-            <Base pointer innerRef={ elementRef } className="icon icon-navigator-info" onMouseOver={ event => setIsVisible(true) } onMouseLeave={ event => setIsVisible(false) } />
-            <Overlay show={ isVisible } target={ elementRef.current } placement="right">
+            <Base pointer innerRef={ elementRef } className="icon icon-navigator-info" onClick={ event =>
+            {
+                isVisible || showProfile ? setIsVisible(false) : setIsVisible(true);
+                event.stopPropagation();
+            } } />
+            <Overlay show={ isVisible } target={ elementRef.current } placement="right" rootClose={ true } >
                 <Popover>
                     <NitroCardContentView overflow="hidden" className="room-info bg-transparent">
                         <Flex gap={ 2 } overflow="hidden" className="room-info-bg p-2">
@@ -60,7 +95,10 @@ export const NavigatorSearchResultItemInfoView: FC<NavigatorSearchResultItemInfo
                                         { LocalizeText('navigator.roomownercaption') }
                                     </Text>
                                     <Flex alignItems="center" gap={ 1 }>
-                                        <UserProfileIconView userId={ roomData.ownerId } />
+                                        <UserProfileIconView userId={ roomData.ownerId } onClick={ event =>
+                                        {
+                                            setShowProfile(true);
+                                        } } />
                                         <Text italics>{ roomData.ownerName }</Text>
                                     </Flex>
                                 </Flex>

From 5e6c8e60c3485242dd5d84b90124a70b766e293f Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Mon, 15 May 2023 16:42:24 +0200
Subject: [PATCH 058/134] Catalog - Show icon is required HC

---
 src/assets/images/catalog/hc_mini.png             | Bin 0 -> 234 bytes
 src/assets/styles/icons.scss                      |   6 ++++++
 .../views/page/common/CatalogGridOfferView.tsx    |   3 ++-
 .../page/widgets/CatalogPurchaseWidgetView.tsx    |  10 ++++------
 4 files changed, 12 insertions(+), 7 deletions(-)
 create mode 100644 src/assets/images/catalog/hc_mini.png

diff --git a/src/assets/images/catalog/hc_mini.png b/src/assets/images/catalog/hc_mini.png
new file mode 100644
index 0000000000000000000000000000000000000000..353f1cd51e6d9dbfc1305a14a1ceaef8fce0f26a
GIT binary patch
literal 234
zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngb!3-p0j(#}}q!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>O9c3YxB}__uNeLV!Fr3C#tfI-#r~fGiZMjrtjqvX93?@1!5~>6V7S-3
zHxekuS>O>_%)r2R7=#&*=dVZs3c7o`IEF}shxR%0F&J_%9ZmZEUtZsfKQ_t3O;t)g
zuJgjFEvvVBOeo?!>nig7O6shs64TC9KF=)Mm+YFWX?kb+hGV7gzx&VOFEVB<l6rRR
QI?zZ4Pgg&ebxsLQ0PS8;+5i9m

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 18762f857..e07ce6520 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -880,6 +880,12 @@
         height: 18px;
     }
 
+    &.icon-hc_mini {
+        background-image: url('@/assets/images/catalog/hc_mini.png');
+        width: 18px;
+        height: 18px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
index 6e7419677..dfd8cda96 100644
--- a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
+++ b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
@@ -1,7 +1,7 @@
 import { MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent, useMemo, useState } from 'react';
 import { IPurchasableOffer, Offer, ProductTypeEnum } from '../../../../../api';
-import { Column, Flex, LayoutAvatarImageView, LayoutGridItemProps } from '../../../../../common';
+import { Base, Column, Flex, LayoutAvatarImageView, LayoutGridItemProps } from '../../../../../common';
 import { LayoutCatalogGridItem } from '../../../../../common/layout/LayoutCatalogGridItem';
 import { useCatalog, useInventoryFurni } from '../../../../../hooks';
 import { CatalogPriceGridDisplayWidgetView } from '../widgets/CatalogPriceGridDisplayWidgetViev';
@@ -55,6 +55,7 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
     return (
         <Column className="catalog-grid-active cursor-pointer" gap={ 0 } itemActive={ itemActive } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
             <LayoutCatalogGridItem itemImage={ iconUrl } itemCount={ ((offer.pricingModel === Offer.PRICING_MODEL_MULTI) ? product.productCount : 1) } itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) } itemUniqueNumber={ product.uniqueLimitedItemSeriesSize } { ...rest }>
+                { (offer.clubLevel !== 0) && <Base className="icon icon-hc_mini position-absolute top-0 end-1" /> }
                 { (offer.product.productType === ProductTypeEnum.ROBOT) &&
                 <LayoutAvatarImageView figure={ offer.product.extraParam } headOnly={ true } direction={ 3 } /> }
             </LayoutCatalogGridItem>
diff --git a/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
index 236924743..fc483fd09 100644
--- a/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPurchaseWidgetView.tsx
@@ -1,8 +1,8 @@
 import { PurchaseFromCatalogComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { CatalogPurchaseState, CreateLinkEvent, DispatchUiEvent, GetClubMemberLevel, LocalizeText, LocalStorageKeys, Offer, SendMessageComposer } from '../../../../../api';
+import { CatalogPurchaseState, CreateLinkEvent, DispatchUiEvent, GetClubMemberLevel, LocalStorageKeys, LocalizeText, Offer, SendMessageComposer } from '../../../../../api';
 import { Button, LayoutLoadingSpinnerView } from '../../../../../common';
-import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchasedEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent } from '../../../../../events';
+import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchaseFailureEvent, CatalogPurchaseNotAllowedEvent, CatalogPurchaseSoldOutEvent, CatalogPurchasedEvent } from '../../../../../events';
 import { useCatalog, useLocalStorage, usePurse, useUiEvent } from '../../../../../hooks';
 
 interface CatalogPurchaseWidgetViewProps
@@ -128,8 +128,6 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
         const priceCredits = (currentOffer.priceInCredits * purchaseOptions.quantity);
         const pricePoints = (currentOffer.priceInActivityPoints * purchaseOptions.quantity);
 
-        if(GetClubMemberLevel() < currentOffer.clubLevel) return <Button variant="danger" disabled>{ LocalizeText('catalog.alert.hc.required') }</Button>;
-
         if(isLimitedSoldOut) return <div className="unique-sold-out-blocker">
             <div>
                 { LocalizeText('catalog.alert.limited_edition_sold_out.title') }
@@ -159,10 +157,10 @@ export const CatalogPurchaseWidgetView: FC<CatalogPurchaseWidgetViewProps> = pro
     return (
         <>
             { (!noGiftOption && !currentOffer.isRentOffer && !currentOffer.product.isUniqueLimitedItem) &&
-                <Button disabled={ ((purchaseOptions.quantity > 1) || !currentOffer.giftable || isLimitedSoldOut || (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length))) } onClick={ event => purchase(true) }>
+                <Button disabled={ ((purchaseOptions.quantity > 1) || !currentOffer.giftable || isLimitedSoldOut || GetClubMemberLevel() < currentOffer.clubLevel || (purchaseOptions.extraParamRequired && (!purchaseOptions.extraData || !purchaseOptions.extraData.length))) } onClick={ event => purchase(true) }>
                     { LocalizeText('catalog.purchase_confirmation.gift') }
                 </Button> }
-                <PurchaseButton />
+            <PurchaseButton />
         </>
     );
 }

From fdc1b621f1466950b7ccc33df1eb62a8c1b3e706 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Mon, 15 May 2023 16:52:53 +0200
Subject: [PATCH 059/134] Wardobe - Show HC Center if you are not HC

---
 .../views/AvatarEditorWardrobeView.tsx           | 16 ++++------------
 1 file changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
index c0dc49089..4fa2b66fc 100644
--- a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
@@ -1,18 +1,8 @@
 import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
-import { FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../api';
-import {
-    AutoGrid,
-    Base,
-    Button,
-    Column,
-    Flex,
-    LayoutAvatarImageView,
-    LayoutCurrencyIcon,
-    LayoutGridItem
-} from '../../../common';
 import { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/all';
-
+import { CreateLinkEvent, FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../api';
+import { Flex, LayoutAvatarImageView, LayoutCurrencyIcon } from '../../../common';
 export interface AvatarEditorWardrobeViewProps
 {
     figureData: FigureData;
@@ -40,6 +30,8 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     {
         if(!figureData || (index >= savedFigures.length) || (index < 0)) return;
 
+        if (GetClubMemberLevel() < getClubLevel()) return CreateLinkEvent('habboUI/open/hccenter');
+
         const newFigures = [ ...savedFigures ];
 
         const figure = figureData.getFigureString();

From d2031f50a3e33ab678a1e1f4c6bf4d73f2e72e20 Mon Sep 17 00:00:00 2001
From: Gizmo <77913129+Habbobba@users.noreply.github.com>
Date: Mon, 15 May 2023 10:58:15 -0400
Subject: [PATCH 060/134] Update CatalogLayoutBadgeDisplayView.tsx

Fixed the text of furni names and the position of the currency to the correct locations.
---
 .../views/page/layout/CatalogLayoutBadgeDisplayView.tsx   | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
index a3b4f2e51..1c9787285 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
@@ -31,15 +31,11 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutProps> = props =>
                         <>
                             <Base position="relative" overflow="hidden">
                                 <CatalogViewProductWidgetView />
+                                <CatalogTotalPriceWidget className="credits-default-layout credits-bg py-1 px-2 bottom-1 end-1" justifyContent="end" alignItems="end" />
+                                <Text bold variant="white" className="item-title" grow truncate>{ currentOffer.localizationName }</Text>
                             </Base>
                             <Column grow gap={ 1 }>
                                 <CatalogLimitedItemWidgetView fullWidth />
-                                <Text grow truncate>
-                                    { currentOffer.localizationName }
-                                </Text>
-                                <Flex justifyContent="end">
-                                    <CatalogTotalPriceWidget alignItems="end" />
-                                </Flex>
                             </Column>
                         </>
                     }

From 4bc6d408a191170bb6fb4cb7e3c1c47490da4400 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Mon, 15 May 2023 18:46:03 +0200
Subject: [PATCH 061/134] Clothes and colors show HCCenter if you are not HC

---
 .../views/figure-set/AvatarEditorFigureSetView.tsx            | 4 +++-
 .../views/palette-set/AvatarEditorPaletteSetView.tsx          | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index 29684118f..9c48b80ee 100644
--- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -1,5 +1,5 @@
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from 'react';
-import { AvatarEditorGridPartItem, CategoryData, IAvatarEditorCategoryModel } from '../../../../api';
+import { AvatarEditorGridPartItem, CategoryData, CreateLinkEvent, GetSessionDataManager, IAvatarEditorCategoryModel } from '../../../../api';
 import { AutoGrid } from '../../../../common';
 import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
 
@@ -21,6 +21,8 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
 
         if(index === -1) return;
 
+        if (item.isHC && GetSessionDataManager().clubLevel === 0) return CreateLinkEvent('habboUI/open/hccenter');
+
         model.selectPart(category.name, index);
 
         const partItem = category.getCurrentPart();
diff --git a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
index d505685a5..82bc633b1 100644
--- a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
+++ b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
@@ -1,5 +1,5 @@
 import { FC, useCallback, useEffect, useRef } from 'react';
-import { AvatarEditorGridColorItem, CategoryData, IAvatarEditorCategoryModel } from '../../../../api';
+import { AvatarEditorGridColorItem, CategoryData, CreateLinkEvent, GetSessionDataManager, IAvatarEditorCategoryModel } from '../../../../api';
 import { AutoGrid } from '../../../../common';
 import { AvatarEditorPaletteSetItem } from './AvatarEditorPaletteSetItemView';
 
@@ -21,6 +21,8 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
         const index = paletteSet.indexOf(item);
 
         if(index === -1) return;
+        
+        if (item.isHC && GetSessionDataManager().clubLevel === 0) return CreateLinkEvent('habboUI/open/hccenter');
 
         model.selectColor(category.name, index, paletteIndex);
     }, [ model, category, paletteSet, paletteIndex ]);

From 900423c4782b83ce46c5e4116cb6fc647d61cfa7 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Mon, 15 May 2023 19:35:01 +0200
Subject: [PATCH 062/134] =?UTF-8?q?=F0=9F=90=9B=20Fix=20trade=20inventory?=
 =?UTF-8?q?=20height=20when=20having=20a=20lot=20of=20items?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/inventory/InventoryView.scss                     | 2 +-
 .../inventory/views/furniture/InventoryFurnitureView.tsx        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index 0ddce03eb..7f7955788 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -14,7 +14,7 @@
 
     &.trading {
         width: 535px;
-        min-height: $inventory-height + 375px !important;
+        min-height: $inventory-height + 290px !important;
 
         .trading-inventory {
             height: 200px;
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index f9dec037d..b8e90fdd1 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -233,7 +233,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         <Grid>
             <Column size={ 7 } overflow="hidden">
                 <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                <AutoGrid columnCount={ 5 }>
+                <AutoGrid columnCount={ 5 } className={ isTrading ? 'trading-inventory' : '' }>
                     { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } isTrading={ isTrading } attemptItemOffer={ (e) => attemptItemOffer(e) } setGroupItem={ (e) => setGroupItem(e) } />) }
                 </AutoGrid>
             </Column>

From 96cf02cd2c30e3b54349dfe99d8a373bd6020689 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 17 May 2023 13:59:35 +0200
Subject: [PATCH 063/134] Fix Time in window

---
 src/components/camera/views/CameraWidgetShowPhotoView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
index 7ad1a993e..94ae70800 100644
--- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx
+++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
@@ -61,7 +61,7 @@ export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = pro
             </Flex>
             { currentImage.m && currentImage.m.length && <Text center>{ currentImage.m }</Text> }
             <Flex position="absolute" className="bottom-5 px-2">
-                <Text small>{ new Date(currentImage.t * 1000).toLocaleDateString() }</Text>
+                <Text small>{new Date(currentImage.t || 0).toLocaleDateString('en-US', {day: 'numeric', month: 'long', year: 'numeric'})}</Text>
             </Flex>
             <Flex position="absolute" className="bottom-5 end-5 px-5">
                 <Text pointer small underline onClick={ () => GetUserProfile(Number(getUserData(currentImage.s, Number(currentImage.u), 'id'))) }>{ getUserData(currentImage.s, Number(currentImage.u), 'username') }</Text>

From c84f10b994fbc8f49b3f3de965b9af4bc5f4ac56 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Wed, 17 May 2023 19:04:44 +0200
Subject: [PATCH 064/134] Update currency format if number short is true

---
 src/api/utils/LocalizeShortNumber.ts        | 2 +-
 src/components/purse/views/CurrencyView.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/api/utils/LocalizeShortNumber.ts b/src/api/utils/LocalizeShortNumber.ts
index 30975ecac..d5d9daf2e 100644
--- a/src/api/utils/LocalizeShortNumber.ts
+++ b/src/api/utils/LocalizeShortNumber.ts
@@ -19,7 +19,7 @@ export function LocalizeShortNumber(number: number): string
 
     for(const power of powers)
     {
-        let reduced = abs / power.value;
+        let reduced = parseFloat((abs / power.value).toFixed(0));
 
         reduced = Math.round(reduced * rounder) / rounder;
 
diff --git a/src/components/purse/views/CurrencyView.tsx b/src/components/purse/views/CurrencyView.tsx
index 65f3d7552..994112be2 100644
--- a/src/components/purse/views/CurrencyView.tsx
+++ b/src/components/purse/views/CurrencyView.tsx
@@ -18,7 +18,7 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
     {
         return (
             <Flex justifyContent="end" pointer gap={ 1 } className="nitro-purse-button rounded">
-                <Text bold truncate textEnd variant="white" grow title={ amount > 99999 ? LocalizeFormattedNumber(amount) : '' }>{ amount > 99999 ? '99 999' : (short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount)) }</Text>
+                <Text bold truncate textEnd variant="white" grow title={ LocalizeFormattedNumber(amount) }>{ short ? LocalizeShortNumber(amount) : LocalizeFormattedNumber(amount) }</Text>
                 <LayoutCurrencyIcon type={ type } />
             </Flex>);
     }, [ amount, short, type ]);
@@ -30,7 +30,7 @@ export const CurrencyView: FC<CurrencyViewProps> = props =>
             placement="left"
             overlay={
                 <Tooltip id={ `tooltip-${ type }` }>
-                    { amount > 99999 ? LocalizeFormattedNumber(amount) : '' }
+                    { LocalizeFormattedNumber(amount) }
                 </Tooltip>
             }>
             { element }

From 9d6cd66dbc8e9650d0de9a531b1f301bf91193da Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Thu, 18 May 2023 08:28:47 +0200
Subject: [PATCH 065/134] As requested

---
 src/components/camera/views/CameraWidgetShowPhotoView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
index 94ae70800..fecd32006 100644
--- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx
+++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
@@ -61,7 +61,7 @@ export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = pro
             </Flex>
             { currentImage.m && currentImage.m.length && <Text center>{ currentImage.m }</Text> }
             <Flex position="absolute" className="bottom-5 px-2">
-                <Text small>{new Date(currentImage.t || 0).toLocaleDateString('en-US', {day: 'numeric', month: 'long', year: 'numeric'})}</Text>
+                <Text small>{new Date(currentImage.t * 1000).toLocaleDateString(undefined, {day: 'numeric', month: 'long', year: 'numeric'})}</Text>
             </Flex>
             <Flex position="absolute" className="bottom-5 end-5 px-5">
                 <Text pointer small underline onClick={ () => GetUserProfile(Number(getUserData(currentImage.s, Number(currentImage.u), 'id'))) }>{ getUserData(currentImage.s, Number(currentImage.u), 'username') }</Text>

From a9637e2c3dc0befa672b030fa9fe36d55e19abac Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Thu, 18 May 2023 14:47:03 +0200
Subject: [PATCH 066/134] Adding spaces

---
 src/components/camera/views/CameraWidgetShowPhotoView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
index fecd32006..f9733f448 100644
--- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx
+++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
@@ -61,7 +61,7 @@ export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = pro
             </Flex>
             { currentImage.m && currentImage.m.length && <Text center>{ currentImage.m }</Text> }
             <Flex position="absolute" className="bottom-5 px-2">
-                <Text small>{new Date(currentImage.t * 1000).toLocaleDateString(undefined, {day: 'numeric', month: 'long', year: 'numeric'})}</Text>
+                <Text small>{ new Date(currentImage.t * 1000).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' }) }</Text>
             </Flex>
             <Flex position="absolute" className="bottom-5 end-5 px-5">
                 <Text pointer small underline onClick={ () => GetUserProfile(Number(getUserData(currentImage.s, Number(currentImage.u), 'id'))) }>{ getUserData(currentImage.s, Number(currentImage.u), 'username') }</Text>

From 70ac9fca1a2322380c96c51563335c8c7be7b6c3 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Thu, 18 May 2023 17:19:46 +0200
Subject: [PATCH 067/134] =?UTF-8?q?=F0=9F=90=9B=20Fix=20overflow=20bug=20w?=
 =?UTF-8?q?hen=20trading=20with=20a=20lot=20of=20items=20in=20the=20invent?=
 =?UTF-8?q?ory?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/inventory/InventoryView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index ba43f2c6f..542eff416 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -125,7 +125,7 @@ export const InventoryView: FC<{}> = props =>
                         );
                     }) }
                 </NitroCardTabsView>
-                <NitroCardContentView>
+                <NitroCardContentView overflow={ `${ isTrading ? 'hidden' : 'auto' }` }>
                     { (currentTab === TAB_FURNITURE ) &&
                             <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } /> }
                     { (currentTab === TAB_PETS ) &&

From 51d82e39835820e6d2a997d66a3ecdc22862bcab Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Thu, 18 May 2023 20:09:43 +0200
Subject: [PATCH 068/134] Room thumbnails - Fixed bug that not reload image

---
 src/common/layout/LayoutRoomThumbnailView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/layout/LayoutRoomThumbnailView.tsx b/src/common/layout/LayoutRoomThumbnailView.tsx
index acfdd9a43..42ba0b645 100644
--- a/src/common/layout/LayoutRoomThumbnailView.tsx
+++ b/src/common/layout/LayoutRoomThumbnailView.tsx
@@ -30,7 +30,7 @@ export const LayoutRoomThumbnailView: FC<LayoutRoomThumbnailViewProps> = props =
 
     return (
         <Base shrink={ shrink } overflow={ overflow } classNames={ getClassNames } { ...rest }>
-            { getImageUrl && <img alt="" src={ getImageUrl } /> }
+            { getImageUrl && <img alt="" src={ `${ getImageUrl }?${ Date.now() }` } /> }
             { children }
         </Base>
     );

From 3f106dfe1ff4119326d4624818a7190c895fa5f7 Mon Sep 17 00:00:00 2001
From: ObjectRetros <dennisobject@gmail.com>
Date: Thu, 18 May 2023 21:38:31 +0200
Subject: [PATCH 069/134] =?UTF-8?q?=F0=9F=90=9B=20Fix=20wrongly=20position?=
 =?UTF-8?q?ed=20items=20when=20having=20more=20than=201=20row=20of=20items?=
 =?UTF-8?q?=20but=20less=20than=20enough=20items=20to=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/inventory/InventoryView.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index 7f7955788..5ae9c7fe9 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -17,7 +17,7 @@
         min-height: $inventory-height + 290px !important;
 
         .trading-inventory {
-            height: 200px;
+            max-height: 200px;
         }
     }
 

From e9a1eb9c14095fd5d5871019f103e127e75d1946 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Thu, 18 May 2023 21:59:59 +0200
Subject: [PATCH 070/134] Friend messages - Fixed design input and resize

---
 src/components/friends/FriendsView.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/friends/FriendsView.scss b/src/components/friends/FriendsView.scss
index 525d6e9fb..b10e4779e 100644
--- a/src/components/friends/FriendsView.scss
+++ b/src/components/friends/FriendsView.scss
@@ -223,7 +223,6 @@
 .nitro-friends-messenger {
     width: $messenger-width;
     height: $messenger-height;
-    resize: none;
     font-size: 10px;
 
 
@@ -269,9 +268,10 @@
         background: transparent;
         height: 27px;
         position: absolute;
-        width: 270px;
+        width: calc(100% - 16px);
         bottom: 14px;
         outline: 0px;
+        padding-right: 76px;
     }
 
     .thread-message {

From f1acb9092393dcaad0c17cf17a6f9a2b572f3d3a Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 20 May 2023 19:10:26 +0200
Subject: [PATCH 071/134] Hall Of Fame - Design retouching

---
 .../flash/hotelview/halloffame/sheet.png      | Bin 0 -> 501 bytes
 src/assets/styles/icons.scss                  |   6 +++++
 .../hall-of-fame-item/HallOfFameItemView.tsx  |  18 +++++++-------
 .../hall-of-fame/HallOfFameWidgetView.scss    |  23 +++---------------
 .../hall-of-fame/HallOfFameWidgetView.tsx     |   4 +--
 5 files changed, 20 insertions(+), 31 deletions(-)
 create mode 100644 src/assets/flash/hotelview/halloffame/sheet.png

diff --git a/src/assets/flash/hotelview/halloffame/sheet.png b/src/assets/flash/hotelview/halloffame/sheet.png
new file mode 100644
index 0000000000000000000000000000000000000000..51c8874605d01d9a6c04638f6c27e8a1323444d6
GIT binary patch
literal 501
zcmV<R0Sf+!P)<h;3K|Lk000e1NJLTq000mG000aK1^@s6Yv(<I00001b5ch_0Itp)
z=>Px#1ZP1_K>z@;j|==^1poj532;bRa{vGi!vFvd!vV){sAK>D0g6dPK~y+Tt&zPi
z1VI?aAG06ahr7)QL2x8gN-jaAQfL%<y~aNv5h{s7t)QY-5si<6goKDleB^Rmh{JL0
z?(MR-ce^)sC)xYRMa3_Z$-M78?=v&+;15uDs$<JvkRpD{^BjsrN9zp2mE|)FG0aWx
z|7yV8XP08==xc?XR$*B-LXjX$(}o}r#LpkGvV04U$*ZA@Yh&n+5_I&o;Nw-rM_Pkb
zDB>xRM&jxf--?dsM-%ZIwZ?$X%nu_RCOAEMfJkhlQ!0{)PZ+uh!Ff)k$p?-j*jT-D
z^>u`mRp4It<^B!LEk2~4H0XK(lGMQV6eY)UXU7>9yVMw{84V9f1;)1ppN|L66BvfY
zy5h!J)x^mmGhqFzd;%Sx=!Z>pgu?ak2Sq5diPp9NM3F;2Z?kxJ>)q9sn(rCV$*BRz
zij2MO6#M}o+7m*sQGl7Vog1mpv;q!x$|rlc0Ua9cLVITfo9h>)+~9}=LMZ#suPle_
r%TI5w3NOL_-Jw$8<vePN{{i3!0~VNt2*l9m00000NkvXXu0mjfw{6@&

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index e07ce6520..3cc48604a 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -886,6 +886,12 @@
         height: 18px;
     }
 
+    &.icon-sheet {
+        background-image: url('@/assets/flash/hotelview/halloffame/sheet.png');
+        width: 16px;
+        height: 12px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
index b4237f516..54e889fc6 100644
--- a/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
+++ b/src/components/hotel-view/views/widgets/hall-of-fame-item/HallOfFameItemView.tsx
@@ -1,25 +1,25 @@
 import { HallOfFameEntryData } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
-import { LocalizeFormattedNumber, LocalizeText } from '../../../../../api';
-import { LayoutAvatarImageView, UserProfileIconView } from '../../../../../common';
+import { GetUserProfile, LocalizeFormattedNumber, LocalizeText } from '../../../../../api';
+import { Base, LayoutAvatarImageView } from '../../../../../common';
 
 export interface HallOfFameItemViewProps
 {
     data: HallOfFameEntryData;
-    level: number;
+    goalCode: string;
 }
 
 export const HallOfFameItemView: FC<HallOfFameItemViewProps> = props =>
 {
-    const { data = null, level = 0 } = props;
+    const { data = null, goalCode = null } = props;
 
     return (
         <div className="hof-user-container">
-            <div className="hof-tooltip">
-                <div className="hof-header">
-                    { level }. { data.userName } <UserProfileIconView userId={ data.userId } />
-                </div>
-                <div className="small text-center text-white">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ LocalizeFormattedNumber(data.currentScore).toString() ]) }</div>
+            <div className="hof-tooltip px-2">
+                <Base className="icon icon-sheet" />
+                <b className="text-black cursor-pointer px-2" onClick={ () => GetUserProfile(data.userId) }>{ data.userName }</b>
+                <div className="small text-black text-muted fw-bold">{ LocalizeText('landing.view.competition.hof.points', [ 'points' ], [ LocalizeFormattedNumber(data.currentScore).toString() ]) } points</div>
+                <div className="small text-black text-muted">{ LocalizeText(`landing.view.competition.hof.${ goalCode }.rankdesc.leader`) }</div>
             </div>
             <LayoutAvatarImageView figure={ data.figure } direction={ 2 } />
         </div>
diff --git a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
index 29a5ef7f1..05b072b47 100644
--- a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
+++ b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.scss
@@ -1,7 +1,4 @@
 .hall-of-fame {
-    background-color: rgba($black,.3);
-    border-radius: $border-radius;
-    justify-content: center;
 
     .hof-user-container {
         display:inline-flex;
@@ -17,10 +14,10 @@
         .hof-tooltip {
             position: absolute;
             display: none;
-            width: 125px;
+            width: 136px;
             max-width: 125px;
             padding: 2px;
-            background-color: $gable-green;
+            background-color: $white;
             border: 2px solid rgba($white, 0.5);
             border-radius: $border-radius;
             font-size: $font-size-sm;
@@ -29,20 +26,6 @@
             left: -15px;
             bottom: calc(100% - 10px);
 
-            .hof-header {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 5px;
-                background-color: $william;
-                color: $white;
-                min-width: 117px;
-                height: 25px;
-                max-height: 25px;
-                font-size: 16px;
-                margin-bottom: 2px;
-            }
-
             &:after {
                 content: '';
                 position: absolute;
@@ -53,7 +36,7 @@
                 height: 10px;
                 width: 10px;
                 transform: rotate(45deg);
-                border-color: transparent rgba($white, 0.5) rgba($white, 0.5) transparent;
+                border-color: $white;
                 border-style: solid;
                 border-width: 5px;
             }
diff --git a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
index 582ce0414..9dfb57e22 100644
--- a/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
+++ b/src/components/hotel-view/views/widgets/hall-of-fame/HallOfFameWidgetView.tsx
@@ -26,10 +26,10 @@ export const HallOfFameWidgetView: FC<HallOfFameWidgetViewProps> = props =>
     if(!data) return null;
 
     return (
-        <div className="hall-of-fame d-flex">
+        <div className="hall-of-fame d-flex px-2">
             { data.hof && (data.hof.length > 0) && data.hof.map((entry, index) =>
             {
-                return <HallOfFameItemView key={ index } data={ entry } level={ (index + 1) } />;
+                return <HallOfFameItemView key={ index } data={ entry } goalCode={ data.goalCode } />;
             }
             ) }
         </div>

From 140a5ea01e1d8677f73ba363e2b26d53478f6aa2 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 20 May 2023 19:18:35 +0200
Subject: [PATCH 072/134] Highscore - Fix text footer

---
 .../room/widgets/furniture/FurnitureHighScoreView.tsx           | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx b/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
index d5bb5b033..34459ed8e 100644
--- a/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureHighScoreView.tsx
@@ -53,7 +53,7 @@ export const FurnitureHighScoreView: FC<{}> = props =>
                                         }) }
                                     </Column>
                                     <Text center className="score-footer mb-1">
-                                        { LocalizeText('high.score.footer.congratulations') }
+                                        { LocalizeText('high.score.display.congratulations.footer') }
                                     </Text>
                                 </ContextMenuListView>
                             </Column>

From 2ae725a4722cc35ccc21241cb1e2e38cd0e84167 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 20 May 2023 19:22:39 +0200
Subject: [PATCH 073/134] Wardobe - Fixed text title by @Habbobba

---
 src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
index 4fa2b66fc..43199b2f3 100644
--- a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
@@ -106,7 +106,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
         <div>
             <div className="d-flex flex-column align-items-center">
                 <span className="saved-outfits-title">
-                    { LocalizeText('wardrobe.saved.outfits.title') }
+                    { LocalizeText('avatareditor.wardrobe.title') }
                 </span>
                 <span className="mt-2">
                     { !hcDisabled && getClubLevel() > 0 && (

From 7593410b1fa172c3859921097f99f1b81909c8c4 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 20 May 2023 19:35:07 +0200
Subject: [PATCH 074/134] Catalogue - Design `choose furni` by @Habbobba

---
 src/components/catalog/CatalogView.scss                     | 6 ++++++
 .../views/page/layout/CatalogLayoutBadgeDisplayView.tsx     | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index e45c29c5f..37daa87b3 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -66,6 +66,12 @@
         left: 10px;
     }
 
+    .selectproduct-title {
+		position: absolute;
+		font-size: 11px;
+		color: #62615f;
+	}
+
     .item-picker {
         max-height: 150px;
         min-height: 150px;
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
index 1c9787285..03d69dd74 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
@@ -44,7 +44,7 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutProps> = props =>
                     <Column overflow="auto">
                         <CatalogItemGridWidgetView shrink />
                     </Column>
-                    <Text>
+                    <Text className="selectproduct-title bottom-5">
                         { LocalizeText('catalog_selectproduct') }
                     </Text>
                 </Column>

From 9394ae67a2e7a00b6db7a5b07f222aa66f368094 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 20 May 2023 21:15:32 +0200
Subject: [PATCH 075/134] New room - Retouching design and functionality

---
 .../room-creator/tiles_room_selected.png      | Bin 0 -> 193 bytes
 src/assets/styles/icons.scss                  |  12 ++++++++
 .../views/NavigatorRoomCreatorView.tsx        |  27 +++++++++++-------
 3 files changed, 28 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/flash/navigator/room-creator/tiles_room_selected.png

diff --git a/src/assets/flash/navigator/room-creator/tiles_room_selected.png b/src/assets/flash/navigator/room-creator/tiles_room_selected.png
new file mode 100644
index 0000000000000000000000000000000000000000..81c92cf3c199d3d63d8f8d1d69a70332cb9e8b7c
GIT binary patch
literal 193
zcmeAS@N?(olHy`uVBq!ia0vp^LO{&L!3-q(rv94@q!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>vjzBsxc>kDAIJ<nbh!>lF_i@Q1^;Jwy4}DF$m1;Vh%9Dc;5!V$jK}j=
zqyPoYJY5_^B*H_x82K0!IGDcvpU=l=diPO7$Csm4%x@;mSfElY-%{^<FVdup@vqL+
gsgH76wT_-)*E_^enIv)bHqZnHPgg&ebxsLQ09r6Rv;Y7A

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 3cc48604a..376f140b3 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -892,6 +892,18 @@
         height: 12px;
     }
 
+    &.icon-tiles {
+        background-image: url('@/assets/flash/navigator/room-creator/tiles.png');
+        width: 16px;
+        height: 12px;
+    }
+
+    &.icon-tiles_room_selected {
+        background-image: url('@/assets/flash/navigator/room-creator/tiles_room_selected.png');
+        width: 16px;
+        height: 12px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/components/navigator/views/NavigatorRoomCreatorView.tsx b/src/components/navigator/views/NavigatorRoomCreatorView.tsx
index 2a9f915c1..ee9f06905 100644
--- a/src/components/navigator/views/NavigatorRoomCreatorView.tsx
+++ b/src/components/navigator/views/NavigatorRoomCreatorView.tsx
@@ -2,7 +2,7 @@
 import { CreateFlatMessageComposer, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { CreateLinkEvent, GetClubMemberLevel, GetConfiguration, IRoomModel, LocalizeText, SendMessageComposer } from '../../../api';
-import { AutoGrid, Button, Column, Flex, Grid, LayoutCurrencyIcon, LayoutGridItem, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
+import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutInputErrorView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { RoomCreatorGridItem } from '../../../common/layout/RoomCreatorGridItem';
 import { useNavigator } from '../../../hooks';
 
@@ -24,15 +24,19 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
 
     const selectModel = (model: IRoomModel, index: number) =>
     {
-        if(!model || (model.clubLevel > GetClubMemberLevel())) return;
+        if(!model) return;
+
+        if (GetClubMemberLevel() < model.clubLevel) return CreateLinkEvent('habboUI/open/hccenter');
 
         setSelectedModelName(roomModels[index].name);
-    };
+    }
 
     const createRoom = () =>
     {
+        if (!name || (name.length < 3)) return;
+
         SendMessageComposer(new CreateFlatMessageComposer(name, description, 'model_' + selectedModelName, Number(category), Number(visitorsCount), tradesSetting));
-    };
+    }
 
     useEffect(() =>
     {
@@ -64,7 +68,7 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
     }, []);
 
     return (
-        <NitroCardView className="nitro-room-creator" theme="primary">
+        <NitroCardView className="nitro-room-creator no-resize" theme="primary">
             <NitroCardHeaderView headerText={ LocalizeText('navigator.createroom.title') } onCloseClick={ event => CreateLinkEvent('navigator/close-creator') } />
             <NitroCardContentView>
                 <Column overflow="hidden">
@@ -72,7 +76,8 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                         <Column size={ 5 } gap={ 1 } overflow="auto" className="px-2 py-1">
                             <Column gap={ 1 }>
                                 <Text gfbold>{ LocalizeText('navigator.createroom.roomnameinfo') }</Text>
-                                <input type="text" className="room-creator-form" maxLength={ 60 } onChange={ event => setName(event.target.value) } placeholder={ LocalizeText('navigator.createroom.roomnameinfo') } />
+                                <input type="text" className={ `room-creator-form ${ (!name || (name.length < 3)) ? 'input-error' : '' }` } maxLength={ 60 } onChange={ event => setName(event.target.value) } placeholder={ LocalizeText('navigator.createroom.roomnameinfo') } />
+                                { (!name || (name.length < 3)) && <LayoutInputErrorView text={ LocalizeText('navigator.createroom.nameerr') } /> }
                             </Column>
                             <Column grow gap={ 1 }>
                                 <Text gfbold>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
@@ -105,21 +110,21 @@ export const NavigatorRoomCreatorView: FC<{}> = props =>
                                 </select>
                             </Column>
                             <Flex gap={ 2 }>
-                                <Button fullWidth className="volter-bold-button" onClick={ createRoom } disabled={ (!name || (name.length < 3)) }>{ LocalizeText('navigator.createroom.create') }</Button>
+                                <Button fullWidth className="volter-bold-button" onClick={ createRoom }>{ LocalizeText('navigator.createroom.create') }</Button>
                                 <Button fullWidth className="volter-button" onClick={ event => CreateLinkEvent('navigator/close-creator') } >{ LocalizeText('cancel') }</Button>
                             </Flex>
                         </Column>
                         <Column size={ 7 } gap={ 1 } overflow="auto">
-                            <AutoGrid className="room-creator-grid" columnCount={ 2 } columnMinWidth={ 100 } columnMinHeight={ 50 } overflow="unset">
+                            <AutoGrid className="room-creator-grid" gap={ 1 } columnCount={ 2 } columnMinWidth={ 100 } columnMinHeight={ 50 } overflow="unset">
                                 {
                                     roomModels.map((model, index )=>
                                     {
-                                        return (<RoomCreatorGridItem fullHeight key={ model.name } onClick={ () => selectModel(model, index) } itemActive={ (selectedModelName === model.name) } overflow="unset" gap={ 0 } className="py-3" disabled={ (GetClubMemberLevel() < model.clubLevel) }>
+                                        return (<RoomCreatorGridItem fullHeight key={ model.name } onClick={ () => selectModel(model, index) } itemActive={ (selectedModelName === model.name) } overflow="unset" gap={ 0 } className="py-3">
                                             <Flex fullHeight center overflow="hidden">
                                                 <img alt="" src={ getRoomModelImage(model.name) } />
                                             </Flex>
-                                            <Text position="absolute" className="bottom-1 start-1">{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</Text>
-                                            { !hcDisabled && model.clubLevel > HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon position="absolute" className="top-1 end-1" type="hc" /> }
+                                            <Text position="absolute" className="bottom-1 start-1"><Base className={ `icon ${ selectedModelName === model.name ? 'icon-tiles_room_selected' : 'icon-tiles' }` } /> { model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</Text>
+                                            { !hcDisabled && model.clubLevel > HabboClubLevelEnum.NO_CLUB && <Base className="icon icon-hc_mini position-absolute top-1 end-1" /> }
                                             { selectedModelName && <i className="active-arrow"/> }
                                         </RoomCreatorGridItem>);
                                     })

From 5c700793bda7d523e642a3b36f91910b1a0f2e4b Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Sat, 20 May 2023 21:26:44 +0200
Subject: [PATCH 076/134] ClubLevel - Changed number to enum

---
 .../avatar-editor/views/AvatarEditorWardrobeView.tsx        | 6 +++---
 .../views/figure-set/AvatarEditorFigureSetView.tsx          | 3 ++-
 .../views/palette-set/AvatarEditorPaletteSetView.tsx        | 3 ++-
 .../catalog/views/page/common/CatalogGridOfferView.tsx      | 4 ++--
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
index 43199b2f3..dbb76627a 100644
--- a/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorWardrobeView.tsx
@@ -1,7 +1,7 @@
-import { IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
+import { HabboClubLevelEnum, IAvatarFigureContainer, SaveWardrobeOutfitMessageComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useMemo } from 'react';
 import { MdKeyboardArrowLeft, MdKeyboardArrowRight } from 'react-icons/all';
-import { CreateLinkEvent, FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, LocalizeText, SendMessageComposer } from '../../../api';
+import { CreateLinkEvent, FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../api';
 import { Flex, LayoutAvatarImageView, LayoutCurrencyIcon } from '../../../common';
 export interface AvatarEditorWardrobeViewProps
 {
@@ -30,7 +30,7 @@ export const AvatarEditorWardrobeView: FC<AvatarEditorWardrobeViewProps> = props
     {
         if(!figureData || (index >= savedFigures.length) || (index < 0)) return;
 
-        if (GetClubMemberLevel() < getClubLevel()) return CreateLinkEvent('habboUI/open/hccenter');
+        if (GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent('habboUI/open/hccenter');
 
         const newFigures = [ ...savedFigures ];
 
diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index 9c48b80ee..a0b57d1a7 100644
--- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -1,3 +1,4 @@
+import { HabboClubLevelEnum } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from 'react';
 import { AvatarEditorGridPartItem, CategoryData, CreateLinkEvent, GetSessionDataManager, IAvatarEditorCategoryModel } from '../../../../api';
 import { AutoGrid } from '../../../../common';
@@ -21,7 +22,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
 
         if(index === -1) return;
 
-        if (item.isHC && GetSessionDataManager().clubLevel === 0) return CreateLinkEvent('habboUI/open/hccenter');
+        if (item.isHC && GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent('habboUI/open/hccenter');
 
         model.selectPart(category.name, index);
 
diff --git a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
index 82bc633b1..3fe0ff9de 100644
--- a/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
+++ b/src/components/avatar-editor/views/palette-set/AvatarEditorPaletteSetView.tsx
@@ -1,3 +1,4 @@
+import { HabboClubLevelEnum } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useRef } from 'react';
 import { AvatarEditorGridColorItem, CategoryData, CreateLinkEvent, GetSessionDataManager, IAvatarEditorCategoryModel } from '../../../../api';
 import { AutoGrid } from '../../../../common';
@@ -22,7 +23,7 @@ export const AvatarEditorPaletteSetView: FC<AvatarEditorPaletteSetViewProps> = p
 
         if(index === -1) return;
         
-        if (item.isHC && GetSessionDataManager().clubLevel === 0) return CreateLinkEvent('habboUI/open/hccenter');
+        if (item.isHC && GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent('habboUI/open/hccenter');
 
         model.selectColor(category.name, index, paletteIndex);
     }, [ model, category, paletteSet, paletteIndex ]);
diff --git a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
index dfd8cda96..d0169e6f2 100644
--- a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
+++ b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
@@ -1,4 +1,4 @@
-import { MouseEventType } from '@nitrots/nitro-renderer';
+import { HabboClubLevelEnum, MouseEventType } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent, useMemo, useState } from 'react';
 import { IPurchasableOffer, Offer, ProductTypeEnum } from '../../../../../api';
 import { Base, Column, Flex, LayoutAvatarImageView, LayoutGridItemProps } from '../../../../../common';
@@ -55,7 +55,7 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
     return (
         <Column className="catalog-grid-active cursor-pointer" gap={ 0 } itemActive={ itemActive } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent }>
             <LayoutCatalogGridItem itemImage={ iconUrl } itemCount={ ((offer.pricingModel === Offer.PRICING_MODEL_MULTI) ? product.productCount : 1) } itemUniqueSoldout={ (product.uniqueLimitedItemSeriesSize && !product.uniqueLimitedItemsLeft) } itemUniqueNumber={ product.uniqueLimitedItemSeriesSize } { ...rest }>
-                { (offer.clubLevel !== 0) && <Base className="icon icon-hc_mini position-absolute top-0 end-1" /> }
+                { (offer.clubLevel !== HabboClubLevelEnum.NO_CLUB) && <Base className="icon icon-hc_mini position-absolute top-0 end-1" /> }
                 { (offer.product.productType === ProductTypeEnum.ROBOT) &&
                 <LayoutAvatarImageView figure={ offer.product.extraParam } headOnly={ true } direction={ 3 } /> }
             </LayoutCatalogGridItem>

From abd90bb8fbe88dfb634d11436e737f5ed67df9a4 Mon Sep 17 00:00:00 2001
From: Gizmo <77913129+Habbobba@users.noreply.github.com>
Date: Mon, 22 May 2023 15:10:26 -0400
Subject: [PATCH 077/134] Update renderer-config.json.example - Pet list
 update.

Small update:

Added official Habbo missing pets -
Removed custom pets -

To help people that have the Official Habbo list of pets from having to keep re-updating this file, that should be the burden of the custom pet hotel owners.

This list is directly in sync with the official MS-db and the official Habbo external variables pet.
---
 public/renderer-config.json.example | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/public/renderer-config.json.example b/public/renderer-config.json.example
index dbcbcc8c6..854a4ddf9 100644
--- a/public/renderer-config.json.example
+++ b/public/renderer-config.json.example
@@ -88,7 +88,7 @@
         "bearbaby",
         "terrierbaby",
         "gnome",
-        "gnome",
+        "leprechaun",
         "kittenbaby",
         "puppybaby",
         "pigletbaby",
@@ -97,9 +97,7 @@
         "pterosaur",
         "velociraptor",
         "cow",
-        "LeetPen",
-        "bbwibb",
-        "elephants"
+        "dragondog"
     ],
     "preload.assets.urls": [
         "${asset.url}/bundled/generic/avatar_additions.nitro",

From 0035efd1d7d8cf60e81554f9b5d37b71e4f1c6ae Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Tue, 23 May 2023 20:11:21 +0200
Subject: [PATCH 078/134] Friend list - Improvements design & functionalitie

---
 src/api/friends/FriendListTabs.ts             |   6 ++
 src/api/friends/index.ts                      |   1 +
 .../friendlist/friend_active_search_bg.png    | Bin 0 -> 210 bytes
 .../flash/friendlist/friend_message.png       | Bin 0 -> 193 bytes
 .../friendlist_arrow_black_down.png           | Bin 0 -> 151 bytes
 .../friendlist_arrow_black_right.png          | Bin 0 -> 160 bytes
 .../friendlist_arrow_white_down.png           | Bin 0 -> 148 bytes
 .../friendlist_arrow_white_right.png          | Bin 0 -> 160 bytes
 src/assets/flash/friendlist/search_friend.png | Bin 0 -> 256 bytes
 .../friendlist/search_friend_clicked.png      | Bin 0 -> 270 bytes
 .../flash/friendlist/search_friend_hover.png  | Bin 0 -> 252 bytes
 src/assets/styles/icons.scss                  |  30 ++++++++
 src/common/card/NitroCardView.scss            |  38 +++++++++-
 .../NitroCardAccordionSetInnerView.tsx        |  48 ++++++-------
 .../accordion/NitroCardAccordionSetView.tsx   |  16 +++--
 src/components/friends/FriendsView.scss       |  40 ++++++++++-
 .../FriendsListRemoveConfirmationView.tsx     |  16 +++--
 .../FriendsListRoomInviteView.tsx             |  20 +++---
 .../friends-list/FriendsListSearchView.tsx    |  55 ++++++++-------
 .../views/friends-list/FriendsListView.tsx    |  65 ++++++++++--------
 .../FriendsListGroupItemView.tsx              |  59 +++++++++-------
 .../FriendsListGroupView.tsx                  |   5 +-
 .../FriendsListRequestItemView.tsx            |  20 ++++--
 .../FriendsListRequestView.tsx                |  40 +++++++----
 .../FriendsMessengerThreadGroup.tsx           |   7 +-
 src/components/toolbar/ToolbarView.scss       |   4 ++
 src/components/toolbar/ToolbarView.tsx        |   4 +-
 27 files changed, 322 insertions(+), 152 deletions(-)
 create mode 100644 src/api/friends/FriendListTabs.ts
 create mode 100644 src/assets/flash/friendlist/friend_active_search_bg.png
 create mode 100644 src/assets/flash/friendlist/friend_message.png
 create mode 100644 src/assets/flash/friendlist/friendlist_arrow_black_down.png
 create mode 100644 src/assets/flash/friendlist/friendlist_arrow_black_right.png
 create mode 100644 src/assets/flash/friendlist/friendlist_arrow_white_down.png
 create mode 100644 src/assets/flash/friendlist/friendlist_arrow_white_right.png
 create mode 100644 src/assets/flash/friendlist/search_friend.png
 create mode 100644 src/assets/flash/friendlist/search_friend_clicked.png
 create mode 100644 src/assets/flash/friendlist/search_friend_hover.png

diff --git a/src/api/friends/FriendListTabs.ts b/src/api/friends/FriendListTabs.ts
new file mode 100644
index 000000000..bf391f725
--- /dev/null
+++ b/src/api/friends/FriendListTabs.ts
@@ -0,0 +1,6 @@
+export class FriendListTabs
+{
+    public static readonly YOUR_FRIENDS: string = 'friendlist.tip.tab.1';
+    public static readonly REQUESTS: string = 'friendlist.tip.tab.2';
+    public static readonly SEARCH_HABBOS: string = 'friendlist.tip.tab.3';
+}
diff --git a/src/api/friends/index.ts b/src/api/friends/index.ts
index ce1ed60a0..9779d5c9f 100644
--- a/src/api/friends/index.ts
+++ b/src/api/friends/index.ts
@@ -1,3 +1,4 @@
+export * from './FriendListTabs';
 export * from './GetGroupChatData';
 export * from './IGroupChatData';
 export * from './MessengerFriend';
diff --git a/src/assets/flash/friendlist/friend_active_search_bg.png b/src/assets/flash/friendlist/friend_active_search_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..c5f6dc54389d07d3093f2887a86a85d6264222eb
GIT binary patch
literal 210
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G|>0G|+7PfyS0=H|%ANT9%xIo@p`btOT5!T<mNXK>J3`31=5EbxddW?<ku
z48n}Z^H-z*1?@du978mMxAuE-F(~jbum1Ue{@F|2Uml!fTsYaOlQmFnajB$xjkQ)r
wYaIJ44!!Gh^$+f5KfO&LeE$4m6$=LTWo?Y+Dvu900gYntboFyt=akR{0PAo*?*IS*

literal 0
HcmV?d00001

diff --git a/src/assets/flash/friendlist/friend_message.png b/src/assets/flash/friendlist/friend_message.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae6f930d5820bcf5912c63987914cd947f1e57b2
GIT binary patch
literal 193
zcmeAS@N?(olHy`uVBq!ia0vp^0zk~i!3HGN^yhQ|DaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(eheoCO|{#Xt>*L74G){)!Z!V3?<iV~B<S+lhDi7z8-nPXFF-?DbRLaQZpc
zn>Fg(P6totwQkn>AgGzEu*_!d@x)dYzgOA&9$Yln>Rl*y>gl|c2SqCTJ*+<_9x7tn
k{edg1-fRkAvV;PI!b1t+`O|o(0c~LLboFyt=akR{0L}|O7ytkO

literal 0
HcmV?d00001

diff --git a/src/assets/flash/friendlist/friendlist_arrow_black_down.png b/src/assets/flash/friendlist/friendlist_arrow_black_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..04cd1ed0c88f6d930f2094e5bd04a3bbb572b727
GIT binary patch
literal 151
zcmeAS@N?(olHy`uVBq!ia0vp^oIuRV!3HF!2OrA@QjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjKtUZ(7sn8Z@Z^+)gdhAzDi}QkIUWR`;0R`6
sx*^i^bfRb@!zQN^OOb{&C1z%Z4`*1JSGS2Y0`)O?y85}Sb4q9e03_HaJOBUy

literal 0
HcmV?d00001

diff --git a/src/assets/flash/friendlist/friendlist_arrow_black_right.png b/src/assets/flash/friendlist/friendlist_arrow_black_right.png
new file mode 100644
index 0000000000000000000000000000000000000000..e25eb99eb508d18e815d7902d3dc7dc46598e2a3
GIT binary patch
literal 160
zcmeAS@N?(olHy`uVBq!ia0vp^tU%1k!3HFMt$j8RNHG=%xjQkeJ16rJ$YDu$^mSxl
z*x1kgClRc&z$3Dlfr0NZ2s0kfUy%Y-Wa{bS7$Om#%+T~-fl1Q9F;j$dh62X{)d{SQ
z3_1rnk`<UsrYaoh(Brt&xkyNdfjJ}1$bf<2_)j)&C*A^8paBe?u6{1-oD!M<kSZtK

literal 0
HcmV?d00001

diff --git a/src/assets/flash/friendlist/friendlist_arrow_white_down.png b/src/assets/flash/friendlist/friendlist_arrow_white_down.png
new file mode 100644
index 0000000000000000000000000000000000000000..6202307e22c87d86679559fd16a67c0a60033133
GIT binary patch
literal 148
zcmeAS@N?(olHy`uVBq!ia0vp^oIuRV!3HF!2OrA@QjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`ISV`@iy0XB4ude`@%$AjKtWAU7sn8Z@Z>-IEIcd>${h!mPY`5Tkh6v>
p@l%1TLc<z?n+!Y+nM%ye3^zrD|E~W$ZwXKngQu&X%Q~loCIF!ICm;X-

literal 0
HcmV?d00001

diff --git a/src/assets/flash/friendlist/friendlist_arrow_white_right.png b/src/assets/flash/friendlist/friendlist_arrow_white_right.png
new file mode 100644
index 0000000000000000000000000000000000000000..65148fee2e376c33ae8842595e02c5a8d08bc8ff
GIT binary patch
literal 160
zcmeAS@N?(olHy`uVBq!ia0vp^tU%1k!3HFMt$j8RNHG=%xjQkeJ16rJ$YDu$^mSxl
z*x1kgClRc&z$3Dlfr0NZ2s0kfUy%Y-Wa{bS7$Om#+T+N@V8C(s)xZDG&vJC_lF?e?
z8tdNe{6<OT%OaJO#M+5HsxypLnxc(dKm4B}XLwSA>7UV3kXsl$UHx3vIVCg!0OLe3
A3;+NC

literal 0
HcmV?d00001

diff --git a/src/assets/flash/friendlist/search_friend.png b/src/assets/flash/friendlist/search_friend.png
new file mode 100644
index 0000000000000000000000000000000000000000..d1fd3caf030e51839bce6b9128cf9233e6e1fa5a
GIT binary patch
literal 256
zcmeAS@N?(olHy`uVBq!ia0vp^Za^%`!3-qNyvleFq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>^91;WxB}__|Noyka|X!R*Z+3`kYXtb@(TtEGB{|h`~u{27I;J!GcfQS
z24TkI`72U@g1Me9jv*HQXRjCv9Z=wK37qo#zGXwo0ikJ!?sJ@#_7zN0voM??Hb;T^
z)U6_A`H6bR=DjRlduGO^Vxi(?^NJ0BuJ~%OIQY#}p~X$lqE{w7$<aPo(s=oNf>%<`
t+iCWO7Zf(vvI(_i9_BRqsGs(aVbNAr_k^{KsX&VvJYD@<);T3K0RXi!Typ>b

literal 0
HcmV?d00001

diff --git a/src/assets/flash/friendlist/search_friend_clicked.png b/src/assets/flash/friendlist/search_friend_clicked.png
new file mode 100644
index 0000000000000000000000000000000000000000..0198c2b25f7ee7af4a0f9af91296ab46f28a32fc
GIT binary patch
literal 270
zcmeAS@N?(olHy`uVBq!ia0vp^Za^%`!3-qNyvleFq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>^9T5ZxB}_m;NTfEX8iyEAIKK7`!XF!v6ck+1p`I?GyLAh7Yr2OEbxdd
zW?<ku48n}Z^H-z*1<O5M978Pp&t7rlYcSw&3G~|ef2OR2*xg4Z7xxDUUz)zkQ}@u5
zgce;(g@BmcME6~f?wvXJ%JloQglh+<Fts;FMqKydDt(%8?c|eb1&<T1?LIR#f3nlE
zznW{7D;csH@THj+Ye-#Ydz27noVDK2;_t7Y^$vM+jta^j*~xjfQ=eZH=mZ8&S3j3^
HP6<r_{WfFM

literal 0
HcmV?d00001

diff --git a/src/assets/flash/friendlist/search_friend_hover.png b/src/assets/flash/friendlist/search_friend_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..861669c8f72ff502bbed847df58c763a3a740d9c
GIT binary patch
literal 252
zcmeAS@N?(olHy`uVBq!ia0vp^Za^%`!3-qNyvleFq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>^91;WxB}__|Noyka|X!R*Z+3`kYXtb@(TtEGB{|h`~u{27I;J!GcfQS
z24TkI`72U@f|;H!jv*HQXRjCv9Z=wK37qo#zNLckt|{CiKV4fy)^7+1Svpsexy$lj
z<k`L}Vb}b8qGkvcKbzF-!=tKhToLeh=EsNYd`|3OkQO#5+td2S&{biVkGG>*-4(C!
onEWXd@1E&hcs>7-ZrERjeex_bgs)sQ2U^PD>FVdQ&MBb@0L9x`lK=n!

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 376f140b3..f9e9afb08 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -904,6 +904,36 @@
         height: 12px;
     }
 
+    &.icon-friendlist_arrow_black_down {
+        background-image: url('@/assets/flash/friendlist/friendlist_arrow_black_down.png');
+        width: 16px;
+        height: 12px;
+    }
+
+    &.icon-friendlist_arrow_black_right {
+        background-image: url('@/assets/flash/friendlist/friendlist_arrow_black_right.png');
+        width: 16px;
+        height: 12px;
+    }
+
+    &.icon-friendlist_arrow_white_down {
+        background-image: url('@/assets/flash/friendlist/friendlist_arrow_white_down.png');
+        width: 16px;
+        height: 12px;
+    }
+
+    &.icon-friendlist_arrow_white_right {
+        background-image: url('@/assets/flash/friendlist/friendlist_arrow_white_right.png');
+        width: 16px;
+        height: 12px;
+    }
+
+    &.icon-friend_message {
+        background-image: url('@/assets/flash/friendlist/friend_message.png');
+        width: 16px;
+        height: 14px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss
index c8686089e..f3512d415 100644
--- a/src/common/card/NitroCardView.scss
+++ b/src/common/card/NitroCardView.scss
@@ -268,7 +268,7 @@ $nitro-card-tabs-height: 35px;
             border: 1px solid #000;
             -webkit-box-shadow: inset 0px 1px 0px 0px #555555;
             box-shadow: inset 0px 1px 0px 0px #555555;
-            background-size: 1px 18px;
+            background-size: 1px 21px;
             margin-top: -1px;
         }
 
@@ -279,7 +279,7 @@ $nitro-card-tabs-height: 35px;
             border: 1px solid #000;
             -webkit-box-shadow: inset 0px 1px 0px 0px #dc8530;
             box-shadow: inset 0px 1px 0px 0px #dc8530;
-            background-size: 1px 18px;
+            background-size: 1px 21px;
         }
 
         .friend-headers {
@@ -289,17 +289,25 @@ $nitro-card-tabs-height: 35px;
             border-bottom: none;
             -webkit-box-shadow: inset 0px 1px 0px 0px #59bfff;
             box-shadow: inset 0px 1px 0px 0px #59bfff;
-            background-size: 1px 18px;
+            background-size: 1px 21px;
         }
 
         .nitro-card-accordion-set-content {
             background: #fff;
         }
 
+        .nitro-card-accordion-set-content-gray {
+            background: #B6B6B6;
+        }
+
         .friend-tab:nth-of-type(odd) {
             background: #eeeeee;
         }
 
+        .friend-tab-search:nth-of-type(odd) {
+            background: #9F9F9F;
+        }
+
         .friend-active {
             background: #3cb8ff !important;
         }
@@ -313,6 +321,15 @@ $nitro-card-tabs-height: 35px;
             border-image-slice: 7 7 7 7 fill;
             border-image-width: 7px 7px 7px 7px;
             border-image-repeat: repeat repeat;
+            max-height: 100%;
+            width: 100%
+        }
+
+        .friend-active_search-tab {
+            border-image-source: url("@/assets/flash/friendlist/friend_active_search_bg.png");
+            border-image-slice: 7 7 7 7 fill;
+            border-image-width: 7px 7px 7px 7px;
+            border-image-repeat: repeat repeat;
             max-height: 30px;
             width: 100%
         }
@@ -379,6 +396,21 @@ $nitro-card-tabs-height: 35px;
             }
         }
 
+        .search-friend-icon {
+            background-image: url('@/assets/flash/friendlist/search_friend.png');
+            background-repeat: no-repeat;
+            width: 100%;
+            height: 22px;
+
+            &:hover {
+                background-image: url('@/assets/flash/friendlist/search_friend_hover.png');
+            }
+
+            &:active {
+                background-image: url('@/assets/flash/friendlist/search_friend_clicked.png');
+            }
+        }
+
         .nitro-card-header {
             min-height: 25px;
             max-height: 25px;
diff --git a/src/common/card/accordion/NitroCardAccordionSetInnerView.tsx b/src/common/card/accordion/NitroCardAccordionSetInnerView.tsx
index 4bc4b4e97..2af7c2404 100644
--- a/src/common/card/accordion/NitroCardAccordionSetInnerView.tsx
+++ b/src/common/card/accordion/NitroCardAccordionSetInnerView.tsx
@@ -1,7 +1,6 @@
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Column, ColumnProps, Flex, Text } from '../..';
+import { Base, Column, ColumnProps, Flex, Text } from '../..';
 import { useNitroCardAccordionContext } from './NitroCardAccordionContext';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
 
 export interface NitroCardAccordionSetInnerViewProps extends ColumnProps
 {
@@ -25,7 +24,7 @@ export const NitroCardAccordionSetInnerView: FC<NitroCardAccordionSetInnerViewPr
 
     const getClassNames = useMemo(() =>
     {
-        const newClassNames = [ 'nitro-card-accordion-set' ];
+        const newClassNames = [ '' ];
 
         if(isOpen) newClassNames.push('active');
 
@@ -44,40 +43,43 @@ export const NitroCardAccordionSetInnerView: FC<NitroCardAccordionSetInnerViewPr
         const closeFunction = close;
 
         setClosers(prevValue =>
-            {
-                const newClosers = [ ...prevValue ];
+        {
+            const newClosers = [ ...prevValue ];
 
-                newClosers.push(closeFunction);
+            newClosers.push(closeFunction);
 
-                return newClosers;
-            });
+            return newClosers;
+        });
 
         return () =>
         {
             setClosers(prevValue =>
-                {
-                    const newClosers = [ ...prevValue ];
+            {
+                const newClosers = [ ...prevValue ];
 
-                    const index = newClosers.indexOf(closeFunction);
+                const index = newClosers.indexOf(closeFunction);
 
-                    if(index >= 0) newClosers.splice(index, 1);
+                if(index >= 0) newClosers.splice(index, 1);
 
-                    return newClosers;
-                });
+                return newClosers;
+            });
         }
     }, [ close, setClosers ]);
 
     return (
         <Column classNames={ getClassNames } gap={ gap } { ...rest }>
-            <Flex pointer justifyContent="between" className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
-                <Text>{ headerText }</Text>
-                { isOpen && <FaChevronUp className="fa-icon" /> }
-                { !isOpen && <FaChevronDown className="fa-icon" /> }
-            </Flex>
-            { isOpen &&
-                <Column fullHeight overflow="auto" gap={ 0 } className="nitro-card-accordion-set-content p-1">
-                    { children }
-                </Column> }
+            <Column fullHeight gap={ 0 }>
+                <Flex pointer gap={ 0 } onClick={ onClick }>
+                    <Text gfbold variant="black" className=" px-2 py-1">{ headerText }</Text>
+                    { isOpen && <Base className="mt-1 icon icon-friendlist_arrow_black_down" /> }
+                    { !isOpen && <Base className="mt-1 icon icon-friendlist_arrow_black_right" /> }
+                </Flex>
+                { isOpen &&
+                    <Column fullHeight overflow="hidden" gap={ 0 } className="nitro-card-accordion-set-content cursor-pointer">
+                        { children }
+                    </Column>
+                }
+            </Column>
         </Column>
     );
 }
diff --git a/src/common/card/accordion/NitroCardAccordionSetView.tsx b/src/common/card/accordion/NitroCardAccordionSetView.tsx
index 7f4f7d304..042ae0054 100644
--- a/src/common/card/accordion/NitroCardAccordionSetView.tsx
+++ b/src/common/card/accordion/NitroCardAccordionSetView.tsx
@@ -1,17 +1,19 @@
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { FaCaretDown, FaCaretUp } from 'react-icons/fa';
-import { Column, ColumnProps, Flex, Text } from '../..';
+import { Base, Column, ColumnProps, Flex } from '../..';
+import { FriendListTabs, LocalizeText } from '../../../api';
 import { useNitroCardAccordionContext } from './NitroCardAccordionContext';
 
 export interface NitroCardAccordionSetViewProps extends ColumnProps
 {
     headerText: string;
     isExpanded?: boolean;
+    friendlistTab?: FriendListTabs;
+    setShowHoverText?: (text: string) => void;
 }
 
 export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = props =>
 {
-    const { headerText = '', isExpanded = false, gap = 0, classNames = [], children = null, ...rest } = props;
+    const { headerText = '', isExpanded = false, friendlistTab = null, setShowHoverText = null, gap = 0, classNames = [], children = null, ...rest } = props;
     const [ isOpen, setIsOpen ] = useState(false);
     const { setClosers = null, closeAll = null } = useNitroCardAccordionContext();
 
@@ -70,13 +72,13 @@ export const NitroCardAccordionSetView: FC<NitroCardAccordionSetViewProps> = pro
 
     return (
         <Column classNames={ getClassNames } gap={ gap } { ...rest }>
-            <Flex pointer justifyContent="between" className="nitro-card-accordion-set-header px-2 py-1" onClick={ onClick }>
+            <Flex pointer className="nitro-card-accordion-set-header px-2 py-1" onMouseEnter={ () => setShowHoverText(LocalizeText(`${ friendlistTab }`)) } onMouseLeave={ () => setShowHoverText('') } onClick={ onClick }>
                 <div className="friend-header-text d-inline">{ headerText }</div>
-                { isOpen && <FaCaretUp className="fa-icon" /> }
-                { !isOpen && <FaCaretDown className="fa-icon" /> }
+                { isOpen && <Base className={ `icon icon-friendlist_${ (friendlistTab === FriendListTabs.YOUR_FRIENDS) ? 'arrow_black' : 'arrow_white' }_down` } /> }
+                { !isOpen && <Base className={ `icon icon-friendlist_${ (friendlistTab === FriendListTabs.YOUR_FRIENDS) ? 'arrow_black' : 'arrow_white' }_right` } /> }
             </Flex>
             { isOpen &&
-                <Column fullHeight overflow="auto" gap={ 0 } className="nitro-card-accordion-set-content p-1">
+                <Column fullHeight overflow="auto" gap={ 0 } className={ `nitro-card-accordion-set-content${ (friendlistTab === FriendListTabs.SEARCH_HABBOS) ? '-gray' : '' } p-1` }>
                     { children }
                 </Column> }
         </Column>
diff --git a/src/components/friends/FriendsView.scss b/src/components/friends/FriendsView.scss
index b10e4779e..54e2fb674 100644
--- a/src/components/friends/FriendsView.scss
+++ b/src/components/friends/FriendsView.scss
@@ -9,6 +9,7 @@
     &.icon-heart {
         width: 16px; height: 14px;
         background-position: -5px -67px;
+        margin-bottom: -3px;
     }
 
     &.icon-new-message {
@@ -18,7 +19,8 @@
 
     &.icon-none {
         width: 16px; height: 14px;
-        background-position: -31px -67px;
+        background-position: 7px 0px;
+        margin-bottom: -3px;
     }
 
     &.icon-profile {
@@ -39,6 +41,7 @@
     &.icon-smile {
         width: 16px; height: 14px;
         background-position: -57px -67px;
+        margin-bottom: -3px;
     }
 
     &.icon-warning {
@@ -105,14 +108,45 @@
         border: 0;
         border-bottom: 1px solid rgba($black, 0.2);
     }
+
+    .friendlist-bottom {
+        margin-left: 106px;
+        overflow: hidden;
+    }
+
+    .avatar {
+        width: 29px;
+        height: 0px;
+        margin-top: 16px;
+        margin-left: -15px;
+        position: relative;
+    }
+
+    .selected-user {
+        background-color: #3CB8FF !important;
+    }
+}
+
+.select-relation {
+    width: 27px;
+    border: 1px solid #999;
+    border-radius: 4px;
+    padding: 1px;
+    background-color: #eee;
 }
 
 .nitro-friends-room-invite {
-    width: $friends-list-width;
+    width: 211px;
+    height: 175px;
+
+    .textarea-invite {
+        height: 69px;
+    }
 }
 
 .nitro-friends-remove-confirmation {
-    width: $friends-list-width;
+    width: 160px;
+    height: 200px;
 }
 
 .friend-bar {
diff --git a/src/components/friends/views/friends-list/FriendsListRemoveConfirmationView.tsx b/src/components/friends/views/friends-list/FriendsListRemoveConfirmationView.tsx
index 1ac383559..e23cdb712 100644
--- a/src/components/friends/views/friends-list/FriendsListRemoveConfirmationView.tsx
+++ b/src/components/friends/views/friends-list/FriendsListRemoveConfirmationView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 
 interface FriendsRemoveConfirmationViewProps
 {
@@ -15,13 +15,15 @@ export const FriendsRemoveConfirmationView: FC<FriendsRemoveConfirmationViewProp
     const { selectedFriendsIds = null, removeFriendsText = null, removeSelectedFriends = null, onCloseClick = null } = props;
 
     return (
-        <NitroCardView className="nitro-friends-remove-confirmation" theme="primary">
-            <NitroCardHeaderView headerText={ LocalizeText('friendlist.removefriendconfirm.title') } onCloseClick={ onCloseClick } />
+        <NitroCardView className="nitro-friends-remove-confirmation no-resize" theme="friendlist">
+            <NitroCardHeaderView hideButtonClose headerText={ LocalizeText('friendlist.removefriendconfirm.title') } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
-                <div>{ removeFriendsText }</div>
-                <Flex gap={ 1 }>
-                    <Button fullWidth variant="danger" disabled={ (selectedFriendsIds.length === 0) } onClick={ removeSelectedFriends }>{ LocalizeText('generic.ok') }</Button>
-                    <Button fullWidth onClick={ onCloseClick }>{ LocalizeText('generic.cancel') }</Button>
+                <Column fullHeight overflow="hidden" className="px-2 py-2 bg-white rounded">
+                    <Text>{ removeFriendsText }</Text>
+                </Column>
+                <Flex justifyContent="between" alignItems="center">
+                    <Button className="volter-bold-button" disabled={ (selectedFriendsIds.length === 0) } onClick={ removeSelectedFriends }>{ LocalizeText('generic.ok') }</Button>
+                    <Button className="volter-button" onClick={ onCloseClick }>{ LocalizeText('generic.cancel') }</Button>
                 </Flex>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/friends/views/friends-list/FriendsListRoomInviteView.tsx b/src/components/friends/views/friends-list/FriendsListRoomInviteView.tsx
index 048d7016c..9bc3decff 100644
--- a/src/components/friends/views/friends-list/FriendsListRoomInviteView.tsx
+++ b/src/components/friends/views/friends-list/FriendsListRoomInviteView.tsx
@@ -1,6 +1,6 @@
 import { FC, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { Button, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 
 interface FriendsRoomInviteViewProps
 {
@@ -15,15 +15,17 @@ export const FriendsRoomInviteView: FC<FriendsRoomInviteViewProps> = props =>
     const [ roomInviteMessage, setRoomInviteMessage ] = useState<string>('');
 
     return (
-        <NitroCardView className="nitro-friends-room-invite" uniqueKey="nitro-friends-room-invite" theme="friendlist">
-            <NitroCardHeaderView headerText={ LocalizeText('friendlist.invite.title') } onCloseClick={ onCloseClick } />
+        <NitroCardView className="nitro-friends-room-invite no-resize" uniqueKey="nitro-friends-room-invite" theme="friendlist">
+            <NitroCardHeaderView hideButtonClose headerText={ LocalizeText('friendlist.invite.title') } onCloseClick={ onCloseClick } />
             <NitroCardContentView className="text-black">
-                { LocalizeText('friendlist.invite.summary', [ 'count' ], [ selectedFriendsIds.length.toString() ]) }
-                <textarea className="form-control" value={ roomInviteMessage } maxLength={ 255 } onChange={ event => setRoomInviteMessage(event.target.value) }></textarea>
-                <Text center className="bg-muted rounded p-1">{ LocalizeText('friendlist.invite.note') }</Text>
-                <Flex gap={ 1 }>
-                    <Button fullWidth variant="success" disabled={ ((roomInviteMessage.length === 0) || (selectedFriendsIds.length === 0)) } onClick={ () => sendRoomInvite(roomInviteMessage) }>{ LocalizeText('friendlist.invite.send') }</Button>
-                    <Button fullWidth onClick={ onCloseClick }>{ LocalizeText('generic.cancel') }</Button>
+                <Column overflow="hidden" className="px-2 py-2 bg-white rounded" justifyContent="center" alignItems="center">
+                    { LocalizeText('friendlist.invite.summary', [ 'count' ], [ selectedFriendsIds.length.toString() ]) }
+                    <textarea className="w-100 remove-outline border border-dark textarea-invite" value={ roomInviteMessage } maxLength={ 255 } onChange={ event => setRoomInviteMessage(event.target.value) }></textarea>
+                    <Text noWrap className="offset-8">{ LocalizeText('friendlist.invite.note') }</Text>
+                </Column>
+                <Flex justifyContent="between" alignItems="center">
+                    <Button className="volter-bold-button" disabled={ ((roomInviteMessage.length === 0) || (selectedFriendsIds.length === 0)) } onClick={ () => sendRoomInvite(roomInviteMessage) }>{ LocalizeText('friendlist.invite.send') }</Button>
+                    <Button className="volter-button" onClick={ onCloseClick }>{ LocalizeText('generic.cancel') }</Button>
                 </Flex>
             </NitroCardContentView>
         </NitroCardView>
diff --git a/src/components/friends/views/friends-list/FriendsListSearchView.tsx b/src/components/friends/views/friends-list/FriendsListSearchView.tsx
index 4912555f9..6694d616c 100644
--- a/src/components/friends/views/friends-list/FriendsListSearchView.tsx
+++ b/src/components/friends/views/friends-list/FriendsListSearchView.tsx
@@ -1,17 +1,18 @@
 import { HabboSearchComposer, HabboSearchResultData, HabboSearchResultEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { LocalizeText, OpenMessengerChat, SendMessageComposer } from '../../../../api';
+import { FriendListTabs, GetUserProfile, LocalizeText, OpenMessengerChat, SendMessageComposer } from '../../../../api';
 import { Base, Column, Flex, NitroCardAccordionItemView, NitroCardAccordionSetView, NitroCardAccordionSetViewProps, Text, UserProfileIconView } from '../../../../common';
 import { useFriends, useMessageEvent } from '../../../../hooks';
 
 interface FriendsSearchViewProps extends NitroCardAccordionSetViewProps
 {
-
+    isFromSearchToolbar?: boolean;
+    setShowHoverText?: (text: string) => void;
 }
 
 export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
 {
-    const { ...rest } = props;
+    const { isFromSearchToolbar = false, setShowHoverText = null, ...rest } = props;
     const [ searchValue, setSearchValue ] = useState('');
     const [ friendResults, setFriendResults ] = useState<HabboSearchResultData[]>(null);
     const [ otherResults, setOtherResults ] = useState<HabboSearchResultData[]>(null);
@@ -40,32 +41,27 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
     }, [ searchValue ]);
 
     return (
-        <NitroCardAccordionSetView { ...rest }>
-            <Column className="h-100">
-                <Column>
-                    <input type="text" className="w-100 friend-search" placeholder={ LocalizeText('generic.search') } value={ searchValue } maxLength={ 50 } onChange={ event => setSearchValue(event.target.value) } />
-                </Column>
-                <Column>
+        <NitroCardAccordionSetView friendlistTab={ FriendListTabs.SEARCH_HABBOS } isExpanded={ isFromSearchToolbar ? true : false } setShowHoverText={ (e) => setShowHoverText(e) } { ...rest }>
+            <Column className="w-100 h-100 position-relative">
+                <Column gap={ 0 }>
                     { friendResults &&
                     <>
                         { (friendResults.length === 0) &&
-                            <Text gfbold className="px-2 py-1">{ LocalizeText('friendlist.search.nofriendsfound') }</Text> }
+                            <Text gfbold variant="black" className=" px-2 py-1">{ LocalizeText('friendlist.search.nofriendsfound') }</Text> }
                         { (friendResults.length > 0) &&
                             <Column gap={ 0 }>
-                                <Text gfbold className="px-2 py-1">{ LocalizeText('friendlist.search.friendscaption', [ 'cnt' ], [ friendResults.length.toString() ]) }</Text>
-                                <hr className="mx-2 mt-0 mb-1 text-black" />
+                                <Text gfbold variant="black" className=" px-2 py-1">{ LocalizeText('friendlist.search.friendscaption', [ 'cnt' ], [ friendResults.length.toString() ]) }</Text>
                                 <Column gap={ 0 }>
                                     { friendResults.map(result =>
                                     {
                                         return (
-                                            <NitroCardAccordionItemView key={ result.avatarId } justifyContent="between" className="px-2 py-1">
-                                                <Flex alignItems="center" gap={ 1 }>
+                                            <NitroCardAccordionItemView key={ result.avatarId } justifyContent="between" className="friend-tab-search px-2 py-1 cursor-pointer" onClick={ () => GetUserProfile(result.avatarId) }>
+                                                <Flex alignItems="center" gap={ 1 } style={ { marginLeft: '10px' } }>
                                                     <UserProfileIconView userId={ result.avatarId } />
-                                                    <div>{ result.avatarName }</div>
+                                                    <Text variant="black">{ result.avatarName }</Text>
                                                 </Flex>
                                                 <Flex alignItems="center" gap={ 1 }>
-                                                    { result.isAvatarOnline &&
-                                                    <Base className="nitro-friends-spritesheet icon-chat cursor-pointer" onClick={ event => OpenMessengerChat(result.avatarId) } title={ LocalizeText('friendlist.tip.im') } /> }
+                                                    <Base className="nitro-friends-spritesheet icon icon-friend_message" onClick={ event => OpenMessengerChat(result.avatarId) } onMouseEnter={ () => setShowHoverText(LocalizeText('friendlist.tip.im')) } onMouseLeave={ () => setShowHoverText('') } />
                                                 </Flex>
                                             </NitroCardAccordionItemView>
                                         )
@@ -76,23 +72,22 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
                     { otherResults &&
                     <>
                         { (otherResults.length === 0) &&
-                            <Text gfbold className="px-2 py-1">{ LocalizeText('friendlist.search.noothersfound') }</Text> }
+                            <Text gfbold variant="black" className="px-2 py-1">{ LocalizeText('friendlist.search.noothersfound') }</Text> }
                         { (otherResults.length > 0) &&
                             <Column gap={ 0 }>
-                                <Text gfbold className="px-2 py-1">{ LocalizeText('friendlist.search.otherscaption', [ 'cnt' ], [ otherResults.length.toString() ]) }</Text>
-                                <hr className="mx-2 mt-0 mb-1 text-black" />
+                                <Text gfbold variant="black" className="px-2 py-1">{ LocalizeText('friendlist.search.otherscaption', [ 'cnt' ], [ otherResults.length.toString() ]) }</Text>
                                 <Column gap={ 0 }>
                                     { otherResults.map(result =>
                                     {
                                         return (
-                                            <NitroCardAccordionItemView key={ result.avatarId } justifyContent="between" className="px-2 py-1">
-                                                <Flex alignItems="center" gap={ 1 }>
+                                            <NitroCardAccordionItemView key={ result.avatarId } justifyContent="between" className="friend-tab-search px-2 py-1 cursor-pointer" onClick={ () => GetUserProfile(result.avatarId) }>
+                                                <Flex alignItems="center" gap={ 1 } style={ { marginLeft: '10px' } }>
                                                     <UserProfileIconView userId={ result.avatarId } />
-                                                    <div>{ result.avatarName }</div>
+                                                    <Text variant="black">{ result.avatarName }</Text>
                                                 </Flex>
                                                 <Flex alignItems="center" gap={ 1 }>
                                                     { canRequestFriend(result.avatarId) &&
-                                                    <Base className="nitro-friends-spritesheet icon-add cursor-pointer" onClick={ event => requestFriend(result.avatarId, result.avatarName) } title={ LocalizeText('friendlist.tip.addfriend') } /> }
+                                                    <Base className="nitro-friends-spritesheet icon-add cursor-pointer" onClick={ event => requestFriend(result.avatarId, result.avatarName) } onMouseEnter={ () => setShowHoverText(LocalizeText('friendlist.tip.addfriend')) } onMouseLeave={ () => setShowHoverText('') } /> }
                                                 </Flex>
                                             </NitroCardAccordionItemView>
                                         )
@@ -101,6 +96,18 @@ export const FriendsSearchView: FC<FriendsSearchViewProps> = props =>
                             </Column> }
                     </> }
                 </Column>
+                <Column className="position-absolute bottom-0 w-100">
+                    <Flex gap={ 1 } className="friend-active_search-tab p-1" justifyContent="center" alignItems="center">
+                        <Flex className="w-100">
+                            <input type="text" className="w-100 friend-search" value={ searchValue } maxLength={ 50 } onChange={ event => setSearchValue(event.target.value) } onMouseEnter={ () => setShowHoverText(LocalizeText('friendlist.tip.searchstr')) } onMouseLeave={ () => setShowHoverText('') } />
+                        </Flex>
+                        <Flex className="">
+                            <Base className="search-friend-icon" onClick={ () => setSearchValue(searchValue) } onMouseEnter={ () => setShowHoverText(LocalizeText('friendlist.tip.search')) } onMouseLeave={ () => setShowHoverText('') }>
+                                <Text center variant="black" className="mt-1 ms-2 px-3">{ LocalizeText('generic.search') }</Text>
+                            </Base>
+                        </Flex>
+                    </Flex>
+                </Column>
             </Column>
         </NitroCardAccordionSetView>
     );
diff --git a/src/components/friends/views/friends-list/FriendsListView.tsx b/src/components/friends/views/friends-list/FriendsListView.tsx
index c396a7b78..82b5d682c 100644
--- a/src/components/friends/views/friends-list/FriendsListView.tsx
+++ b/src/components/friends/views/friends-list/FriendsListView.tsx
@@ -1,14 +1,14 @@
 import { ILinkEventTracker, RemoveFriendComposer, SendRoomInviteComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { AddEventLinkTracker, LocalizeText, MessengerFriend, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api';
-import { Flex, NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { AddEventLinkTracker, FriendListTabs, LocalizeText, MessengerFriend, RemoveLinkEventTracker, SendMessageComposer } from '../../../../api';
+import { Column, Flex, NitroCardAccordionSetView, NitroCardAccordionView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { NitroCardAccordionSetInnerView } from '../../../../common/card/accordion/NitroCardAccordionSetInnerView';
 import { useFriends } from '../../../../hooks';
-import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView';
-import { FriendsListRequestView } from './friends-list-request/FriendsListRequestView';
 import { FriendsRemoveConfirmationView } from './FriendsListRemoveConfirmationView';
 import { FriendsRoomInviteView } from './FriendsListRoomInviteView';
 import { FriendsSearchView } from './FriendsListSearchView';
+import { FriendsListGroupView } from './friends-list-group/FriendsListGroupView';
+import { FriendsListRequestView } from './friends-list-request/FriendsListRequestView';
 
 export const FriendsListView: FC<{}> = props =>
 {
@@ -16,6 +16,8 @@ export const FriendsListView: FC<{}> = props =>
     const [ selectedFriendsIds, setSelectedFriendsIds ] = useState<number[]>([]);
     const [ showRoomInvite, setShowRoomInvite ] = useState<boolean>(false);
     const [ showRemoveFriendsConfirmation, setShowRemoveFriendsConfirmation ] = useState<boolean>(false);
+    const [ showHoverText, setShowHoverText ] = useState<string>(null);
+    const [ isFromSearchToolbar, setIsFromSearchToolbar ] = useState<boolean>(false);
     const { onlineFriends = [], offlineFriends = [], requests = [], requestFriend = null } = useFriends();
 
     const removeFriendsText = useMemo(() =>
@@ -97,16 +99,24 @@ export const FriendsListView: FC<{}> = props =>
                 {
                     case 'show':
                         setIsVisible(true);
+                        setIsFromSearchToolbar(false);
                         return;
                     case 'hide':
                         setIsVisible(false);
+                        setIsFromSearchToolbar(false);
                         return;
                     case 'toggle':
                         setIsVisible(prevValue => !prevValue);
+                        setIsFromSearchToolbar(false);
+                        return;
+                    case 'search':
+                        setIsVisible(true);
+                        setIsFromSearchToolbar(true);
                         return;
                     case 'request':
                         if(parts.length < 4) return;
-
+                        
+                        setIsFromSearchToolbar(false);
                         requestFriend(parseInt(parts[2]), parts[3]);
                 }
             },
@@ -123,34 +133,33 @@ export const FriendsListView: FC<{}> = props =>
     return (
         <>
             <NitroCardView className="nitro-friends" uniqueKey="nitro-friends" theme="friendlist">
-                <NitroCardHeaderView headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
+                <NitroCardHeaderView hideButtonClose headerText={ LocalizeText('friendlist.friends') } onCloseClick={ event => setIsVisible(false) } />
                 <NitroCardContentView overflow="hidden" gap={ 1 } className="text-black p-0">
                     <NitroCardAccordionView fullHeight overflow="hidden">
-                        <NitroCardAccordionSetView className="friend-headers" headerText={ LocalizeText('friendlist.friends') } isExpanded={ true }>
-                            <NitroCardAccordionSetInnerView headerText={ LocalizeText('friendlist.friends') + ` (${ onlineFriends.length })` } isExpanded={ true }>
-                                <FriendsListGroupView list={ onlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
-                            </NitroCardAccordionSetInnerView>
-                            <NitroCardAccordionSetInnerView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${ offlineFriends.length })` } isExpanded={ true }>
-                                <FriendsListGroupView list={ offlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } />
-                            </NitroCardAccordionSetInnerView>
-                            { selectedFriendsIds && selectedFriendsIds.length === 0 &&
-                        <Flex gap={ 1 } className="friend-active-tab p-1">
-                            <div className="friend-follow-icon" />
-                            <div className="friend-profile-icon" />
-                            <div className="friend-delete-icon" />
-                        </Flex> } 
-                            { selectedFriendsIds && selectedFriendsIds.length > 0 &&
-                        <Flex gap={ 1 } className="friend-active-tab p-1">
-                            <div className="friend-follow-icon active" onClick={ () => setShowRoomInvite(true) } />
-                            <div className="friend-profile-icon active" />
-                            <div className="friend-delete-icon active" onClick={ event => setShowRemoveFriendsConfirmation(true) } />
-                        </Flex> } 
+                        <NitroCardAccordionSetView className="friend-headers" headerText={ LocalizeText('friendlist.friends') } isExpanded={ (!isFromSearchToolbar && requests.length === 0) ? true : false } friendlistTab={ FriendListTabs.YOUR_FRIENDS } setShowHoverText={ (e) => setShowHoverText(e) }>
+                            <Column className="w-100 h-100 position-relative">
+                                <Column overflow="auto" gap={ 0 } style={ { height: 'calc(100% - 40px)' } }>
+                                    <NitroCardAccordionSetInnerView headerText={ LocalizeText('friendlist.friends') + ` (${ onlineFriends.length })` } isExpanded={ true }>
+                                        <FriendsListGroupView list={ onlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } setShowHoverText={ (e) => setShowHoverText(e) } />
+                                    </NitroCardAccordionSetInnerView>
+                                    <NitroCardAccordionSetInnerView headerText={ LocalizeText('friendlist.friends.offlinecaption') + ` (${ offlineFriends.length })` } isExpanded={ true }>
+                                        <FriendsListGroupView list={ offlineFriends } selectedFriendsIds={ selectedFriendsIds } selectFriend={ selectFriend } setShowHoverText={ (e) => setShowHoverText(e) } />
+                                    </NitroCardAccordionSetInnerView>
+                                </Column>
+                                <Column className="position-absolute bottom-0 w-100">
+                                    <Flex gap={ 1 } className="friend-active-tab p-1">
+                                        <div className={ `friend-follow-icon ${ selectedFriendsIds && selectedFriendsIds.length === 0 ? '' : 'active' }` } onClick={ selectedFriendsIds && selectedFriendsIds.length === 0 ? null : () => setShowRoomInvite(true) } onMouseEnter={ selectedFriendsIds && selectedFriendsIds.length === 0 ? null : () => setShowHoverText(LocalizeText('friendlist.tip.invite')) } onMouseLeave={ selectedFriendsIds && selectedFriendsIds.length === 0 ? null : () => setShowHoverText('') } />
+                                        <div className={ `friend-profile-icon ${ selectedFriendsIds && selectedFriendsIds.length === 0 ? '' : 'active' }` } onMouseEnter={ selectedFriendsIds && selectedFriendsIds.length === 0 ? null : () => setShowHoverText(LocalizeText('friendlist.tip.home')) } onMouseLeave={ selectedFriendsIds && selectedFriendsIds.length === 0 ? null : () => setShowHoverText('') } />
+                                        <div className={ `friend-delete-icon ${ selectedFriendsIds && selectedFriendsIds.length === 0 ? '' : 'active' }` } onClick={ selectedFriendsIds && selectedFriendsIds.length === 0 ? null : () => setShowRemoveFriendsConfirmation(true) } onMouseEnter={ selectedFriendsIds && selectedFriendsIds.length === 0 ? null : () => setShowHoverText(LocalizeText('friendlist.tip.remove')) } onMouseLeave={ selectedFriendsIds && selectedFriendsIds.length === 0 ? null : () => setShowHoverText('') } />
+                                    </Flex>
+                                </Column>
+                            </Column>
                         </NitroCardAccordionSetView>
-                        <FriendsListRequestView className="friend-headers" headerText={ LocalizeText('friendlist.tab.friendrequests') + ` (${ requests.length })` } isExpanded={ false } />
-                        <FriendsSearchView className="search-headers" headerText={ LocalizeText('people.search.title') } />
+                        <FriendsListRequestView className="friend-req-headers" headerText={ LocalizeText('friendlist.tab.friendrequests') } isExpanded={ (!isFromSearchToolbar && requests.length > 0) ? true : false } setShowHoverText={ (e) => setShowHoverText(e) } />
+                        <FriendsSearchView className="search-headers" headerText={ LocalizeText('people.search.title') } isFromSearchToolbar={ isFromSearchToolbar } setShowHoverText={ (e) => setShowHoverText(e) } />
                     </NitroCardAccordionView>
                 </NitroCardContentView>
-                <div className="friendlist-bottom p-1"></div>
+                <div className="friendlist-bottom p-1 mt-2">{ showHoverText }</div>
             </NitroCardView>
             { showRoomInvite &&
                 <FriendsRoomInviteView selectedFriendsIds={ selectedFriendsIds } onCloseClick={ () => setShowRoomInvite(false) } sendRoomInvite={ sendRoomInvite } /> }
diff --git a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx
index 9fe77d494..12058cd8d 100644
--- a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx
+++ b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupItemView.tsx
@@ -1,11 +1,19 @@
 import { FC, MouseEvent, useState } from 'react';
 import { LocalizeText, MessengerFriend, OpenMessengerChat } from '../../../../../api';
-import { Base, Flex, NitroCardAccordionItemView, UserProfileIconView } from '../../../../../common';
+import { Base, Column, Flex, LayoutAvatarImageView, NitroCardAccordionItemView, Text, UserProfileIconView } from '../../../../../common';
 import { useFriends } from '../../../../../hooks';
 
-export const FriendsListGroupItemView: FC<{ friend: MessengerFriend, selected: boolean, selectFriend: (userId: number) => void }> = props =>
+interface FriendsListGroupItemViewProps
 {
-    const { friend = null, selected = false, selectFriend = null } = props;
+    friend: MessengerFriend;
+    selected: boolean;
+    selectFriend: (userId: number) => void;
+    setShowHoverText?: (text: string) => void;
+}
+
+export const FriendsListGroupItemView: FC<FriendsListGroupItemViewProps> = props =>
+{
+    const { friend = null, selected = false, selectFriend = null, setShowHoverText = null } = props;
     const [ isRelationshipOpen, setIsRelationshipOpen ] = useState<boolean>(false);
     const { followFriend = null, updateRelationship = null } = useFriends();
 
@@ -41,44 +49,49 @@ export const FriendsListGroupItemView: FC<{ friend: MessengerFriend, selected: b
 
     const getCurrentRelationshipName = () =>
     {
-        if(!friend) return 'none';
+        if(!friend) return null;
 
         switch(friend.relationshipStatus)
         {
             case MessengerFriend.RELATIONSHIP_HEART: return 'heart';
             case MessengerFriend.RELATIONSHIP_SMILE: return 'smile';
             case MessengerFriend.RELATIONSHIP_BOBBA: return 'bobba';
-            default: return 'none';
+            default: return null;
         }
     }
 
     if(!friend) return null;
 
     return (
-        <NitroCardAccordionItemView justifyContent="between" className={ `friend-tab px-2 py-1 ${ selected && 'bg-primary text-white' }` } onClick={ event => selectFriend(friend.id) }>
-            <Flex alignItems="center" gap={ 1 }>
-                <Base onClick={ event => event.stopPropagation() }>
+        <NitroCardAccordionItemView justifyContent="between" className={ `friend-tab px-2 py-1 ${ selected && 'selected-user text-white' }` } onClick={ event => selectFriend(friend.id) }>
+            <Flex alignItems="center" gap={ 0 }>
+                { (friend.id > 0 && friend.online) &&
+                    <Flex center pointer className="avatar">
+                        <LayoutAvatarImageView headOnly figure={ friend.figure } direction={ 2 } scale={ 0.5 } />
+                    </Flex>
+                }
+                <Base style={ { marginLeft: (friend.id < 0 || !friend.online) ? '14px' : '' } } onClick={ event => event.stopPropagation() } onMouseEnter={ () => setShowHoverText(LocalizeText('infostand.profile.link.tooltip')) } onMouseLeave={ () => setShowHoverText('') }>
                     <UserProfileIconView userId={ friend.id } />
                 </Base>
-                <div>{ friend.name }</div>
+                <Text variant="black" className="ms-1">{ friend.name }</Text>
             </Flex>
             <Flex alignItems="center" gap={ 1 }>
-                { !isRelationshipOpen &&
-                    <>
-                        { friend.followingAllowed &&
-                            <Base pointer onClick={ clickFollowFriend } className="nitro-friends-spritesheet icon-follow" title={ LocalizeText('friendlist.tip.follow') } /> }
-                        { friend.online &&
-                            <Base pointer className="nitro-friends-spritesheet icon-chat" onClick={ openMessengerChat } title={ LocalizeText('friendlist.tip.im') } /> }
-                        { (friend.id > 0) &&
-                            <Base className={ `nitro-friends-spritesheet icon-${ getCurrentRelationshipName() } cursor-pointer` } onClick={ openRelationship } title={ LocalizeText('infostand.link.relationship') } /> }
-                    </> }
+                <Flex className={ !friend.followingAllowed ? 'pe-4' : 'pe-1' } onClick={ openRelationship } onMouseEnter={ () => setShowHoverText(LocalizeText('infostand.link.relationship')) } onMouseLeave={ () => setShowHoverText('') }>
+                    { (friend.id > 0) && <Base className={ `nitro-friends-spritesheet icon-${ getCurrentRelationshipName() }` } /> }
+                    { (friend.id > 0) && <Base className="icon icon-friendlist_arrow_black_down" /> }
+                </Flex>
+                { friend.followingAllowed && <Base pointer onClick={ clickFollowFriend } className="nitro-friends-spritesheet icon-follow" onMouseEnter={ () => setShowHoverText(LocalizeText('friendlist.tip.follow')) } onMouseLeave={ () => setShowHoverText('') } /> }
+                <Base pointer className="nitro-friends-spritesheet icon icon-friend_message" onClick={ openMessengerChat } onMouseEnter={ () => setShowHoverText(LocalizeText('friendlist.tip.im')) } onMouseLeave={ () => setShowHoverText('') } />
                 { isRelationshipOpen &&
                     <>
-                        <Base pointer className="nitro-friends-spritesheet icon-heart" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_HEART) } />
-                        <Base pointer className="nitro-friends-spritesheet icon-smile" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_SMILE) } />
-                        <Base pointer className="nitro-friends-spritesheet icon-bobba" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_BOBBA) } />
-                        <Base pointer className="nitro-friends-spritesheet icon-none" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_NONE) } />
-                    </> }
+                        <Column position="absolute" className="select-relation">
+                            <Base pointer className="nitro-friends-spritesheet icon-none" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_NONE) } />
+                            <Base pointer className="nitro-friends-spritesheet icon-heart bg-white w-100" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_HEART) } />
+                            <Base pointer className="nitro-friends-spritesheet icon-smile" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_SMILE) } />
+                            <Base pointer className="nitro-friends-spritesheet icon-bobba bg-white w-100" onClick={ event => clickUpdateRelationship(event, MessengerFriend.RELATIONSHIP_BOBBA) } />
+                        </Column>
+                    </>
+                }
             </Flex>
         </NitroCardAccordionItemView>
     );
diff --git a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx
index c593003a0..ade41e3f9 100644
--- a/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx
+++ b/src/components/friends/views/friends-list/friends-list-group/FriendsListGroupView.tsx
@@ -7,17 +7,18 @@ interface FriendsListGroupViewProps
     list: MessengerFriend[];
     selectedFriendsIds: number[];
     selectFriend: (userId: number) => void;
+    setShowHoverText?: (text: string) => void;
 }
 
 export const FriendsListGroupView: FC<FriendsListGroupViewProps> = props =>
 {
-    const { list = null, selectedFriendsIds = null, selectFriend = null } = props;
+    const { list = null, selectedFriendsIds = null, selectFriend = null, setShowHoverText = null } = props;
 
     if(!list || !list.length) return null;
 
     return (
         <>
-            { list.map((item, index) => <FriendsListGroupItemView key={ index } friend={ item } selected={ selectedFriendsIds && (selectedFriendsIds.indexOf(item.id) >= 0) } selectFriend={ selectFriend } />) }
+            { list.map((item, index) => <FriendsListGroupItemView key={ index } friend={ item } selected={ selectedFriendsIds && (selectedFriendsIds.indexOf(item.id) >= 0) } selectFriend={ selectFriend } setShowHoverText={ (e) => setShowHoverText(e) } />) }
         </>  
     );
 }
diff --git a/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestItemView.tsx b/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestItemView.tsx
index de5d3a3b0..5b495e3b1 100644
--- a/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestItemView.tsx
+++ b/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestItemView.tsx
@@ -1,24 +1,30 @@
 import { FC } from 'react';
-import { MessengerRequest } from '../../../../../api';
+import { LocalizeText, MessengerRequest } from '../../../../../api';
 import { Base, Flex, NitroCardAccordionItemView, UserProfileIconView } from '../../../../../common';
 import { useFriends } from '../../../../../hooks';
 
-export const FriendsListRequestItemView: FC<{ request: MessengerRequest }> = props =>
+interface FriendsListRequestItemViewProps
 {
-    const { request = null } = props;
+    request: MessengerRequest;
+    setShowHoverText?: (text: string) => void;
+}
+
+export const FriendsListRequestItemView: FC<FriendsListRequestItemViewProps> = props =>
+{
+    const { request = null, setShowHoverText = null } = props;
     const { requestResponse = null } = useFriends();
 
     if(!request) return null;
 
     return (
-        <NitroCardAccordionItemView justifyContent="between" className="px-2 py-1">
+        <NitroCardAccordionItemView justifyContent="between" className="px-1 py-1 friend-tab" onMouseEnter={ () => setShowHoverText(LocalizeText('infostand.profile.link.tooltip')) } onMouseLeave={ () => setShowHoverText('') }>
             <Flex alignItems="center" gap={ 1 }>
                 <UserProfileIconView userId={ request.id } />
                 <div>{ request.name }</div>
             </Flex>
-            <Flex alignItems="center" gap={ 1 }>
-                <Base className="nitro-friends-spritesheet icon-accept cursor-pointer" onClick={ event => requestResponse(request.id, true) } />
-                <Base className="nitro-friends-spritesheet icon-deny cursor-pointer" onClick={ event => requestResponse(request.id, false) } />
+            <Flex alignItems="center" gap={ 2 }>
+                <Base className="nitro-friends-spritesheet icon icon-accept-check cursor-pointer" onClick={ event => requestResponse(request.id, true) } onMouseEnter={ () => setShowHoverText(LocalizeText('friendbar.request.accept')) } onMouseLeave={ () => setShowHoverText('') } />
+                <Base className="nitro-friends-spritesheet icon icon-decline-x cursor-pointer" onClick={ event => requestResponse(request.id, false) } onMouseEnter={ () => setShowHoverText(LocalizeText('friendbar.request.decline')) } onMouseLeave={ () => setShowHoverText('') } />
             </Flex>
         </NitroCardAccordionItemView>
     );
diff --git a/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestView.tsx b/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestView.tsx
index 5f6e99184..5921e563a 100644
--- a/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestView.tsx
+++ b/src/components/friends/views/friends-list/friends-list-request/FriendsListRequestView.tsx
@@ -1,27 +1,41 @@
 import { FC } from 'react';
-import { LocalizeText } from '../../../../../api';
-import { Button, Column, Flex, NitroCardAccordionSetView, NitroCardAccordionSetViewProps } from '../../../../../common';
+import { FriendListTabs, LocalizeText } from '../../../../../api';
+import { Base, Column, Flex, NitroCardAccordionSetView, NitroCardAccordionSetViewProps, Text } from '../../../../../common';
 import { useFriends } from '../../../../../hooks';
 import { FriendsListRequestItemView } from './FriendsListRequestItemView';
 
-export const FriendsListRequestView: FC<NitroCardAccordionSetViewProps> = props =>
+interface FriendsListRequestViewProps extends NitroCardAccordionSetViewProps
 {
-    const { children = null, ...rest } = props;
+    setShowHoverText?: (text: string) => void;
+}
+
+export const FriendsListRequestView: FC<FriendsListRequestViewProps> = props =>
+{
+    const { setShowHoverText = null, children = null, ...rest } = props;
     const { requests = [], requestResponse = null } = useFriends();
 
     if(!requests.length) return null;
 
     return (
-        <NitroCardAccordionSetView { ...rest }>
-            <Column fullHeight justifyContent="between" gap={ 1 }>
-                <Column gap={ 0 }>
-                    { requests.map((request, index) => <FriendsListRequestItemView key={ index } request={ request } />) }
+        <NitroCardAccordionSetView friendlistTab={ FriendListTabs.REQUESTS } setShowHoverText={ (e) => setShowHoverText(e) } { ...rest }>
+            <Column fullHeight justifyContent="between" className="position-relative" overflow="hidden">
+                <Column gap={ 0 } overflow="auto">
+                    { requests.map((request, index) => <FriendsListRequestItemView key={ index } request={ request } setShowHoverText={ (e) => setShowHoverText(e) } />) }
+                </Column>
+                <Column className="position-absolute bottom-0 w-100">
+                    <Flex gap={ 1 } className="friend-active-tab" justifyContent="center" alignItems="center">
+                        <Column fullWidth className="px-1 mb-1" gap={ 0 }>
+                            <Flex className="volter-button" gap={ 2 } justifyContent="start" onClick={ () => requestResponse(-1, true) } onMouseEnter={ () => setShowHoverText(LocalizeText('friendlist.requests.acceptall')) } onMouseLeave={ () => setShowHoverText('') }>
+                                <Base className="nitro-friends-spritesheet icon icon-accept-check mt-1 ms-2" />
+                                <Text className="mt-1">{ LocalizeText('friendlist.requests.acceptall') }</Text>
+                            </Flex>
+                            <Flex className="volter-button" gap={ 2 } justifyContent="start" onClick={ () => requestResponse(-1, false) } onMouseEnter={ () => setShowHoverText(LocalizeText('friendlist.requests.dismissall')) } onMouseLeave={ () => setShowHoverText('') }>
+                                <Base className="nitro-friends-spritesheet icon icon-decline-x mt-1 ms-2" />
+                                <Text className="mt-1">{ LocalizeText('friendlist.requests.dismissall') }</Text>
+                            </Flex>
+                        </Column>
+                    </Flex>
                 </Column>
-                <Flex justifyContent="center" className="px-2 py-1">
-                    <Button onClick={ event => requestResponse(-1, false) }>
-                        { LocalizeText('friendlist.requests.dismissall') }
-                    </Button>
-                </Flex>
             </Column>
             { children }
         </NitroCardAccordionSetView>
diff --git a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
index 10796fc86..6752d4ebd 100644
--- a/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
+++ b/src/components/friends/views/messenger/messenger-thread/FriendsMessengerThreadGroup.tsx
@@ -32,10 +32,15 @@ export const FriendsMessengerThreadGroup: FC<{ thread: MessengerThread, group: M
                         <Flex key={ index } fullWidth gap={ 2 } justifyContent="start">
                             <Base className="w-100 text-break">
                                 { (chat.type === MessengerThreadChat.SECURITY_NOTIFICATION) &&
-                                    <Flex gap={ 2 } alignItems="center" className="thread-message mb-2 px-2 py-1 ">
+                                    <Flex gap={ 2 } alignItems="center" className="thread-message mb-1 px-2 py-1">
                                         <Base className="nitro-friends-spritesheet icon-warning flex-shrink-0 px-3" />
                                         <Base>{ chat.message }</Base>
                                     </Flex> }
+                                { (!thread.participant.online) &&
+                                    <Flex gap={ 2 } alignItems="center" className="thread-message mb-2 px-2 py-1 ">
+                                        <Base className="nitro-friends-spritesheet icon-warning flex-shrink-0 px-3" />
+                                        <Base>{ LocalizeText('messenger.notification.persisted_messages') }</Base>
+                                    </Flex> }
                                 { (chat.type === MessengerThreadChat.ROOM_INVITE) &&
                                     <Flex gap={ 2 } alignItems="center" className="bg-light rounded mb-2 px-2 py-1 small text-black">
                                         <Base className="messenger-notification-icon flex-shrink-0" />
diff --git a/src/components/toolbar/ToolbarView.scss b/src/components/toolbar/ToolbarView.scss
index ceee9acae..20abed319 100644
--- a/src/components/toolbar/ToolbarView.scss
+++ b/src/components/toolbar/ToolbarView.scss
@@ -107,6 +107,10 @@
             height: 0px;
         }
     }
+
+    .margin-friends {
+        margin-right: 44px;
+    }
 }
 
 .nitro-toolbar-me {
diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx
index b4d7d3d3d..f8cc9309e 100644
--- a/src/components/toolbar/ToolbarView.tsx
+++ b/src/components/toolbar/ToolbarView.tsx
@@ -101,12 +101,12 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
                     </Flex>
                 </Flex>
                 <Flex alignItems="center" gap={ 2 } className={ rightSideCollapsed ? 'toolbar-right-side' : '' }>
-                    <Flex gap={ 2 } className="pe-5">
+                    <Flex gap={ 2 } className={ ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) ? '' : 'margin-friends' }>
                         <Base pointer className="navigation-item icon icon-friendall" title={ LocalizeText('friend.bar.friends.title') } onClick={ event => CreateLinkEvent('friends/toggle') }>
                             { (requests.length > 0) &&
                                 <LayoutItemCountView count={ requests.length } /> }
                         </Base>
-                        <Base pointer className="navigation-item icon icon-friendsearch" title={ LocalizeText('friendlist.tip.search') } onClick={ event => CreateLinkEvent('friends/toggle') }></Base>
+                        <Base pointer className="navigation-item icon icon-friendsearch" title={ LocalizeText('friendlist.tip.search') } onClick={ event => CreateLinkEvent('friends/search') }></Base>
                         { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) &&
                             <Base pointer className={ `navigation-item icon icon-message ${ (iconState === MessengerIconState.UNREAD) && 'is-unseen' }` } onClick={ event => OpenMessengerChat() } /> }
                     </Flex>

From 607d85b0edf2b3bf5a9c441041baab538f504140 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 09:14:46 +0200
Subject: [PATCH 079/134] AvatarEditorView

---
 .../avatar-editor/AvatarEditorView.tsx        | 679 +++++++++---------
 1 file changed, 353 insertions(+), 326 deletions(-)

diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index f35762f2a..3b304cc70 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@@ -1,326 +1,353 @@
-import { AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, IAvatarFigureContainer, ILinkEventTracker, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { FaDice, FaTrash, FaUndo } from 'react-icons/fa';
-import { AddEventLinkTracker, AvatarEditorAction, AvatarEditorUtilities, BodyModel, FigureData, generateRandomFigure, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, HeadModel, IAvatarEditorCategoryModel, LegModel, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TorsoModel } from '../../api';
-import {
-    Button,
-    ButtonGroup,
-    Column,
-    Flex,
-    Grid,
-    NitroCardContentView,
-    NitroCardHeaderView,
-    NitroCardTabsItemView,
-    NitroCardTabsView,
-    NitroCardView
-} from '../../common';
-import { useMessageEvent } from '../../hooks';
-import { AvatarEditorFigurePreviewView } from './views/AvatarEditorFigurePreviewView';
-import { AvatarEditorModelView } from './views/AvatarEditorModelView';
-import { AvatarEditorWardrobeView } from './views/AvatarEditorWardrobeView';
-
-const DEFAULT_MALE_FIGURE: string = 'hr-100.hd-180-7.ch-215-66.lg-270-79.sh-305-62.ha-1002-70.wa-2007';
-const DEFAULT_FEMALE_FIGURE: string = 'hr-515-33.hd-600-1.ch-635-70.lg-716-66-62.sh-735-68';
-
-export const AvatarEditorView: FC<{}> = props =>
-{
-    const [ isVisible, setIsVisible ] = useState(false);
-    const [ figures, setFigures ] = useState<Map<string, FigureData>>(null);
-    const [ figureData, setFigureData ] = useState<FigureData>(null);
-    const [ categories, setCategories ] = useState<Map<string, IAvatarEditorCategoryModel>>(null);
-    const [ activeCategory, setActiveCategory ] = useState<IAvatarEditorCategoryModel>(null);
-    const [ figureSetIds, setFigureSetIds ] = useState<number[]>([]);
-    const [ boundFurnitureNames, setBoundFurnitureNames ] = useState<string[]>([]);
-    const [ savedFigures, setSavedFigures ] = useState<[ IAvatarFigureContainer, string ][]>([]);
-    const [ isWardrobeVisible, setIsWardrobeVisible ] = useState(false);
-    const [ lastFigure, setLastFigure ] = useState<string>(null);
-    const [ lastGender, setLastGender ] = useState<string>(null);
-    const [ needsReset, setNeedsReset ] = useState(true);
-    const [ isInitalized, setIsInitalized ] = useState(false);
-
-    const maxWardrobeSlots = useMemo(() => GetConfiguration<number>('avatar.wardrobe.max.slots', 10), []);
-
-    useMessageEvent<FigureSetIdsMessageEvent>(FigureSetIdsMessageEvent, event =>
-    {
-        const parser = event.getParser();
-
-        setFigureSetIds(parser.figureSetIds);
-        setBoundFurnitureNames(parser.boundsFurnitureNames);
-    });
-
-    useMessageEvent<UserWardrobePageEvent>(UserWardrobePageEvent, event =>
-    {
-        const parser = event.getParser();
-        const savedFigures: [ IAvatarFigureContainer, string ][] = [];
-
-        let i = 0;
-
-        while(i < maxWardrobeSlots)
-        {
-            savedFigures.push([ null, null ]);
-
-            i++;
-        }
-
-        for(let [ index, [ look, gender ] ] of parser.looks.entries())
-        {
-            const container = GetAvatarRenderManager().createFigureContainer(look);
-
-            savedFigures[(index - 1)] = [ container, gender ];
-        }
-
-        setSavedFigures(savedFigures);
-    });
-
-    const selectCategory = useCallback((name: string) =>
-    {
-        if(!categories) return;
-
-        setActiveCategory(categories.get(name));
-    }, [ categories ]);
-
-    const resetCategories = useCallback(() =>
-    {
-        const categories = new Map();
-
-        categories.set(AvatarEditorFigureCategory.GENERIC, new BodyModel());
-        categories.set(AvatarEditorFigureCategory.HEAD, new HeadModel());
-        categories.set(AvatarEditorFigureCategory.TORSO, new TorsoModel());
-        categories.set(AvatarEditorFigureCategory.LEGS, new LegModel());
-
-        setCategories(categories);
-    }, []);
-
-    const setupFigures = useCallback(() =>
-    {
-        const figures: Map<string, FigureData> = new Map();
-
-        const maleFigure = new FigureData();
-        const femaleFigure = new FigureData();
-
-        maleFigure.loadAvatarData(DEFAULT_MALE_FIGURE, FigureData.MALE);
-        femaleFigure.loadAvatarData(DEFAULT_FEMALE_FIGURE, FigureData.FEMALE);
-
-        figures.set(FigureData.MALE, maleFigure);
-        figures.set(FigureData.FEMALE, femaleFigure);
-
-        setFigures(figures);
-        setFigureData(figures.get(FigureData.MALE));
-    }, []);
-
-    const loadAvatarInEditor = useCallback((figure: string, gender: string, reset: boolean = true) =>
-    {
-        gender = AvatarEditorUtilities.getGender(gender);
-
-        let newFigureData = figureData;
-
-        if(gender !== newFigureData.gender) newFigureData = figures.get(gender);
-
-        if(figure !== newFigureData.getFigureString()) newFigureData.loadAvatarData(figure, gender);
-
-        if(newFigureData !== figureData) setFigureData(newFigureData);
-
-        if(reset)
-        {
-            setLastFigure(figureData.getFigureString());
-            setLastGender(figureData.gender);
-        }
-    }, [ figures, figureData ]);
-
-    const processAction = useCallback((action: string) =>
-    {
-        switch(action)
-        {
-            case AvatarEditorAction.ACTION_CLEAR:
-                loadAvatarInEditor(figureData.getFigureStringWithFace(0, false), figureData.gender, false);
-                resetCategories();
-                return;
-            case AvatarEditorAction.ACTION_RESET:
-                loadAvatarInEditor(lastFigure, lastGender);
-                resetCategories();
-                return;
-            case AvatarEditorAction.ACTION_RANDOMIZE:
-                const figure = generateRandomFigure(figureData, figureData.gender, GetClubMemberLevel(), figureSetIds, [ FigureData.FACE ]);
-
-                loadAvatarInEditor(figure, figureData.gender, false);
-                resetCategories();
-                return;
-            case AvatarEditorAction.ACTION_SAVE:
-                SendMessageComposer(new UserFigureComposer(figureData.gender, figureData.getFigureString()));
-                setIsVisible(false);
-                return;
-        }
-    }, [ figureData, lastFigure, lastGender, figureSetIds, loadAvatarInEditor, resetCategories ])
-
-    const setGender = useCallback((gender: string) =>
-    {
-        gender = AvatarEditorUtilities.getGender(gender);
-
-        setFigureData(figures.get(gender));
-    }, [ figures ]);
-
-    useEffect(() =>
-    {
-        const linkTracker: ILinkEventTracker = {
-            linkReceived: (url: string) =>
-            {
-                const parts = url.split('/');
-
-                if(parts.length < 2) return;
-
-                switch(parts[1])
-                {
-                    case 'show':
-                        setIsVisible(true);
-                        return;
-                    case 'hide':
-                        setIsVisible(false);
-                        return;
-                    case 'toggle':
-                        setIsVisible(prevValue => !prevValue);
-                        return;
-                }
-            },
-            eventUrlPrefix: 'avatar-editor/'
-        };
-
-        AddEventLinkTracker(linkTracker);
-
-        return () => RemoveLinkEventTracker(linkTracker);
-    }, []);
-
-    useEffect(() =>
-    {
-        setSavedFigures(new Array(maxWardrobeSlots));
-    }, [ maxWardrobeSlots ]);
-
-    useEffect(() =>
-    {
-        SendMessageComposer(new GetWardrobeMessageComposer());
-    }, []);
-
-    useEffect(() =>
-    {
-        if(!categories) return;
-
-        selectCategory(AvatarEditorFigureCategory.GENERIC);
-    }, [ categories, selectCategory ]);
-
-    useEffect(() =>
-    {
-        if(!figureData) return;
-
-        AvatarEditorUtilities.CURRENT_FIGURE = figureData;
-
-        resetCategories();
-
-        return () => AvatarEditorUtilities.CURRENT_FIGURE = null;
-    }, [ figureData, resetCategories ]);
-
-    useEffect(() =>
-    {
-        AvatarEditorUtilities.FIGURE_SET_IDS = figureSetIds;
-        AvatarEditorUtilities.BOUND_FURNITURE_NAMES = boundFurnitureNames;
-
-        resetCategories();
-
-        return () =>
-        {
-            AvatarEditorUtilities.FIGURE_SET_IDS = null;
-            AvatarEditorUtilities.BOUND_FURNITURE_NAMES = null;
-        }
-    }, [ figureSetIds, boundFurnitureNames, resetCategories ]);
-
-    useEffect(() =>
-    {
-        if(!isVisible) return;
-
-        if(!figures)
-        {
-            setupFigures();
-
-            setIsInitalized(true);
-
-            return;
-        }
-    }, [ isVisible, figures, setupFigures ]);
-
-    useEffect(() =>
-    {
-        if(!isVisible || !isInitalized || !needsReset) return;
-
-        loadAvatarInEditor(GetSessionDataManager().figure, GetSessionDataManager().gender);
-        setNeedsReset(false);
-    }, [ isVisible, isInitalized, needsReset, loadAvatarInEditor ]);
-
-    useEffect(() =>
-    {
-        if(isVisible) return;
-
-        return () =>
-        {
-            setNeedsReset(true);
-        }
-    }, [ isVisible ]);
-
-    if(!isVisible || !figureData) return null;
-
-    const avatarEditorClasses = `nitro-avatar-editor no-resize ${ isWardrobeVisible ? 'expanded' : '' }`;
-
-    return (
-        <NitroCardView uniqueKey="avatar-editor" className={ avatarEditorClasses }>
-            <NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
-            <NitroCardTabsView className="avatar-editor-tabs">
-                { categories && (categories.size > 0) && Array.from(categories.keys()).map(category =>
-                {
-                    const isActive = (activeCategory && (activeCategory.name === category));
-
-                    return (
-                        <NitroCardTabsItemView key={ category } isActive={ isActive } onClick={ event => selectCategory(category) }>
-                            <div className={ `tab ${ category }` }></div>
-                        </NitroCardTabsItemView>
-                    );
-                }) }
-                <NitroCardTabsItemView onClick={ event => setIsWardrobeVisible(!isWardrobeVisible) }>
-                    <div className="tab-wardrobe"></div>
-                </NitroCardTabsItemView>
-            </NitroCardTabsView>
-            <NitroCardContentView>
-                <Grid>
-                    <Column size={ isWardrobeVisible ? 6 : 8 } overflow="hidden">
-                        { (activeCategory) &&
-                            <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } />
-                        }
-                    </Column>
-                    <Column size={ isWardrobeVisible ? 6 : 4 } overflow="hidden">
-                        <Flex gap={ 2 } className="w-100 h-100">
-                            <Flex column={ true } className="w-100">
-                                <AvatarEditorFigurePreviewView figureData={ figureData } />
-                                <Column grow gap={ 1 }>
-                                    <ButtonGroup className="action-buttons w-100">
-                                        <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
-                                            <FaUndo className="fa-icon" />
-                                        </Button>
-                                        <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
-                                            <FaTrash className="fa-icon" />
-                                        </Button>
-                                        <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
-                                            <FaDice className="fa-icon" />
-                                        </Button>
-                                    </ButtonGroup>
-                                    <Button className="w-10" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
-                                        { LocalizeText('avatareditor.save') }
-                                    </Button>
-                                </Column>
-                            </Flex>
-                            { isWardrobeVisible &&
-                                <Column overflow="hidden" className="w-100">
-                                    <AvatarEditorWardrobeView figureData={ figureData } savedFigures={ savedFigures } setSavedFigures={ setSavedFigures } loadAvatarInEditor={ loadAvatarInEditor } />
-                                </Column> }
-                        </Flex>
-                    </Column>
-                </Grid>
-            </NitroCardContentView>
-        </NitroCardView>
-    );
-}
+import { AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, IAvatarFigureContainer, ILinkEventTracker, SetClothingChangeDataMessageComposer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FaDice, FaTrash, FaUndo } from 'react-icons/fa';
+import { AddEventLinkTracker, AvatarEditorAction, AvatarEditorUtilities, BodyModel, FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, HeadModel, IAvatarEditorCategoryModel, LegModel, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TorsoModel, generateRandomFigure } from '../../api';
+import { Button, ButtonGroup, Column, Grid, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { useMessageEvent } from '../../hooks';
+import { AvatarEditorFigurePreviewView } from './views/AvatarEditorFigurePreviewView';
+import { AvatarEditorModelView } from './views/AvatarEditorModelView';
+import { AvatarEditorWardrobeView } from './views/AvatarEditorWardrobeView';
+
+const DEFAULT_MALE_FIGURE: string = 'hr-100.hd-180-7.ch-215-66.lg-270-79.sh-305-62.ha-1002-70.wa-2007';
+const DEFAULT_FEMALE_FIGURE: string = 'hr-515-33.hd-600-1.ch-635-70.lg-716-66-62.sh-735-68';
+const DEFAULT_MALE_FOOTBALL_GATE: string = 'ch-3109-92-1408.lg-3116-82-1408.sh-3115-1408-1408';
+const DEFAULT_FEMALE_FOOTBALL_GATE: string = 'ch-3112-1408-1408.lg-3116-71-1408.sh-3115-1408-1408';
+
+export const AvatarEditorView: FC<{}> = props =>
+{
+    const [ isVisible, setIsVisible ] = useState(false);
+    const [ figures, setFigures ] = useState<Map<string, FigureData>>(null);
+    const [ figureData, setFigureData ] = useState<FigureData>(null);
+    const [ categories, setCategories ] = useState<Map<string, IAvatarEditorCategoryModel>>(null);
+    const [ activeCategory, setActiveCategory ] = useState<IAvatarEditorCategoryModel>(null);
+    const [ figureSetIds, setFigureSetIds ] = useState<number[]>([]);
+    const [ boundFurnitureNames, setBoundFurnitureNames ] = useState<string[]>([]);
+    const [ savedFigures, setSavedFigures ] = useState<[ IAvatarFigureContainer, string ][]>([]);
+    const [ isWardrobeVisible, setIsWardrobeVisible ] = useState(false);
+    const [ lastFigure, setLastFigure ] = useState<string>(null);
+    const [ lastGender, setLastGender ] = useState<string>(null);
+    const [ needsReset, setNeedsReset ] = useState(true);
+    const [ isInitalized, setIsInitalized ] = useState(false);
+	const [ genderFootballGate, setGenderFootballGate ] = useState<string>(null);
+    const [ objectFootballGate, setObjectFootballGate ] = useState<number>(null);
+    
+
+    const maxWardrobeSlots = useMemo(() => GetConfiguration<number>('avatar.wardrobe.max.slots', 10), []);
+	
+	const onClose = () =>
+    {
+        setGenderFootballGate(null);
+        setObjectFootballGate(null);
+        setIsVisible(false);
+    }
+
+    useMessageEvent<FigureSetIdsMessageEvent>(FigureSetIdsMessageEvent, event =>
+    {
+        const parser = event.getParser();
+
+        setFigureSetIds(parser.figureSetIds);
+        setBoundFurnitureNames(parser.boundsFurnitureNames);
+    });
+
+    useMessageEvent<UserWardrobePageEvent>(UserWardrobePageEvent, event =>
+    {
+        const parser = event.getParser();
+        const savedFigures: [ IAvatarFigureContainer, string ][] = [];
+
+        let i = 0;
+
+        while(i < maxWardrobeSlots)
+        {
+            savedFigures.push([ null, null ]);
+
+            i++;
+        }
+  
+        for(let [ index, [ look, gender ] ] of parser.looks.entries())
+        {
+            const container = GetAvatarRenderManager().createFigureContainer(look);
+
+            savedFigures[(index - 1)] = [ container, gender ];
+        }
+
+        setSavedFigures(savedFigures);
+    });
+
+    const selectCategory = useCallback((name: string) =>
+    {
+        if(!categories) return;
+
+        setActiveCategory(categories.get(name));
+    }, [ categories ]);
+
+    const resetCategories = useCallback(() =>
+    {
+        const categories = new Map();
+
+		if (!genderFootballGate)
+        {
+            categories.set(AvatarEditorFigureCategory.GENERIC, new BodyModel());
+            categories.set(AvatarEditorFigureCategory.HEAD, new HeadModel());
+            categories.set(AvatarEditorFigureCategory.TORSO, new TorsoModel());
+            categories.set(AvatarEditorFigureCategory.LEGS, new LegModel());
+        }
+        else
+        {
+            categories.set(AvatarEditorFigureCategory.TORSO, new TorsoModel());
+            categories.set(AvatarEditorFigureCategory.LEGS, new LegModel());
+        }
+
+        setCategories(categories);
+    }, [ genderFootballGate ]);
+
+    const setupFigures = useCallback(() =>
+    {
+        const figures: Map<string, FigureData> = new Map();
+
+        const maleFigure = new FigureData();
+        const femaleFigure = new FigureData();
+
+        maleFigure.loadAvatarData(DEFAULT_MALE_FIGURE, FigureData.MALE);
+        femaleFigure.loadAvatarData(DEFAULT_FEMALE_FIGURE, FigureData.FEMALE);
+
+        figures.set(FigureData.MALE, maleFigure);
+        figures.set(FigureData.FEMALE, femaleFigure);
+
+        setFigures(figures);
+        setFigureData(figures.get(FigureData.MALE));
+    }, []);
+
+    const loadAvatarInEditor = useCallback((figure: string, gender: string, reset: boolean = true) =>
+    {
+        gender = AvatarEditorUtilities.getGender(gender);
+
+        let newFigureData = figureData;
+
+        if(gender !== newFigureData.gender) newFigureData = figures.get(gender);
+
+        if(figure !== newFigureData.getFigureString()) newFigureData.loadAvatarData(figure, gender);
+
+        if(newFigureData !== figureData) setFigureData(newFigureData);
+
+        if(reset)
+        {
+            setLastFigure(figureData.getFigureString());
+            setLastGender(figureData.gender);
+        }
+    }, [ figures, figureData ]);
+
+    const processAction = useCallback((action: string) =>
+    {
+        switch(action)
+        {
+            case AvatarEditorAction.ACTION_CLEAR:
+                loadAvatarInEditor(figureData.getFigureStringWithFace(0, false), figureData.gender, false);
+                resetCategories();
+                return;
+            case AvatarEditorAction.ACTION_RESET:
+                loadAvatarInEditor(lastFigure, lastGender);
+                resetCategories();
+                return;
+            case AvatarEditorAction.ACTION_RANDOMIZE:
+                const figure = generateRandomFigure(figureData, figureData.gender, GetClubMemberLevel(), figureSetIds, [ FigureData.FACE ]);
+
+                loadAvatarInEditor(figure, figureData.gender, false);
+                resetCategories();
+                return;
+            case AvatarEditorAction.ACTION_SAVE:
+                !genderFootballGate ? SendMessageComposer(new UserFigureComposer(figureData.gender, figureData.getFigureString())) : SendMessageComposer(new SetClothingChangeDataMessageComposer(objectFootballGate, genderFootballGate, figureData.getFigureString()));
+                onClose();
+                return;
+        }
+    }, [ loadAvatarInEditor, figureData, resetCategories, lastFigure, lastGender, figureSetIds, genderFootballGate, objectFootballGate ])
+
+    const setGender = useCallback((gender: string) =>
+    {
+        gender = AvatarEditorUtilities.getGender(gender);
+
+        setFigureData(figures.get(gender));
+    }, [ figures ]);
+
+    useEffect(() =>
+    {
+        const linkTracker: ILinkEventTracker = {
+            linkReceived: (url: string) =>
+            {
+                const parts = url.split('/');
+	
+				setGenderFootballGate(parts[2] ? parts[2] : null);
+                setObjectFootballGate(parts[3] ? Number(parts[3]) : null);									  
+																		  
+
+                if(parts.length < 2) return;
+
+                switch(parts[1])
+                {
+                    case 'show':
+                        setIsVisible(true);
+                        return;
+                    case 'hide':
+                        setIsVisible(false);
+                        return;
+                    case 'toggle':
+                        setIsVisible(prevValue => !prevValue);
+                        return;
+                }
+            },
+            eventUrlPrefix: 'avatar-editor/'
+        };
+
+        AddEventLinkTracker(linkTracker);
+
+        return () => RemoveLinkEventTracker(linkTracker);
+    }, []);
+
+    useEffect(() =>
+    {
+        setSavedFigures(new Array(maxWardrobeSlots));
+    }, [ maxWardrobeSlots ]);
+
+    useEffect(() =>
+    {
+        SendMessageComposer(new GetWardrobeMessageComposer());
+    }, []);
+
+    useEffect(() =>
+    {
+        if(!categories) return;
+
+        selectCategory(!genderFootballGate ? AvatarEditorFigureCategory.GENERIC : AvatarEditorFigureCategory.TORSO);
+    }, [ categories, genderFootballGate, selectCategory ]);
+
+    useEffect(() =>
+    {
+        if(!figureData) return;
+
+        AvatarEditorUtilities.CURRENT_FIGURE = figureData;
+
+        resetCategories();
+
+        return () => AvatarEditorUtilities.CURRENT_FIGURE = null;
+    }, [ figureData, resetCategories ]);
+
+    useEffect(() =>
+    {
+        AvatarEditorUtilities.FIGURE_SET_IDS = figureSetIds;
+        AvatarEditorUtilities.BOUND_FURNITURE_NAMES = boundFurnitureNames;
+
+        resetCategories();
+
+        return () =>
+        {
+            AvatarEditorUtilities.FIGURE_SET_IDS = null;
+            AvatarEditorUtilities.BOUND_FURNITURE_NAMES = null;
+        }
+    }, [ figureSetIds, boundFurnitureNames, resetCategories ]);
+
+    useEffect(() =>
+    {
+        if(!isVisible) return;
+
+        if(!figures)
+        {
+            setupFigures();
+
+            setIsInitalized(true);
+
+            return;
+        }
+    }, [ isVisible, figures, setupFigures ]);
+
+    useEffect(() =>
+    {
+        if(!isVisible || !isInitalized || !needsReset) return;
+
+        loadAvatarInEditor(!genderFootballGate ? GetSessionDataManager().figure : (genderFootballGate === FigureData.MALE ? DEFAULT_MALE_FOOTBALL_GATE : DEFAULT_FEMALE_FOOTBALL_GATE), !genderFootballGate ? GetSessionDataManager().gender : genderFootballGate);
+        setNeedsReset(false);
+    }, [ isVisible, isInitalized, needsReset, loadAvatarInEditor, genderFootballGate ]);
+
+    useEffect(() => // This is so when you have the look editor open and you change the mode to Boy or Girl
+    {
+        if(!isVisible) return;
+
+        return () =>
+        {
+            setNeedsReset(true);
+        }
+    }, [ isVisible, genderFootballGate ]);								  
+
+    useEffect(() =>
+    {
+        if(isVisible) return;
+
+        return () =>
+        {
+            setNeedsReset(true);
+        }
+    }, [ isVisible ]);
+
+    if(!isVisible || !figureData) return null;
+
+    const avatarEditorClasses = `nitro-avatar-editor no-resize ${ isWardrobeVisible ? 'expanded' : '' }`;
+
+    return (
+        <NitroCardView uniqueKey="avatar-editor" className={ avatarEditorClasses }>
+            <NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
+            <NitroCardTabsView className="avatar-editor-tabs">
+                { categories && (categories.size > 0) && Array.from(categories.keys()).map(category =>
+                {
+                    const isActive = (activeCategory && (activeCategory.name === category));
+
+                    return (
+                        <NitroCardTabsItemView key={ category } isActive={ isActive } onClick={ event => selectCategory(category) }>
+                            <div className={ `tab ${ category }` }></div>
+                        </NitroCardTabsItemView>
+                    );
+                }) }
+				{ (!genderFootballGate) &&
+                <NitroCardTabsItemView onClick={ event => setIsWardrobeVisible(!isWardrobeVisible) }>
+                    <div className="tab-wardrobe"></div>
+                </NitroCardTabsItemView>
+				}
+            </NitroCardTabsView>
+            <NitroCardContentView>
+                <Grid>
+                    <Column size={ isWardrobeVisible ? 6 : 8 } overflow="hidden">
+                         { (activeCategory && !isWardrobeVisible) &&
+                            <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } isFromFootballGate={ !genderFootballGate ? false : true } setGender={ setGender } /> 
+						}
+                    </Column>
+                    <Column size={ isWardrobeVisible ? 6 : 4 } overflow="hidden">
+                        <Flex gap={ 2 } className="w-100 h-100">
+                            <Flex column={ true } className="w-100">
+                                <AvatarEditorFigurePreviewView figureData={ figureData } />
+								<Column grow gap={ 1 }>
+                            { (!genderFootballGate) &&
+                                <ButtonGroup>
+                                    <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
+                                        <FaUndo className="fa-icon" />
+                                    </Button>
+                                    <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
+                                        <FaTrash className="fa-icon" />
+                                    </Button>
+                                    <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
+                                        <FaDice className="fa-icon" />
+                                    </Button>
+                                </ButtonGroup>
+                            }
+                                        <Button className="w-10" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
+                                        { LocalizeText('avatareditor.save') }
+                                    </Button>
+                                </Column>
+                            </Flex>
+                            { isWardrobeVisible &&
+                                <Column overflow="hidden" className="w-100">
+                                    <AvatarEditorWardrobeView figureData={ figureData } savedFigures={ savedFigures } setSavedFigures={ setSavedFigures } loadAvatarInEditor={ loadAvatarInEditor } />
+                                </Column> }
+                        </Flex>
+                    </Column>
+                </Grid>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
\ No newline at end of file

From 84a05888eca95fa0f6daf806eb59f13f80f8d9b5 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 09:16:09 +0200
Subject: [PATCH 080/134] Update AvatarEditorModelView.tsx

---
 .../views/AvatarEditorModelView.tsx            | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/avatar-editor/views/AvatarEditorModelView.tsx b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
index 8f1d22fbe..e88512e53 100644
--- a/src/components/avatar-editor/views/AvatarEditorModelView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
@@ -4,6 +4,9 @@ import { Column, Flex, Grid, Text } from '../../../common';
 import { AvatarEditorIcon } from './AvatarEditorIcon';
 import { AvatarEditorFigureSetView } from './figure-set/AvatarEditorFigureSetView';
 import { AvatarEditorPaletteSetView } from './palette-set/AvatarEditorPaletteSetView';
+
+const CATEGORY_FOOTBALL_GATE = [ 'ch', 'cp', 'lg', 'sh' ];
+
 export interface AvatarEditorModelViewProps
 {
     model: IAvatarEditorCategoryModel;
@@ -13,7 +16,7 @@ export interface AvatarEditorModelViewProps
 
 export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
 {
-    const { model = null, gender = null, setGender = null } = props;
+    const { model = null, gender = null, isFromFootballGate = false, setGender = null } = props;
     const [ activeCategory, setActiveCategory ] = useState<CategoryData>(null);
     const [ maxPaletteCount, setMaxPaletteCount ] = useState(1);
 
@@ -71,14 +74,21 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
                         const category = model.categories.get(name);
 
                         return (
-                            <Flex center pointer key={ name } className="category-item" onClick={ event => selectCategory(name) }>
-                                <AvatarEditorIcon icon={ category.name } selected={ (activeCategory === category) } />
+                            <div key={ name }>
+                            <Flex center pointer className="category-item" onClick={ event => selectCategory(name) }>
+                                { (isFromFootballGate && CATEGORY_FOOTBALL_GATE.includes(category.name)) &&
+                                    <AvatarEditorIcon icon={ category.name } selected={ (activeCategory === category) } />
+                                }
+                                { (!isFromFootballGate) &&
+                                    <AvatarEditorIcon icon={ category.name } selected={ (activeCategory === category) } />
+                                }
                             </Flex>
+                        </div>
                         );
                     }) }
                 </Flex>
                 <Column className="avatar-parts-container" size={ 5 } overflow="hidden">
-                    <AvatarEditorFigureSetView model={ model } category={ activeCategory } setMaxPaletteCount={ setMaxPaletteCount } />
+                    <AvatarEditorFigureSetView model={ model } category={ activeCategory } isFromFootballGate={ isFromFootballGate } setMaxPaletteCount={ setMaxPaletteCount } />
                 </Column>
                 <Column overflow="hidden" className={
                     maxPaletteCount === 2 ? 'avatar-color-palette-container dual-palette' : 'avatar-color-palette-container'

From fa4412f6f7dad7dde2963afa6a29a0f5681458ee Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 09:17:27 +0200
Subject: [PATCH 081/134] AvatarEditorFigureSetView

---
 .../figure-set/AvatarEditorFigureSetView.tsx  | 100 ++++++++++--------
 1 file changed, 53 insertions(+), 47 deletions(-)

diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index a0b57d1a7..b79eea28b 100644
--- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -1,47 +1,53 @@
-import { HabboClubLevelEnum } from '@nitrots/nitro-renderer';
-import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from 'react';
-import { AvatarEditorGridPartItem, CategoryData, CreateLinkEvent, GetSessionDataManager, IAvatarEditorCategoryModel } from '../../../../api';
-import { AutoGrid } from '../../../../common';
-import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
-
-export interface AvatarEditorFigureSetViewProps
-{
-    model: IAvatarEditorCategoryModel;
-    category: CategoryData;
-    setMaxPaletteCount: Dispatch<SetStateAction<number>>;
-}
-
-export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = props =>
-{
-    const { model = null, category = null, setMaxPaletteCount = null } = props;
-    const elementRef = useRef<HTMLDivElement>(null);
-
-    const selectPart = useCallback((item: AvatarEditorGridPartItem) =>
-    {
-        const index = category.parts.indexOf(item);
-
-        if(index === -1) return;
-
-        if (item.isHC && GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent('habboUI/open/hccenter');
-
-        model.selectPart(category.name, index);
-
-        const partItem = category.getCurrentPart();
-
-        setMaxPaletteCount(partItem.maxColorIndex || 1);
-    }, [ model, category, setMaxPaletteCount ]);
-
-    useEffect(() =>
-    {
-        if(!model || !category || !elementRef || !elementRef.current) return;
-
-        elementRef.current.scrollTop = 0;
-    }, [ model, category ]);
-
-    return (
-        <AutoGrid className="clothing-container" innerRef={ elementRef } columnCount={ 3 } columnMinHeight={ 50 }>
-            { (category.parts.length > 0) && category.parts.map((item, index) =>
-                <AvatarEditorFigureSetItemView key={ index } partItem={ item } onClick={ event => selectPart(item) } />) }
-        </AutoGrid>
-    );
-}
+import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from 'react';
+import { AvatarEditorGridPartItem, CategoryData, CreateLinkEvent, GetSessionDataManager, IAvatarEditorCategoryModel } from '../../../../api';
+import { AutoGrid } from '../../../../common';
+import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
+
+const TSHIRT_FOOTBALL_GATE = [ 3111, 3110, 3109, 3030, 3114, 266, 265, 262, 3113, 3112, 691, 690, 667 ];
+const NUMBER_BEHIND_FOOTBALL_GATE = [ 3128, 3127, 3126, 3125, 3124, 3123, 3122, 3121, 3120, 3119 ];
+const PANTS_FOOTBALL_GATE = [ 3116, 281, 275, 715, 700, 696, 3006 ];
+const SHOES_FOOTBALL_GATE = [ 3115, 3068, 906 ];
+
+export interface AvatarEditorFigureSetViewProps
+{
+    model: IAvatarEditorCategoryModel;
+    category: CategoryData;
+    setMaxPaletteCount: Dispatch<SetStateAction<number>>;
+}
+
+export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = props =>
+{
+    const { model = null, category = null, isFromFootballGate = false, setMaxPaletteCount = null } = props;
+    const elementRef = useRef<HTMLDivElement>(null);
+
+    const selectPart = useCallback((item: AvatarEditorGridPartItem) =>
+    {
+        const index = category.parts.indexOf(item);
+
+        if(index === -1) return;
+
+        if (item.isHC && GetSessionDataManager().clubLevel === 0) return CreateLinkEvent('habboUI/open/hccenter');
+
+        model.selectPart(category.name, index);
+
+        const partItem = category.getCurrentPart();
+
+        setMaxPaletteCount(partItem.maxColorIndex || 1);
+    }, [ model, category, setMaxPaletteCount ]);
+
+    useEffect(() =>
+    {
+        if(!model || !category || !elementRef || !elementRef.current) return;
+
+        elementRef.current.scrollTop = 0;
+    }, [ model, category ]);
+
+    return (
+        <AutoGrid className="clothing-container" innerRef={ elementRef } columnCount={ 3 } columnMinHeight={ 50 }>
+            { (category.parts.length > 0) && category.parts.map(item =>
+                (!isFromFootballGate || (isFromFootballGate && TSHIRT_FOOTBALL_GATE.includes(item.id) || NUMBER_BEHIND_FOOTBALL_GATE.includes(item.id) || PANTS_FOOTBALL_GATE.includes(item.id) || SHOES_FOOTBALL_GATE.includes(item.id))) &&
+                    <AvatarEditorFigureSetItemView key={ item.id } partItem={ item } onClick={ event => selectPart(item) } />)
+            }
+			</AutoGrid>
+    );
+}
\ No newline at end of file

From 87a6edf69b5e25f9755038aa8740f1998fc5081d Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 09:18:43 +0200
Subject: [PATCH 082/134] FurnitureWidgets

---
 .../widgets/furniture/FurnitureWidgets.scss   | 1249 +++++++++--------
 .../furniture/FurnitureWidgetsView.tsx        |  100 +-
 2 files changed, 684 insertions(+), 665 deletions(-)

diff --git a/src/components/room/widgets/furniture/FurnitureWidgets.scss b/src/components/room/widgets/furniture/FurnitureWidgets.scss
index 2e24a0a5f..02caf9f57 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgets.scss
+++ b/src/components/room/widgets/furniture/FurnitureWidgets.scss
@@ -1,617 +1,632 @@
-.nitro-room-widgets {
-    pointer-events: none;
-}
-
-.nitro-widget-custom-stack-height {
-    width: $nitro-widget-custom-stack-height-width;
-    height: $nitro-widget-custom-stack-height-height;
-}
-
-.nitro-room-widget-toner {
-    width: 190px;
-}
-
-.nitro-room-widget-dimmer {
-    width: 275px;
-
-    .dimmer-banner {
-        width: 56px;
-        height: 79px;
-        background: url('@/assets/images/room-widgets/dimmer-widget/dimmer_banner.png')
-            center no-repeat;
-    }
-
-    .color-swatch {
-        height: 30px;
-        border: 2px solid $white;
-        box-shadow: inset 3px 3px rgba(0, 0, 0, 0.2);
-
-        &.active {
-            box-shadow: none;
-        }
-    }
-}
-
-.nitro-widget-crafting {
-    width: $nitro-widget-crafting-width;
-    height: $nitro-widget-crafting-height;
-}
-
-.nitro-widget-exchange-credit {
-    width: $nitro-widget-exchange-credit-width;
-    height: $nitro-widget-exchange-credit-height;
-
-    .exchange-image {
-        background-image: url('@/assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
-        width: 103px;
-        height: 103px;
-    }
-}
-
-.nitro-external-image-widget {
-
-    border-top: 71px solid rgba(0, 0, 0, 0.5);
-    border-bottom: 71px solid rgba(0, 0, 0, 0.5);
-    border-right: 84px solid rgba(0, 0, 0, 0.5);
-    border-left: 84px solid rgba(0, 0, 0, 0.5);
-    border-radius: 20px;
-
-    .nitro-card-header-close {
-        cursor: pointer;
-        background-image: url("@/assets/flash/boxes/card/close.png");
-        width: 19px;
-        height: 20px;
-
-        &:hover {
-            background-image: url("@/assets/flash/boxes/card/close_hover.png");
-
-            &:active {
-                background-image: url("@/assets/flash/boxes/card/close_click.png");
-            }
-
-        }
-    }
-
-    .nitro-camera-report {
-        cursor: pointer;
-        background-image: url("@/assets/flash/camera/report.png");
-        width: 19px;
-        height: 20px;
-
-        &:hover {
-            background-image: url("@/assets/flash/camera/report_hover.png");
-
-            &:active {
-                background-image: url("@/assets/flash/camera/report_click.png");
-            }
-
-        }
-    }
-
-    .picture-preview {
-        width: 320px;
-        height: 320px;
-    }
-
-    .center-buttons {
-        top: 45%;
-    }
-
-    .nitro-camera-button-left {
-        cursor: pointer;
-        background-image: url("@/assets/flash/camera/camera_button_left.png");
-        width: 64px;
-        height: 64px;
-    }
-
-    .nitro-camera-button-right {
-        cursor: pointer;
-        background-image: url("@/assets/flash/camera/camera_button_right.png");
-        width: 64px;
-        height: 64px;
-    }
-}
-
-.nitro-gift-opening {
-    width: 340px;
-    resize: none;
-}
-
-.nitro-mannequin {
-    width: 300px;
-
-    .mannequin-preview {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        width: 83px;
-        height: 130px;
-        background-image: url('@/assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
-        overflow: hidden;
-
-        .avatar-image {
-            background-position: unset;
-            top: -8px;
-        }
-    }
-}
-
-.nitro-stickie {
-    position: relative;
-    width: 185px;
-    height: 178px;
-    top: 25px;
-    left: 25px;
-    padding: 1px;
-    pointer-events: all;
-
-    .stickie-header {
-        width: 183px;
-        height: 18px;
-        padding: 0 7px;
-
-        .header-trash,
-        .header-close {
-            cursor: pointer;
-        }
-
-        .stickie-color {
-            width: 10px;
-            height: 10px;
-            cursor: pointer;
-        }
-    }
-
-    .stickie-context {
-        width: 183px;
-        height: 145px;
-        padding: 2px 7px;
-        font-size: 12px;
-        color: $black;
-
-        .context-text {
-            width: 100%;
-            height: 100%;
-            padding: 0;
-            overflow-wrap: break-word;
-            white-space: break-spaces;
-            overflow-y: auto;
-        }
-
-        textarea {
-            background: transparent;
-            border: 0;
-            outline: none;
-            box-shadow: none;
-            resize: none;
-            font-style: italic;
-
-            &:active {
-                border: 0;
-                outline: none;
-                box-shadow: none;
-            }
-        }
-    }
-}
-
-.nitro-stickie-image {
-    background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-spritesheet.png');
-
-    &.stickie-blue,
-    &.stickie-yellow,
-    &.stickie-green,
-    &.stickie-pink {
-        width: 185px;
-        height: 178px;
-    }
-
-    &.stickie-blue {
-        background-position: -2px -2px;
-    }
-
-    &.stickie-yellow {
-        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-yellow.png');
-        //background-position: -191px -184px;
-    }
-
-    &.stickie-green {
-        background-position: -191px -2px;
-    }
-
-    &.stickie-pink {
-        background-position: -2px -184px;
-    }
-
-    &.stickie-christmas {
-        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-christmas.png');
-    }
-
-    &.stickie-shakesp {
-        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-shakesp.png');
-    }
-
-    &.stickie-dreams {
-        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-dreams.png');
-    }
-
-    &.stickie-heart {
-        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-heart.png');
-    }
-
-    &.stickie-juninas {
-        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-juninas.png');
-    }
-
-    &.stickie-close {
-        width: 10px;
-        height: 10px;
-        background-position: -2px -366px;
-    }
-
-    &.stickie-trash {
-        width: 9px;
-        height: 10px;
-        background-position: -16px -366px;
-    }
-}
-
-.nitro-engraving-lock {
-    width: 300px;
-
-    .engraving-lock-stage-1 {
-        width: 31px;
-        height: 39px;
-        background-position: -380px -43px;
-        background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
-    }
-
-    .engraving-lock-stage-2 {
-        width: 36px;
-        height: 43px;
-        background-position: -375px 0px;
-        background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
-    }
-}
-
-.nitro-engraving-lock-view {
-    width: 375px;
-    height: 210px;
-    background-position: 0px 0px;
-    background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
-
-    color: #622e54;
-    font-weight: bold;
-    font-size: 16px;
-    text-shadow: 0px 1px white;
-
-    &.engraving-lock-3 {
-        background-position: 0px -210px;
-        color: #614110;
-    }
-
-    &.engraving-lock-4 {
-        background-position: 0px -420px;
-        color: #f1dcc8;
-        text-shadow: 0px 2px rgba(0, 0, 0, 0.4);
-
-        .engraving-lock-avatar {
-            margin-bottom: 10px;
-        }
-    }
-
-    .engraving-lock-close {
-        position: absolute;
-        cursor: pointer;
-        width: 15px;
-        height: 15px;
-        top: 34px;
-        right: 27px;
-    }
-
-    .engraving-lock-avatar {
-        width: 70px;
-        height: 120px;
-
-        div {
-            position: absolute;
-            margin-top: -5px;
-        }
-
-        &:nth-child(1) {
-            div {
-                margin-left: -10px;
-            }
-        }
-
-        &:nth-child(2) {
-            div {
-                margin-left: -15px;
-            }
-        }
-    }
-}
-
-.nitro-widget-high-score {
-    width: 280px;
-    max-width: 280px;
-    height: 320px;
-    background-color: #bab8b4;
-    border-radius: 0.3rem;
-    border: solid 1px #000;
-
-    .header {
-        border-image-source: none !important;
-        background-color: #40403e;
-        border-radius: 0.3rem 0.3rem 0 0;
-    }
-
-    .align-right {
-        text-align: right;
-    }
-
-    .section-border {
-        border: solid 1px #8c8a88;
-    }
-
-    .high-score-content {
-        height: 100%;
-        background-color: #000;
-        border-radius: 0.3rem;
-    }
-
-    .score-color {
-        color: #bab8b4;
-    }
-
-    .score-footer {
-        color: #9a9896;
-        font-weight: bold;
-    }
-}
-
-.high-score-wired {
-    .nitro-context-menu:not(.name-only)::after {
-        border-bottom: solid 1px #000;
-        border-right: solid 1px #000;
-        content: "";
-        width: 11px;
-        height: 9px;
-        bottom: -5px;
-        left: 0;
-        right: 0;
-        margin: auto;
-        background-image: none !important;
-        background-color: #bab8b4;
-        transform: rotate(42deg);
-    }
-}
-
-.youtube-tv-widget {
-    width: 600px;
-    height: 380px;
-
-    .youtube-video-container {
-        .empty-video {
-            background-color: black;
-            color: white;
-            width: 100%;
-            height: 100%;
-            text-align: center;
-        }
-
-        .youtubeContainer {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-            margin-bottom: 50px;
-        }
-
-        .youtubeContainer iframe {
-            width: 100%;
-            height: 100%;
-            position: absolute;
-            top: 0;
-            left: 0;
-        }
-    }
-
-    .playlist-container {
-        overflow-y: auto;
-        margin-right: -10px;
-        color: black;
-        height: 100%;
-
-        .playlist-controls {
-            width: 100%;
-            .icon {
-                margin-right: 10px;
-                margin-bottom: 10px;
-            }
-        }
-
-        .playlist-grid {
-            height: 100%;
-            width: 100%;
-        }
-    }
-}
-
-.nitro-playlist-editor-widget {
-    width: 625px;
-    height: 440px;
-
-    img.my-music {
-        position: absolute;
-        top: -4px;
-        left: -4px;
-        z-index: 0;
-    }
-
-    img.playlist-img {
-        position: absolute;
-        top: -4px;
-        left: 0;
-        z-index: 0;
-    }
-
-    img.get-more,
-    img.add-songs {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        z-index: 0;
-    }
-
-    .playlist-bottom {
-        z-index: 3;
-    }
-
-    .move-disk {
-        width: 22px;
-        height: 18px;
-        background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
-    }
-
-    .disk-2,
-    .disk-image {
-        background-blend-mode: multiply;
-    }
-
-    .disk-2 {
-        width: 38px;
-        height: 38px;
-        background-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
-        background-position: center;
-        background-repeat: no-repeat;
-
-        &.playing-song {
-            background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
-        }
-
-        &.selected-song {
-            background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
-            transform: scaleX(-1);
-        }
-
-        &:not(.playing-song):not(.selected-song) {
-            -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
-            mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
-        }
-    }
-
-    .pause-song {
-        width: 18px;
-        height: 20px;
-        background-image: url('@/assets/images/room-widgets/playlist-editor/pause.png');
-    }
-
-    .pause-btn {
-        width: 16px;
-        height: 16px;
-
-        background-image: url('@/assets/images/room-widgets/playlist-editor/pause-btn.png');
-    }
-
-    .music-note {
-        width: 38px;
-        height: 38px;
-        background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
-    }
-
-    .preview-song {
-        width: 16px;
-        height: 16px;
-        background-image: url('@/assets/images/room-widgets/playlist-editor/preview.png');
-    }
-
-    .layout-grid-item {
-        min-height: 95px;
-        min-width: 95px;
-        position: relative;
-
-        .disk-image {
-            background: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
-            -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
-            mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
-            height: 76px;
-            width: 76px;
-        }
-    }
-}
-
-.nitro-mysterybox-dialog {
-    width: 375px;
-    height: 210px;
-
-    .prize-container {
-        height: 80px;
-        width: 81px;
-        background-image: url('@/assets/images/prize/prize_background.png');
-        background-repeat: no-repeat;
-        background-position: center;
-    }
-}
-
-.nitro-mysterytrophy-dialog
-{
-    .mysterytrophy-dialog-top
-    {
-        width: 400px;
-        height: 120px;
-        border-radius: 2px;
-        background-color: #0E3F52;
-
-        .mysterytrophy-image
-        {
-            width: 80px;
-            height: 84px;
-            position: relative;
-            background-image: url('@/assets/images/mysterytrophy/frank_mystery_trophy.png');
-            background-repeat: no-repeat;
-        }
-
-        .mysterytrophy-text-big
-        {
-            font-size: 16px;
-        }
-    }
-
-    .mysterytrophy-dialog-bottom
-    {
-        display: flex;
-        justify-content: center;
-        width: 400px;
-        height: 120px;
-        border-radius: 2px;
-        background-color: #E9E9E1;
-
-        .input-mysterytrophy-dialog
-        {
-            width: 380px;
-            border: 1px solid black;
-
-            .input-mysterytrophy
-            {
-                width: 350px;
-                border: 0;
-                outline: 0;
-            }
-
-            .mysterytrophy-pencil-image
-            {
-                width: 16px;
-                height: 16px;
-                position: relative;
-                background-image: url('@/assets/images/infostand/pencil-icon.png');
-                background-repeat: no-repeat;
-            }
-        }
-
-        .text-decoration
-        {
-            text-decoration: underline;
-        }
-    }
-}
+.nitro-room-widgets {
+    pointer-events: none;
+}
+
+.nitro-widget-custom-stack-height {
+    width: $nitro-widget-custom-stack-height-width;
+    height: $nitro-widget-custom-stack-height-height;
+}
+
+.nitro-room-widget-toner {
+    width: 190px;
+}
+
+.nitro-room-widget-dimmer {
+    width: 275px;
+
+    .dimmer-banner {
+        width: 56px;
+        height: 79px;
+        background: url('@/assets/images/room-widgets/dimmer-widget/dimmer_banner.png')
+            center no-repeat;
+    }
+
+    .color-swatch {
+        height: 30px;
+        border: 2px solid $white;
+        box-shadow: inset 3px 3px rgba(0, 0, 0, 0.2);
+
+        &.active {
+            box-shadow: none;
+        }
+    }
+}
+
+.nitro-widget-crafting {
+    width: $nitro-widget-crafting-width;
+    height: $nitro-widget-crafting-height;
+}
+
+.nitro-widget-exchange-credit {
+    width: $nitro-widget-exchange-credit-width;
+    height: $nitro-widget-exchange-credit-height;
+
+    .exchange-image {
+        background-image: url('@/assets/images/room-widgets/exchange-credit/exchange-credit-image.png');
+        width: 103px;
+        height: 103px;
+    }
+}
+
+.nitro-external-image-widget {
+
+    border-top: 71px solid rgba(0, 0, 0, 0.5);
+    border-bottom: 71px solid rgba(0, 0, 0, 0.5);
+    border-right: 84px solid rgba(0, 0, 0, 0.5);
+    border-left: 84px solid rgba(0, 0, 0, 0.5);
+    border-radius: 20px;
+
+    .nitro-card-header-close {
+        cursor: pointer;
+        background-image: url("@/assets/flash/boxes/card/close.png");
+        width: 19px;
+        height: 20px;
+
+        &:hover {
+            background-image: url("@/assets/flash/boxes/card/close_hover.png");
+
+            &:active {
+                background-image: url("@/assets/flash/boxes/card/close_click.png");
+            }
+
+        }
+    }
+
+    .nitro-camera-report {
+        cursor: pointer;
+        background-image: url("@/assets/flash/camera/report.png");
+        width: 19px;
+        height: 20px;
+
+        &:hover {
+            background-image: url("@/assets/flash/camera/report_hover.png");
+
+            &:active {
+                background-image: url("@/assets/flash/camera/report_click.png");
+            }
+
+        }
+    }
+
+    .picture-preview {
+        width: 320px;
+        height: 320px;
+    }
+
+    .center-buttons {
+        top: 45%;
+    }
+
+    .nitro-camera-button-left {
+        cursor: pointer;
+        background-image: url("@/assets/flash/camera/camera_button_left.png");
+        width: 64px;
+        height: 64px;
+    }
+
+    .nitro-camera-button-right {
+        cursor: pointer;
+        background-image: url("@/assets/flash/camera/camera_button_right.png");
+        width: 64px;
+        height: 64px;
+    }
+}
+
+.nitro-gift-opening {
+    width: 340px;
+    resize: none;
+}
+
+.nitro-mannequin {
+    width: 300px;
+
+    .mannequin-preview {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 83px;
+        height: 130px;
+        background-image: url('@/assets/images/room-widgets/mannequin-widget/mannequin-spritesheet.png');
+        overflow: hidden;
+
+        .avatar-image {
+            background-position: unset;
+            top: -8px;
+        }
+    }
+}
+
+.nitro-stickie {
+    position: relative;
+    width: 185px;
+    height: 178px;
+    top: 25px;
+    left: 25px;
+    padding: 1px;
+    pointer-events: all;
+
+    .stickie-header {
+        width: 183px;
+        height: 18px;
+        padding: 0 7px;
+
+        .header-trash,
+        .header-close {
+            cursor: pointer;
+        }
+
+        .stickie-color {
+            width: 10px;
+            height: 10px;
+            cursor: pointer;
+        }
+    }
+
+    .stickie-context {
+        width: 183px;
+        height: 145px;
+        padding: 2px 7px;
+        font-size: 12px;
+        color: $black;
+
+        .context-text {
+            width: 100%;
+            height: 100%;
+            padding: 0;
+            overflow-wrap: break-word;
+            white-space: break-spaces;
+            overflow-y: auto;
+        }
+
+        textarea {
+            background: transparent;
+            border: 0;
+            outline: none;
+            box-shadow: none;
+            resize: none;
+            font-style: italic;
+
+            &:active {
+                border: 0;
+                outline: none;
+                box-shadow: none;
+            }
+        }
+    }
+}
+
+.nitro-stickie-image {
+    background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-spritesheet.png');
+
+    &.stickie-blue,
+    &.stickie-yellow,
+    &.stickie-green,
+    &.stickie-pink {
+        width: 185px;
+        height: 178px;
+    }
+
+    &.stickie-blue {
+        background-position: -2px -2px;
+    }
+
+    &.stickie-yellow {
+        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-yellow.png');
+        //background-position: -191px -184px;
+    }
+
+    &.stickie-green {
+        background-position: -191px -2px;
+    }
+
+    &.stickie-pink {
+        background-position: -2px -184px;
+    }
+
+    &.stickie-christmas {
+        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-christmas.png');
+    }
+
+    &.stickie-shakesp {
+        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-shakesp.png');
+    }
+
+    &.stickie-dreams {
+        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-dreams.png');
+    }
+
+    &.stickie-heart {
+        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-heart.png');
+    }
+
+    &.stickie-juninas {
+        background-image: url('@/assets/images/room-widgets/stickie-widget/stickie-juninas.png');
+    }
+
+    &.stickie-close {
+        width: 10px;
+        height: 10px;
+        background-position: -2px -366px;
+    }
+
+    &.stickie-trash {
+        width: 9px;
+        height: 10px;
+        background-position: -16px -366px;
+    }
+}
+
+.nitro-engraving-lock {
+    width: 300px;
+
+    .engraving-lock-stage-1 {
+        width: 31px;
+        height: 39px;
+        background-position: -380px -43px;
+        background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
+    }
+
+    .engraving-lock-stage-2 {
+        width: 36px;
+        height: 43px;
+        background-position: -375px 0px;
+        background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
+    }
+}
+
+.nitro-engraving-lock-view {
+    width: 375px;
+    height: 210px;
+    background-position: 0px 0px;
+    background-image: url('@/assets/images/room-widgets/engraving-lock-widget/engraving-lock-spritesheet.png');
+
+    color: #622e54;
+    font-weight: bold;
+    font-size: 16px;
+    text-shadow: 0px 1px white;
+
+    &.engraving-lock-3 {
+        background-position: 0px -210px;
+        color: #614110;
+    }
+
+    &.engraving-lock-4 {
+        background-position: 0px -420px;
+        color: #f1dcc8;
+        text-shadow: 0px 2px rgba(0, 0, 0, 0.4);
+
+        .engraving-lock-avatar {
+            margin-bottom: 10px;
+        }
+    }
+
+    .engraving-lock-close {
+        position: absolute;
+        cursor: pointer;
+        width: 15px;
+        height: 15px;
+        top: 34px;
+        right: 27px;
+    }
+
+    .engraving-lock-avatar {
+        width: 70px;
+        height: 120px;
+
+        div {
+            position: absolute;
+            margin-top: -5px;
+        }
+
+        &:nth-child(1) {
+            div {
+                margin-left: -10px;
+            }
+        }
+
+        &:nth-child(2) {
+            div {
+                margin-left: -15px;
+            }
+        }
+    }
+}
+
+.nitro-widget-high-score {
+    width: 280px;
+    max-width: 280px;
+    height: 320px;
+    background-color: #bab8b4;
+    border-radius: 0.3rem;
+    border: solid 1px #000;
+
+    .header {
+        border-image-source: none !important;
+        background-color: #40403e;
+        border-radius: 0.3rem 0.3rem 0 0;
+    }
+
+    .align-right {
+        text-align: right;
+    }
+
+    .section-border {
+        border: solid 1px #8c8a88;
+    }
+
+    .high-score-content {
+        height: 100%;
+        background-color: #000;
+        border-radius: 0.3rem;
+    }
+
+    .score-color {
+        color: #bab8b4;
+    }
+
+    .score-footer {
+        color: #9a9896;
+        font-weight: bold;
+    }
+}
+
+.high-score-wired {
+    .nitro-context-menu:not(.name-only)::after {
+        border-bottom: solid 1px #000;
+        border-right: solid 1px #000;
+        content: "";
+        width: 11px;
+        height: 9px;
+        bottom: -5px;
+        left: 0;
+        right: 0;
+        margin: auto;
+        background-image: none !important;
+        background-color: #bab8b4;
+        transform: rotate(42deg);
+    }
+}
+
+.youtube-tv-widget {
+    width: 600px;
+    height: 380px;
+
+    .youtube-video-container {
+        .empty-video {
+            background-color: black;
+            color: white;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+        }
+
+        .youtubeContainer {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+            margin-bottom: 50px;
+        }
+
+        .youtubeContainer iframe {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+    }
+
+    .playlist-container {
+        overflow-y: auto;
+        margin-right: -10px;
+        color: black;
+        height: 100%;
+
+        .playlist-controls {
+            width: 100%;
+            .icon {
+                margin-right: 10px;
+                margin-bottom: 10px;
+            }
+        }
+
+        .playlist-grid {
+            height: 100%;
+            width: 100%;
+        }
+    }
+}
+
+.nitro-playlist-editor-widget {
+    width: 625px;
+    height: 440px;
+
+    img.my-music {
+        position: absolute;
+        top: -4px;
+        left: -4px;
+        z-index: 0;
+    }
+
+    img.playlist-img {
+        position: absolute;
+        top: -4px;
+        left: 0;
+        z-index: 0;
+    }
+
+    img.get-more,
+    img.add-songs {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 0;
+    }
+
+    .playlist-bottom {
+        z-index: 3;
+    }
+
+    .move-disk {
+        width: 22px;
+        height: 18px;
+        background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
+    }
+
+    .disk-2,
+    .disk-image {
+        background-blend-mode: multiply;
+    }
+
+    .disk-2 {
+        width: 38px;
+        height: 38px;
+        background-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
+        background-position: center;
+        background-repeat: no-repeat;
+
+        &.playing-song {
+            background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
+        }
+
+        &.selected-song {
+            background-image: url('@/assets/images/room-widgets/playlist-editor/move.png');
+            transform: scaleX(-1);
+        }
+
+        &:not(.playing-song):not(.selected-song) {
+            -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
+            mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_2.png');
+        }
+    }
+
+    .pause-song {
+        width: 18px;
+        height: 20px;
+        background-image: url('@/assets/images/room-widgets/playlist-editor/pause.png');
+    }
+
+    .pause-btn {
+        width: 16px;
+        height: 16px;
+
+        background-image: url('@/assets/images/room-widgets/playlist-editor/pause-btn.png');
+    }
+
+    .music-note {
+        width: 38px;
+        height: 38px;
+        background-image: url('@/assets/images/room-widgets/playlist-editor/playing.png');
+    }
+
+    .preview-song {
+        width: 16px;
+        height: 16px;
+        background-image: url('@/assets/images/room-widgets/playlist-editor/preview.png');
+    }
+
+    .layout-grid-item {
+        min-height: 95px;
+        min-width: 95px;
+        position: relative;
+
+        .disk-image {
+            background: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
+            -webkit-mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
+            mask-image: url('@/assets/images/room-widgets/playlist-editor/disk_image.png');
+            height: 76px;
+            width: 76px;
+        }
+    }
+}
+
+.nitro-mysterybox-dialog {
+    width: 375px;
+    height: 210px;
+
+    .prize-container {
+        height: 80px;
+        width: 81px;
+        background-image: url('@/assets/images/prize/prize_background.png');
+        background-repeat: no-repeat;
+        background-position: center;
+    }
+}
+
+.nitro-mysterytrophy-dialog
+{
+    .mysterytrophy-dialog-top
+    {
+        width: 400px;
+        height: 120px;
+        border-radius: 2px;
+        background-color: #0E3F52;
+
+        .mysterytrophy-image
+        {
+            width: 80px;
+            height: 84px;
+            position: relative;
+            background-image: url('@/assets/images/mysterytrophy/frank_mystery_trophy.png');
+            background-repeat: no-repeat;
+        }
+
+        .mysterytrophy-text-big
+        {
+            font-size: 16px;
+        }
+    }
+
+    .mysterytrophy-dialog-bottom
+    {
+        display: flex;
+        justify-content: center;
+        width: 400px;
+        height: 120px;
+        border-radius: 2px;
+        background-color: #E9E9E1;
+
+        .input-mysterytrophy-dialog
+        {
+            width: 380px;
+            border: 1px solid black;
+
+            .input-mysterytrophy
+            {
+                width: 350px;
+                border: 0;
+                outline: 0;
+            }
+
+            .mysterytrophy-pencil-image
+            {
+                width: 16px;
+                height: 16px;
+                position: relative;
+                background-image: url('@/assets/images/infostand/pencil-icon.png');
+                background-repeat: no-repeat;
+            }
+        }
+
+        .text-decoration
+        {
+            text-decoration: underline;
+        }
+    }
+}
+
+.nitro-football-gate
+{
+    width: 300px;
+
+    .football-gate-content
+    {
+        color: black;
+
+        .size-buttons
+        {
+            width: 100px;
+        }
+    }
+}
diff --git a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
index d0e4066d6..e599275a0 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
@@ -1,48 +1,52 @@
-import { FC } from 'react';
-import { Base } from '../../../../common';
-import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
-import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView';
-import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView';
-import { FurnitureCraftingView } from './FurnitureCraftingView';
-import { FurnitureDimmerView } from './FurnitureDimmerView';
-import { FurnitureExchangeCreditView } from './FurnitureExchangeCreditView';
-import { FurnitureExternalImageView } from './FurnitureExternalImageView';
-import { FurnitureFriendFurniView } from './FurnitureFriendFurniView';
-import { FurnitureGiftOpeningView } from './FurnitureGiftOpeningView';
-import { FurnitureHighScoreView } from './FurnitureHighScoreView';
-import { FurnitureInternalLinkView } from './FurnitureInternalLinkView';
-import { FurnitureMannequinView } from './FurnitureMannequinView';
-import { FurnitureRoomLinkView } from './FurnitureRoomLinkView';
-import { FurnitureSpamWallPostItView } from './FurnitureSpamWallPostItView';
-import { FurnitureStackHeightView } from './FurnitureStackHeightView';
-import { FurnitureStickieView } from './FurnitureStickieView';
-import { FurnitureTrophyView } from './FurnitureTrophyView';
-import { FurnitureYoutubeDisplayView } from './FurnitureYoutubeDisplayView';
-import { FurniturePlaylistEditorWidgetView } from './playlist-editor/FurniturePlaylistEditorWidgetView';
-
-export const FurnitureWidgetsView: FC<{}> = props =>
-{
-    return (
-        <Base fit position="absolute" className="nitro-room-widgets top-0 start-0">
-            <FurnitureBackgroundColorView />
-            <FurnitureBadgeDisplayView />
-            <FurnitureCraftingView />
-            <FurnitureDimmerView />
-            <FurnitureExchangeCreditView />
-            <FurnitureExternalImageView />
-            <FurnitureFriendFurniView />
-            <FurnitureGiftOpeningView />
-            <FurnitureHighScoreView />
-            <FurnitureInternalLinkView />
-            <FurnitureMannequinView />
-            <FurniturePlaylistEditorWidgetView />
-            <FurnitureRoomLinkView />
-            <FurnitureSpamWallPostItView />
-            <FurnitureStackHeightView />
-            <FurnitureStickieView />
-            <FurnitureTrophyView />
-            <FurnitureContextMenuView />
-            <FurnitureYoutubeDisplayView />
-        </Base>
-    );
-}
+import { FC } from 'react';
+import { Base } from '../../../../common';
+import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView';
+import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView';
+import { FurnitureCraftingView } from './FurnitureCraftingView';
+import { FurnitureDimmerView } from './FurnitureDimmerView';
+import { FurnitureExchangeCreditView } from './FurnitureExchangeCreditView';
+import { FurnitureExternalImageView } from './FurnitureExternalImageView';
+import { FurnitureFootballGateView } from './FurnitureFootballGateView';
+import { FurnitureFriendFurniView } from './FurnitureFriendFurniView';
+import { FurnitureGiftOpeningView } from './FurnitureGiftOpeningView';
+import { FurnitureHighScoreView } from './FurnitureHighScoreView';
+import { FurnitureInternalLinkView } from './FurnitureInternalLinkView';
+import { FurnitureMannequinView } from './FurnitureMannequinView';
+import { FurnitureRentableSpaceView } from './FurnitureRentableSpaceView';
+import { FurnitureRoomLinkView } from './FurnitureRoomLinkView';
+import { FurnitureSpamWallPostItView } from './FurnitureSpamWallPostItView';
+import { FurnitureStackHeightView } from './FurnitureStackHeightView';
+import { FurnitureStickieView } from './FurnitureStickieView';
+import { FurnitureTrophyView } from './FurnitureTrophyView';
+import { FurnitureYoutubeDisplayView } from './FurnitureYoutubeDisplayView';
+import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
+import { FurniturePlaylistEditorWidgetView } from './playlist-editor/FurniturePlaylistEditorWidgetView';
+
+export const FurnitureWidgetsView: FC<{}> = props =>
+{
+    return (
+        <Base fit position="absolute" className="nitro-room-widgets top-0 start-0">
+            <FurnitureBackgroundColorView />
+            <FurnitureBadgeDisplayView />
+            <FurnitureCraftingView />
+            <FurnitureDimmerView />
+            <FurnitureExchangeCreditView />
+            <FurnitureExternalImageView />
+            <FurnitureFriendFurniView />
+            <FurnitureGiftOpeningView />
+            <FurnitureHighScoreView />
+            <FurnitureInternalLinkView />
+            <FurnitureMannequinView />
+            <FurniturePlaylistEditorWidgetView />
+            <FurnitureRoomLinkView />
+            <FurnitureSpamWallPostItView />
+            <FurnitureStackHeightView />
+            <FurnitureStickieView />
+            <FurnitureTrophyView />
+            <FurnitureContextMenuView />
+            <FurnitureYoutubeDisplayView />
+			<FurnitureRentableSpaceView />
+            <FurnitureFootballGateView />
+        </Base>
+    );
+}
\ No newline at end of file

From 64131f568cb320c8fc9373e9ef1f26a3e4db08ca Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 09:20:40 +0200
Subject: [PATCH 083/134] useFurnitureFootballGateWidget

---
 src/hooks/rooms/widgets/index.ts              | 33 ++++++++++------
 .../widgets/useFurnitureFootballGateWidget.ts | 38 +++++++++++++++++++
 2 files changed, 59 insertions(+), 12 deletions(-)
 create mode 100644 src/hooks/rooms/widgets/useFurnitureFootballGateWidget.ts

diff --git a/src/hooks/rooms/widgets/index.ts b/src/hooks/rooms/widgets/index.ts
index 99844508f..6f14f5bad 100644
--- a/src/hooks/rooms/widgets/index.ts
+++ b/src/hooks/rooms/widgets/index.ts
@@ -1,12 +1,21 @@
-export * from './furniture';
-export * from './useAvatarInfoWidget';
-export * from './useChatInputWidget';
-export * from './useChatWidget';
-export * from './useDoorbellWidget';
-export * from './useFilterWordsWidget';
-export * from './useFriendRequestWidget';
-export * from './useFurniChooserWidget';
-export * from './usePetPackageWidget';
-export * from './usePollWidget';
-export * from './useUserChooserWidget';
-export * from './useWordQuizWidget';
+export * from './useFurnitureBackgroundColorWidget';
+export * from './useFurnitureBadgeDisplayWidget';
+export * from './useFurnitureContextMenuWidget';
+export * from './useFurnitureCraftingWidget';
+export * from './useFurnitureDimmerWidget';
+export * from './useFurnitureExchangeWidget';
+export * from './useFurnitureExternalImageWidget';
+export * from './useFurnitureFootballGateWidget';
+export * from './useFurnitureFriendFurniWidget';
+export * from './useFurnitureHighScoreWidget';
+export * from './useFurnitureInternalLinkWidget';
+export * from './useFurnitureMannequinWidget';
+export * from './useFurniturePlaylistEditorWidget';
+export * from './useFurniturePresentWidget';
+export * from './useFurnitureRentableSpaceWidget';
+export * from './useFurnitureRoomLinkWidget';
+export * from './useFurnitureSpamWallPostItWidget';
+export * from './useFurnitureStackHeightWidget';
+export * from './useFurnitureStickieWidget';
+export * from './useFurnitureTrophyWidget';
+export * from './useFurnitureYoutubeWidget';
diff --git a/src/hooks/rooms/widgets/useFurnitureFootballGateWidget.ts b/src/hooks/rooms/widgets/useFurnitureFootballGateWidget.ts
new file mode 100644
index 000000000..ae5b557cd
--- /dev/null
+++ b/src/hooks/rooms/widgets/useFurnitureFootballGateWidget.ts
@@ -0,0 +1,38 @@
+import { RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
+import { useState } from 'react';
+import { GetRoomEngine, IsOwnerOfFurniture } from '../../../../api';
+import { useRoomEngineEvent } from '../../../events';
+import { useFurniRemovedEvent } from '../../engine';
+
+const useFurnitureFootballGateWidgetState = () =>
+{
+    const [ objectId, setObjectId ] = useState<number>(-1);
+    const [ category, setCategory ] = useState<number>(-1);
+    
+    const onClose = () =>
+    {
+        setObjectId(-1);
+        setCategory(-1);
+    }
+
+    useRoomEngineEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_CLOTHING_CHANGE, event =>
+    {
+        const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
+
+        if(!roomObject || !IsOwnerOfFurniture(roomObject)) return;
+        
+        setObjectId(event.objectId);
+        setCategory(event.category);
+    });
+
+    useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event =>
+    {
+        if((event.id !== objectId) || (event.category !== category)) return;
+
+        onClose();
+    });
+
+    return { objectId, setObjectId, onClose };
+}
+
+export const useFurnitureFootballGateWidget = useFurnitureFootballGateWidgetState;
\ No newline at end of file

From 4e99e9b463ed7657795dd67658f2484737542745 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 09:23:02 +0200
Subject: [PATCH 084/134] FurnitureFootballGateView

---
 .../furniture/FurnitureFootballGateView.tsx   | 36 +++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/components/room/widgets/furniture/FurnitureFootballGateView.tsx

diff --git a/src/components/room/widgets/furniture/FurnitureFootballGateView.tsx b/src/components/room/widgets/furniture/FurnitureFootballGateView.tsx
new file mode 100644
index 000000000..6fae2351e
--- /dev/null
+++ b/src/components/room/widgets/furniture/FurnitureFootballGateView.tsx
@@ -0,0 +1,36 @@
+import { FC } from 'react';
+import { CreateLinkEvent, FigureData, LocalizeText } from '../../../../api';
+import { Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
+import { useFurnitureFootballGateWidget } from '../../../../hooks';
+
+export const FurnitureFootballGateView: FC<{}> = props =>
+{
+    const { objectId, setObjectId, onClose } = useFurnitureFootballGateWidget();
+
+    const onGender = (gender: string) =>
+    {
+        CreateLinkEvent(`avatar-editor/show/${ gender }/${ objectId }`);
+        setObjectId(-1);
+    }
+      
+    if(objectId === -1) return null;
+
+    return (
+        <NitroCardView className="nitro-football-gate no-resize" theme="primary-slim">
+            <NitroCardHeaderView headerText={ LocalizeText('widget.furni.clothingchange.gender.title') } onCloseClick={ onClose } />
+            <NitroCardContentView className="football-gate-content">
+                <Flex fullWidth center>
+                    <Column>{ LocalizeText('widget.furni.clothingchange.gender.info') }</Column>
+                </Flex>
+                <Flex className="mt-4 px-2" justifyContent="between">
+                    <Button className="size-buttons" onClick={ (e) => onGender(FigureData.MALE) }>
+                        { LocalizeText('widget.furni.clothingchange.gender.male') }
+                    </Button>
+                    <Button className="size-buttons" onClick={ (e) => onGender(FigureData.FEMALE) }>
+                        { LocalizeText('widget.furni.clothingchange.gender.female') }
+                    </Button>
+                </Flex>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
\ No newline at end of file

From e50e3f7067fb7d411e2e2db75ddda657e09d2a10 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 09:27:16 +0200
Subject: [PATCH 085/134] Changed to EMU

---
 .../views/figure-set/AvatarEditorFigureSetView.tsx            | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index b79eea28b..7717ea6a9 100644
--- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -26,7 +26,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
 
         if(index === -1) return;
 
-        if (item.isHC && GetSessionDataManager().clubLevel === 0) return CreateLinkEvent('habboUI/open/hccenter');
+        if (item.isHC && GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent('habboUI/open/hccenter');
 
         model.selectPart(category.name, index);
 
@@ -50,4 +50,4 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
             }
 			</AutoGrid>
     );
-}
\ No newline at end of file
+}

From 9f5ee2f2cac2c939c3eca5fc6506ef605cd18145 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 09:30:13 +0200
Subject: [PATCH 086/134] Fixing sizeing Column for tradeing

---
 .../inventory/views/furniture/InventoryTradeView.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/inventory/views/furniture/InventoryTradeView.tsx b/src/components/inventory/views/furniture/InventoryTradeView.tsx
index 6b0eadd97..c5df70dd5 100644
--- a/src/components/inventory/views/furniture/InventoryTradeView.tsx
+++ b/src/components/inventory/views/furniture/InventoryTradeView.tsx
@@ -79,7 +79,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                     { (ownUser.accepts) && <Base className="icon icon-confirmed" /> }
                                     <small className={ ownUser.accepts ? 'px-2' : '' }><b>{ LocalizeText('inventory.trading.you') }</b> { LocalizeText('inventory.trading.areoffering') }</small>
                                 </Flex>
-                                <AutoGrid columnCount={ 3 }>
+                                <AutoGrid columnCount={ 3 } columnMinWidth={ 35 } columnMinHeight={ 35 }>
                                     { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
                                     {
                                         const item = (ownUser.userItems.getWithIndex(i) || null);
@@ -108,7 +108,7 @@ export const InventoryTradeView: FC<InventoryTradeViewProps> = props =>
                                     { (otherUser.accepts) && <Base className="icon icon-confirmed" /> }
                                     <small className={ otherUser.accepts ? 'px-2' : '' }><b>{ otherUser.userName }</b> { LocalizeText('inventory.trading.isoffering') }</small>
                                 </Flex>
-                                <AutoGrid columnCount={ 3 }>
+                                <AutoGrid columnCount={ 3 } columnMinWidth={ 35 } columnMinHeight={ 35 }>
                                     { Array.from(Array(MAX_ITEMS_TO_TRADE), (e, i) =>
                                     {
                                         const item = (otherUser.userItems.getWithIndex(i) || null);

From a20d83d73e6cea486e5748d8e06dc98dfddcd359 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 09:31:52 +0200
Subject: [PATCH 087/134] Fix: Blackscreen in some cases when selecting photo

---
 src/components/camera/views/CameraWidgetShowPhotoView.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
index f9733f448..59345981b 100644
--- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx
+++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
@@ -43,8 +43,9 @@ export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = pro
     const getUserData = (roomId: number, objectId: number, type: string): number | string =>
     {
         const roomObject = GetRoomEngine().getRoomObject(roomId, objectId, RoomObjectCategory.WALL);
-    
-        return type == 'username' ? roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_NAME) : roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
+		if (roomObject && roomObject.model) {    
+            return type == 'username' ? roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_NAME) : roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
+		}
     }
 
     useEffect(() =>

From 94e61e73987e533d569e8818bbb5cdf78bbd31e4 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 10:35:03 +0200
Subject: [PATCH 088/134] FurnitureRentableSpaceView

---
 .../furniture/FurnitureRentableSpaceView.tsx  |  43 ++++++++
 .../furniture/FurnitureWidgetsView.tsx        | 100 +++++++++---------
 2 files changed, 95 insertions(+), 48 deletions(-)
 create mode 100644 src/components/room/widgets/furniture/FurnitureRentableSpaceView.tsx

diff --git a/src/components/room/widgets/furniture/FurnitureRentableSpaceView.tsx b/src/components/room/widgets/furniture/FurnitureRentableSpaceView.tsx
new file mode 100644
index 000000000..e5877916f
--- /dev/null
+++ b/src/components/room/widgets/furniture/FurnitureRentableSpaceView.tsx
@@ -0,0 +1,43 @@
+import { FriendlyTime } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { LocalizeText } from '../../../../api';
+import { Button, Column, Flex, LayoutCurrencyIcon, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { useFurnitureRentableSpaceWidget } from '../../../../hooks';
+
+export const FurnitureRentableSpaceView: FC<{}> = props =>
+{
+    const { renter, isRoomOwner, onRent, onCancelRent, onClose } = useFurnitureRentableSpaceWidget();
+    
+    if(!renter) return null;
+
+    return (
+        <NitroCardView className="nitro-guide-tool no-resize" theme="primary-slim">
+            <NitroCardHeaderView headerText={ LocalizeText('rentablespace.widget.title') } onCloseClick={ onClose } />
+            <NitroCardContentView className="text-black">
+                <Column>
+                    { (!renter.rented) &&
+                        <>
+                            <Text>{ LocalizeText('rentablespace.widget.instructions') }</Text>
+                            <Flex pointer center className="p-2 bg-primary border border-dark rounded text-light h3" onClick={ onRent }>
+                                { renter.price + ' x' }&nbsp;
+                                <LayoutCurrencyIcon type={ -1 } className="mt-1" />&nbsp;
+                                { LocalizeText('catalog.purchase_confirmation.rent') }
+                            </Flex>
+                        </>
+                    }
+                    { (renter.rented) &&
+                        <>
+                            <Text bold>{ LocalizeText('rentablespace.widget.rented_to_label') }</Text>
+                            <Text italics>{ renter.renterName }</Text>
+                            <Text bold>{ LocalizeText('rentablespace.widget.expires_label') }</Text>
+                            <Text italics>{ FriendlyTime.shortFormat(renter.timeRemaining) }</Text>
+                            { (isRoomOwner) &&
+                                <Button variant="danger" className="mt-2" onClick={ onCancelRent }>{ LocalizeText('rentablespace.widget.cancel_rent') }</Button> }
+
+                        </>
+                    }
+                </Column>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
\ No newline at end of file
diff --git a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
index d0e4066d6..e599275a0 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
@@ -1,48 +1,52 @@
-import { FC } from 'react';
-import { Base } from '../../../../common';
-import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
-import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView';
-import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView';
-import { FurnitureCraftingView } from './FurnitureCraftingView';
-import { FurnitureDimmerView } from './FurnitureDimmerView';
-import { FurnitureExchangeCreditView } from './FurnitureExchangeCreditView';
-import { FurnitureExternalImageView } from './FurnitureExternalImageView';
-import { FurnitureFriendFurniView } from './FurnitureFriendFurniView';
-import { FurnitureGiftOpeningView } from './FurnitureGiftOpeningView';
-import { FurnitureHighScoreView } from './FurnitureHighScoreView';
-import { FurnitureInternalLinkView } from './FurnitureInternalLinkView';
-import { FurnitureMannequinView } from './FurnitureMannequinView';
-import { FurnitureRoomLinkView } from './FurnitureRoomLinkView';
-import { FurnitureSpamWallPostItView } from './FurnitureSpamWallPostItView';
-import { FurnitureStackHeightView } from './FurnitureStackHeightView';
-import { FurnitureStickieView } from './FurnitureStickieView';
-import { FurnitureTrophyView } from './FurnitureTrophyView';
-import { FurnitureYoutubeDisplayView } from './FurnitureYoutubeDisplayView';
-import { FurniturePlaylistEditorWidgetView } from './playlist-editor/FurniturePlaylistEditorWidgetView';
-
-export const FurnitureWidgetsView: FC<{}> = props =>
-{
-    return (
-        <Base fit position="absolute" className="nitro-room-widgets top-0 start-0">
-            <FurnitureBackgroundColorView />
-            <FurnitureBadgeDisplayView />
-            <FurnitureCraftingView />
-            <FurnitureDimmerView />
-            <FurnitureExchangeCreditView />
-            <FurnitureExternalImageView />
-            <FurnitureFriendFurniView />
-            <FurnitureGiftOpeningView />
-            <FurnitureHighScoreView />
-            <FurnitureInternalLinkView />
-            <FurnitureMannequinView />
-            <FurniturePlaylistEditorWidgetView />
-            <FurnitureRoomLinkView />
-            <FurnitureSpamWallPostItView />
-            <FurnitureStackHeightView />
-            <FurnitureStickieView />
-            <FurnitureTrophyView />
-            <FurnitureContextMenuView />
-            <FurnitureYoutubeDisplayView />
-        </Base>
-    );
-}
+import { FC } from 'react';
+import { Base } from '../../../../common';
+import { FurnitureBackgroundColorView } from './FurnitureBackgroundColorView';
+import { FurnitureBadgeDisplayView } from './FurnitureBadgeDisplayView';
+import { FurnitureCraftingView } from './FurnitureCraftingView';
+import { FurnitureDimmerView } from './FurnitureDimmerView';
+import { FurnitureExchangeCreditView } from './FurnitureExchangeCreditView';
+import { FurnitureExternalImageView } from './FurnitureExternalImageView';
+import { FurnitureFootballGateView } from './FurnitureFootballGateView';
+import { FurnitureFriendFurniView } from './FurnitureFriendFurniView';
+import { FurnitureGiftOpeningView } from './FurnitureGiftOpeningView';
+import { FurnitureHighScoreView } from './FurnitureHighScoreView';
+import { FurnitureInternalLinkView } from './FurnitureInternalLinkView';
+import { FurnitureMannequinView } from './FurnitureMannequinView';
+import { FurnitureRentableSpaceView } from './FurnitureRentableSpaceView';
+import { FurnitureRoomLinkView } from './FurnitureRoomLinkView';
+import { FurnitureSpamWallPostItView } from './FurnitureSpamWallPostItView';
+import { FurnitureStackHeightView } from './FurnitureStackHeightView';
+import { FurnitureStickieView } from './FurnitureStickieView';
+import { FurnitureTrophyView } from './FurnitureTrophyView';
+import { FurnitureYoutubeDisplayView } from './FurnitureYoutubeDisplayView';
+import { FurnitureContextMenuView } from './context-menu/FurnitureContextMenuView';
+import { FurniturePlaylistEditorWidgetView } from './playlist-editor/FurniturePlaylistEditorWidgetView';
+
+export const FurnitureWidgetsView: FC<{}> = props =>
+{
+    return (
+        <Base fit position="absolute" className="nitro-room-widgets top-0 start-0">
+            <FurnitureBackgroundColorView />
+            <FurnitureBadgeDisplayView />
+            <FurnitureCraftingView />
+            <FurnitureDimmerView />
+            <FurnitureExchangeCreditView />
+            <FurnitureExternalImageView />
+            <FurnitureFriendFurniView />
+            <FurnitureGiftOpeningView />
+            <FurnitureHighScoreView />
+            <FurnitureInternalLinkView />
+            <FurnitureMannequinView />
+            <FurniturePlaylistEditorWidgetView />
+            <FurnitureRoomLinkView />
+            <FurnitureSpamWallPostItView />
+            <FurnitureStackHeightView />
+            <FurnitureStickieView />
+            <FurnitureTrophyView />
+            <FurnitureContextMenuView />
+            <FurnitureYoutubeDisplayView />
+			<FurnitureRentableSpaceView />
+            <FurnitureFootballGateView />
+        </Base>
+    );
+}
\ No newline at end of file

From 0ff2bb3ebd1aea80a445363b8031569c281b1d94 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 10:36:21 +0200
Subject: [PATCH 089/134] Update index.ts

---
 src/hooks/rooms/widgets/furniture/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/rooms/widgets/furniture/index.ts b/src/hooks/rooms/widgets/furniture/index.ts
index 37fa57323..7f5946f9b 100644
--- a/src/hooks/rooms/widgets/furniture/index.ts
+++ b/src/hooks/rooms/widgets/furniture/index.ts
@@ -11,6 +11,7 @@ export * from './useFurnitureInternalLinkWidget';
 export * from './useFurnitureMannequinWidget';
 export * from './useFurniturePlaylistEditorWidget';
 export * from './useFurniturePresentWidget';
+export * from './useFurnitureRentableSpaceWidget';
 export * from './useFurnitureRoomLinkWidget';
 export * from './useFurnitureSpamWallPostItWidget';
 export * from './useFurnitureStackHeightWidget';

From 2c9d3a36e6746d82201200eb61a84b8f8481e4f1 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 10:40:27 +0200
Subject: [PATCH 090/134] Update FurnitureWidgetsView.tsx

---
 .../room/widgets/furniture/FurnitureWidgetsView.tsx         | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
index e599275a0..22675858a 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
@@ -6,7 +6,6 @@ import { FurnitureCraftingView } from './FurnitureCraftingView';
 import { FurnitureDimmerView } from './FurnitureDimmerView';
 import { FurnitureExchangeCreditView } from './FurnitureExchangeCreditView';
 import { FurnitureExternalImageView } from './FurnitureExternalImageView';
-import { FurnitureFootballGateView } from './FurnitureFootballGateView';
 import { FurnitureFriendFurniView } from './FurnitureFriendFurniView';
 import { FurnitureGiftOpeningView } from './FurnitureGiftOpeningView';
 import { FurnitureHighScoreView } from './FurnitureHighScoreView';
@@ -45,8 +44,7 @@ export const FurnitureWidgetsView: FC<{}> = props =>
             <FurnitureTrophyView />
             <FurnitureContextMenuView />
             <FurnitureYoutubeDisplayView />
-			<FurnitureRentableSpaceView />
-            <FurnitureFootballGateView />
+	    <FurnitureRentableSpaceView />
         </Base>
     );
-}
\ No newline at end of file
+}

From 5b22164e486b12cd53622e321765d36287a34260 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 10:42:10 +0200
Subject: [PATCH 091/134] Add files via upload

---
 .../useFurnitureRentableSpaceWidget.ts        | 116 ++++++++++++++++++
 1 file changed, 116 insertions(+)
 create mode 100644 src/hooks/rooms/widgets/furniture/useFurnitureRentableSpaceWidget.ts

diff --git a/src/hooks/rooms/widgets/furniture/useFurnitureRentableSpaceWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureRentableSpaceWidget.ts
new file mode 100644
index 000000000..906363391
--- /dev/null
+++ b/src/hooks/rooms/widgets/furniture/useFurnitureRentableSpaceWidget.ts
@@ -0,0 +1,116 @@
+import { RentableSpaceCancelRentMessageComposer, RentableSpaceRentMessageComposer, RentableSpaceStatusMessageEvent, RentableSpaceStatusMessageParser, RoomEngineTriggerWidgetEvent, RoomWidgetEnum } from '@nitrots/nitro-renderer';
+import { useState } from 'react';
+import { GetRoomEngine, GetSessionDataManager, LocalizeText, SendMessageComposer } from '../../../../api';
+import { useMessageEvent, useRoomEngineEvent } from '../../../events';
+import { useNavigator } from '../../../navigator';
+import { useNotification } from '../../../notification';
+import { useFurniRemovedEvent } from '../../engine';
+
+const useFurnitureRentableSpaceWidgetState = () =>
+{
+    const [ renter, setRenter ] = useState<RentableSpaceStatusMessageParser>(null);
+    const [ itemId, setItemId ] = useState<number>(-1);
+    const [ category, setCategory ] = useState<number>(-1);
+    const { navigatorData = null } = useNavigator();
+    const { simpleAlert } = useNotification();
+
+    const isRoomOwner = GetSessionDataManager().userName === navigatorData.enteredGuestRoom?.ownerName;   
+
+    const onClose = () =>
+    {
+        setItemId(-1);
+        setCategory(-1);
+        setRenter(null);
+    }
+
+    const onRent = () =>
+    {
+        if (!itemId) return;
+        
+        SendMessageComposer(new RentableSpaceRentMessageComposer(itemId));
+    }
+
+    const onCancelRent = () =>
+    {
+        if (!itemId) return;
+        
+        SendMessageComposer(new RentableSpaceCancelRentMessageComposer(itemId));
+        onClose();
+    }
+
+    const getRentErrorCode = (code: number) =>
+    {
+        let errorAlert = '';
+
+        switch(code)
+        {
+            case RentableSpaceStatusMessageParser.SPACE_ALREADY_RENTED:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_already_rented');
+                break;
+            case RentableSpaceStatusMessageParser.SPACE_EXTEND_NOT_RENTED:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_not_rented');
+                break;
+            case RentableSpaceStatusMessageParser.SPACE_EXTEND_NOT_RENTED_BY_YOU:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_not_rented_by_you');
+                break;
+            case RentableSpaceStatusMessageParser.CAN_RENT_ONLY_ONE_SPACE:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_can_rent_only_one_space');
+                break;
+            case RentableSpaceStatusMessageParser.NOT_ENOUGH_CREDITS:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_not_enough_credits');
+                break;
+            case RentableSpaceStatusMessageParser.NOT_ENOUGH_PIXELS:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_not_enough_duckets');
+                break;
+            case RentableSpaceStatusMessageParser.CANT_RENT_NO_PERMISSION:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_no_permission');
+                break;
+            case RentableSpaceStatusMessageParser.CANT_RENT_NO_HABBO_CLUB:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_no_habboclub');
+                break;
+            case RentableSpaceStatusMessageParser.CANT_RENT:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_disabled');
+                break;
+            case RentableSpaceStatusMessageParser.CANT_RENT_GENERIC:
+                errorAlert = LocalizeText('rentablespace.widget.error_reason_generic');
+                break;
+        }
+        
+        onClose();
+        return simpleAlert(errorAlert);
+    }
+
+    useRoomEngineEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.OPEN_WIDGET, event =>
+    {
+        if (event.widget !== RoomWidgetEnum.RENTABLESPACE) return;
+        
+        const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
+        
+        if(!roomObject) return;
+
+        setItemId(roomObject.id);
+        setCategory(event.category);
+    });
+
+    useFurniRemovedEvent(((itemId !== -1) && (category !== -1)), event =>
+    {
+        if((event.id !== itemId) || (event.category !== category)) return;
+
+        onCancelRent();
+    });
+
+    useMessageEvent<RentableSpaceStatusMessageEvent>(RentableSpaceStatusMessageEvent, event =>
+    {
+        const parser = event.getParser();
+
+        if (!parser) return;
+        
+        if (parser.canRentErrorCode !== 0 && (!isRoomOwner || !GetSessionDataManager().isModerator) || (parser.renterName === '' && parser.canRentErrorCode !== 0)) return getRentErrorCode(parser.canRentErrorCode);
+        
+        setRenter(parser);
+    });
+
+    return { renter, isRoomOwner, onRent, onCancelRent, onClose };
+}
+
+export const useFurnitureRentableSpaceWidget = useFurnitureRentableSpaceWidgetState;
\ No newline at end of file

From 9170ce85f14d79c620ba4618d8362e9da5d65502 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 10:45:38 +0200
Subject: [PATCH 092/134] Update FurnitureWidgetsView.tsx

---
 .../room/widgets/furniture/FurnitureWidgetsView.tsx           | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
index e599275a0..1998645f7 100644
--- a/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureWidgetsView.tsx
@@ -12,7 +12,6 @@ import { FurnitureGiftOpeningView } from './FurnitureGiftOpeningView';
 import { FurnitureHighScoreView } from './FurnitureHighScoreView';
 import { FurnitureInternalLinkView } from './FurnitureInternalLinkView';
 import { FurnitureMannequinView } from './FurnitureMannequinView';
-import { FurnitureRentableSpaceView } from './FurnitureRentableSpaceView';
 import { FurnitureRoomLinkView } from './FurnitureRoomLinkView';
 import { FurnitureSpamWallPostItView } from './FurnitureSpamWallPostItView';
 import { FurnitureStackHeightView } from './FurnitureStackHeightView';
@@ -45,8 +44,7 @@ export const FurnitureWidgetsView: FC<{}> = props =>
             <FurnitureTrophyView />
             <FurnitureContextMenuView />
             <FurnitureYoutubeDisplayView />
-			<FurnitureRentableSpaceView />
             <FurnitureFootballGateView />
         </Base>
     );
-}
\ No newline at end of file
+}

From f9c89c6cd7bcd117425f0d3931c18078586860a7 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Wed, 24 May 2023 10:47:41 +0200
Subject: [PATCH 093/134] Update index.ts

---
 src/hooks/rooms/widgets/furniture/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/hooks/rooms/widgets/furniture/index.ts b/src/hooks/rooms/widgets/furniture/index.ts
index 37fa57323..3d3ce5fdf 100644
--- a/src/hooks/rooms/widgets/furniture/index.ts
+++ b/src/hooks/rooms/widgets/furniture/index.ts
@@ -5,6 +5,7 @@ export * from './useFurnitureCraftingWidget';
 export * from './useFurnitureDimmerWidget';
 export * from './useFurnitureExchangeWidget';
 export * from './useFurnitureExternalImageWidget';
+export * from './useFurnitureFootballGateWidget';
 export * from './useFurnitureFriendFurniWidget';
 export * from './useFurnitureHighScoreWidget';
 export * from './useFurnitureInternalLinkWidget';

From b5b57951f59e15b514eeca2a409b961a90259168 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Wed, 24 May 2023 19:39:39 +0200
Subject: [PATCH 094/134] Fix imports

---
 .../useFurnitureFootballGateWidget.ts         | 76 +++++++++----------
 src/hooks/rooms/widgets/index.ts              | 33 +++-----
 2 files changed, 50 insertions(+), 59 deletions(-)
 rename src/hooks/rooms/widgets/{ => furniture}/useFurnitureFootballGateWidget.ts (95%)

diff --git a/src/hooks/rooms/widgets/useFurnitureFootballGateWidget.ts b/src/hooks/rooms/widgets/furniture/useFurnitureFootballGateWidget.ts
similarity index 95%
rename from src/hooks/rooms/widgets/useFurnitureFootballGateWidget.ts
rename to src/hooks/rooms/widgets/furniture/useFurnitureFootballGateWidget.ts
index ae5b557cd..3c26750d8 100644
--- a/src/hooks/rooms/widgets/useFurnitureFootballGateWidget.ts
+++ b/src/hooks/rooms/widgets/furniture/useFurnitureFootballGateWidget.ts
@@ -1,38 +1,38 @@
-import { RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
-import { useState } from 'react';
-import { GetRoomEngine, IsOwnerOfFurniture } from '../../../../api';
-import { useRoomEngineEvent } from '../../../events';
-import { useFurniRemovedEvent } from '../../engine';
-
-const useFurnitureFootballGateWidgetState = () =>
-{
-    const [ objectId, setObjectId ] = useState<number>(-1);
-    const [ category, setCategory ] = useState<number>(-1);
-    
-    const onClose = () =>
-    {
-        setObjectId(-1);
-        setCategory(-1);
-    }
-
-    useRoomEngineEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_CLOTHING_CHANGE, event =>
-    {
-        const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
-
-        if(!roomObject || !IsOwnerOfFurniture(roomObject)) return;
-        
-        setObjectId(event.objectId);
-        setCategory(event.category);
-    });
-
-    useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event =>
-    {
-        if((event.id !== objectId) || (event.category !== category)) return;
-
-        onClose();
-    });
-
-    return { objectId, setObjectId, onClose };
-}
-
-export const useFurnitureFootballGateWidget = useFurnitureFootballGateWidgetState;
\ No newline at end of file
+import { RoomEngineTriggerWidgetEvent } from '@nitrots/nitro-renderer';
+import { useState } from 'react';
+import { GetRoomEngine, IsOwnerOfFurniture } from '../../../../api';
+import { useRoomEngineEvent } from '../../../events';
+import { useFurniRemovedEvent } from '../../engine';
+
+const useFurnitureFootballGateWidgetState = () =>
+{
+    const [ objectId, setObjectId ] = useState<number>(-1);
+    const [ category, setCategory ] = useState<number>(-1);
+    
+    const onClose = () =>
+    {
+        setObjectId(-1);
+        setCategory(-1);
+    }
+
+    useRoomEngineEvent<RoomEngineTriggerWidgetEvent>(RoomEngineTriggerWidgetEvent.REQUEST_CLOTHING_CHANGE, event =>
+    {
+        const roomObject = GetRoomEngine().getRoomObject(event.roomId, event.objectId, event.category);
+
+        if(!roomObject || !IsOwnerOfFurniture(roomObject)) return;
+        
+        setObjectId(event.objectId);
+        setCategory(event.category);
+    });
+
+    useFurniRemovedEvent(((objectId !== -1) && (category !== -1)), event =>
+    {
+        if((event.id !== objectId) || (event.category !== category)) return;
+
+        onClose();
+    });
+
+    return { objectId, setObjectId, onClose };
+}
+
+export const useFurnitureFootballGateWidget = useFurnitureFootballGateWidgetState;
diff --git a/src/hooks/rooms/widgets/index.ts b/src/hooks/rooms/widgets/index.ts
index 6f14f5bad..a4ad26a07 100644
--- a/src/hooks/rooms/widgets/index.ts
+++ b/src/hooks/rooms/widgets/index.ts
@@ -1,21 +1,12 @@
-export * from './useFurnitureBackgroundColorWidget';
-export * from './useFurnitureBadgeDisplayWidget';
-export * from './useFurnitureContextMenuWidget';
-export * from './useFurnitureCraftingWidget';
-export * from './useFurnitureDimmerWidget';
-export * from './useFurnitureExchangeWidget';
-export * from './useFurnitureExternalImageWidget';
-export * from './useFurnitureFootballGateWidget';
-export * from './useFurnitureFriendFurniWidget';
-export * from './useFurnitureHighScoreWidget';
-export * from './useFurnitureInternalLinkWidget';
-export * from './useFurnitureMannequinWidget';
-export * from './useFurniturePlaylistEditorWidget';
-export * from './useFurniturePresentWidget';
-export * from './useFurnitureRentableSpaceWidget';
-export * from './useFurnitureRoomLinkWidget';
-export * from './useFurnitureSpamWallPostItWidget';
-export * from './useFurnitureStackHeightWidget';
-export * from './useFurnitureStickieWidget';
-export * from './useFurnitureTrophyWidget';
-export * from './useFurnitureYoutubeWidget';
+export * from './furniture';
+export * from './useAvatarInfoWidget';
+export * from './useChatInputWidget';
+export * from './useChatWidget';
+export * from './useDoorbellWidget';
+export * from './useFilterWordsWidget';
+export * from './useFriendRequestWidget';
+export * from './useFurniChooserWidget';
+export * from './usePetPackageWidget';
+export * from './usePollWidget';
+export * from './useUserChooserWidget';
+export * from './useWordQuizWidget';

From 9fbee8f2556f6c44ede3dbe561dfa4fdc52bcae6 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Wed, 24 May 2023 19:54:05 +0200
Subject: [PATCH 095/134] Fix missing variables & design tweaks

---
 .../avatar-editor/views/AvatarEditorModelView.tsx | 15 ++++++++-------
 .../figure-set/AvatarEditorFigureSetView.tsx      |  4 +++-
 .../furniture/FurnitureFootballGateView.tsx       |  8 ++++----
 3 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/components/avatar-editor/views/AvatarEditorModelView.tsx b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
index e88512e53..a4292a551 100644
--- a/src/components/avatar-editor/views/AvatarEditorModelView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
@@ -11,6 +11,7 @@ export interface AvatarEditorModelViewProps
 {
     model: IAvatarEditorCategoryModel;
     gender: string;
+    isFromFootballGate: boolean;
     setGender: Dispatch<SetStateAction<string>>;
 }
 
@@ -75,15 +76,15 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
 
                         return (
                             <div key={ name }>
-                            <Flex center pointer className="category-item" onClick={ event => selectCategory(name) }>
-                                { (isFromFootballGate && CATEGORY_FOOTBALL_GATE.includes(category.name)) &&
+                                <Flex center pointer className="category-item" onClick={ event => selectCategory(name) }>
+                                    { (isFromFootballGate && CATEGORY_FOOTBALL_GATE.includes(category.name)) &&
                                     <AvatarEditorIcon icon={ category.name } selected={ (activeCategory === category) } />
-                                }
-                                { (!isFromFootballGate) &&
+                                    }
+                                    { (!isFromFootballGate) &&
                                     <AvatarEditorIcon icon={ category.name } selected={ (activeCategory === category) } />
-                                }
-                            </Flex>
-                        </div>
+                                    }
+                                </Flex>
+                            </div>
                         );
                     }) }
                 </Flex>
diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index 7717ea6a9..da280ddac 100644
--- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -1,3 +1,4 @@
+import { HabboClubLevelEnum } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from 'react';
 import { AvatarEditorGridPartItem, CategoryData, CreateLinkEvent, GetSessionDataManager, IAvatarEditorCategoryModel } from '../../../../api';
 import { AutoGrid } from '../../../../common';
@@ -12,6 +13,7 @@ export interface AvatarEditorFigureSetViewProps
 {
     model: IAvatarEditorCategoryModel;
     category: CategoryData;
+    isFromFootballGate: boolean;
     setMaxPaletteCount: Dispatch<SetStateAction<number>>;
 }
 
@@ -48,6 +50,6 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
                 (!isFromFootballGate || (isFromFootballGate && TSHIRT_FOOTBALL_GATE.includes(item.id) || NUMBER_BEHIND_FOOTBALL_GATE.includes(item.id) || PANTS_FOOTBALL_GATE.includes(item.id) || SHOES_FOOTBALL_GATE.includes(item.id))) &&
                     <AvatarEditorFigureSetItemView key={ item.id } partItem={ item } onClick={ event => selectPart(item) } />)
             }
-			</AutoGrid>
+        </AutoGrid>
     );
 }
diff --git a/src/components/room/widgets/furniture/FurnitureFootballGateView.tsx b/src/components/room/widgets/furniture/FurnitureFootballGateView.tsx
index 6fae2351e..cdfbc858f 100644
--- a/src/components/room/widgets/furniture/FurnitureFootballGateView.tsx
+++ b/src/components/room/widgets/furniture/FurnitureFootballGateView.tsx
@@ -16,21 +16,21 @@ export const FurnitureFootballGateView: FC<{}> = props =>
     if(objectId === -1) return null;
 
     return (
-        <NitroCardView className="nitro-football-gate no-resize" theme="primary-slim">
+        <NitroCardView className="nitro-football-gate no-resize" theme="primary">
             <NitroCardHeaderView headerText={ LocalizeText('widget.furni.clothingchange.gender.title') } onCloseClick={ onClose } />
             <NitroCardContentView className="football-gate-content">
                 <Flex fullWidth center>
                     <Column>{ LocalizeText('widget.furni.clothingchange.gender.info') }</Column>
                 </Flex>
                 <Flex className="mt-4 px-2" justifyContent="between">
-                    <Button className="size-buttons" onClick={ (e) => onGender(FigureData.MALE) }>
+                    <Button className="volter-button size-buttons" onClick={ (e) => onGender(FigureData.MALE) }>
                         { LocalizeText('widget.furni.clothingchange.gender.male') }
                     </Button>
-                    <Button className="size-buttons" onClick={ (e) => onGender(FigureData.FEMALE) }>
+                    <Button className="volter-button size-buttons" onClick={ (e) => onGender(FigureData.FEMALE) }>
                         { LocalizeText('widget.furni.clothingchange.gender.female') }
                     </Button>
                 </Flex>
             </NitroCardContentView>
         </NitroCardView>
     );
-}
\ No newline at end of file
+}

From 3f565a69216ab8c3ac91995227f70ede36d5b63f Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Wed, 24 May 2023 21:42:03 +0200
Subject: [PATCH 096/134] Football Gate - Functionality improvement

---
 .../avatar-editor/AvatarEditorView.tsx        | 79 ++++++++++---------
 .../views/AvatarEditorModelView.tsx           | 20 ++---
 .../figure-set/AvatarEditorFigureSetView.tsx  | 11 +--
 3 files changed, 47 insertions(+), 63 deletions(-)

diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index 3b304cc70..3ea8d5f4d 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@@ -1,8 +1,8 @@
 import { AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, IAvatarFigureContainer, ILinkEventTracker, SetClothingChangeDataMessageComposer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { FaDice, FaTrash, FaUndo } from 'react-icons/fa';
-import { AddEventLinkTracker, AvatarEditorAction, AvatarEditorUtilities, BodyModel, FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, HeadModel, IAvatarEditorCategoryModel, LegModel, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, TorsoModel, generateRandomFigure } from '../../api';
-import { Button, ButtonGroup, Column, Grid, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
+import { AddEventLinkTracker, AvatarEditorAction, AvatarEditorUtilities, BodyModel, FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, HeadModel, IAvatarEditorCategoryModel, LegModel, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, SetLocalStorage, TorsoModel, generateRandomFigure } from '../../api';
+import { Button, ButtonGroup, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useMessageEvent } from '../../hooks';
 import { AvatarEditorFigurePreviewView } from './views/AvatarEditorFigurePreviewView';
 import { AvatarEditorModelView } from './views/AvatarEditorModelView';
@@ -10,8 +10,6 @@ import { AvatarEditorWardrobeView } from './views/AvatarEditorWardrobeView';
 
 const DEFAULT_MALE_FIGURE: string = 'hr-100.hd-180-7.ch-215-66.lg-270-79.sh-305-62.ha-1002-70.wa-2007';
 const DEFAULT_FEMALE_FIGURE: string = 'hr-515-33.hd-600-1.ch-635-70.lg-716-66-62.sh-735-68';
-const DEFAULT_MALE_FOOTBALL_GATE: string = 'ch-3109-92-1408.lg-3116-82-1408.sh-3115-1408-1408';
-const DEFAULT_FEMALE_FOOTBALL_GATE: string = 'ch-3112-1408-1408.lg-3116-71-1408.sh-3115-1408-1408';
 
 export const AvatarEditorView: FC<{}> = props =>
 {
@@ -28,13 +26,14 @@ export const AvatarEditorView: FC<{}> = props =>
     const [ lastGender, setLastGender ] = useState<string>(null);
     const [ needsReset, setNeedsReset ] = useState(true);
     const [ isInitalized, setIsInitalized ] = useState(false);
-	const [ genderFootballGate, setGenderFootballGate ] = useState<string>(null);
+    const [ genderFootballGate, setGenderFootballGate ] = useState<string>(null);
     const [ objectFootballGate, setObjectFootballGate ] = useState<number>(null);
     
-
+    const DEFAULT_MALE_FOOTBALL_GATE = JSON.parse(window.localStorage.getItem('nitro.look.footballgate.M')) || 'ch-3109-92-1408.lg-3116-82-1408.sh-3115-1408-1408';
+    const DEFAULT_FEMALE_FOOTBALL_GATE = JSON.parse(window.localStorage.getItem('nitro.look.footballgate.F')) || 'ch-3112-1408-1408.lg-3116-71-1408.sh-3115-1408-1408';
     const maxWardrobeSlots = useMemo(() => GetConfiguration<number>('avatar.wardrobe.max.slots', 10), []);
 	
-	const onClose = () =>
+    const onClose = () =>
     {
         setGenderFootballGate(null);
         setObjectFootballGate(null);
@@ -84,7 +83,7 @@ export const AvatarEditorView: FC<{}> = props =>
     {
         const categories = new Map();
 
-		if (!genderFootballGate)
+        if (!genderFootballGate)
         {
             categories.set(AvatarEditorFigureCategory.GENERIC, new BodyModel());
             categories.set(AvatarEditorFigureCategory.HEAD, new HeadModel());
@@ -156,6 +155,7 @@ export const AvatarEditorView: FC<{}> = props =>
                 return;
             case AvatarEditorAction.ACTION_SAVE:
                 !genderFootballGate ? SendMessageComposer(new UserFigureComposer(figureData.gender, figureData.getFigureString())) : SendMessageComposer(new SetClothingChangeDataMessageComposer(objectFootballGate, genderFootballGate, figureData.getFigureString()));
+                SetLocalStorage(`nitro.look.footballgate.${ genderFootballGate }`, figureData.getFigureString());
                 onClose();
                 return;
         }
@@ -175,9 +175,8 @@ export const AvatarEditorView: FC<{}> = props =>
             {
                 const parts = url.split('/');
 	
-				setGenderFootballGate(parts[2] ? parts[2] : null);
-                setObjectFootballGate(parts[3] ? Number(parts[3]) : null);									  
-																		  
+                setGenderFootballGate(parts[2] ? parts[2] : null);
+                setObjectFootballGate(parts[3] ? Number(parts[3]) : null);
 
                 if(parts.length < 2) return;
 
@@ -262,9 +261,10 @@ export const AvatarEditorView: FC<{}> = props =>
     {
         if(!isVisible || !isInitalized || !needsReset) return;
 
-        loadAvatarInEditor(!genderFootballGate ? GetSessionDataManager().figure : (genderFootballGate === FigureData.MALE ? DEFAULT_MALE_FOOTBALL_GATE : DEFAULT_FEMALE_FOOTBALL_GATE), !genderFootballGate ? GetSessionDataManager().gender : genderFootballGate);
+        if (!genderFootballGate) loadAvatarInEditor(GetSessionDataManager().figure, GetSessionDataManager().gender);
+        if (genderFootballGate) loadAvatarInEditor(genderFootballGate === FigureData.MALE ? DEFAULT_MALE_FOOTBALL_GATE : DEFAULT_FEMALE_FOOTBALL_GATE, genderFootballGate);
         setNeedsReset(false);
-    }, [ isVisible, isInitalized, needsReset, loadAvatarInEditor, genderFootballGate ]);
+    }, [ isVisible, isInitalized, needsReset, loadAvatarInEditor, genderFootballGate, DEFAULT_MALE_FOOTBALL_GATE, DEFAULT_FEMALE_FOOTBALL_GATE ]);
 
     useEffect(() => // This is so when you have the look editor open and you change the mode to Boy or Girl
     {
@@ -274,7 +274,7 @@ export const AvatarEditorView: FC<{}> = props =>
         {
             setNeedsReset(true);
         }
-    }, [ isVisible, genderFootballGate ]);								  
+    }, [ isVisible, genderFootballGate ]);
 
     useEffect(() =>
     {
@@ -304,38 +304,38 @@ export const AvatarEditorView: FC<{}> = props =>
                         </NitroCardTabsItemView>
                     );
                 }) }
-				{ (!genderFootballGate) &&
-                <NitroCardTabsItemView onClick={ event => setIsWardrobeVisible(!isWardrobeVisible) }>
-                    <div className="tab-wardrobe"></div>
-                </NitroCardTabsItemView>
-				}
+                { (!genderFootballGate) &&
+                    <NitroCardTabsItemView onClick={ event => setIsWardrobeVisible(!isWardrobeVisible) }>
+                        <div className="tab-wardrobe"></div>
+                    </NitroCardTabsItemView>
+                }
             </NitroCardTabsView>
             <NitroCardContentView>
                 <Grid>
                     <Column size={ isWardrobeVisible ? 6 : 8 } overflow="hidden">
-                         { (activeCategory && !isWardrobeVisible) &&
-                            <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } isFromFootballGate={ !genderFootballGate ? false : true } setGender={ setGender } /> 
-						}
+                        { (activeCategory && !isWardrobeVisible) &&
+                            <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } /> 
+                        }
                     </Column>
                     <Column size={ isWardrobeVisible ? 6 : 4 } overflow="hidden">
                         <Flex gap={ 2 } className="w-100 h-100">
                             <Flex column={ true } className="w-100">
                                 <AvatarEditorFigurePreviewView figureData={ figureData } />
-								<Column grow gap={ 1 }>
-                            { (!genderFootballGate) &&
-                                <ButtonGroup>
-                                    <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
-                                        <FaUndo className="fa-icon" />
-                                    </Button>
-                                    <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
-                                        <FaTrash className="fa-icon" />
-                                    </Button>
-                                    <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
-                                        <FaDice className="fa-icon" />
-                                    </Button>
-                                </ButtonGroup>
-                            }
-                                        <Button className="w-10" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
+                                <Column grow gap={ 1 }>
+                                    { (!genderFootballGate) &&
+                                        <ButtonGroup>
+                                            <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
+                                                <FaUndo className="fa-icon" />
+                                            </Button>
+                                            <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_CLEAR) }>
+                                                <FaTrash className="fa-icon" />
+                                            </Button>
+                                            <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RANDOMIZE) }>
+                                                <FaDice className="fa-icon" />
+                                            </Button>
+                                        </ButtonGroup>
+                                    }
+                                    <Button className="w-10" variant="success" onClick={ event => processAction(AvatarEditorAction.ACTION_SAVE) }>
                                         { LocalizeText('avatareditor.save') }
                                     </Button>
                                 </Column>
@@ -343,11 +343,12 @@ export const AvatarEditorView: FC<{}> = props =>
                             { isWardrobeVisible &&
                                 <Column overflow="hidden" className="w-100">
                                     <AvatarEditorWardrobeView figureData={ figureData } savedFigures={ savedFigures } setSavedFigures={ setSavedFigures } loadAvatarInEditor={ loadAvatarInEditor } />
-                                </Column> }
+                                </Column>
+                            }
                         </Flex>
                     </Column>
                 </Grid>
             </NitroCardContentView>
         </NitroCardView>
     );
-}
\ No newline at end of file
+}
diff --git a/src/components/avatar-editor/views/AvatarEditorModelView.tsx b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
index a4292a551..5df65b2c9 100644
--- a/src/components/avatar-editor/views/AvatarEditorModelView.tsx
+++ b/src/components/avatar-editor/views/AvatarEditorModelView.tsx
@@ -5,19 +5,16 @@ import { AvatarEditorIcon } from './AvatarEditorIcon';
 import { AvatarEditorFigureSetView } from './figure-set/AvatarEditorFigureSetView';
 import { AvatarEditorPaletteSetView } from './palette-set/AvatarEditorPaletteSetView';
 
-const CATEGORY_FOOTBALL_GATE = [ 'ch', 'cp', 'lg', 'sh' ];
-
 export interface AvatarEditorModelViewProps
 {
     model: IAvatarEditorCategoryModel;
     gender: string;
-    isFromFootballGate: boolean;
     setGender: Dispatch<SetStateAction<string>>;
 }
 
 export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
 {
-    const { model = null, gender = null, isFromFootballGate = false, setGender = null } = props;
+    const { model = null, gender = null, setGender = null } = props;
     const [ activeCategory, setActiveCategory ] = useState<CategoryData>(null);
     const [ maxPaletteCount, setMaxPaletteCount ] = useState(1);
 
@@ -77,27 +74,20 @@ export const AvatarEditorModelView: FC<AvatarEditorModelViewProps> = props =>
                         return (
                             <div key={ name }>
                                 <Flex center pointer className="category-item" onClick={ event => selectCategory(name) }>
-                                    { (isFromFootballGate && CATEGORY_FOOTBALL_GATE.includes(category.name)) &&
-                                    <AvatarEditorIcon icon={ category.name } selected={ (activeCategory === category) } />
-                                    }
-                                    { (!isFromFootballGate) &&
                                     <AvatarEditorIcon icon={ category.name } selected={ (activeCategory === category) } />
-                                    }
                                 </Flex>
                             </div>
                         );
                     }) }
                 </Flex>
                 <Column className="avatar-parts-container" size={ 5 } overflow="hidden">
-                    <AvatarEditorFigureSetView model={ model } category={ activeCategory } isFromFootballGate={ isFromFootballGate } setMaxPaletteCount={ setMaxPaletteCount } />
+                    <AvatarEditorFigureSetView model={ model } category={ activeCategory } setMaxPaletteCount={ setMaxPaletteCount } />
                 </Column>
-                <Column overflow="hidden" className={
-                    maxPaletteCount === 2 ? 'avatar-color-palette-container dual-palette' : 'avatar-color-palette-container'
-                }>
+                <Column overflow="hidden" className={ maxPaletteCount === 2 ? 'avatar-color-palette-container dual-palette' : 'avatar-color-palette-container' }>
                     { (maxPaletteCount >= 1) &&
-                    <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(0) } paletteIndex={ 0 } /> }
+                        <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(0) } paletteIndex={ 0 } /> }
                     { (maxPaletteCount === 2) &&
-                    <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(1) } paletteIndex={ 1 } /> }
+                        <AvatarEditorPaletteSetView model={ model } category={ activeCategory } paletteSet={ activeCategory.getPalette(1) } paletteIndex={ 1 } /> }
                 </Column>
             </Column>
         </Grid>
diff --git a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
index da280ddac..538d45b1c 100644
--- a/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
+++ b/src/components/avatar-editor/views/figure-set/AvatarEditorFigureSetView.tsx
@@ -4,22 +4,16 @@ import { AvatarEditorGridPartItem, CategoryData, CreateLinkEvent, GetSessionData
 import { AutoGrid } from '../../../../common';
 import { AvatarEditorFigureSetItemView } from './AvatarEditorFigureSetItemView';
 
-const TSHIRT_FOOTBALL_GATE = [ 3111, 3110, 3109, 3030, 3114, 266, 265, 262, 3113, 3112, 691, 690, 667 ];
-const NUMBER_BEHIND_FOOTBALL_GATE = [ 3128, 3127, 3126, 3125, 3124, 3123, 3122, 3121, 3120, 3119 ];
-const PANTS_FOOTBALL_GATE = [ 3116, 281, 275, 715, 700, 696, 3006 ];
-const SHOES_FOOTBALL_GATE = [ 3115, 3068, 906 ];
-
 export interface AvatarEditorFigureSetViewProps
 {
     model: IAvatarEditorCategoryModel;
     category: CategoryData;
-    isFromFootballGate: boolean;
     setMaxPaletteCount: Dispatch<SetStateAction<number>>;
 }
 
 export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = props =>
 {
-    const { model = null, category = null, isFromFootballGate = false, setMaxPaletteCount = null } = props;
+    const { model = null, category = null, setMaxPaletteCount = null } = props;
     const elementRef = useRef<HTMLDivElement>(null);
 
     const selectPart = useCallback((item: AvatarEditorGridPartItem) =>
@@ -47,8 +41,7 @@ export const AvatarEditorFigureSetView: FC<AvatarEditorFigureSetViewProps> = pro
     return (
         <AutoGrid className="clothing-container" innerRef={ elementRef } columnCount={ 3 } columnMinHeight={ 50 }>
             { (category.parts.length > 0) && category.parts.map(item =>
-                (!isFromFootballGate || (isFromFootballGate && TSHIRT_FOOTBALL_GATE.includes(item.id) || NUMBER_BEHIND_FOOTBALL_GATE.includes(item.id) || PANTS_FOOTBALL_GATE.includes(item.id) || SHOES_FOOTBALL_GATE.includes(item.id))) &&
-                    <AvatarEditorFigureSetItemView key={ item.id } partItem={ item } onClick={ event => selectPart(item) } />)
+                <AvatarEditorFigureSetItemView key={ item.id } partItem={ item } onClick={ event => selectPart(item) } />)
             }
         </AutoGrid>
     );

From a7772e24672acd20610f2788f78e29380d0ee793 Mon Sep 17 00:00:00 2001
From: oobjectt <objectholos@gmail.com>
Date: Wed, 24 May 2023 21:54:28 +0200
Subject: [PATCH 097/134] Changed conditional to more simple

---
 src/components/camera/views/CameraWidgetShowPhotoView.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/camera/views/CameraWidgetShowPhotoView.tsx b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
index 59345981b..decb7cfd3 100644
--- a/src/components/camera/views/CameraWidgetShowPhotoView.tsx
+++ b/src/components/camera/views/CameraWidgetShowPhotoView.tsx
@@ -43,9 +43,10 @@ export const CameraWidgetShowPhotoView: FC<CameraWidgetShowPhotoViewProps> = pro
     const getUserData = (roomId: number, objectId: number, type: string): number | string =>
     {
         const roomObject = GetRoomEngine().getRoomObject(roomId, objectId, RoomObjectCategory.WALL);
-		if (roomObject && roomObject.model) {    
-            return type == 'username' ? roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_NAME) : roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
-		}
+		
+        if (!roomObject) return;
+        
+        return type == 'username' ? roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_NAME) : roomObject.model.getValue<number>(RoomObjectVariable.FURNITURE_OWNER_ID);
     }
 
     useEffect(() =>

From 87bf3486416ba6267498f35e5321d1cb64c9be7d Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Thu, 25 May 2023 22:06:18 +0200
Subject: [PATCH 098/134] Avatar editor - Fixed wardobe

---
 src/components/avatar-editor/AvatarEditorView.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index 3ea8d5f4d..73ec044e2 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@@ -272,9 +272,11 @@ export const AvatarEditorView: FC<{}> = props =>
 
         return () =>
         {
+            setupFigures();
+            setIsWardrobeVisible(false);
             setNeedsReset(true);
         }
-    }, [ isVisible, genderFootballGate ]);
+    }, [ isVisible, genderFootballGate, setupFigures ]);
 
     useEffect(() =>
     {
@@ -292,7 +294,7 @@ export const AvatarEditorView: FC<{}> = props =>
 
     return (
         <NitroCardView uniqueKey="avatar-editor" className={ avatarEditorClasses }>
-            <NitroCardHeaderView headerText={ LocalizeText('avatareditor.title') } onCloseClick={ event => setIsVisible(false) } />
+            <NitroCardHeaderView headerText={ !genderFootballGate ? LocalizeText('avatareditor.title') : LocalizeText('widget.furni.clothingchange.editor.title') } onCloseClick={ onClose } />
             <NitroCardTabsView className="avatar-editor-tabs">
                 { categories && (categories.size > 0) && Array.from(categories.keys()).map(category =>
                 {
@@ -313,7 +315,7 @@ export const AvatarEditorView: FC<{}> = props =>
             <NitroCardContentView>
                 <Grid>
                     <Column size={ isWardrobeVisible ? 6 : 8 } overflow="hidden">
-                        { (activeCategory && !isWardrobeVisible) &&
+                        { (activeCategory) &&
                             <AvatarEditorModelView model={ activeCategory } gender={ figureData.gender } setGender={ setGender } /> 
                         }
                     </Column>
@@ -323,7 +325,7 @@ export const AvatarEditorView: FC<{}> = props =>
                                 <AvatarEditorFigurePreviewView figureData={ figureData } />
                                 <Column grow gap={ 1 }>
                                     { (!genderFootballGate) &&
-                                        <ButtonGroup>
+                                        <ButtonGroup className="action-buttons w-100">
                                             <Button variant="secondary" onClick={ event => processAction(AvatarEditorAction.ACTION_RESET) }>
                                                 <FaUndo className="fa-icon" />
                                             </Button>

From dfca068a3d30d76284eb0787a5ed9e040b05da3e Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Fri, 26 May 2023 00:13:27 +0200
Subject: [PATCH 099/134] Avatar info - Fix decoration & HCCenter in Actions

---
 .../menu/AvatarInfoWidgetDecorateView.tsx          |  8 ++++++--
 .../avatar-info/menu/AvatarInfoWidgetFurniView.tsx |  2 +-
 .../menu/AvatarInfoWidgetOwnAvatarView.tsx         | 14 ++++++++------
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetDecorateView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetDecorateView.tsx
index 5ad5a6800..273503c29 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetDecorateView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetDecorateView.tsx
@@ -1,6 +1,7 @@
 import { RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction } from 'react';
-import { LocalizeText } from '../../../../../api';
+import { GetUserProfile, LocalizeText } from '../../../../../api';
+import { ContextMenuHeaderView } from '../../context-menu/ContextMenuHeaderView';
 import { ContextMenuListItemView } from '../../context-menu/ContextMenuListItemView';
 import { ContextMenuListView } from '../../context-menu/ContextMenuListView';
 import { ContextMenuView } from '../../context-menu/ContextMenuView';
@@ -18,7 +19,10 @@ export const AvatarInfoWidgetDecorateView: FC<AvatarInfoWidgetDecorateViewProps>
     const { userId = -1, userName = '', roomIndex = -1, setIsDecorating = null } = props;
     
     return (
-        <ContextMenuView objectId={ roomIndex } category={ RoomObjectCategory.UNIT } onClose={ null }>
+        <ContextMenuView className="mt-4" objectId={ roomIndex } category={ RoomObjectCategory.UNIT } collapsable={ true } onClose={ null }>
+            <ContextMenuHeaderView className="cursor-pointer" title={ LocalizeText('guide.help.common.profile.tooltip') } onClick={ event => GetUserProfile(userId) }>
+                { userName }
+            </ContextMenuHeaderView>
             <ContextMenuListView>
                 <ContextMenuListItemView onClick={ event => setIsDecorating(false) }>
                     { LocalizeText('widget.avatar.stop_decorating') }
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetFurniView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetFurniView.tsx
index 4dcf4b585..61521d9bf 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetFurniView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetFurniView.tsx
@@ -42,7 +42,7 @@ export const AvatarInfoWidgetFurniView: FC<AvatarInfoWidgetFurniViewProps> = pro
     }
 
     return (
-        <ContextMenuView objectId={ avatarInfo.id } category={ avatarInfo.category } onClose={ onClose } collapsable={ true }>
+        <ContextMenuView className="mt-4" objectId={ avatarInfo.id } category={ avatarInfo.category } onClose={ onClose } collapsable={ true }>
             <ContextMenuHeaderView>
                 { avatarInfo.name }
             </ContextMenuHeaderView>
diff --git a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
index 6a5d5256c..1da463a94 100644
--- a/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
+++ b/src/components/room/widgets/avatar-info/menu/AvatarInfoWidgetOwnAvatarView.tsx
@@ -1,6 +1,6 @@
-import { AvatarAction, AvatarExpressionEnum, RoomControllerLevel, RoomObjectCategory, RoomUnitDropHandItemComposer } from '@nitrots/nitro-renderer';
+import { AvatarAction, AvatarExpressionEnum, HabboClubLevelEnum, RoomControllerLevel, RoomObjectCategory, RoomUnitDropHandItemComposer } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, SetStateAction, useState } from 'react';
-import { AvatarInfoUser, CreateLinkEvent, DispatchUiEvent, GetCanStandUp, GetCanUseExpression, GetOwnPosture, GetUserProfile, HasHabboClub, HasHabboVip, IsRidingHorse, LocalizeText, PostureTypeEnum, SendMessageComposer } from '../../../../../api';
+import { AvatarInfoUser, CreateLinkEvent, DispatchUiEvent, GetCanStandUp, GetCanUseExpression, GetOwnPosture, GetSessionDataManager, GetUserProfile, HasHabboClub, IsRidingHorse, LocalizeText, PostureTypeEnum, SendMessageComposer } from '../../../../../api';
 import { Column, Flex, LayoutCurrencyIcon } from '../../../../../common';
 import { HelpNameChangeEvent } from '../../../../../events';
 import { useRoom } from '../../../../../hooks';
@@ -67,9 +67,11 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                         roomSession.sendExpressionMessage(AvatarExpressionEnum.WAVE.ordinal);
                         break;
                     case 'blow':
+                        if (GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent('habboUI/open/hccenter');
                         roomSession.sendExpressionMessage(AvatarExpressionEnum.BLOW.ordinal);
                         break;
                     case 'laugh':
+                        if (GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB) return CreateLinkEvent('habboUI/open/hccenter');
                         roomSession.sendExpressionMessage(AvatarExpressionEnum.LAUGH.ordinal);
                         break;
                     case 'idle':
@@ -204,13 +206,13 @@ export const AvatarInfoWidgetOwnAvatarView: FC<AvatarInfoWidgetOwnAvatarViewProp
                             { LocalizeText('widget.memenu.wave') }
                         </ContextMenuListItemView> }
                     { GetCanUseExpression() &&
-                        <ContextMenuListItemView disabled={ !HasHabboVip() } onClick={ event => processAction('laugh') }>
-                            { !HasHabboVip() && <LayoutCurrencyIcon type="hc" /> }
+                        <ContextMenuListItemView className={ GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB ? 'text-muted' : '' } onClick={ event => processAction('laugh') }>
+                            { GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon className="end-1" type="hc" /> }
                             { LocalizeText('widget.memenu.laugh') }
                         </ContextMenuListItemView> }
                     { GetCanUseExpression() &&
-                        <ContextMenuListItemView disabled={ !HasHabboVip() } onClick={ event => processAction('blow') }>
-                            { !HasHabboVip() && <LayoutCurrencyIcon type="hc" /> }
+                        <ContextMenuListItemView className={ GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB ? 'text-muted' : '' } onClick={ event => processAction('blow') }>
+                            { GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB && <LayoutCurrencyIcon className="end-1" type="hc" /> }
                             { LocalizeText('widget.memenu.blow') }
                         </ContextMenuListItemView> }
                     <ContextMenuListItemView onClick={ event => processAction('idle') }>

From f042a722f29cfcb026f201e8cddc06b472fac9e9 Mon Sep 17 00:00:00 2001
From: duckietm <troop@duckplaza.com>
Date: Tue, 6 Jun 2023 11:21:12 +0200
Subject: [PATCH 100/134] Place Frank back in Alert

---
 .../views/alert-layouts/NotificationDefaultAlertView.tsx         | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
index f480e6160..663b5bbfb 100644
--- a/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
+++ b/src/components/notification-center/views/alert-layouts/NotificationDefaultAlertView.tsx
@@ -24,6 +24,7 @@ export const NotificationDefaultAlertView: FC<NotificationDefaultAlertViewProps>
     return (
         <LayoutNotificationAlertView title={ title } onClose={ onClose } { ...rest } type={ hasFrank ? NotificationAlertType.DEFAULT : item.alertType }>
             <Flex fullHeight overflow="auto" gap={ hasFrank || (item.imageUrl && !imageFailed) ? 2 : 0 }>
+				{ hasFrank && !item.imageUrl && <Base className="notification-frank flex-shrink-0" /> }																					   
                 { item.imageUrl && !imageFailed && <img src={ item.imageUrl } alt={ item.title } onError={ () => 
                 {
                     setImageFailed(true) 

From 088c6bb9467b499c19aa24f05954f9bf0af05222 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Sun, 25 Jun 2023 22:11:55 +0200
Subject: [PATCH 101/134] HC Gift - Design improvement

---
 src/assets/flash/buttons/button_gray.png         | Bin 0 -> 4637 bytes
 src/assets/flash/buttons/button_gray_active.png  | Bin 0 -> 4637 bytes
 src/assets/flash/buttons/button_gray_hover.png   | Bin 0 -> 4645 bytes
 src/assets/flash/habboclub/hc_gift_monthly.png   | Bin 0 -> 268 bytes
 src/assets/styles/bootstrap/_buttons.scss        |  14 ++++++++++++++
 src/assets/styles/icons.scss                     |   6 ++++++
 .../NotificationCenterView.scss                  |  14 ++++++++++++++
 .../NotificationClubGiftBubbleView.tsx           |   8 ++++----
 8 files changed, 38 insertions(+), 4 deletions(-)
 create mode 100644 src/assets/flash/buttons/button_gray.png
 create mode 100644 src/assets/flash/buttons/button_gray_active.png
 create mode 100644 src/assets/flash/buttons/button_gray_hover.png
 create mode 100644 src/assets/flash/habboclub/hc_gift_monthly.png

diff --git a/src/assets/flash/buttons/button_gray.png b/src/assets/flash/buttons/button_gray.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2ca49c8d3fb02fc93373f8424e4732fdc22a9c3
GIT binary patch
literal 4637
zcmcIm2{=^k+dq~FWoxk%#uR0leT<oT2{D%JOrlV;n=muYjJ;42DrG5KmXHWpDhlCk
zl@gMqR6_MqLU={Qccl7vUElk?SJ!ua-(1%@&pglh-M{<(-OqiW=fpWVSgn*+l?DJ{
zrH!?P%i;)L%FD&T`&xJm6CA`@X7*+PP<dkitaCCrhtRBD>;WJ~4gijW*H_T!peX<x
z2myehV*p_E764RQ1V+(803eNEo0~h?n43eK_*^F2j{yMIO<5^HWb)IsF>Uohp}7x{
zqAo{X)%^){ge7~EC}}EtHjBw(u$7v5q6#F745+o!?Z`(?8{I4_<yVs{BsVVKj8Z0%
z^|_W^$I42te;yy79Vq2~y!^RlcDTN6rxK7<h)7M9uoX$TziKSXD04_5(OEbQM2e{I
ziPQn?+$?K%SA;E>Z+`GFI$M)3x?5aiEY$tFDDQDQCelH2A?KXO(EfviX@J6+%LEmD
z1*KTLmTdyOy6tG1YN|d{S&P}Q*-YU<9D$O!a?7m#rTnyK7mTW7?+^+vyFR0itoc-J
zr)hONwmen_Q<JH$(5qN!c@%kCuivo0n=FeF16JGkDe>Inpg09ooQC2XX#ZQ_wYAjl
zeJ^(CzoyIFPUYL!w)F{CDJ~PLrNCcyKF=`w{Dxk@6BoS&XzQgnvmSeOxI9k3z8+XR
zI_H7zf8IeNRb#8FuVAql^w(mig@6g}wii95P?hN#mi)zqV;{@sI#hu@EpdA<PaK1l
zNk_KAfO{`zsgLnM<hdfQ+SA5bIeQ~SoTyoCeC0kjw-klcTWCe4Nx83%F^#$94Xlk@
zMox~mdl5d_QI1B!%hu_^wCwK{vd&>V*4Oss#7t{Q&IhPVm}Lgb=G<CEIvjWY_yb${
zsxwXRq_44!h^e1*GN$Ej&7Zqdvo@|{TEU5SJhC%D*EIa2<Ys9F$fMaiUJLo$hG`@u
zJfu%I`Iul~)bK0oMnS(;)R{3ttJdbjt%~CqrO&t96wiu?Sc~c=NZvP98wAYvNR&px
zc;cKt*G)&s%S*Y5t+f`v5Gi-bRJ~hV+6>h#H5IwnNmA7e<Fl;EY!iN2Yn1J4)oUW0
zsM$TM?IKxw)?Sy8kr$_EqAd=-(OhG_sw1WaB0-m{F>7#=UoCZKtCYN);?|IMW|6XP
zRB>)-k;)f!qEuE)nQ2tJm(PlfBjGWxZY;MubfH4AblJLFD?on-&0lZliC&jzjh1<>
z#?yKMXhi?<dSc9A8fPSJ67`pSq`ZP^-ce=firdRRS>+`JA3j-Xbu>ZxoCup#o4DnT
zHu`7_gzK!ldKt+|CC|?}yU1y^OqE2H`u0P`mTHy(XG5J0ooPiLomN<ti?Ll+J!k9N
z6$ZtHYis4b4sy0$%}3;M^Eb7Zqm);y%#W|U8BB$uY|^UI6kE2~t$VkgDUUgkev4W;
z?tY+DtxMy<ZRv{WZrx$$VUJ<?K+#zVtJ@b|x9~=;ZC)>zda~qCwHsMCR`zM{lL^+j
zuKh}4^dxIQFjg>ax!-V}7%tjqnxO5oYIwQk;f*)7w`%2{<|U3rjwM-dELOM}chCa9
zZ$o8L@bTbuyybq|B+a2jPwPh;HQACw@<Z!~;6qyJc3sdvlJf6~j?3~fGomvJGx6f2
zo7OjN55X$U@+|Yrsn-298@*jzJ8bw>^fG$%8>!|GNf?)49hi=i&iT&J3#u2AT{gG~
zI##n?*%3qJA;qB$9Xrky(kswA(Hyj2x@dY7T8VyFXE`aWe=Efq=c)=Ct|G74e&#*N
zK5wmSW4^2ti@~6$HXmtbKIpoaouXEtiG^h-!J^%^{o%0geEqJxE4SHFtmY}Li?&Bn
zS{}eo3r-E(Thm<C{4ynMlVfU7vSUiGR<F*2lSskYLiwVEf{NXJc{f{J-n;Y^lopU|
zPa^6Im+QUPk<cmIZdBA=jxRh{`X={O8M#1c#<om9KU|b~&a-U4WysFxJZkyP?K(RM
zCF7^ywn2G??RrD?lOEei+a0&(?yY|x`TkHw_0FQ54Li>~HxD>OG&lCH_pG-%;AT#`
z<+#BypEQuI?VX&PUR1N=vZKJ;c9))~Z;4xB*Qx5v>eRrpz++QlYL`w#wW?-GWbLX|
z_Bz73G_vL8y3mU3Xzx7l_*Vf3+<RSeN*Wy_+5!JP{(oY8kjkiyDnu2gYPIqSl}E?-
z$B)Mo<FnWKDqE?HqDL_EK2%B)wZn(sOTOFLgYCW2GZ}<2#-w<}KZ6M_)zr;MOu#3U
z9!#e0OZm7vu;~!Bk5&03uc<$(;Ivlnr6>I7+ivN06?g4DY{n2rZc|RZ_^7M3Yh9_M
zM`Kmx6@~8gS7#n}wd0;m#eVGMe|($yHvU1=$Ijujz`q0Yr-ZZavtm>Evc<A?F%mIN
zC*Gg%YtnAA+2mEYu`u7EEz3T0ruAd%1RMwd;MrOOEmJQem5FiCoLtTm&dC=~UaWet
z>jleL->54zbHXC*OYq3}`cE$7)DVNPhoQSd$|pwt)|?TaCC?g7J(+kr8#sF-{8f0}
zSM}0%&l|fQ4av>b&jrnztZ0{YUo}R9Xd@vN+G92eY$tE0-AFCG_O$ib2l>AeIud4c
ziMco1vysgegB9;8W_VA>E{#1}J`fwA@D#cRT9fGI++9>rbiSzOG)M1qX=ZG7Ed02-
zcR{^w*pt&wq)S}ga!w>3r`*kqB{dysQja^(Hp#*v|LVWqzjuJ?0WYmDW%*eJ62dZQ
zO*#X1cYE%n-f`6G)*5z5a}ZjWT4(mv@=9tDNk+-<linqNO_tM&*e2!3w!Kqu_k8x7
z=CP!ZdiH(xGj`O_m!asPd|$t=VGqoM&wYjrQ<V~QtvLBn8@bWR>KX~3!p`wXp3&CR
z|6oxq#3AZTtPrfQR(e_3$W>owUk~4~aq<N2ZTv;S&K-^FJ2kF0u%f;kIka-sI%Ayr
zD~s+^*M|!CC(m7)+i~WWVUW`1HGcZaz5SI11x|ShyYZKv1p2<jb>c><4}N^tQ&JtF
zPgU}Q;dIJ2hwr|rTk|D;$nbRU{^tsfw6mR;gbNNW4zF7KykzTSQ*Bb;ro@j<^}KX;
zKp=D@sx~p(P9J5g2?&!4iw?8WJD^urj4cjyt1ovbZSWfKeC$@@URNI&t`XMT9^Ulz
zV!*b5I{~AzJh>MaJ{OJpwC^p##}d*)#%yTrwBD=7xo6I-&NzBz%ldvbRpa%-YgeBY
z*UZHBCw8p8M(Rc%z<wEwAN6efu-CxvA~(NkjfPm$;il|xjoGhb`*H@1Hz{x08PPtM
zTb<S6-6<0AM%WUl9e5&;6u2^ba?7*F{yi_}^B<jzak!9OOn`;ePOj*)yOHk56125u
z*_s#%w)D*fJKD8<l~GXQ{4Fsh>p58yJd-qAAalUs01MIMwI$%ryZg;0$4j!F>X!#h
z?wY*1K>y@A8~N6>DWK$omtiSaC<oUt!n{EW=g)t5XnXZK$E&Wsf9f@Fa4aivF!9kJ
z!+*F2xsEhkOAX=n&EJ(AlqAU&sJj`t?C%`AJksW$pORnL<k|E^L(-(dq*XOy%Jwc|
zbdz*;LJrxk*be8IZl9GAnA7k{`1WxeYp884Q##`GeAQG<>x4$QVD4fBjvCm%Y~fB}
zudVm}Mx)8S&q}guB5SP5U3Vi|l<E^B1k<nq|K7T>pkx`3(aKRhlfm%8`N4@#Hwrr)
zbLN+crA^FnwO@drmB0!oJ2GiuVZp@2WZSlF;DY%F>l|<p7rHpOg6n{(?uAKkF2%F<
z5CDM8s>MqL$jDR%0EsC!*<I*vZ%3qY{oxckm&$+#`}06F_<d>;%%jkJ8A1q^!D4fa
zp`&$;PzalD4BcU1kF@8RGkn<Ap?rpGr~{c6>PsWgp(a~aN*e_eK?Z+@kOB$z_u~kN
z!N$;U#6<A_;xYmX`34dC8bi$%Jwn{=ogn61J_BM1N5N=FBobmsfK!o7Je5H}>O;^-
zGzx)2BTxn~G>V8eAfgN)-+xfhAp~N?r!$Ez7M9-~f-_^Nk5I@XA`n4ALGU09oXck+
zPy_-2fkY$FXc&lq2|_qRN-&Hg*sw(MoyLM8pz+x}A)CvAEYeb_+yJ356pVREj6d%u
zH%IV2V_@zO!4w_>1xGH5`vJ7K|97ar|4+0)ND2hKd=L5`i3Q{k9s}XR5O4$dGzKY<
z!4Yow;fzlEY0C@X`+bv3ry&@A41W+N00Tq)bj9=G3b_Iw?*E|U=i{GhctmqPgCgYe
z$y~1Ak1cch!2&^J;AqHZdkT%sS>)AOjOn`x!-67Y7(>DRL&K057#d4PVTouo5rfr3
zqKHW364V~72|7hc`4x<XAyH%$nus+3@p?$~f52Qin;G&uP<wl#4M!lPaA*u03u7o4
z6r9bb6A1)57KbxH!H{@@Aq<PBV_*b4k_w{}s8~D=YlxxZaNptr?Jc;pfW-tZ+Aozb
zol65be&&dXVc-}96b1{U(3o@>g^8uY@JuWUMrU9s26!40OTeRlusQPCU>i~Veq~*Z
zioO_?0Tx3yKpMhm6bcQ7#UXJpDjJW3;jnln4NE~9;ut6>gia$exqN>LSSf6O3X6f@
zaad5uf1)wx`f>U8TsoL@%#Wf5%Nle7im_%3z&#B4)-X%m^Q~=M8T)=&`rZV7Y{<8Y
zBvNRLjbIF=Emi=74*kB&{-?zLmV_nRARh)u`Y&~{1QT$X!XOHtVa5VC;dd$z@f%VE
zl)!%%LZ=xJ3<wN73}tADf??@sCX8SJ-f)Hl0}LL|#2C=Qz4-qXvcyjFp>S9X@P!LD
z@BfLk-z)zAF6|%N@qf8T|1Ql4vG~&cwJ41c|5U$AxL;n@O9#O>Yw#ohXQ17WgJ^N~
z^Dtv@z=ZO_qY5Q;W%0Cx+gO;9H@njIFqx4ekmU4(3KEfikQgb^NKc5|eG$Iop%_5y
hq4`R!bMkbi1R!xx#CNJe$`rH&Y)B3kWn1?g`Y$}xWVHYQ

literal 0
HcmV?d00001

diff --git a/src/assets/flash/buttons/button_gray_active.png b/src/assets/flash/buttons/button_gray_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..0b60ede90af8893b0b42b3edc343a146230f8433
GIT binary patch
literal 4637
zcmcIm2{=^k+dm{i))q@)Oi`BE$1syM#*&>$6l!)8W~Q037gG`{Who*{NQ5l)QV4I0
zq-0CdDpW5egjYm-N87*a`rhxoy1wiC=DN;#=6TM2|L*&DKfn7tC*H-$Mn+0i3IG5Z
zJ6kKar4hW8S1beXYvHjBa1di!I9dQe<%#`st|{OgLbY{s1b|pM05}d_UqGjW<^XUY
z3;>3Y0f6xv08nY=8^?qIfE0pdY3X8TX$f)RaTu%sIsn)<XQhUaNRQXXw%3P*=RQD+
zx*d60_b1R5k>X1vpHbPfd6_H*TdA2Rsz9{LfZDp;7IwO9^suUwUrnlz*tlXdN|{K~
z=UDd~D=WSJX<}k-u$1%R%BPySk^1(XN<eZUA}vkaUL^6}s_|&!%wdHjSHTD%6j9$J
z)BzkktZR2yM68f+x&I(0TazccTTEm;-1E99_hAP{=p?b2bKYxs|G}X%fWp};colsG
zr8pxk`$Twk`_VJ1Y5ELhEk?s;3x)gfcyf}A>74%M{4-B38dt|P;R~<0KcS4S`B?3s
zX>&WSJWd)@lc}%Jr&wuy6nR>2z;K|KB#T)FthNhK;(EqIaSEt-4aL{cfj7V_Tglz~
zp6}3qMU%dr#<R0;@8_>lTrN;cg}>;2nql$jHLZXvCVC6d)=O_;KJ@8wdzgNGJ+O9c
z-U~hOw2Mfr##UATfyH9bUy5B8gC;rKo<AdotIX6e<u5HB`%pgLr3&n6jo*7^@))d4
zO4tSi?!K6#JTwA?=ZiRMj~i>{9E}n2q87CYmHRwAQWer}p%s;;<i0q^Hs+Q$FgKcx
zo}B3L!GClh9~HvO*6G2t9Pbt~&ttsS*Y@Yc&S*$11gVQ#WQNM-+*(CE9Dm{XeS7(;
zv(0a%uCa^>X`ga3X5?-yoNuaG8{ajf;6gnv><-d3kNhC9SxN!YIoIT~n9pgLK|&(K
z`gK!|@fXJozc6nU3}{849mlt6Z9d$lIDt|6bh};goQR06sBWUfJ#)1oz;cgxsSw5$
zWB<8sCR$!z(qq|LTd|8mxy$D2y<$=ps9wow;a(RBRSS&Y@@9)oM$6lx?O&;06JbZs
z?OE+0WbRpeU0hmTjI4>aI`~?1jqR$g*j9)*O|HhG!9{+xWYbnjc{#<cVI7PjW!>oF
z-0&im&*}uptk^R1=nfyhl^I7OV_)7_;c)0;g<|RQb+=Z6@eW$P+RhcdF5VU+{Ys6i
z^&HTM+45>~++YT0EM*q`m%LD3K{fBFGIZtb<sWVG5<?H4EVVhBD0N<hMXXISeXWf?
z+6v*gDz9Env{A_maLq1qSuI^9UZuYMP_ea|b<nwRS3_57kyp13R^?J$kIl1l^&JXB
zVuH1`@;(RITd(FL@;LdMI?7SXD`oN%DsP5TpeVaDRc91iO&!*~UC)rmoJhY#shsdU
zP^#9WasRedMNF^mi0g>gh<vc<oVd;Hi?3R_qt`aCmrFZY@~7I3tQ#`@+WVwKb*^i_
z6dyau9ORD|%vkR?Tp&b>Hkv1D`>h&Tp?P@YP3^5(xu>~F<HGS|+l|Evm*Njv!S`*b
zOb$IBnr>vh-#%G$ILX_#bE76pVpx87{V;r3E8U?7x+OXPuIPj;4>Kz|t1z1&M!acz
z)BX^w(jw0~&yr$0P_xn3&ArQxS4AtM#k`hmd7q4N3)O+?DCu124!@{+F~x0z8^3Ec
z%bgW9Od3`k-q5w<d?Bp@y%Wtw2c(OpN28T!cXU<|vj(=3U2*QJpyMji%I#<05gqf^
zx;N&_x-jW<T3XAI7RLRayV<E~1)5k`h7v5sW7`&|br<S)<^6G+CCO}=*1BYWB(?QE
z>@@$>;N3MXRV^=4BQ`mwg`_yA_G$I$EV_skoGX+sN-U_@-Jf@})$N_zvx3qBqWwuk
zec=kdcRJ!aW!sI5ddrOp&zHW=Jyk|35LmFR(=Ut^WuEsg+ixAVGbWExesjCd4t&YP
zDY$(|USWscaQ&3mcH(yD?YVpF-wEFx%BbF1w6kI7*{7C4hX|G?zV+VqHU~T`iMO0L
zIOh`wv$cIwa?^`yc3g4h``Yi)^Y$<CDC{{^omrh0To!z6dYRhg6VYv|S>jo{YL$JC
zurH6AzE~Gtksafk=bP{{=zwRRTTV%%b5sWqxF_&Wj2}`NwNZtj!ceVNKB3Zie1F13
z0wE!Loxie;${2bSv*1S|CsVroczvWh-OsRne>|HC!I)rDy%L_l_?K(yX2mDrlS=oe
z()Oi(*d5$_h|<rje3aKb5M6LutMBq7-qUTjbbE?>_8zvNiy^lur(NpoY3o^6>g?56
zRr!ZP@A|8=4|+OqPp0EObn`yE$$XP=zxhM=$eG~3gY%~abDnd{rt@WsWgTM0W1COB
zI}y;V-E6nXr*LCozEgXaW9Dqzhqg&L4*uS|tp-}AUPdfi#zwPq*^k&KpFeuO>iMqc
zOcQ<Mp76{`tBB8`qZ8{tx=m2R3?d$c?+PoQ9Q|8!R&0(mXFUCA^37cE+>OYWk#%3x
zOFO)8?CKnro3Eb_nKN72A?vwnoC?uKLMpV!?GjlozAn3wT1MJ4w&U;R|4QsioXaKT
z-t5Rmwp0vNysen!J|4e3-nn8hE=b`qbPcp7$;Y*~sG{gXQO#+#-lx*cxav6gadqE<
zdfkXeryog`xO?QBNIFiwlNm>BKGLinf1rJei9`N1aD8C!Aj1n@T3^ZxunERTWKf%R
z1|9A^Yf5W!*6P(7aXRB9ur0OC?62jP)F6_LQ{E-NP5F`{rxmqL(wSx7RB-1)_Uo4M
z<gj|yJ=POe^zi55nBjc?fSwUA%>7UOhIDh45_GK?sk5Eb=wfq?Xq3vz@k*K1*3*A)
zRV~0F>db5q%!oExS;Xj7e^-Am|A-0FB<@YZCH~GGjp{o!t~M~EKOZ?Hvud3QPW`1-
z@2Ts<h5J+HFVF8dd&@9HY4e%@edWG^%7Oxyyu{r`mmdZDzrc0lMyn5gc>AoRI!d3S
z<O9R$lx>dOeN(sQbHcFU>Aw9>6&k7Mx-SbBom!n<w)OkS*2$*XrM*c_7@L0f!qo|Z
z(2c6v#ArW#l)fe?LNX#I!bb0aUR^P^IM}1U+^Mv|XVCkhM~P=$eQ=~kL|;c_^Os9O
z+k%>c#$>s2&o6!|8uRPeTVxc6KNB`?NA;xkT|Le@dv<lk(X*!O2h>ze)(fs(eNtRA
z8#j>Dwe}jZ7kvQxc_?AbyYc;AgMdq%{Hiq?%bE{2XGdzxeHq`EGib6&dDG6Qj``f`
ztS;Yfk)YRt)?n@66T!q_nd~XkCl3Rky;#WaJQ?eBF}oNKi>RGi+3#>8-I>X6Z_Bbb
zGvu50&xblYw11ISP-6crJ}v7#RTDa!JXaun!07-J@yy3GsOjy!mXhNoS&#M0gQj*(
zU0tMobe|KxF>ekkdGBLb$`Q!HHH<N@k%EN_?;qG-z0UTjs~?zt#T^>YN*YS)+%mGo
zJ;Z&q;aXZ4r+?v&#E=A0u0Y+x*lmCJ_?6N2!2Hzw!e;O0&l(bD4Q6esQPcK!5M!I9
zvJ-Pi4#f^Q=XA%cjNqJxkAgQ3<C(+lYZ+2erx&WGYuY9?BKh-|qHvVpf#r)$g?;wE
z_Zp3-_C6`et`XMQl)LXnv?|pnMe%1~gMoc@;~^>1USpMGdS*kBLkmNbA8!<PJLfDc
zUv_44o}>L7{Hz34x;T)Ci;Ih9W@cP27hFh|>8=I`F@c+tJGc&*>t37!=aO7oFFpWB
zuUfi9fQ(FK01%&Mkvs*Sjt&GWClF4iaVT_nXy6hE_<d>?$|Y0%=>iCa&SbGopksB7
zPzZ}=0^MQYh;-yy(*0Pr;XJx~xD$yQ?oY+jpk}5rQpTYK5FwB*AVWd}1K4~*s0s8d
zFai9(w2Xj4zM2U9O`sM_5h0$AE)Yu&j}9?}qhM4d5(zQH!zoCH5rvLN>O;^-Gzx)2
zBTxn~G>U*WAfOB&-+xdrAOvE}qcI3>R@UDGf-@7SpFqGRAP^xTA@C3koWo-xP<T8Z
zfkY$FXc%Y#<A<>Y<WLx!zu_CmcNi-=pUPu#1uPC5vII+}aDoITP%!6jWCFQAvDy6Z
z6$5LB2qkk7C^&M7+z&%X$A32s4E$-$7Z8KNDBqL*M_@iFj7vwj(fOPp9+gfErn3bb
zegvaYfBJHRcmZGO(x?b}06h>i<AaHzeum=uaReN`ALoDI@$>OdHe7-wk4_eFcq9%d
z;K!D^{6K-AF>o|wvm=?xVlUz9Eamjwg>FR_&`qG={-I$=3=EAWp|Aurnt;LTAyEV*
z@|&q6s0kWbK>pPj3qztvC^P|!BcPCaNc4Y<IW!g{>~~BZ9SL@9zJSc8((SBFpkPvP
z7K=upqfl51#gG9bGbkt+7KI_hjL3#m7=?ntV{k|;jzOV(%?tFm;!uN@3b^F|O~Nz|
z6~y>iBLW(WM<eNI3JinAB4KDe77L>ofRISKkr9$?U`QonjDDaw^H^XTkpq53UCN3E
zBH|6O7@7gn5Jn}FsW2=KiGxwlMo1VAYs8>p$w)&S9R-EZs00Rw7f1$`!U`la=?E^H
z35EP88%s_Ahv&$lfi=hc5H%=kFbGJ-mc<A6Fzjo?eCwXCZR1Yg_si1vCJ10bzABPH
zrY<#t36#2|06Go&eVO$Sh5bDW-(W-h=pg97=;E6hpTiJ@ka=_qCb$W|qddfKP~nq<
z|D6bpYJfMu(~V##Lqkv@G&BQ-Hvn%qL%adT$cTY4pn-ew|4ZZ>I@OQNX41hIF4(;P
zC)9pV{QsTWKeprla*zI<nlWPOrTeQWjS>H(-*0xmysW<+1Yf<ulK`B7em@SPrP<HJ
zjLrrN$^(z8aCp%c@R)<!Sy_-ayHoct7(x+9O8P+sabW-?R#H^x4UxMi!jm`@3oLtJ
gDWi2>p2iRd#1D%2Pd7-KgPwpL(aEZ8>z+gZ1(dU9>;M1&

literal 0
HcmV?d00001

diff --git a/src/assets/flash/buttons/button_gray_hover.png b/src/assets/flash/buttons/button_gray_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..c6170ec9bf21b1bb6d5ae39d887e6abcfe4e639c
GIT binary patch
literal 4645
zcmcIm2{csw-@hb9Woxk%#uO2=FU&*|W691WDr%NHW5UcdGsadZ36-)GktHNTmWop0
zX_1s{NqSmD%VSCikJ2dbmFnL)@AE#V^PcyebMF1k?{~l7&-eTJF86yA++6GyDQYPK
z0I<lx-o|5Qg)WWxbD;Y&WE=}x<k(iuRsc|SWVh5k723lX_8!gv5T^_PhoS2Wq_lTE
z0PG0^0LdW$Fn<jInk_=}*bo3vL~*RG-5ji~VQvB*ixUU}fPGVTS_qZ;XjxoaT}XJ|
zeYC8{f#+BM06HU5{V22(nmY{VDB<u`dik=d6q`)Az1ywm4!2caHdQK1sFm|p%{Rno
zP^cz6+wMc<W!FBAj!Iva@!ntfSSuZ@Yulm@q!gjj)8!pylI|`Zi80TTs3yCM27zc9
zogL9efRmT)mF<-g^HrMf-H*-D6Uc6tlNky3z9!3m(2k3CnKzw#+DEc`@4yK__2dPT
zrirS0yqUgZ60)Z4;0djC6PAWPtKQH`^<Dyrmb_@4)Z~1@iN|NnYvLP8MHf6D(}$LR
zsBzM>yA@v%zW`U8Wun@vR%Lq-ecZU;w7-X{gqs5_aR^lBdndq&s+a^_wO8=|*T4&V
zh3&hZZZ>(rTyQI0;NaNSCtR#HSEQYWeAe}6rq#z+%tF4L>`lPHIHQ^Uz_-)mLB_Qe
zz_Q^fA8h}hofJw9zPjcj9*@I*DRG+)9^-9%`h*g$`Kgwza&G$2`--VfEnr7W!p;k0
zhY;n8(X9yJ&NC_fff*2ex|pZ^sNssTvpFh3*6K=P)h;iuG}ZK*ST*%=<u9&r4S5yy
z>{aWAj*hnbl0G=m4n`x(mm4GWo$nN}Pvd-6T<Ob=`=mSXYp{;IRaU4{?#;!N{Rw9d
z-*Z%{KH2m}@iNDpoc=L4^ON$;ucsSpmnC$5Qgve-j_wLxvp(|uJVQlQSckOHce;RA
z{|OC?4C`BydPq1uZ2E<Ly|7<D=Hv*eRo`%btJ)||{o}1RwNo-O_Ofe|=G|SdJpfqm
zkS~iy@a4FFEdLavqN3n6XPLd+*=XhS>vekM6s<5l3KP*g-R5ao;r!<|S*<pk+ZyBe
zLhG^&H%7W+iBmLt$Fghk3smH2dRUviuk@DMFYb(MfypzKYpv?tRF)_-ZctEBR@)HP
z&MMYe6H}5GUaa|9hpdntSH3=`-PeC%=7Gq#=hx>u?K@kkRyKF}&4rM?z1A-_@nx^c
zx5h4bq0QHS3h2hJeK9sd_(U{Uw2b*nC0a#QEB~MdeBrIRAMEmzLiZmnvpblicv^--
zxstr@l>zo(3ykNkv1BgAPBTByJ*U`h$%1P6YMo8{N^G@lgHMIKo4PZKeY))Mn&;xX
z?Vg;fYgZkR6D_-<;=7l-;ZgxApI5NDy#k}La8W^G)s0X(9OH1J`h;4`I;Z7tR<KlX
zM>1~Gt46)|lxcVC-n*q(8QZgF(0$NnP(>^&mAAWf_C*VS=(6Do<@BSae`sINzP_l>
zVAq0BqiY7w<%f^5UkXPGKiTd!{Ys9MZCIaV;J<iqzTW;-Hw-rD=N;!Kk3^58*sm&4
zJ(sZ82DxixRZ8gL&<r!%-Hs`GlH_gn9jo*>^CT*g6%wRGKf|dTzBZ-cj_jzC05>T+
zsXCb`N4a5t!*L&?$|~PB-<odUU%SfB!?V*tP|Yl7#=cT$ewTvt2sJ_&sT-Z?3O}oL
zHq~RLhp=-A$CDE!p-R*wD?2xzE@D<<w_v&0zzo@p7_2(;w$Xe_cK-&NJJC}MQd~@3
zxas6uigW%l&xQgeH#P_|)0+=8v+i}@$w|{L)Wah()e*5?8`rulKU23g|Kcr<0=s!a
z|D5B2w3d5_<HBPv?<{SuZhn>)vD!5~B-J&oSHIV2+D)eLRFO(?QeoxxzWf_49&bIK
z6qXfI9FL;visl=?HIg?f-(+6gQ(;zgy6jcnv2tpm$ckf|ab~bM>-4tr-L_#{V)N-0
zH#Qk<CY6pJLpp}!7quHp>c)LGQ8u}5%G+7@Hu~+p%$hC5Tk5x*{L?ykAKBW%uWnnN
z-5xJ%%1zgmt_75rIR<{Ic^SpEn=iNu{T#O%Zwn~(D(XH~lU0*0E*Bq~n4^9ENKC6%
zwtV*1D;mBBxaWt~JzE}LnG@@m@0a*Ic#n6lM{a3@Yg9WBv?J&boIhFvvr3b!$<nIP
zIHK8ccz5DxA~`W<d4PtU<}h{$_tl?HOQCoA3wo)yyPn{CFFqL$!CBzad=eicgy(Co
zPRfrV$JFnQr|(L8zg^t4kKV_wdYIqTA5(Z-zxVt@!Jiv%uIVo6-nrijltXXSNI%!n
z-P*mp%+;r%y6U28&x%Wv_q*GPk0;{acM0CV&U&4Aujzf);0f{H;(`g0)LS}dqClxc
z$tg}guIb3zBY{l@O%AJli&hmCxU^+EXHB-gZyiGtk?*#(*22qm$|>b@xL9r;_aXP_
z(}zzNKi&G2ZDC^G9iBC26Y)88XmrH~k5PIUA>w}c*074Pp}+Me<)l=p`NYGq*HW?c
zdgSxSt6y}=+P7Wb+96S%s+$UtS}tr?@?Jc`fEl1+l?EdYNgOvnx9w<sGlNg|BkxrH
zO6p9K=8^MmwCA9kD+emyR8I0Ajhr9pnEx_9SoINnDZDn>*S)8>viMAK?QyR0$Fi*W
znt0@49lyf5H4zVwKU6IB^vXSwe3*7SE1uGHph+iTPun<~i2kepTK~?MEFWZ9T^T#j
zPE3l(WHcGQbh`bdF}=}Mzej)2<%EmKzRW(W?+U-P7L{V2`ZncF>X%ey{iux!t{lh4
z!rNzZUNw)Tgw=8GavpPHB%dX*l7fK1?m-{iy^npS;Cjtc>=ij`M;o=l&F(VAERB=v
zlR9Z&Z1T>gMnptiwX{RABU+i|5kr>(+yi_9B1WlW#Mg=Egj+T@=xouwRL_q2d|=<A
z#mg;-I?ru-j$M-!?M|IKKehSfP16u{!=-^H8om8hg@tbUN!!iNKNJT%BX$voYWBW=
z^Q5#U%7m`&iy#`68%A!wv8MKOqQvxg@9sZU8yKg$&Wom9T3nvD_W3GZRZ4eAf1Q>%
zJn`h2y9)}nCaQWhtL^wfaA|OaLPTtYo$(&yt0njnu~%J%OIf||%WV(5O1-bvi6eC*
zdfOwLzMKo*7~B{<ti)G-diG=Suz&l`VzYSCiLem|hBu@4(qZ1olS?uWo?N%0Ut7y!
zh3N97$0fCs@%_o2%Pv!TuzT>I2NH+3HN4wN2t3Cts9vf&r)hsvPNc5%%gC<Wmlmrv
zR&R-FpUSJr?)2-D34SGN5gUk)h$-SlIpgadKL~pA>}x^C(Kwg0IVB`S#Fg=deNNXi
zT-n05)@(;hQ{lS4sZdv^wl51*)wzGmPbh60uMM3{krpo4<Fbd1dg8k-xbe;1=F-EZ
z*^f*rg2%UxUz%oq@RUZsUf&d4`p(z1j3-h?>YC$Tp+#TMyu0ss=^EGfYF+=t3;w`J
zcJe@S$J)WQo*|w?^_SDbczs`Q&l{LWQ7+W+GWXcsHF9C7EvO)^pr~nE(`Vgzmi3mc
zT2T{@w^75Z6?2kusZJ$MMAr=G>`ZZP{Rh$O2MKIR+cK77)bX#?6Sb{lx{<=Eb5TUP
zxPR_+V^Oc8-`xiD@tu!Lb84e&?J7LCqgvGKlB0y55HEvzua1PIF7O$y8aB2Zh#dGj
zF!tekQI~7(*ST{}j7{+jo<g6MfU=ttl`=g&ZE0y)QBjecoD7{k=pFkAEptU4E}qb%
zX+T<|<Ov-p@a=ts0I*>3%q0V4W@!L``~-*UE%J7DA~SeFNE(wz2a%ycd`KGlMzsv(
z(-;Au2u26l9Igd?_-X?j#$j5(Hxr!E&U|aopJN{`06oK9sEqIc28ju`T(?NkJd_L}
z1c4$NEHo&PD<p?nz`p^Lq5m_-C^+n!h$z4UZZ%^O=I!hTv*rmvm?;v2V4%@xm?;TK
zN3+c6APH>(!=kYm6b6gJ5D-`l8A~8z2(a%zIAjn8GZ!#fWDgtL?*^fr1>9dG;*(LR
zkdP2$2oA{;uu&KiiG)I9QCKVjl0XQ<xFT98f-77(3-TSt1{5*`9KMLd<HBZOX>?w&
z$N~=eJWD2s{}Y=l{2nnVcBoJqAB91pXUP2!bawuC(V(E8(n1kM3|aZ^^gjX%sbPE&
z<pBzL!2$+I5rbUO${)s<jGwyvU_szFx=aQN3<QH9F(Kp_=BFvXKTpIH`t$w=9zP%d
zWWy(03qYEPC!q3pfj?5__5%fm#UZgULuVR;!=1r3n(^to3TQ(UffjHme^>+>hrr^g
z7(5w^CFAhMXbc&Ro)vY5YJy1<(S8-iBhVNs21~}9LdiBpWB((}V{%wwza#4GOm^T3
zMKmr0bg;32Lrx(%9447y3Zg+e3yT2hI2HmAG8qUOkw8O$SUQ15V4BhJtXaPxeH$Jl
zcqV`|`m-g><S`(OpD`li=mZ9yfCdpvQ_PIdcr1bhK_Jj9q8Sm32XQPq;TuZ`%~imG
z+K3kTE9#6_ObC%gz~h(%v?+o?qcIS8BASSxW6jVABHoO}z|+vCL=XdqF&ShQPY^_d
zDuok7V}mF@mko#g#~W*2AWz`TV?r^<{U~avtRW+id3%l!%3;{IhMDc2Z*AiV?)v5E
zdlLk5VBac|Ok>P6f(4v0Qvo0o{{5Kq4}twX3bU{w{vZVUFLg01Cgib1Av6JK#fFmb
zJC%p}4JtyK_}_^z83Yo61ezf*rluGKo{424NCfCcG$j#mW@aoLfeGc}|Ch)tI>VpF
zWrNTQ7i!-B6KcO#{QsTWKeprlGDrVT%^WrJ(*3n4%~AhUzq4|`ysT#j!8dJa5<ojh
z@5dmT+5H@5AQuX#02)=+{DZ5ZF^6@qv7#D!Hnv}11i(~et*D<X9@iNrc=4t5`a53q
tEi0?8n_G!w)?V~DbR)b!N)p!o+@nr*HK8cr{>+qgpt#tSZ`iT#zW{UWceMZj

literal 0
HcmV?d00001

diff --git a/src/assets/flash/habboclub/hc_gift_monthly.png b/src/assets/flash/habboclub/hc_gift_monthly.png
new file mode 100644
index 0000000000000000000000000000000000000000..70e872ee988402eb118381387244cb040c5d85a3
GIT binary patch
literal 268
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G|s0G|+7ApL(P!~g&P=WufVf5q_s41>3n7ErLwtZWaE;wTC73kJ%90K>iJ
zy^%mM&H|6fVg?4j!ywFfJby(BP%zWe#W6%9IMkm}=zs#pC6hn@``JsboAr1#txjr7
zR<fBr@l8?Xx572A-l%0?6yKQ5oH5Cot7ie<0twcr(6cL|IQ1rkXL$bLuu6R+Kk+q(
zr!lw2y`p=8FL%A45IezHPQOk0-%D=JXO3rVcHdw&5Hr!W16s=9>FVdQ&MBb@0FD@3
AGynhq

literal 0
HcmV?d00001

diff --git a/src/assets/styles/bootstrap/_buttons.scss b/src/assets/styles/bootstrap/_buttons.scss
index 4596abb48..cadc1089e 100644
--- a/src/assets/styles/bootstrap/_buttons.scss
+++ b/src/assets/styles/bootstrap/_buttons.scss
@@ -54,6 +54,20 @@
 
 }
 
+.btn-gray {
+  border-image-source: url("@/assets/flash/buttons/button_gray.png");
+  color: #fff;
+  font-family: ubuntuBold;
+
+  &:hover {
+    border-image-source: url("@/assets/flash/buttons/button_gray_hover.png");
+  }
+
+  &:active {
+    border-image-source: url("@/assets/flash/buttons/button_gray_active.png");
+  }
+}
+
 // scss-docs-end btn-variant-loops
 
 
diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index f9e9afb08..64a89ecc6 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -934,6 +934,12 @@
         height: 14px;
     }
 
+    &.icon-hc_gift_monthly {
+        background-image: url('@/assets/flash/habboclub/hc_gift_monthly.png');
+        width: 16px;
+        height: 14px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/components/notification-center/NotificationCenterView.scss b/src/components/notification-center/NotificationCenterView.scss
index 7f42b4391..6d643b21e 100644
--- a/src/components/notification-center/NotificationCenterView.scss
+++ b/src/components/notification-center/NotificationCenterView.scss
@@ -100,3 +100,17 @@
         }
     }
 }
+
+.club-gift
+{
+    max-height: 89px;
+    
+    .gray-button
+    {
+        padding-top: .25rem;
+        padding-bottom: .25rem;
+        padding-left: .5rem;
+        padding-right: .5rem;
+        font-size: .75rem;
+    }
+}
diff --git a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx b/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
index 2cb634749..5618e2b45 100644
--- a/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
+++ b/src/components/notification-center/views/bubble-layouts/NotificationClubGiftBubbleView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { LocalizeText, NotificationBubbleItem, OpenUrl } from '../../../../api';
-import { LayoutCurrencyIcon, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps } from '../../../../common';
+import { Base, LayoutNotificationBubbleView, LayoutNotificationBubbleViewProps } from '../../../../common';
 
 export interface NotificationClubGiftBubbleViewProps extends LayoutNotificationBubbleViewProps
 {
@@ -14,12 +14,12 @@ export const NotificationClubGiftBubbleView: FC<NotificationClubGiftBubbleViewPr
     return (
         <LayoutNotificationBubbleView fadesOut={ false } className="flex-column nitro-notification club-gift" onClose={ onClose } { ...rest }>
             <div className="d-flex gap-1 mb-2">
-                <LayoutCurrencyIcon type="hc" className="flex-shrink-0" />
+                <Base className="flex-shrink-0 icon icon-hc_gift_monthly mt-1" />
                 <span className="ms-1">{ LocalizeText('notifications.text.club_gift') }</span>
             </div>
-            <div className="d-flex align-items-center justify-content-end gap-2">
-                <button type="button" className="btn btn-success w-100 btn-sm" onClick={ () => OpenUrl(item.linkUrl) }>{ LocalizeText('notifications.button.show_gift_list') }</button>
+            <div className="d-flex align-items-center justify-content-between">
                 <span className="text-decoration-underline cursor-pointer text-nowrap" onClick={ onClose }>{ LocalizeText('notifications.button.later') }</span>
+                <button type="button" className="btn btn-gray gray-button" onClick={ () => OpenUrl(item.linkUrl) }>{ LocalizeText('notifications.button.show_gift_list') }</button>
             </div>
         </LayoutNotificationBubbleView>
     );

From c12b2940a8564e92867e0702eee059af8e5d02db Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Mon, 26 Jun 2023 19:40:24 +0200
Subject: [PATCH 102/134] Gifts - Improved design & config show my face

---
 public/ui-config.json.example                 |   1 +
 .../flash/catalogue/chevron_left_gift.png     | Bin 0 -> 164 bytes
 .../flash/catalogue/chevron_right_gift.png    | Bin 0 -> 167 bytes
 src/assets/styles/bootstrap/_buttons.scss     |   5 +-
 src/assets/styles/icons.scss                  |  12 +++
 src/components/catalog/CatalogView.scss       |  24 +++--
 .../catalog/views/gift/CatalogGiftView.tsx    |  92 +++++++++---------
 7 files changed, 79 insertions(+), 55 deletions(-)
 create mode 100644 src/assets/flash/catalogue/chevron_left_gift.png
 create mode 100644 src/assets/flash/catalogue/chevron_right_gift.png

diff --git a/public/ui-config.json.example b/public/ui-config.json.example
index b8cfc707f..72f1ffbc0 100644
--- a/public/ui-config.json.example
+++ b/public/ui-config.json.example
@@ -133,6 +133,7 @@
     "catalog.asset.icon.url": "${catalog.asset.url}/icon_%name%.png",
     "catalog.tab.icons": false,
     "catalog.headers": false,
+    "catalog.gifts.show.my.face": true,
     "chat.input.maxlength": 100,
     "chat.styles.disabled": [],
     "chat.styles": [
diff --git a/src/assets/flash/catalogue/chevron_left_gift.png b/src/assets/flash/catalogue/chevron_left_gift.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ea9ffc536c5a2c07327658b4e5b8df9f9da09d0
GIT binary patch
literal 164
zcmeAS@N?(olHy`uVBq!ia0vp^AT}ol8<6B)wpSQPF%}28J29*~C-V}>VM%xNb!1@J
z*w6hZkrkw}z$3Dlfr0NZ2s0kfUy%Y7wDfdw4ABUldd88DL4kwW@yq}EYdM$XJOT>!
z_UgDKW=>wY)#%WLM-m4gnle2!K6KqZyVmT{H%CFY9EKdue|mc>BY}o6c)I$ztaD0e
F0s!1KF$Dks

literal 0
HcmV?d00001

diff --git a/src/assets/flash/catalogue/chevron_right_gift.png b/src/assets/flash/catalogue/chevron_right_gift.png
new file mode 100644
index 0000000000000000000000000000000000000000..e9a6b12e2fb378ddcadbc7ad444fb08c604f4737
GIT binary patch
literal 167
zcmeAS@N?(olHy`uVBq!ia0vp^AT}ol8<6B)wpSQPF%}28J29*~C-V}>VM%xNb!1@J
z*w6hZkrkw}z$3Dlfr0NZ2s0kfUy%Y7wDELt4ABTqKEU|TInyGc>Cz2`t|T{wV;6ea
z9I`&l;$Ti_?l2VO0b&-3&OnYbWj%%>zCb^x;3EeZ7!H+iu$8nr%>tUk;OXk;vd$@?
F2>`#(ELi{m

literal 0
HcmV?d00001

diff --git a/src/assets/styles/bootstrap/_buttons.scss b/src/assets/styles/bootstrap/_buttons.scss
index cadc1089e..4b60fdad6 100644
--- a/src/assets/styles/bootstrap/_buttons.scss
+++ b/src/assets/styles/bootstrap/_buttons.scss
@@ -211,6 +211,9 @@
   outline: 1px solid #000;
   border: 3px solid #fff;
   min-height: 22px;
-  min-width: 23px;
+  min-width: 27px;
 
+  &.active {
+    border: 5px solid #fff;
+  }
 }
diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 64a89ecc6..9e79a07f7 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -940,6 +940,18 @@
         height: 14px;
     }
 
+    &.icon-chevron_left_gift {
+        background-image: url('@/assets/flash/catalogue/chevron_left_gift.png');
+        width: 10px;
+        height: 10px;
+    }
+
+    &.icon-chevron_right_gift {
+        background-image: url('@/assets/flash/catalogue/chevron_right_gift.png');
+        width: 10px;
+        height: 10px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 37daa87b3..848ccc549 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -119,7 +119,8 @@
 }
 
 .nitro-catalog-gift {
-    width: 325px;
+    width: 362px;
+    height: 470px;
 
     .gift-preview {
         width: 80px;
@@ -128,6 +129,9 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        background-color: #F0F0F0;
+        border: 1px solid #5D5D5D;
+        border-radius: 8px;
     }
 
     .gift-color {
@@ -315,14 +319,13 @@
 
 .autocomplete-gift-container {
     background: #fff;
-    padding: 8px;
     list-style-type: none;
-    min-width: 307px;
+    min-width: 264px;
     border-radius: 0.2rem;
     position: absolute;
     font-size: 0.7875rem;
-    top: 81px;
-    left: 8px;
+    top: 65px;
+    left: 31px;
     border: 1px solid #b6c1ce;
     margin: 0;
     border-radius: 2px;
@@ -335,8 +338,17 @@
     .autocomplete-gift-item {
         width: 100%;
         box-sizing: border-box;
+        
         &:hover {
-            background-color: #ebf4ff;
+            background-color: #CCD1DA !important;
+        }
+
+        &:nth-child(odd) {
+            background-color: #EEEEEE;
+        }
+
+        &:nth-child(even) {
+            background-color: #FFFFFF;
         }
     }
 }
diff --git a/src/components/catalog/views/gift/CatalogGiftView.tsx b/src/components/catalog/views/gift/CatalogGiftView.tsx
index ac1b6bf8c..5b8283b83 100644
--- a/src/components/catalog/views/gift/CatalogGiftView.tsx
+++ b/src/components/catalog/views/gift/CatalogGiftView.tsx
@@ -1,11 +1,10 @@
 import { GiftReceiverNotFoundEvent, PurchaseFromCatalogAsGiftComposer } from '@nitrots/nitro-renderer';
 import { ChangeEvent, FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
-import { ColorUtils, GetSessionDataManager, LocalizeText, MessengerFriend, ProductTypeEnum, SendMessageComposer } from '../../../../api';
-import { Base, Button, ButtonGroup, classNames, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
+import { ColorUtils, GetConfiguration, GetSessionDataManager, LocalizeText, MessengerFriend, ProductTypeEnum, SendMessageComposer } from '../../../../api';
+import { Base, Button, ButtonGroup, Column, Flex, FormGroup, LayoutCurrencyIcon, LayoutFurniImageView, LayoutGiftTagView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../common';
 import { GiftColorButton } from '../../../../common/GiftColorButton';
 import { CatalogEvent, CatalogInitGiftEvent, CatalogPurchasedEvent } from '../../../../events';
-import { useCatalog, useFriends, useMessageEvent, useUiEvent } from '../../../../hooks';
+import { useCatalog, useFriends, useMessageEvent, useNotification, useUiEvent } from '../../../../hooks';
 
 export const CatalogGiftView: FC<{}> = props =>
 {
@@ -22,13 +21,13 @@ export const CatalogGiftView: FC<{}> = props =>
     const [ selectedColorId, setSelectedColorId ] = useState<number>(0);
     const [ maxBoxIndex, setMaxBoxIndex ] = useState<number>(0);
     const [ maxRibbonIndex, setMaxRibbonIndex ] = useState<number>(0);
-    const [ receiverNotFound, setReceiverNotFound ] = useState<boolean>(false);
     const { catalogOptions = null } = useCatalog();
     const { friends } = useFriends();
     const { giftConfiguration = null } = catalogOptions;
     const [ boxTypes, setBoxTypes ] = useState<number[]>([]);
     const [ suggestions, setSuggestions ] = useState([]);
     const [ isAutocompleteVisible, setIsAutocompleteVisible ] = useState(true);
+    const { simpleAlert = null } = useNotification();
 
     const onClose = useCallback(() =>
     {
@@ -99,6 +98,8 @@ export const CatalogGiftView: FC<{}> = props =>
         setIsAutocompleteVisible(false);
     }
 
+    const alertReceiverNotFound = () => simpleAlert(LocalizeText('catalog.gift_wrapping.receiver_not_found.info'), null, null, null, LocalizeText('catalog.gift_wrapping.receiver_not_found.title'));
+
     const handleAction = useCallback((action: string) =>
     {
         switch(action)
@@ -116,18 +117,14 @@ export const CatalogGiftView: FC<{}> = props =>
                 setSelectedRibbonIndex(value => (value === maxRibbonIndex ? 0 : value + 1));
                 return;
             case 'buy':
-                if(!receiverName || (receiverName.length === 0))
-                {
-                    setReceiverNotFound(true);
-                    return;
-                }
+                if(!receiverName || (receiverName.length === 0)) return alertReceiverNotFound();
 
                 SendMessageComposer(new PurchaseFromCatalogAsGiftComposer(pageId, offerId, extraData, receiverName, message, colourId , selectedBoxIndex, selectedRibbonIndex, showMyFace));
                 return;
         }
     }, [ colourId, extraData, maxBoxIndex, maxRibbonIndex, message, offerId, pageId, receiverName, selectedBoxIndex, selectedRibbonIndex, showMyFace ]);
 
-    useMessageEvent<GiftReceiverNotFoundEvent>(GiftReceiverNotFoundEvent, event => setReceiverNotFound(true));
+    useMessageEvent<GiftReceiverNotFoundEvent>(GiftReceiverNotFoundEvent, event => alertReceiverNotFound());
 
     useUiEvent([
         CatalogPurchasedEvent.PURCHASE_SUCCESS,
@@ -151,11 +148,6 @@ export const CatalogGiftView: FC<{}> = props =>
         }
     });
 
-    useEffect(() =>
-    {
-        setReceiverNotFound(false);
-    }, [ receiverName ]);
-
     const createBoxTypes = useCallback(() =>
     {
         if (!giftConfiguration) return;
@@ -211,26 +203,30 @@ export const CatalogGiftView: FC<{}> = props =>
     const priceText = 'catalog.gift_wrapping_new.' + (isBoxDefault ? 'freeprice' : 'price');
 
     return (
-        <NitroCardView uniqueKey="catalog-gift" className="nitro-catalog-gift" theme="primary">
+        <NitroCardView uniqueKey="catalog-gift" className="nitro-catalog-gift no-resize" theme="primary">
             <NitroCardHeaderView headerText={ LocalizeText('catalog.gift_wrapping.title') } onCloseClick={ onClose } />
-            <NitroCardContentView className="text-black">
+            <NitroCardContentView className="text-black px-4">
                 <FormGroup column>
-                    <Text>{ LocalizeText('catalog.gift_wrapping.receiver') }</Text>
-                    <input type="text" className={ classNames('form-control form-control-sm', receiverNotFound && 'is-invalid') } value={ receiverName } onChange={ (e) => onTextChanged(e) } />
+                    <Flex grow gap={ 2 } alignItems="center">
+                        <input type="text" className="form-control form-control-sm" value={ receiverName } placeholder={ LocalizeText('catalog.gift_wrapping_new.name_hint') } onChange={ (e) => onTextChanged(e) } />
+                        <Base className="icon pencil-icon" />
+                    </Flex>
                     { (suggestions.length > 0 && isAutocompleteVisible) &&
-                        <Column className="autocomplete-gift-container">
+                        <Column gap={ 0 } className="autocomplete-gift-container">
                             { suggestions.map((friend: MessengerFriend) => (
-                                <Base key={ friend.id } className="autocomplete-gift-item" onClick={ (e) => selectedReceiverName(friend.name) }>{ friend.name }</Base>
+                                <Base key={ friend.id } className="autocomplete-gift-item px-2" onClick={ (e) => selectedReceiverName(friend.name) }>{ friend.name }</Base>
                             )) }
                         </Column>
                     }
-                    { receiverNotFound &&
-                        <Base className="invalid-feedback">{ LocalizeText('catalog.gift_wrapping.receiver_not_found.title') }</Base> }
                 </FormGroup>
                 <LayoutGiftTagView figure={ GetSessionDataManager().figure } userName={ GetSessionDataManager().userName } message={ message } editable={ true } onChange={ (value) => setMessage(value) } />
                 <Base className="form-check">
-                    <input className="form-check-input" type="checkbox" name="showMyFace" checked={ showMyFace } onChange={ (e) => setShowMyFace(value => !value) } />
-                    <label className="form-check-label">{ LocalizeText('catalog.gift_wrapping.show_face.title') }</label>
+                    { GetConfiguration('catalog.gifts.show.my.face') &&
+                        <>
+                            <input className="form-check-input" type="checkbox" name="showMyFace" checked={ showMyFace } onChange={ (e) => setShowMyFace(value => !value) } />
+                            <label className="form-check-label">{ LocalizeText('catalog.gift_wrapping.show_face.title') }</label>
+                        </>
+                    }
                 </Base>
                 <Flex alignItems="center" gap={ 2 }>
                     { selectedColorId &&
@@ -240,47 +236,47 @@ export const CatalogGiftView: FC<{}> = props =>
                     <Column gap={ 1 }>
                         <Flex gap={ 2 }>
                             <ButtonGroup>
-                                <Button variant="primary" onClick={ () => handleAction('prev_box') }>
-                                    <FaChevronLeft className="fa-icon" />
+                                <Button variant="primary" className="volter-button btn-sm" onClick={ () => handleAction('prev_box') }>
+                                    <Base className="flex-shrink-0 icon icon-chevron_left_gift" />
                                 </Button>
-                                <Button variant="primary" onClick={ () => handleAction('next_box') }>
-                                    <FaChevronRight className="fa-icon" />
+                                <Button variant="primary" className="volter-button btn-sm" onClick={ () => handleAction('next_box') }>
+                                    <Base className="flex-shrink-0 icon icon-chevron_right_gift" />
                                 </Button>
                             </ButtonGroup>
-                            <Column gap={ 1 }>
-                                <Text fontWeight="bold">{ LocalizeText(boxName) }</Text>
+                            <Column gap={ 0 }>
+                                <Text small fontWeight="bold">{ LocalizeText(boxName) }</Text>
                                 <Flex alignItems="center" gap={ 1 }>
-                                    { LocalizeText(priceText, [ 'price' ], [ giftConfiguration.price.toString() ]) }
-                                    <LayoutCurrencyIcon type={ -1 } />
+                                    <Text small>{ LocalizeText(priceText, [ 'price' ], [ giftConfiguration.price.toString() ]) }</Text>
+                                    { !isBoxDefault && <LayoutCurrencyIcon type={ -1 } /> }
                                 </Flex>
                             </Column>
                         </Flex>
-                        <Flex alignItems="center" gap={ 2 } className={ isColorable ? '' : 'opacity-50 pointer-events-none' }>
+                        <Flex alignItems="center" gap={ 2 } className={ isColorable ? '' : 'opacity-50' }>
                             <ButtonGroup>
-                                <Button variant="primary" onClick={ () => handleAction('prev_ribbon') }>
-                                    <FaChevronLeft className="fa-icon" />
+                                <Button variant="primary" className={ `volter-button btn-sm ${ !isColorable ? 'pe-none' : '' }` } onClick={ () => handleAction('prev_ribbon') }>
+                                    <Base className="flex-shrink-0 icon icon-chevron_left_gift" />
                                 </Button>
-                                <Button variant="primary" onClick={ () => handleAction('next_ribbon') }>
-                                    <FaChevronRight className="fa-icon" />
+                                <Button variant="primary" className={ `volter-button btn-sm ${ !isColorable ? 'pe-none' : '' }` } onClick={ () => handleAction('next_ribbon') }>
+                                    <Base className="flex-shrink-0 icon icon-chevron_right_gift" />
                                 </Button>
                             </ButtonGroup>
-                            <Text fontWeight="bold">{ LocalizeText(ribbonName) }</Text>
+                            <Text small fontWeight="bold">{ LocalizeText(ribbonName) }</Text>
                         </Flex>
                     </Column>
                 </Flex>
-                <Column gap={ 1 } className={ isColorable ? '' : 'opacity-50 pointer-events-none' }>
-                    <Text fontWeight="bold">
+                <Column gap={ 1 } className={ isColorable ? '' : 'opacity-50' }>
+                    <Text small fontWeight="bold">
                         { LocalizeText('catalog.gift_wrapping.pick_color') }
                     </Text>
-                    <ButtonGroup fullWidth className="gap-2">
-                        { colors.map(color => <GiftColorButton key={ color.id } variant="dark" active={ (color.id === selectedColorId) } disabled={ !isColorable } style={ { backgroundColor: color.color } } onClick={ () => setSelectedColorId(color.id) } />) }
+                    <ButtonGroup fullWidth className={ `justify-content-center gap-1 ${ !isColorable ? 'pe-none' : '' }` }>
+                        { colors.map(color => <GiftColorButton key={ color.id } variant="dark" active={ (color.id === selectedColorId) } disabled={ !isColorable } style={ { backgroundColor: color.color, borderRadius: '4px' } } onClick={ () => setSelectedColorId(color.id) } />) }
                     </ButtonGroup>
                 </Column>
-                <Flex justifyContent="between" alignItems="center">
-                    <Button variant="link" onClick={ onClose } className="text-black">
+                <Flex className="mt-2" justifyContent="between" alignItems="center">
+                    <Text underline pointer onClick={ onClose } className="text-black">
                         { LocalizeText('cancel') }
-                    </Button>
-                    <Button variant="success" onClick={ () => handleAction('buy') }>
+                    </Text>
+                    <Button variant="primary" onClick={ () => handleAction('buy') }>
                         { LocalizeText('catalog.gift_wrapping.give_gift') }
                     </Button>
                 </Flex>

From 5d122d2cd45888d24657e8d312c417910b34f7a3 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Mon, 26 Jun 2023 23:21:23 +0200
Subject: [PATCH 103/134] Mod tools - Design improvement

---
 src/assets/flash/modtools/button.png        | Bin 0 -> 4612 bytes
 src/assets/flash/modtools/button_active.png | Bin 0 -> 4621 bytes
 src/assets/flash/modtools/button_hover.png  | Bin 0 -> 1753 bytes
 src/assets/styles/bootstrap/_buttons.scss   |  14 +++++++++++
 src/assets/styles/icons.scss                |   2 +-
 src/common/card/NitroCardView.scss          |   5 ++--
 src/components/mod-tools/ModToolsView.tsx   |  26 +++++++++++---------
 7 files changed, 33 insertions(+), 14 deletions(-)
 create mode 100644 src/assets/flash/modtools/button.png
 create mode 100644 src/assets/flash/modtools/button_active.png
 create mode 100644 src/assets/flash/modtools/button_hover.png

diff --git a/src/assets/flash/modtools/button.png b/src/assets/flash/modtools/button.png
new file mode 100644
index 0000000000000000000000000000000000000000..b68c6daf9645781cde647a9083f727c0b0343eca
GIT binary patch
literal 4612
zcmcIm2{e@b_kTi!vR0PDm?C2KVU|#0EZLbvMa^!)%rrB`RwxOTvJ{aeBtoKIN`<#Y
zQnDo}m5^Ra2(M_Q|0C6}bN=uDJ)Qsg|L2@%`9AZxpL;*|d+&3fcvolJWpbKw001nr
zx3hK!ukzrra)~5()+MI8ffp&3rIRH9R2<(Yc1r=*5SpF469B|20>Clw_yQUo*aQIk
zLjhpuC;*rZ0Dwl5z$_*h0OSyCD=SxfD=UaApUY$iFaW@=AuBbQOn$mDwxuRGEcX#o
z!u{~88-D`r;VHf(%4v<=29gRGY=v%~gfhuG18V1bH>%Bbt*3Q`(sFXS%-SUeD0LFq
zm}}E{w5;^zr}1%de<}CFl~2{;;hL81YCv)!A}vkYVNv1()v;)^%pv6@H{mc4wMct+
zlp)~gX>)y7dH52g#)pq$vUT|qyQCJ4g?ZhS;5}}|L^;cR%{k{iwC}*+X+ZhR6@rGb
zvRWKo&mj?B)pF#tW|}cmU5{C7V5$5to<K=jW+67doPYY+1+%KSdP3n9k7v}86(6e{
zb#3p)U5b;(RA(A1_o!6Z96_Ek>cjPQkrgnKz;gQlHJ(>I)KnQ2ucPt?+BX2awv*kp
z_r*5j*L3;2X?%N!mR^CX%3`5bD*R=~^9;*RZ|DU)DTzCPzEOH3>#<L}`{VSRtAUlH
zv)<^w=j|j?6}GbK4=fgg{!;AvHE4pn<wZ9sOk=v5rF8M@(GQnq+ckmRP4RoKOdN%k
z$wf88fcr1S)W>)r>Rb_5>uKF}MJF>vyoBZTgo?eMo~g=dchD+olZszlV(W4*)w0%F
zjGP#6^&xz8q#TKYm#s2_={emmWSzr!ufE=!6FaRVGZ&;SZJ8OOkaI_sbSVD(v4;*y
zm1i2>%3Wid5z{{9WK1jGnLAfsy)wRiTG^F$EUF`D{icWyG6r(WkT!9>&)0lz?KBb+
z5!$;x<*4B6DDDgERzaU$^qDb2v!21BW|eV_+NZlMDrXlhvXfY!DDz;G)*xWDTe>s~
z#*^awxoSFENlDgIa;2Trg($_#o3y*6<SbELvQtreTxB#ZF@B31EZ5-|H%B|X*1Wce
z6D{7o+%bx^d*w}Oc_k@|F53FQ8{HLls_n5&5NWz%wPmfV(sJ4Q&9X|0Dw{)FnMLaB
zql<IHiZniJ6J@hv%Qi)~`uHu)I2;lC>edp+gBQwGN*AxXvlR4q!0Po@p2SV*<{0_c
zT0FfMfKJSY*ArtV)23!}8>9bHic(V6%sZkEU3z!%N87x_kV7X*ZI2|%om<2vT~D%j
zqmMq)1mU`=FJDZu)yNBQ%Pw+VE?+5KslD}Jv5l5Z(Ah9IoExpkyTcZ%aWSsbw)<>N
ztMZ_faOHI+p97rDSMw2h-28Q|mr&|Um*po^+zz2aQTC@RPpdRpIIeoTnyG|2o_>c~
zG48d$RI5|x;a$1%n6CB1Zo}TgN+JodwC&vsubX%y*9=xGrkyDHQ|ngNt!2IXd*wq6
zZ|c929zDV87mO85+w8;55hEn(HYMu&sSYpEJ+$_={${=0Q@o_HsIg?bwZ+O8;}2NF
z_pYf(4mlQ*j<?z8kgPkDw9~F_tu9+;NNH&G5PV24-LVt8AvyoP#JB<<Gb1shJd+?r
zx@~vc;UKKSGS4Q@ifY$az1G*=qurigNiU<vype5upNw%2F@zba8J_P5yP$a?#eI#t
zpnW;pgB>|U9#R=v)4uIoA-x>E9nC=pq)Vhnqt)p54406y`ZiPCOg%I~Lsjz9t!Lhm
zobpzB)a5I<vKS0{TI1nH=EKhW*{NCux>#6-8Z5?h%LeCF=WBN4{c)Eq%W9m`yXbH@
zwdo=3l;C9l{S}RsjW1Kf*SVwxr?{l{==B(WbzM|&wos`kv7mfcZ{F=D_jm5y1*HWf
zhZBgJ!X-xU45barwwe`nUBVZhD}9rDvW#3Hv}D_)pC2yDJh!uKpH1lYm^|vG+glB{
z5lY5S!X1M13R{haY9_t6lD4{R&D~S;F6!OEjH>NL+iSO<d2SVSkZ5J@TeGvqcE6_;
z>5j`9mwZxxw!UvlZhBGmwks|IUxyt=JN-*M3p-C%Wmct$%0x$}B(*Ldk8ak?lFr(3
zUESv}=kkcf%T;0J*)hI(z6q~__IvfX=akgBM79Efy958k_#xF%Yc+@(OwB6w;~H(p
z_9cub5EHUj`K#M%jG{*{bAD7xGPT{0-$TCF(T(l-qkA$KV~$DnPIv|rT&}(`BRv71
zP<uF;wm0>|E>XilYA>teNnS%=bipaTp36`8&$rxJ-&x$b=a3~s3b{o+?P6PJbLXm3
z7w@{tia(UQR$rZY)Y)qKY%1<U2mixB=0L*3h7TRXr$v8@@~4DiFR|oQzCy8rW2|&+
z!|`{=0~+)j?AQ4et}V=WZpm`WoN4~hJOMX_zu(zh4K33yBb7;V(41V(6V8bjPhP0L
z*ztm8Zfw>WmN{V^{yAi1eDz27acZbZ_@l5Lp_e8`{??t55|hPdQ%@!a#3J#nh*uFe
zzG#=W?!2|5ZAfvpW;R&7acQf9m+BY|qK|}>>yOzdvR!>$cOmug`qOq}@0I>aY)=&D
z5_502W+NNR2g~1<&+wj(T^?&&(jOP3{1mzZTAk$M)>TwqbiSzi6vyaOX=Yqi9Q>HJ
zZ$Zua@F%C9$d!0_<{VEtM!A<6M`}3SpdG)zWs+rz{HyO~-=2P^H@vi_loenrB7|qq
z8Vvg#?{(Lw)w}3*=?y!db{5)|+GX}$=ap0=lFd@yCBIGilA@>=xkc86?NDEE?|k-~
z#<Aqk8ukPBGj{aQ=b@OPeE)#XVQ<XCPrW$CCXEvGbt!UN3%SnK_8JMF%Fgjlnb9{g
zes5hRG)3IlXp3NlH`B|)N3Qz2`Fs0^kCP`%2NEs{wr{J`-mY`CmKFW^@WExOtISQc
zUs-pZyg5|3FJ<=f?6xy^aKUN@D*}wwd-^I03S9FNci}HT5&6F~?JymwI`H9bcS%*G
zF;&e6W@=bw5V7m_`s&XKL%35t`<^S;(av^U7JhYZa(>m^>!WZ(A<aH*AT?ohs{5sz
zGXk+bvT_}><<t?zilA`W@R)F0qy0uVim}Ba&zeilrL{i&J0E+Nc-^QGMd*b0v_>?1
zxfrx1s6J>^fv5Q5!l$B9zt%lP_&CDp&@p?O7p>>&G47c&%QKFgu~^-wrD?uec<t)5
z;_8{WzNGe**GOIH{n*cg38Opf-tRF9xX8_~T%jY`aHt_WLPz{%Y;R7#`8xG=+ap_N
zbE~r2eLEHfy%9Ev^hL)-B+;_$NsDKX1G`_&<+q)Pb-s{YOn`-7pIqAOcq`q7C1`2R
za@dFySoF?@xHz_akylpZ{4G7Duye9HWF}c$Aiv*vKMT?AV-ZyU_CaIGv68H(#+QO7
zcT8UWO8@8~jvCn15LEKs2Up4!D#CTlFmI5;x%2NIIb6NT@wrjcH}#q~IF^+(nAEmm
zc!Ni<$4Kq9v`}vE+&!5=8Iodwwx^l<zK*dgBQ1gXsriKsI~zXh$ZV|L*sK{j<!}!%
zx=t=TF^B9}>}cwe?v#}w%BlS*9C#eh8fsa|l#4tyS2<PPJfRaIn7tTjN)`1j{#swy
z<KX+C&TMkevy$xUsA}6w9=i}tYBfobf@xTPV9$-Q;1qf9(TY){je`+`bAuBfZxwd9
z<jgIWJUubX)qeqgRszzlj$~3_Umtke8n3+tyhsS$ojtw+16PsrD_NeMw*dTHRh>T;
z0U4R<pv@GU>?QPaawO8Yfp7|)OJ%@A0(l@B{4U)X!lTgq8A1q^!D4gFp`$nIpb$3Q
z9J<ZK3F*YMV)(J`!uSl2FlRC?%%4V}LpNG1lQRn;f((HSAq5f=7{Cz_L(HMyh>76+
z{9^<Z@(m*NH-}ozdxUs7xk9YCd<FyuN5N=FBocxnz^O<kp2{E~jUi|x8ihci5hxQF
z8bw5#5K$(O?>{K$5CSpd)0sqfYn$&5!Ie4GPblOO5s2X6V0bVF&gHWZC<1|iK%x<7
zGz>(*1fd)uB?QJ1tXUxWPGijw(D-bgkj>>l=4mNZZjjI%3dX!3CXn}&n<Mz1F)(+C
z5DE{0f+Od}{Qx>S{W~-;@F!XzB#A&T--G@~VgWgn$3VC<1l%A#jX@GIIKnkQoY84N
zZFxcbfNyf?Gz24n5eUKrU|^`9u6TZ2Ay?qX{U3Dv{QIXG9?^==pa{8qGM5|hW6NBB
zut3llI2vN$M4_=c^Sp-hF?}~-SW|=yb11lfXc!U$Lu1J(ED?<+Vz5R?6cLGBfI5LS
zL8k~Qzk;zaB#Mke6HQP=6A+C451315Geds|>f}VU=Lm!p4vk@NZ4L#4g0tClA``=)
z(-?RxjDf@8U|1vp55wbdCNL_2j$u$}cp8dH_!bvvZ_T9z%_nf)exZcvTpGynGe<-!
z4NsubC>R(GXNrYk&{zzNN<|@IC=7)_MKaJ76ps0W&4tef+lUhIE9-nzbdZr?g2m8H
zkT@8PLZQL1rbts56^%#2OtE+-4NF1dOc^LBgia$ex%@y1SSjp43X6f@aad5uf1<JC
z25|XKTsoL@%#Wf5%Nle7im_u0z&#B8)-Vg*^Q~<>7<+$t^t}lJ*pP1(Nu<!`8^Ih(
zo38){9s2z-`yUefdlD9CgZ&sF>A%#)0!+YV3WF(ph9wK!gx{$=#BWFuP(=SOgibRd
zm=G9v7z&3&!LW2R6GkurPo_A62?md6Vod1ZUi|+GSzxF6Q8+9H_`(I7_y0uN?-l=l
zm-dhC_`lqvf0t&4n1AX1T9jspf2!XF+%GTdg+cJm8k_{+3bgw%h~`&6hZ%zdCX^43
zDuVZsL*SUxvbVM*8+g!m)9FzFMDm^#|Lo+L<o$?4;;bZPKn4#iJ12d@c77n*lbo%~
IHt#<8Uw$B8@Bjb+

literal 0
HcmV?d00001

diff --git a/src/assets/flash/modtools/button_active.png b/src/assets/flash/modtools/button_active.png
new file mode 100644
index 0000000000000000000000000000000000000000..98a54de9e5cd7c5b2f165ab4ec12349a1c51e541
GIT binary patch
literal 4621
zcmcIm2{e@L+kY$(%34_}#uO2=53@uPW691W3N^b4Gt<l%TcIRW%2Kv0ArZ3mA_;G+
zl#nE)5~`OH!Yfkw9;yDF^S$4DI^X%eIp>*Y?q`12@49~1eO=FW$2mJ%FPGJj1pr{V
zt&OECc$WjORZAtnZ*5|V3wV=cnLC&RK;?=3b1uo?8bY&ibpU`E1pqh>USB|?gIfUL
zKnMT~9|HiB*8rg2Dlmx-0svVA+rq-x*1`hf%;z%M{tN)HY0gRsB9kAlifL~M3eCNb
z6n8!HqW({yGc4JML`hTMqbDJc!B%SLi7SyTGoUukHzOZ7uXnesR9r!>kY2x352Z#T
z8*;6>kCl~P{Wvi(H(1Jjf9Yf0+(<+FPE{bO5RsZHWha(!S7kiPBy(6P(M31{M2czd
ziPQ(|-L0<dt_WMI*mCcFbhb8Me7B_7c&Nu!ao)oYOr)dqe9k$~;r$1P(g3A1mk8>H
zN~*DV9lHd0P5aR_jZ{OXnhvv3&s^zV9D$O!eDj=PResu&3nn$Ow+Mxo+@4TJSAM9m
z*S5YHTOKQismnA}>Qk<?I*L4PFn}BAA<JVVfEBj>syvT4sId|%PD}X}bl^4c(ne<Y
zzGpiOU()4nrt)p=+WQ46%1eZ6Q{d0Lo@SVTd_^zdNs8Y9bPdv5SP#8BT_2`jT?4Ed
z`|ODxc-l!K)nKb@{=i}}=r6_2^MRAxZO?j1q3SbrEX9lS$KIEJ?$iMGw8rhdG<ghG
zCL7rX1MWPZqdvp~k>`rIYacgVQE)Ip#EF|<iLcz}?w+EQdIPPjI;HT%DW)m6ypgqj
z^XSQm4sXH-d&<#Bc-d+Ln2y7pLe@Eq=b9`1IWaR@(q98LrOY#f<#TSRkPgS4KYq_n
zvHDE&8`;Zj6JqMeoQxTT8(+`es#_J;IiuuEJ095;xN%GPducscCCG!hTi)~e+{PIs
zBs`>lWAZV<{21;F>srBpPSlxkLYt1>;Wp(7jOxdm?aF7x#B9VjCP?4ivUUit*dtXM
z3FAp}{#-p1rKl+5F0sl+@<OCS)fUYjNm+ALkIZ!BUT0|ybBynjX7dgBC2di5FEuWU
zaiZq-tgw${?OAnIN={LdqK&pZ_)2@FjY?-sD@2N}P-ougthhqv)>aus1?8<F9n2!N
zjZww9p+)MSG>I}<F=bn#I=p?CWgH2Qd2wy2{h<pL%B4$I-&h9vJ81E8J5T(oR9m#%
z%e6e6XMk4prk9iBMl;4HvSv|#DMl(PY2+PMgD$(d<b!oyLh#{}rPfCiWY3AQNmmj#
zztTk?ZG~`M)K)AZS*z#yyJQzRuaK*js@B|osMu<)Rp8lB7n}>N$g|5Dt9~)I+q(B`
zLx<9kq;S<0Mel>0t+n}xJZ}Dmj&hXRvgP^lmDhu*P?T+2b((VPX8YA|)-V+@C(>_F
zD<?b-l&<a8x_48yBD!beh|7rQh@wb*PRjb`g_o_o(aU;k6jD!?{JHj8*0tsRy8GmU
z^{?u_kQzJ58WfBd%vkNmeI<sAH*HDK^;H>Js(pC<b=|Exxu<!F<B{V@HtUO(F2)_S
zgzsBdnG}3HI2~`b-!4geIMK`I!Fp}B^swUanql~`PP%<JbW>9P9q|cyK4w;YR%td~
zl62kXy4@jIrFouJo(0urpl-d7t6QfnznWe~kA5Z7@-7ME8mte~SJgk?6?#GALbB^R
zS3&0rwi`QQm^`dJysmS{xk7pcdMBEL_D>g2k3y@`Z|g55WeselxEQ->fQBmMW!ulZ
zB{}4+a%;+$cV;md^wgFkEzEn}cd}E~7HDH(8LF^o_idXTSD$a#mG{R@whXIfTIZtO
zk(AbZu+xH5gLhW8RJS}&3ESY58kFpm(x=m>KkqD7aJEpfD50QYcYogXR@b+#y#=KO
zB)gM{hQg%=Z}p}0%eI>o^_1fa&y~K)Jyk|75Sp{C($9|+WuEgY+iw-JGdho2eto<C
z4noPqDY#uwUSWs9aKn`6cG7mI?YVm!-bTJXlu@&@XlLWjGfyo74-qX)eHy$PtPi+b
zkZw4wbIK<TX6yPS=cX6c?YQJ5@Uh!v;N@51Uf6xACbK40R3<t$EwQ%hL{ytbmQ>cR
zD{9_HI8~#YpRW$B$d2~O^ND{Ec)+92HK(M>DWU@i*c0$4#uurETCYx2XKK`_olt*p
ze1H5zJTX3dwV#@``WSi?^VOG1NuqZ8^83iQyLz#GfAmfTVN5Y8p7Bp$f~vauS*c0*
zr0Tt?)O{)McZ-@2QTthykMf!aq6$vy^i@6LKizg?V|Q`)-oxe$N#r)Q)Qb<g+qzem
zI(ar#SN@^Yv!-_Tes_oQlj+#^UHtd2GhfHwYkuD~k|z3Fls_$;^O%#E&X+Hiw~vvE
zX+H7xgnzScv+V}&!u5suj_p|vnX_&0+a}@0@ONHqb<i@+GE$iY2hGXlJmQ>u_UM_)
zvt7?vriLcnp_!AGVV{CWC)Rv$ouGyoh20O`6;eJq`nUG1<Q#d<WctzM>p9WfweT0=
z^<OkgJG`##dN8c;x#4rroY}Gtc@LFw8blWfsn8v_O<+6wIPXU4;B{wg#@{LamC%_m
zmrKmO-jR)LsTitwQ!&eXJYF^aVCi6NpweULN@!i8w@Xh^MbY`9y3-tkkENNhHL>vH
znmz>$8^a!*ek5Ds=ALsR@i^snW-O`sNV8_#f%YkuG4ij0s{?xnnV#^{hEkTlwTKXw
zL2K3@w7=bZEA^I>PLIxrW16GTrqm|0{|c|94v}P%{5I)L@|R=<orrBRPHekd1-H*<
zziJsz3Ta^9Wj|p@4SyPr9?tjk?;i2Q-22#%V{B0`L0^$1KWHa6Ia^;Q;ZxW-p2@Si
z28Qn}YlOy#dNXSTE3A!P7B*Vz=i=w-7dAnjG=3d_QLuAIljcsX+D2B?rz3}!tE@IP
z)_h^vbL#4F;r`^$RiAg9xq%B()m!OrsMa@7Sy14dm#`aO^+@FR+_=klwC3RZH@zh_
z5r$M%Z<w)unO^wr>l^Dn#Si07_w9eG)I>YmRVAEvY;}Cm*6%G}FQ00g`Z^_kY`XWk
ziz5QDF`{|{v;Fi@#>&7jnXu?EYl8y@^~Km?k$XeAV`-!Jpw~n95|8=@QMguEUq^WJ
zmy3bh0&fM5$@3JRUHDiu=G(Ei2p>yG3mLbidC>Z5k8{tQS&?z{%;q%%Yc)*Q2rt(@
zDXyE19Z2k4b(z$IK7jo+6hG$G^lq<_|3z+o^-3*?=EKd|;aYQF#`on6nr=|rurs3L
zb8bymr%#ty;45LPNLO@1L=r8}p4$B6VL<QmulWy7#yDQcE+)Xju1qcKx4)L|#1gc(
zW!ahG1e^Om2Rqrff00vC<@_x*E$=l|7d)FZS0H!5@c;|a>%BSf)|<O6CC5v$9vhYi
zPVJhiou_|rn~QwCr8%(Voj0zOD^!4MnP6Tag<sFVyKh%}mE&FCFfjd+H#DA=IF$Hc
z)5s>bAh*%R%c&vU{;#*Chongg1)A<AuKT;jFO9Yb<fr5pHhVRH(vmi7G;7m{n6|r(
z7~3G5osdJeFSa*!N_WW05al#}5WapG#~N;5#gvUW{k3|!u5D5)T=4l~gfUe#uw?#L
zVV|AP-6oT%y-!NA>muu{%iVS(T2&hoBLp+B!GON{@t|Zm&#}re1GAy<p|3-eAFdU4
zIpus^B9S)vnXCH@JXQiS&h}(dWo2n?Z7sN>oqzZkyh#XM9o^>VfyZ~3gGW+8hG*j`
z0FSIH3zry>k*Nj%Qqyd*htR{po=D>cz$tVtl>rY9;DKoHY-$$FqtN^qLI{<?VslKP
zWA#l?2%ByS-C^W_bl_PqeAzake1==7BbgTJM<dXoW}BDGngkO;h5&|;0tpWA=Lm?w
zrqFN1MDX{*V+0iP4I=b2g_<vTgm^eOLoB#_1_TF3!DvV%5`rVZsYoWC${-*OA!sBT
zg+QSZC?gmeMMN7BQAUvOA1LS$0x{v!nM7AhtM3lMl_}I$DC7|lh@hY#cn}88<+Bhd
z0)c=)q7i5`3`D>LAsitk7{(E-TO|2TW62QE_-vk#&E-HAXem@~pwJWw#=IydfcKM|
zBlw;%Fn5Sx3J-yTBNxQ|06IAQJ2W8RCt4sRi9j#kgZ@Wi0Xc-nK)5ml+(15!K@u@I
z!gW8K(P=+zd4YWYZ*u801jC;Z0Kx=dV5pz2c)naASK!P2A9Vcu`==Tn(SpyQ2)TSR
zm+Svy%bb6(K+qUC8lvYwp|Lp&y!s0<eK%oPQiKdsD7b%U7!m_RW63Bi5sfBdum(sJ
z5s6%cI)F7nrwA#(g0V0pii|=NjZj1*5RCp0m`i6fLw*P9;6SwH2!s?4jbUqP3I&6L
zv)Oba6T_g>7<ep<fy3ZnSR?@t!{cy9Fe-tLVNhsz8j4By78hu5$)yD@Byhogv4rVd
z8p!c8M?@+OPoUB$7#Iy_jD=y)SPYCxMIm7*423{NGSCzhj`@SliO&Yxh~ob%>q1m?
zkda`7#n6qAI2esWp~0}mNMjfkjYq<av3Mp8OF`m{87L@(P9rk8`~V7ADeM3Wi-F*A
zSWw7+qOsumbNLQjI+%0JkD><48gv4Rv0)3qJq-EQFpJ&ut!>;G`+j-!y$Sr;kZ%=9
zq|g=`!4yhcr~n2X`u#Ec9}@d}5*BHLd>J6=ztqJdOu%IdgD8B4ISbr`->E#rZ%7eP
zME@>?PBS7H5g2$F3Wr0%uyiyNMlb@ujBx}b3?9$K7}3GK`2Q8M$WHU6a99lRg$p+C
z|B1BUEB^m3?H}9mf4N8hF3kk7@Y4OYC`}OmRKJV3UtZRWgW#JrI0?WNX!m0fEv$YH
zGX@7tC?6bE1ka;~!7&H5wKON|xzYAesgVFAD(;|?c%-44${lrgf4bTAFKss^0bf0!
UWimbY+f=kAIa-!&-E-)_0JGI)P5=M^

literal 0
HcmV?d00001

diff --git a/src/assets/flash/modtools/button_hover.png b/src/assets/flash/modtools/button_hover.png
new file mode 100644
index 0000000000000000000000000000000000000000..8207d12e1c032ac8c55607df8c19454abf8d7326
GIT binary patch
literal 1753
zcmcIlJ&YSg6y6Ys$VDfCBEj)f40}xw*?+I?9eIhI^O3WZJr18GE?s74#`fyGJDc6P
zv+pEC2vsUN6n+{S$_Q#CkWLhcg61UX=&6vXD3HQiukE-vPHwQY9>4MTzW4w3;m-E0
z)s<IQ6h&EWZ?!sbUV-PO=P$zd8~D@r;JA=?ZrxNK|ML1DAUxY|22Dlz_LD3Bkmo?Y
zymPy|d2(`cdU^`dT5#_(I4;W0_U@A>%5Oif0#>=4Zr#a&_-gT7P(J^1O;Ikr7IpXJ
zUT_;z5$lABkn7_(1+=0xZj4hx_qjwN??;KR{`uVxDvFq|zV8NRkZ$lnv~`^E-Q(>p
zJ>I7tQ*XSzy3!b9V2HUSXdDld9FKi<LX6>eac!t*0+IW^+AJ)hy<i7zh>W9}ZfVps
zO;q#r(CpPi?wQw-ZQ7P$*@oq6wuNmMTP~V@R4|B8BV#?>X}vQw2$HW3q)f44j7B4U
z<me*n8<yvJhG`qNtpP&Ij}l47T9U7qBvYCe&uJE=G7<?YXh|pzq_2X{WiW9%=T7oz
z#vpgbn52fKn?-OlU=W-SjpI2wmz#%RW$N^q#Ci89<wl3+;vl1Z^N=TUeP)c&xo&!p
z4JY9;YVaYC0hWVf*4$J&5K`m=@gH%_|DH#a;*E?GDYC8*!&%98W-Q2dbQ@g@2#u10
z_sznmsS0lq$$b^-XKSXT*_EzU!M2Uv>RYCTO|ygs&=ZVEvK&~jsCTpsGzf4z$t6iB
zZ?}9EoYJF+VQx~-u{^F-Yn*Ep;?=a!tA@~aRZ1<F)tTo^`~v-!pa(?)3;nW%nV`Ti
z&k^=mC3I?as`bn|(Ogn-wUBU#wi=oyV_}`SWXASx7Qq;i;Ua6{6$3_Mc`mCs4tPa~
zR;jo|Bg_r8p6j}G+p5vJ(^C<nxF@ohK&M18>2o7Z`YL+r&4w6?ED#KG?#!AR+8T^N
zFk4X$H9VROOgTN1vDxMK7Otj4FpSWoBQc@HAowaRI)F2EdL5mS*yTbfX-5MNr04WS
z3Cl%Kj!4FveJH{*oo6f&N=^>X4`jIx`F{f`+3A2JeGUs3hIcWvhEZ&$#mY5|vx;2e
z7B*VBEhpNrE<pml*|sjE`Nro7Sj}LcfAhtU-^06Lz1?bdukF&iVR&CbA3yx)#b@qc
pU%UF#D}N2yhhP2u@})<Ql)(e#*AKq_{e|M)(cau{J-&JO!M{2k4~YN(

literal 0
HcmV?d00001

diff --git a/src/assets/styles/bootstrap/_buttons.scss b/src/assets/styles/bootstrap/_buttons.scss
index 4b60fdad6..98645b1ea 100644
--- a/src/assets/styles/bootstrap/_buttons.scss
+++ b/src/assets/styles/bootstrap/_buttons.scss
@@ -68,6 +68,20 @@
   }
 }
 
+.btn-mod-tools {
+  border-image-source: url("@/assets/flash/modtools/button.png");
+  color: #fff;
+  font-family: ubuntuBold;
+
+  &:hover {
+    border-image-source: url("@/assets/flash/modtools/button_hover.png");
+  }
+
+  &:active {
+    border-image-source: url("@/assets/flash/modtools/button_active.png");
+  }
+}
+
 // scss-docs-end btn-variant-loops
 
 
diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 9e79a07f7..66a1c96f8 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -821,7 +821,7 @@
     }
 
     &.icon-tickets {
-        background-image: url('@/assets/images/icons/tickets.png');
+        background-image: url('@/assets/flash/modtools/tickets.png');
         width: 17px;
         height: 17px;
     }
diff --git a/src/common/card/NitroCardView.scss b/src/common/card/NitroCardView.scss
index f3512d415..03abbf5f5 100644
--- a/src/common/card/NitroCardView.scss
+++ b/src/common/card/NitroCardView.scss
@@ -96,11 +96,12 @@ $nitro-card-tabs-height: 35px;
 
 
             .nitro-card-header-text {
+                position: absolute;
                 color: $black;
                 min-height: 21px;
-                font-size: 10px;
-                margin-top: 3px;
+                font-size: 12px;
                 text-shadow: 0px 1px 0px #fff, 1px 0px 1px #aaaaaa;
+                left: 8px;
             }
 
             .nitro-card-header-close {
diff --git a/src/components/mod-tools/ModToolsView.tsx b/src/components/mod-tools/ModToolsView.tsx
index 3304e6cf5..2272a59ba 100644
--- a/src/components/mod-tools/ModToolsView.tsx
+++ b/src/components/mod-tools/ModToolsView.tsx
@@ -1,7 +1,7 @@
 import { ILinkEventTracker, RoomEngineEvent, RoomId, RoomObjectCategory, RoomObjectType } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useRef, useState } from 'react';
 import { AddEventLinkTracker, CreateLinkEvent, GetRoomSession, ISelectedUser, RemoveLinkEventTracker } from '../../api';
-import { Base, Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../common';
+import { Base, Button, DraggableWindowPosition, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../common';
 import { useModTools, useObjectSelectedEvent, useRoomEngineEvent } from '../../hooks';
 import { ModToolsChatlogView } from './views/room/ModToolsChatlogView';
 import { ModToolsRoomView } from './views/room/ModToolsRoomView';
@@ -120,20 +120,24 @@ export const ModToolsView: FC<{}> = props =>
     return (
         <>
             { isVisible &&
-                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools" windowPosition={ DraggableWindowPosition.TOP_LEFT } theme="primary-modtool" >
-                    <NitroCardHeaderView headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
+                <NitroCardView uniqueKey="mod-tools" className="nitro-mod-tools no-resize" windowPosition={ DraggableWindowPosition.TOP_LEFT } theme="primary-modtool" >
+                    <NitroCardHeaderView hideButtonClose headerText={ 'Mod Tools' } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardContentView className="text-black" gap={ 1 }>
-                        <Button gap={ 1 } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-info/${ currentRoomId }`) } disabled={ (currentRoomId <= 0) } className="position-relative">
-                            <Base className="icon icon-small-room position-absolute start-1"/> Room Tool
+                        <Button className={ `btn btn-mod-tools position-relative ${ (currentRoomId <= 0) ? 'pe-none' : '' }` } gap={ 1 } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-info/${ currentRoomId }`) }>
+                            <Base className="icon icon-small-room position-absolute start-1" />
+                            <Text overflow="hidden" variant="black" className={ `text-nowrap pe-4 me-3 ${ (currentRoomId <= 0) ? 'opacity-25' : '' }` }>Room Tool</Text>
                         </Button>
-                        <Button innerRef={ elementRef } gap={ 1 } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-chatlog/${ currentRoomId }`) } disabled={ (currentRoomId <= 0) } className="position-relative">
-                            <Base className="icon icon-chat-history position-absolute start-1"/> Chatlog Tool
+                        <Button className={ `btn btn-mod-tools position-relative ${ (currentRoomId <= 0) ? 'pe-none' : '' }` } innerRef={ elementRef } gap={ 1 } onClick={ event => CreateLinkEvent(`mod-tools/toggle-room-chatlog/${ currentRoomId }`) }>
+                            <Base className="icon icon-chat-history position-absolute start-1" />
+                            <Text overflow="hidden" variant="black" className={ `text-nowrap pe-4 me-1 ${ (currentRoomId <= 0) ? 'opacity-25' : '' }` }>Chatlog Tool</Text>
                         </Button>
-                        <Button gap={ 1 } onClick={ () => CreateLinkEvent(`mod-tools/toggle-user-info/${ selectedUser.userId }`) } disabled={ !selectedUser } className="position-relative">
-                            <Base className="icon icon-user position-absolute start-1"/> User: { selectedUser ? selectedUser.username : '' }
+                        <Button className={ `btn btn-mod-tools position-relative ${ (!selectedUser) ? 'pe-none' : '' }` } gap={ 1 } onClick={ () => CreateLinkEvent(`mod-tools/toggle-user-info/${ selectedUser.userId }`) }>
+                            <Base className="icon icon-user position-absolute start-1" />
+                            <Text overflow="hidden" variant="black" className={ `text-nowrap pe-5 ${ !selectedUser ? 'me-5 opacity-25' : 'me-4' }` } style={ { marginLeft: '12px' } }>User: { selectedUser ? selectedUser.username : '' }</Text>
                         </Button>
-                        <Button gap={ 1 } onClick={ () => setIsTicketsVisible(prevValue => !prevValue) } className="position-relative">
-                            <Base className="icon icon-tickets position-absolute start-1"/> Report Tool
+                        <Button className="btn btn-mod-tools position-relative" gap={ 1 } onClick={ () => setIsTicketsVisible(prevValue => !prevValue) }>
+                            <Base className="icon icon-tickets position-absolute start-1" />
+                            <Text overflow="hidden" variant="black" className="text-nowrap pe-2 me-2">Ticket browser</Text>
                         </Button>
                     </NitroCardContentView>
                 </NitroCardView> }

From 26fb459f4e4739874620a77cc30d881790a562a8 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Mon, 26 Jun 2023 23:36:27 +0200
Subject: [PATCH 104/134] Catalog - Now can only be scrolled down

---
 src/components/catalog/CatalogView.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 848ccc549..428502f03 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -1,7 +1,8 @@
 .nitro-catalog {
     width: $catalog-width;
     height: $catalog-height;
-    min-width: 528px;
+    min-width: $catalog-width;
+    max-width: $catalog-width;
 
     font[size='16'] {
         font-size: 20px;

From 0d4f82972ee879bb1de7370d289f6e07f89aa29e Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Tue, 27 Jun 2023 00:53:47 +0200
Subject: [PATCH 105/134] Catalog - Added separator + in offer & fix big +

---
 src/common/index.scss                                         | 2 ++
 .../catalog/views/page/common/CatalogGridOfferView.tsx        | 2 +-
 .../catalog/views/page/layout/CatalogLayoutVipBuyView.tsx     | 2 +-
 .../views/page/widgets/CatalogPriceDisplayWidgetView.tsx      | 3 +--
 .../views/page/widgets/CatalogPriceGridDisplayWidgetViev.tsx  | 4 +---
 .../catalog/views/page/widgets/CatalogTotalPriceWidget.tsx    | 4 ++--
 6 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/common/index.scss b/src/common/index.scss
index 0db391547..9c458fbf5 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -111,6 +111,8 @@
 
 .catalog-grid-active {
 
+    width: 44px;
+
     &.active {
         border-image-source: url(@/assets/flash/catalogue/item_grid_highlight.png);
         border-image-slice: 6 6 6 6 fill;
diff --git a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
index d0169e6f2..e1faad9a8 100644
--- a/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
+++ b/src/components/catalog/views/page/common/CatalogGridOfferView.tsx
@@ -61,7 +61,7 @@ export const CatalogGridOfferView: FC<CatalogGridOfferViewProps> = props =>
             </LayoutCatalogGridItem>
             <Flex alignItems="end" justifyContent="end" fullWidth gap={ 0 } >
                 <Column gap={ 0 }>
-                    <CatalogPriceGridDisplayWidgetView offer={ offer } />
+                    <CatalogPriceGridDisplayWidgetView separator offer={ offer } />
                 </Column>
             </Flex>
         </Column>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
index dabea73f0..de70d2049 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutVipBuyView.tsx
@@ -158,7 +158,7 @@ export const CatalogLayoutVipBuyView: FC<CatalogLayoutProps> = props =>
                                                     <LayoutCurrencyIcon type={ -1 } />
                                                 </Flex>
                                             }
-                                            { (offer.priceActivityPoints > 0) && <Text bold className="px-1 py-1">+</Text> }
+                                            { (offer.priceActivityPoints > 0) && <Text bold>+</Text> }
                                             { (offer.priceActivityPoints > 0) &&
                                                 <Flex alignItems="center" justifyContent="end" gap={ 1 }>
                                                     <Text bold>{ offer.priceActivityPoints }</Text>
diff --git a/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
index 1c6166108..93606f920 100644
--- a/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
@@ -1,5 +1,4 @@
 import { FC } from 'react';
-import { FaPlus } from 'react-icons/fa';
 import { IPurchasableOffer } from '../../../../../api';
 import { Flex, LayoutCurrencyIcon, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
@@ -26,7 +25,7 @@ export const CatalogPriceDisplayWidgetView: FC<CatalogPriceDisplayWidgetViewProp
                     <LayoutCurrencyIcon type={ -1 } />
                 </Flex> }
             { separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) &&
-                <FaPlus size="xs" color="black" className="fa-icon" /> }
+                <Text bold>+</Text> }
             { (offer.priceInActivityPoints > 0) &&
                 <Flex alignItems="center" gap={ 1 }>
                     <Text bold> { (offer.priceInActivityPoints * quantity) }</Text>
diff --git a/src/components/catalog/views/page/widgets/CatalogPriceGridDisplayWidgetViev.tsx b/src/components/catalog/views/page/widgets/CatalogPriceGridDisplayWidgetViev.tsx
index 4ba8470b7..bc7f642f1 100644
--- a/src/components/catalog/views/page/widgets/CatalogPriceGridDisplayWidgetViev.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPriceGridDisplayWidgetViev.tsx
@@ -2,7 +2,6 @@ import { FC } from 'react';
 import { IPurchasableOffer } from '../../../../../api';
 import { Flex, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
-import {FaPlus} from "react-icons/fa";
 interface CatalogPriceGridDisplayWidgetViewProps
 {
     offer: IPurchasableOffer;
@@ -24,10 +23,9 @@ export const CatalogPriceGridDisplayWidgetView: FC<CatalogPriceGridDisplayWidget
                     <Text bold>{ (offer.priceInCredits * quantity) }</Text>
                     <i className="icon icon-small-coin" />
                 </Flex> }
-            { separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) &&
-                <FaPlus className="fa-icon" /> }
             { (offer.priceInActivityPoints > 0) &&
                 <Flex alignItems="end" justifyContent="end" gap={ 1 } className="grid-price-view">
+                    { separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) && <Text bold>+</Text> }
                     <Text bold>{ (offer.priceInActivityPoints * quantity) }</Text>
                     <i className={ 'icon icon-small-' + offer.activityPointType } />
                 </Flex> }
diff --git a/src/components/catalog/views/page/widgets/CatalogTotalPriceWidget.tsx b/src/components/catalog/views/page/widgets/CatalogTotalPriceWidget.tsx
index bbe9a18c1..23a43daa1 100644
--- a/src/components/catalog/views/page/widgets/CatalogTotalPriceWidget.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogTotalPriceWidget.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Flex, ColumnProps } from '../../../../../common';
+import { ColumnProps, Flex } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogPriceDisplayWidgetView } from './CatalogPriceDisplayWidgetView';
 
@@ -14,7 +14,7 @@ export const CatalogTotalPriceWidget: FC<CatalogSimplePriceWidgetViewProps> = pr
 
     return (
         <Flex gap={ gap } { ...rest }>
-            <CatalogPriceDisplayWidgetView offer={ currentOffer } />
+            <CatalogPriceDisplayWidgetView separator offer={ currentOffer } />
         </Flex>
     );
 }

From 874761304ed742f60cc1f132eee2ec86745fe494 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Valle?= <tardelivinicius@gmail.com>
Date: Mon, 26 Jun 2023 22:02:36 -0300
Subject: [PATCH 106/134] Fixed HC payday breakdown to show

---
 src/components/hc-center/HcCenterView.tsx | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/hc-center/HcCenterView.tsx b/src/components/hc-center/HcCenterView.tsx
index 89235510e..878d23cfe 100644
--- a/src/components/hc-center/HcCenterView.tsx
+++ b/src/components/hc-center/HcCenterView.tsx
@@ -113,7 +113,7 @@ export const HcCenterView: FC<{}> = props =>
     if(!isVisible) return null;
 
     const popover = (
-        <Popover id="popover-basic">
+        <Popover id="popover-basic" style={ { marginLeft: 15, width: '360px' }}>
             <Popover.Body className="text-black py-2 px-3">
                 <h5>{ LocalizeText('hccenter.breakdown.title') }</h5>
                 <div>{ LocalizeText('hccenter.breakdown.creditsspent', [ 'credits' ], [ kickbackData?.totalCreditsSpent.toString() ]) }</div>
@@ -121,7 +121,7 @@ export const HcCenterView: FC<{}> = props =>
                 <div>{ LocalizeText('hccenter.breakdown.streakbonus', [ 'credits' ], [ kickbackData?.creditRewardForStreakBonus.toString() ]) }</div>
                 <hr className="w-100 text-black my-1" />
                 <div>{ LocalizeText('hccenter.breakdown.total', [ 'credits', 'actual' ], [ getHcPaydayAmount(), ((((kickbackData?.kickbackPercentage * kickbackData?.totalCreditsSpent) + kickbackData?.creditRewardForStreakBonus) * 100) / 100).toString() ]) }</div>
-                <div className="btn btn-link text-primary p-0" onClick={ () => CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }>
+                <div className="text-primary p-0" style={{ textAlign: 'right' }} onClick={ () => CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }>
                     { LocalizeText('hccenter.special.infolink') }
                 </div>
             </Popover.Body>
@@ -130,7 +130,7 @@ export const HcCenterView: FC<{}> = props =>
 
     return (
         <NitroCardView theme="primary" className="nitro-hc-center">
-            <NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } isInfoToHabboPages={ true } onClickInfoHabboPages={ () => CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['benefits.habbopage']) } onCloseClick={ () => setIsVisible(false) } />
+            <NitroCardHeaderView headerText={ LocalizeText('generic.hccenter') } onCloseClick={ () => setIsVisible(false) } />
             <Flex position="relative" className="bg-muted p-2 hc-logo">
                 <Column gap={ 1 } justifyContent="end" className="px-2">
                     <Flex>
@@ -170,11 +170,13 @@ export const HcCenterView: FC<{}> = props =>
                                     <Text bold className="ms-2">{ LocalizeText('hccenter.special.amount.title') }</Text>
                                     <Flex>
                                         <Text className="w-100 text-center ms-4n">{ getHcPaydayAmount() }</Text>
-                                        <OverlayTrigger trigger={ [ 'hover', 'focus' ] } placement="left" overlay={ popover }>
-                                            <Text underline small variant="primary" className="pt-4">
-                                                { LocalizeText('hccenter.breakdown.infolink') }
-                                            </Text>
-                                        </OverlayTrigger>
+                                            <OverlayTrigger trigger={['click']} placement="right" overlay={popover}>
+                                            <span onClick={() => popover} className="pt-4">
+                                                <Text underline small variant="primary">
+                                                {LocalizeText('hccenter.breakdown.infolink')}
+                                                </Text>
+                                            </span>
+                                            </OverlayTrigger>
                                     </Flex>
                                 </Column> }
                         </Column>

From 631fed932ba726e70373fe1ef66d6d9d993b486d Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Tue, 27 Jun 2023 20:41:00 +0200
Subject: [PATCH 107/134] Edit HcCenter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Small details of styles have been edited.

Co-Authored-By: Vinícius Valle <tardelivinicius@gmail.com>
---
 src/components/hc-center/HcCenterView.tsx | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/hc-center/HcCenterView.tsx b/src/components/hc-center/HcCenterView.tsx
index 878d23cfe..6684edec2 100644
--- a/src/components/hc-center/HcCenterView.tsx
+++ b/src/components/hc-center/HcCenterView.tsx
@@ -113,7 +113,7 @@ export const HcCenterView: FC<{}> = props =>
     if(!isVisible) return null;
 
     const popover = (
-        <Popover id="popover-basic" style={ { marginLeft: 15, width: '360px' }}>
+        <Popover id="popover-basic" className="ms-3">
             <Popover.Body className="text-black py-2 px-3">
                 <h5>{ LocalizeText('hccenter.breakdown.title') }</h5>
                 <div>{ LocalizeText('hccenter.breakdown.creditsspent', [ 'credits' ], [ kickbackData?.totalCreditsSpent.toString() ]) }</div>
@@ -121,7 +121,7 @@ export const HcCenterView: FC<{}> = props =>
                 <div>{ LocalizeText('hccenter.breakdown.streakbonus', [ 'credits' ], [ kickbackData?.creditRewardForStreakBonus.toString() ]) }</div>
                 <hr className="w-100 text-black my-1" />
                 <div>{ LocalizeText('hccenter.breakdown.total', [ 'credits', 'actual' ], [ getHcPaydayAmount(), ((((kickbackData?.kickbackPercentage * kickbackData?.totalCreditsSpent) + kickbackData?.creditRewardForStreakBonus) * 100) / 100).toString() ]) }</div>
-                <div className="text-primary p-0" style={{ textAlign: 'right' }} onClick={ () => CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }>
+                <div className="text-primary p-0 text-end cursor-pointer" onClick={ () => CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }>
                     { LocalizeText('hccenter.special.infolink') }
                 </div>
             </Popover.Body>
@@ -146,17 +146,17 @@ export const HcCenterView: FC<{}> = props =>
             <NitroCardContentView>
                 <Flex gap={ 2 }>
                     <LayoutBadgeImageView badgeCode={ badgeCode } className="align-self-center flex-shrink-0 me-1" />
-                    <Column size={ 5 } className="streak-info" gap={ 0 }>
-                        <Text small>{ LocalizeText('hccenter.status.' + clubStatus) }</Text>
+                    <Column size={ 8 } className="streak-info" gap={ 0 }>
+                        <Text small bold>{ LocalizeText('hccenter.status.' + clubStatus) }</Text>
                         <Text small dangerouslySetInnerHTML={ { __html: getInfoText() } } />
                     </Column>
                 </Flex>
                 { GetConfiguration('hc.center')['payday.info'] &&
                     <Flex alignItems="center">
-                        <Column gap={ 1 } className="p-2 payday-special mb-1 ml-1">
+                        <Column gap={ 0 } className="p-2 payday-special mb-1 ml-1">
                             <Text variant="white" bold>{ LocalizeText('hccenter.special.title') }</Text>
                             <Text variant="white" small>{ LocalizeText('hccenter.special.info') }</Text>
-                            <Text variant="white" small underline className="pt-4 cursor-pointer" onClick={ () => CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }>{ LocalizeText('hccenter.special.infolink') }</Text>
+                            <Text variant="white" small underline className="pt-1 cursor-pointer" onClick={ () => CreateLinkEvent('habbopages/' + GetConfiguration('hc.center')['payday.habbopage']) }>{ LocalizeText('hccenter.special.infolink') }</Text>
 
                         </Column>
                         <Column gap={ 0 } className="payday flex-shrink-0 p-2">
@@ -170,13 +170,13 @@ export const HcCenterView: FC<{}> = props =>
                                     <Text bold className="ms-2">{ LocalizeText('hccenter.special.amount.title') }</Text>
                                     <Flex>
                                         <Text className="w-100 text-center ms-4n">{ getHcPaydayAmount() }</Text>
-                                            <OverlayTrigger trigger={['click']} placement="right" overlay={popover}>
-                                            <span onClick={() => popover} className="pt-4">
+                                        <OverlayTrigger trigger={ [ 'click' ] } placement="right" overlay={ popover }>
+                                            <span onClick={ () => popover } className="pt-4">
                                                 <Text underline small variant="primary">
-                                                {LocalizeText('hccenter.breakdown.infolink')}
+                                                    { LocalizeText('hccenter.breakdown.infolink') }
                                                 </Text>
                                             </span>
-                                            </OverlayTrigger>
+                                        </OverlayTrigger>
                                     </Flex>
                                 </Column> }
                         </Column>

From ac7a9084427fafa02abbc6c6ed6dba8db8353fd5 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Tue, 27 Jun 2023 21:11:22 +0200
Subject: [PATCH 108/134] Update README

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 33fd5450e..98b590ef5 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,7 @@ Thanks to everyone that has helped out contributing to this UI:
 - Dennis
 - Object
 - Habbobba
+- Tardelivinicius
 
 # Nitro Client installation
 

From 5f99fff36d47274ef9e9dc53f0cfd65536354d10 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Tue, 27 Jun 2023 22:52:36 +0200
Subject: [PATCH 109/134] Catalog - Design improvement in Room Events

---
 src/components/catalog/CatalogView.scss       |  4 +
 .../page/layout/CatalogLayoutRoomAdsView.tsx  | 76 +++++++++----------
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 428502f03..4b4ba422c 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -375,4 +375,8 @@
     }
 }
 
+.height-roomads-description {
+    height: 137px;
+}
+
 @import './views/targeted-offer/Offer.scss';
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
index 92dd4bff1..7f209ce4b 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
@@ -2,7 +2,7 @@ import { GetRoomAdPurchaseInfoComposer, GetUserEventCatsMessageComposer, Purchas
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText, SendMessageComposer } from '../../../../../api';
 import { Base, Button, Column, Text } from '../../../../../common';
-import { useCatalog, useMessageEvent, useNavigator, useRoomPromote } from '../../../../../hooks';
+import { useCatalog, useMessageEvent, useNavigator, useNotification, useRoomPromote } from '../../../../../hooks';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
 export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
@@ -16,6 +16,7 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
     const [ categoryId, setCategoryId ] = useState<number>(1);
     const { categories = null } = useNavigator();
     const { setIsVisible = null } = useCatalog();
+    const { simpleAlert = null } = useNotification();
     const { promoteInformation, isExtended, setIsExtended } = useRoomPromote();
 
     useEffect(() =>
@@ -30,7 +31,7 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
             setIsExtended(false); // This is from hook useRoomPromotte
         }
 
-    }, [ isExtended, eventName, eventDesc, categoryId ]);
+    }, [ isExtended, eventName, eventDesc, categoryId, roomId, promoteInformation.data.flatId, promoteInformation.data.eventName, promoteInformation.data.eventDescription, promoteInformation.data.categoryId, setIsExtended ]);
 
     const resetData = () =>
     {
@@ -44,6 +45,8 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
 
     const purchaseAd = () =>
     {
+        if (!eventName || eventName.length < 5) return simpleAlert(LocalizeText('roomad.alert.name.empty'), null, null, null, LocalizeText('roomad.error.title'));
+
         const pageId = page.pageId;
         const offerId = page.offers.length >= 1 ? page.offers[0].offerId : -1;
         const flatId = roomId;
@@ -71,43 +74,36 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
         SendMessageComposer(new GetUserEventCatsMessageComposer());
     }, []);
 
-    return (<>
-        <Text bold center>{ LocalizeText('roomad.catalog_header') }</Text>
-        <Column size={ 12 } overflow="hidden" className="text-black">
-            <Base>{ LocalizeText('roomad.catalog_text', [ 'duration' ], [ '120' ]) }</Base>
-            <Base className="bg-muted rounded p-1">
-                <Column gap={ 2 }>
-                    <Text bold>{ LocalizeText('navigator.category') }</Text>
-                    <select className="form-select form-select-sm" value={ categoryId } onChange={ event => setCategoryId(parseInt(event.target.value)) } disabled={ extended }>
-                        { categories && categories.map((cat, index) => <option key={ index } value={ cat.id }>{ LocalizeText(cat.name) }</option>) }
-                    </select>
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('roomad.catalog_name') }</Text>
-                    <input type="text" className="form-control form-control-sm" maxLength={ 64 } value={ eventName } onChange={ event => setEventName(event.target.value) } readOnly={ extended } />
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('roomad.catalog_description') }</Text>
-                    <textarea className="form-control form-control-sm" maxLength={ 64 } value={ eventDesc } onChange={ event => setEventDesc(event.target.value) } readOnly={ extended } />
-                </Column>
-                <Column gap={ 1 }>
-                    <Text bold>{ LocalizeText('roomad.catalog_roomname') }</Text>
-                    <select className="form-select form-select-sm" value={ roomId } onChange={ event => setRoomId(parseInt(event.target.value)) } disabled={ extended }>
-                        <option value={ -1 } disabled>{ LocalizeText('roomad.catalog_roomname') }</option>
-                        { availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.roomId }>{ room.roomName }</option>) }
-                    </select>
-                </Column>
-                <Column gap={ 1 }>
-                    <Button variant={ (!eventName || !eventDesc || roomId === -1) ? 'danger' : 'success' } onClick={ purchaseAd } disabled={ (!eventName || !eventDesc || roomId === -1) }>{ extended ? LocalizeText('roomad.extend.event') : LocalizeText('buy') }</Button>
-                </Column>
-            </Base>
-        </Column>
-    </>
+    return (
+        <>
+            <Column size={ 12 } overflow="hidden" className="text-black px-2 mt-3">
+                <Text bold noWrap>{ LocalizeText('roomad.catalog_text', [ 'duration' ], [ '120' ]) }</Text>
+                <Base className="rounded p-1">
+                    <Column gap={ 2 }>
+                        <select className="form-select form-select-sm w-100" value={ categoryId } onChange={ event => setCategoryId(Number(event.target.value)) } disabled={ extended }>
+                            { categories && categories.map((cat, index) => <option key={ index } value={ cat.id }>{ LocalizeText(cat.name) }</option>) }
+                        </select>
+                    </Column>
+                    <Column gap={ 0 } className="mt-2">
+                        <Text small>{ LocalizeText('roomad.catalog_name') }</Text>
+                        <input type="text" className="form-control form-control-sm" maxLength={ 64 } value={ eventName } onChange={ event => setEventName(event.target.value) } readOnly={ extended } />
+                    </Column>
+                    <Column gap={ 0 } className="mt-2">
+                        <Text small>{ LocalizeText('roomad.catalog_description') }</Text>
+                        <textarea className="form-control form-control-sm height-roomads-description" maxLength={ 64 } value={ eventDesc } onChange={ event => setEventDesc(event.target.value) } readOnly={ extended } />
+                    </Column>
+                    <Column gap={ 0 } className="mt-2">
+                        <Text small>{ LocalizeText('roomad.catalog_roomname') }</Text>
+                        <select className="form-select form-select-sm w-100" value={ !extended ? (availableRooms && availableRooms[0]?.roomId || '') : roomId } onChange={ event => setRoomId(Number(event.target.value)) } disabled={ extended }>
+                            <option value={ -1 } disabled>{ LocalizeText('roomad.catalog_roomname') }</option>
+                            { availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.roomId }>{ room.roomName }</option>) }
+                        </select>
+                    </Column>
+                    <Column className="mt-5" alignItems="end">
+                        <Button className="btn btn-success w-50" onClick={ purchaseAd }>{ extended ? LocalizeText('roomad.extend.event') : LocalizeText('buy') }</Button>
+                    </Column>
+                </Base>
+            </Column>
+        </>
     );
 }
-
-interface INavigatorCategory {
-    id: number;
-    name: string;
-    visible: boolean;
-}

From 88ba931a0778c9f0c361f3834fd1354020d212ed Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Wed, 28 Jun 2023 18:58:16 +0200
Subject: [PATCH 110/134] Fixed room events

---
 .../catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
index 7f209ce4b..2bad14be6 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutRoomAdsView.tsx
@@ -47,6 +47,8 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
     {
         if (!eventName || eventName.length < 5) return simpleAlert(LocalizeText('roomad.alert.name.empty'), null, null, null, LocalizeText('roomad.error.title'));
 
+        if (!roomId || roomId === -1) return simpleAlert(LocalizeText('roomad.no.available.room'), null, null, null, LocalizeText('roomad.error.title'));
+
         const pageId = page.pageId;
         const offerId = page.offers.length >= 1 ? page.offers[0].offerId : -1;
         const flatId = roomId;
@@ -94,7 +96,7 @@ export const CatalogLayoutRoomAdsView: FC<CatalogLayoutProps> = props =>
                     </Column>
                     <Column gap={ 0 } className="mt-2">
                         <Text small>{ LocalizeText('roomad.catalog_roomname') }</Text>
-                        <select className="form-select form-select-sm w-100" value={ !extended ? (availableRooms && availableRooms[0]?.roomId || '') : roomId } onChange={ event => setRoomId(Number(event.target.value)) } disabled={ extended }>
+                        <select className="form-select form-select-sm w-100" value={ roomId } onChange={ event => setRoomId(Number(event.target.value)) } disabled={ extended }>
                             <option value={ -1 } disabled>{ LocalizeText('roomad.catalog_roomname') }</option>
                             { availableRooms && availableRooms.map((room, index) => <option key={ index } value={ room.roomId }>{ room.roomName }</option>) }
                         </select>

From 745da0e5bc6864596e455c6af10c3767bfbb7f31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vin=C3=ADcius=20Valle?= <tardelivinicius@gmail.com>
Date: Thu, 29 Jun 2023 18:02:24 -0300
Subject: [PATCH 111/134] Improved trophies layout 2023

---
 src/components/catalog/CatalogView.scss       |   2 +-
 .../page/layout/CatalogLayoutTrophiesView.tsx | 147 +++++++++++++-----
 .../widgets/CatalogViewTrophiesWidgetView.tsx |  24 +++
 3 files changed, 135 insertions(+), 38 deletions(-)
 create mode 100644 src/components/catalog/views/page/widgets/CatalogViewTrophiesWidgetView.tsx

diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 4b4ba422c..e2e457168 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -116,7 +116,7 @@
 }
 
 .trophy-text {
-    height: 150px;
+    height: 120px;
 }
 
 .nitro-catalog-gift {
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
index 111e6e570..c0eb2287a 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
@@ -1,58 +1,131 @@
-import { FC, useEffect, useState } from 'react';
-import { Column, Flex, Grid, Text } from '../../../../../common';
+import { FC, useEffect, useRef, useState } from 'react';
+import { AutoGrid, Base, Button, Column, Flex, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
-import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
 import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
-import { CatalogViewProductWidgetView } from '../widgets/CatalogViewProductWidgetView';
+import { CatalogViewTrophiesWidgetView } from '../widgets/CatalogViewTrophiesWidgetView';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
 export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
 {
-    const { page = null } = props;
     const [ trophyText, setTrophyText ] = useState<string>('');
-    const { currentOffer = null, setPurchaseOptions = null } = useCatalog();
-
+    const { setCurrentOffer = null, setPurchaseOptions = null, currentPage = null } = useCatalog();
+    const [ index, setIndex ] = useState(0);
+    const elementRef = useRef<HTMLDivElement>();
+    const [ trophies, setTrophies ] = useState([]);
+    const [ qtdOffers, setQtdOffers ] = useState(0)
+    
     useEffect(() =>
-    {
-        if(!currentOffer) return;
-
+    {  
+        if (currentPage.offers.length !== qtdOffers)
+        {
+            setTrophies([]);
+            setIndex(0);
+        }
+        if(trophies.length === 0) 
+        {
+            // Set the total offers from trophies catalog
+            setQtdOffers(currentPage.offers.length)
+            // Default : Gold Trophie and uniques (Staff)
+            const trophies = currentPage.offers.filter((trophy) => trophy.localizationId.includes('_g') || !trophy.localizationId.match(/[_gsb]/));
+            setCurrentOffer(trophies[index]);
+            setTrophies(trophies)
+        } 
         setPurchaseOptions(prevValue =>
         {
             const newValue = { ...prevValue };
-
             newValue.extraData = trophyText;
-
             return newValue;
         });
-    }, [ currentOffer, trophyText, setPurchaseOptions ]);
+    }, [ trophies, index, currentPage, trophyText, qtdOffers, setCurrentOffer, setPurchaseOptions, setQtdOffers ]);
+
+
+    const setTrophyColor = (color: string) =>  
+    {
+        //Set color to the selected Trophie (_g = gold, _s = silver, _b = bronze)
+        const trophies = currentPage.offers.filter((trophy) => trophy.localizationId.includes(color));
+        setTrophies(trophies)
+        setCurrentOffer(trophies[index]);
+    }
+
+    const lastOffer = () =>
+    {
+        setIndex(prevIndex => prevIndex - 1);
+        if(index <= 0)
+        {
+            setIndex(0);
+            setCurrentOffer(trophies[index]);
+        }
+        else 
+        {
+            setCurrentOffer(trophies[index - 1]);
+        }
+    }
+
+    const nextOffer = () =>
+    {
+        setIndex(prevIndex => prevIndex + 1);
+        if(index >= trophies.length - 1) 
+        {
+            setIndex(0);
+            setCurrentOffer(trophies[0]);
+        }
+        else 
+        {
+            setCurrentOffer(trophies[index + 1]);
+        }
+    }
 
     return (
-        <Column>
-            <Column className="pt-2" center={ !currentOffer } overflow="hidden">
-                    <>
-                        { !!page.localization.getImage(1) && <img alt="" src={ page.localization.getImage(1) } /> }
-                        <Text small center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
-                    </> 
-            </Column>
-            <Column size={ 7 } overflow="hidden">
-                <Column className="grid-bg item-picker p-2" size={ 7 } overflow="hidden">
-                <CatalogItemGridWidgetView />
-                </Column>
-                { currentOffer &&
-            <>
-                <Column grow gap={ 1 }>
-                    <Text grow center truncate>{ currentOffer.localizationName }</Text>
-                    <Flex justifyContent="end">
-                        <CatalogTotalPriceWidget alignItems="end" className="credits-bg py-1 px-2" />
-                    </Flex>
-                    <Flex gap={ 2 } className="purchase-buttons align-items-end mt-2">
-                    <CatalogPurchaseWidgetView />
-                    </Flex>
+        <div>
+            <Column className="position-relative catalog-default-image" size={ 3 } overflow="hidden">
+                <Text dangerouslySetInnerHTML={ { __html: currentPage && currentPage.localization.getText(1) } } style={ { fontSize: '12px' } }></Text>
+                <Column fit overflow="hidden" className="p-2 rounded d-flex justify-content-center align-items-center">
+                    <div className="position-absolute bottom-0" style={ { left: '105px' } }>
+                        <Button variant="primary" className="volter-button btn-sm" onClick={ lastOffer }>
+                            <Base className="flex-shrink-0 icon icon-chevron_left_gift" />
+                        </Button>
+                    </div>
+                    <div className="position-absolute bottom-0" style={ { top: '150px' } }>
+                        <CatalogViewTrophiesWidgetView />
+                    </div>
+                    <div className="position-absolute bottom-0" style={ { right: '105px' } }>
+                        <Button variant="primary" className="volter-button btn-sm" onClick={ nextOffer }>
+                            <Base className="flex-shrink-0 icon icon-chevron_right_gift" />
+                        </Button>
+                    </div>
                 </Column>
-            </> }
-                <textarea className="flex-grow-1 form-control w-100 trophy-text" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
+                <CatalogTotalPriceWidget className="credits-default-layout credits-bg py-1 px-2 bottom-1 end-1" justifyContent="end" alignItems="end" />
+            </Column>
+            <Column className="grid-bg w-10 h-10 p-2 mt-2 flex" size={ 3 } overflow="hidden" gap={ 2 }>
+                <AutoGrid innerRef={ elementRef } columnCount={ 5 } >
+                    <Column className="catalog-grid-active cursor-pointer" gap={ 0 }>
+                        <Base fit className="unique-bg-override" />
+                        <div className="border border-2 border-white" style={ { backgroundColor: '#CBA200' } } onClick={ () => setTrophyColor('_g') } >
+                            <i className="mr-1 d-inline-block outline" />
+                        </div>
+                    </Column>
+                    <Column className="catalog-grid-active cursor-pointer" gap={ 0 }>
+                        <Base fit className="unique-bg-override" />
+                        <div className="border border-2 border-white" style={ { backgroundColor: '#A2A2A2' } } onClick={ () => setTrophyColor('_s') } >
+                            <i className="mr-1 d-inline-block outline" />
+                        </div>
+                    </Column>
+                    <Column className="catalog-grid-active cursor-pointer" gap={ 0 }>
+                        <Base fit className="unique-bg-override"/>
+                        <div className="border border-2 border-white" style={ { backgroundColor: '#A25100' } } onClick={ () => setTrophyColor('_b') } >
+                            <i className="mr-1 d-inline-block outline" />
+                        </div>
+                    </Column>
+                </AutoGrid>
             </Column>
-        </Column>
+            <Column size={ 3 } overflow="hidden">
+                <textarea className="flex-grow-1 form-control w-40 trophy-text mt-2" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
+            </Column>
+            <Flex gap={ 2 } className="purchase-buttons align-items-end mt-2">
+                <CatalogPurchaseWidgetView />
+            </Flex>
+
+        </div>
     );
 }
diff --git a/src/components/catalog/views/page/widgets/CatalogViewTrophiesWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogViewTrophiesWidgetView.tsx
new file mode 100644
index 000000000..3fdbb0124
--- /dev/null
+++ b/src/components/catalog/views/page/widgets/CatalogViewTrophiesWidgetView.tsx
@@ -0,0 +1,24 @@
+import { FC, useEffect } from 'react';
+import { Offer, ProductTypeEnum } from '../../../../../api';
+import { LayoutFurniImageView } from '../../../../../common';
+import { useCatalog } from '../../../../../hooks';
+
+export const CatalogViewTrophiesWidgetView: FC<{}> = props =>
+{
+    const { currentOffer = null, roomPreviewer = null, purchaseOptions = null } = useCatalog();
+    const { previewStuffData = null } = purchaseOptions;
+
+    useEffect(() =>
+    {
+        if(!currentOffer || (currentOffer.pricingModel === Offer.PRICING_MODEL_BUNDLE) || !roomPreviewer) return;
+
+        const product = currentOffer.product;
+        
+        if(!product) return;
+
+    }, [ currentOffer, previewStuffData, roomPreviewer ]);
+
+    if(!currentOffer) return null;
+
+    return <LayoutFurniImageView productType={ ProductTypeEnum.FLOOR } productClassId={ currentOffer.product.productClassId } scale={ 1 } />
+}

From 91c5da37d50e069428ffed2041d92831469c31ff Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Thu, 29 Jun 2023 23:24:16 +0200
Subject: [PATCH 112/134] Catalog - modified details

---
 src/api/catalog/CatalogGetTypePrice.ts        |  11 ++++++
 src/api/catalog/index.ts                      |   1 +
 src/assets/flash/catalogue/duckets_bg.png     | Bin 0 -> 1784 bytes
 src/common/index.scss                         |   4 +--
 src/components/catalog/CatalogView.scss       |  19 +++++++++--
 src/components/catalog/CatalogView.tsx        |   2 +-
 .../views/page/common/CatalogHeaderView.tsx   |   8 ++---
 .../views/page/common/CatalogSearchView.tsx   |  11 +++---
 .../layout/CatalogLayoutBadgeDisplayView.tsx  |   4 +--
 .../page/layout/CatalogLayoutDefaultView.tsx  |  28 ++++++++-------
 .../CatalogLayoutGuildCustomFurniView.tsx     |   5 +--
 .../page/layout/CatalogLayoutSpacesView.tsx   |   5 +--
 .../page/layout/pets/CatalogLayoutPetView.tsx |  32 +++++++++---------
 .../widgets/CatalogItemGridWidgetView.tsx     |   2 +-
 .../CatalogPriceGridDisplayWidgetViev.tsx     |  10 +++---
 .../widgets/CatalogSelectItemWidgetView.tsx   |  17 ++++++++++
 .../page/widgets/CatalogSpacesWidgetView.tsx  |   2 +-
 .../page/widgets/CatalogSpinnerWidgetView.tsx |  30 +++++++++-------
 18 files changed, 118 insertions(+), 73 deletions(-)
 create mode 100644 src/api/catalog/CatalogGetTypePrice.ts
 create mode 100644 src/assets/flash/catalogue/duckets_bg.png
 create mode 100644 src/components/catalog/views/page/widgets/CatalogSelectItemWidgetView.tsx

diff --git a/src/api/catalog/CatalogGetTypePrice.ts b/src/api/catalog/CatalogGetTypePrice.ts
new file mode 100644
index 000000000..fee193378
--- /dev/null
+++ b/src/api/catalog/CatalogGetTypePrice.ts
@@ -0,0 +1,11 @@
+export const getTypePrice = (type: string) =>
+{
+    const priceState = {
+        'price_type_none'                       : 'grid-bg',
+        'price_type_credits'                    : 'credits-bg',
+        'price_type_activitypoints'             : 'duckets-bg',
+        'price_type_credits_and_activitypoints' : 'grid-bg'
+    };
+
+    return priceState[type];
+}
diff --git a/src/api/catalog/index.ts b/src/api/catalog/index.ts
index 6c5b9e2ea..49d91a3b2 100644
--- a/src/api/catalog/index.ts
+++ b/src/api/catalog/index.ts
@@ -1,4 +1,5 @@
 export * from './BuilderFurniPlaceableStatus';
+export * from './CatalogGetTypePrice';
 export * from './CatalogNode';
 export * from './CatalogPage';
 export * from './CatalogPageName';
diff --git a/src/assets/flash/catalogue/duckets_bg.png b/src/assets/flash/catalogue/duckets_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..1155b3443ac0b1073d4b68c69f03c2fc45a29950
GIT binary patch
literal 1784
zcmcIlPly{;7@uO5cI{RX6;Y9KDq3}4=1>02pC+wovh6PJtV=e~)st`Ddr5}P%o}H3
zHrcg!5G;C85Tpl{ir~Q>O4XwWd#D~1>`m~fo&?29K@cH+lSyI@>ynFs$(wKH_x-;A
z-@LW4etvP`;RQ*O7FSp54LFa(b<dGI;QyCzkDr6%P|`SmR=W26qrZZ1xLtLtlJwa-
zcmIv=1o_y;T5}oBt6%?c@$JiS^V{W@K1gw*vA#JR4yEUw`Sdo(N28S&6G?jTiS#=3
z{sZ6KFG+Vj;y1U%mb>N<9^^3P9?K1a2+)#LJ~N0g*=9oaSlbUP${$~TrN}<5C>M&Z
z=0-Kv@mKa@wz;?7BzxP$rplSqiwos}0}KHZSRMr3FmVPIWkl@2efn5c<Pk({SCndM
zQQmSl<Qk8eZ02-CG)<FDJLhRF%VV~-BpaHctGc1;MP%rXQFQd8JpL(QP?pOvZ8?ql
zxv@czDoRI)$WhgPzn|;pb3AUVx^3I4W~hdN0D+R-P~ZUylM@-qn5NDW68n+xc_^o}
z*yBA>QNZUcm>`;Rhsii&kUMpNBUR67X>b#u>mCdZf+;!?%R69Y?DW3GNpm-1YJ(-b
z7ZbL;!$NUlVvLfhZq$prqi`uvS(gO>OTaOGYAWh*!IKXEk2t2Ur_n@CEoNBoxXF2U
zQnHN+i)`d`hJ4b+#1B*6r&FKCDy)tLt0+)E18D`MTTNYeiiVRnpVbUU(=w<FJwdU+
z^MN__Tf6f>UDsI+6M;j*R_hf7oXYt=b#Os9DfJ9QJgtNZ1+RoG!ziIV)~MMknMJ#x
zkNg7tIw!p}fvJAh!ju!>nC8f_s7@`NVZ^9eK(<}L$TBUANZz#aTE0L_lup=Qh<z9%
z+?{1jy`sQqdM&~XMo_6m^Qcf_Cc>s&L@m=cZO^knuoRgRr^Vv{L#OxwZZkCs+lu_J
zH#OenvCApsJU?k_XlpP6!L0ZR)Npq+Fxm8s#%7bfGV^FW1YKVqb)<tyItUeoq#eK@
zl<cv;Ph#f_A=B@77?2*&7a1(!Ez!p@tG1yC^K_m%M<@y2IXIB{I^_QiBx5HX9JU!O
zTo~Tj(8_AMnPw|jR`)A%hMU=F*|r>M!@2|s^d{Rnm8Kh?g<v&?ecpTbjhpZ-IK5i0
zHXpk1-Yxq+Nj`G8Du%=MkG1D(Pkny$<dXR0wsPs`kM6yG$vTyM_ayr3%B`!vzqz*f
k*u}^HJoVa7$E2lKKbD3!KK$ZJ`dL|BUawy}`||7m04c&BY5)KL

literal 0
HcmV?d00001

diff --git a/src/common/index.scss b/src/common/index.scss
index 9c458fbf5..0075f0d0a 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -338,8 +338,8 @@
 .nitro-currency-icon {
     background-position: center;
     background-repeat: no-repeat;
-    width: 15px;
-    height: 15px;
+    width: 16px;
+    height: 16px;
 }
 
 .nitro-item-count {
diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 4b4ba422c..4cbdca097 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -3,6 +3,7 @@
     height: $catalog-height;
     min-width: $catalog-width;
     max-width: $catalog-width;
+    min-height: $catalog-height - 39px;
 
     font[size='16'] {
         font-size: 20px;
@@ -20,7 +21,7 @@
 
     .catalog-default-image {
         max-height: 250px;
-        height: 250px;
+        height: 243px;
     }
 
     .grid-price-view {
@@ -38,9 +39,8 @@
 
     .quantity-input {
         min-height: 17px;
-        width: 28px;
+        width: 34px;
         padding: 0 4px;
-        text-align: right;
     }
 
     .grid-bg {
@@ -55,6 +55,12 @@
         border-image-width: 6px 6px 6px 6px;
     }
 
+    .duckets-bg {
+        border-image-source: url(@/assets/flash/catalogue/duckets_bg.png);
+        border-image-slice: 6 6 6 6 fill;
+        border-image-width: 6px 6px 6px 6px;
+    }
+
     .credits-default-layout {
         position: absolute;
         bottom: 15px;
@@ -78,6 +84,12 @@
         min-height: 150px;
     }
 
+    .item-not-picker {
+        width: calc(100% - 203px);
+        max-height: 30px;
+        min-height: 30px;   
+    }
+
     .group-furni-picker {
         max-height: 110px;
         min-height: 110px;
@@ -85,6 +97,7 @@
 
     .quanity-container {
         height: 20px;
+        font-size: 13px;
     }
 
     .catalog-image-column {
diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx
index 3cfc6260d..59e5b0330 100644
--- a/src/components/catalog/CatalogView.tsx
+++ b/src/components/catalog/CatalogView.tsx
@@ -100,7 +100,7 @@ export const CatalogView: FC<{}> = props =>
                                     { activeNodes && (activeNodes.length > 0) &&
                                         <CatalogNavigationView node={ activeNodes[0] } /> }
                                 </Column> }
-                            <Column size={ !navigationHidden ? 8 : 12 } overflow="hidden">
+                            <Column size={ !navigationHidden ? 8 : 12 } overflow="hidden" className="ms-1">
                                 { GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
                             </Column>
                         </Grid>
diff --git a/src/components/catalog/views/page/common/CatalogHeaderView.tsx b/src/components/catalog/views/page/common/CatalogHeaderView.tsx
index 5791855ed..29854e5eb 100644
--- a/src/components/catalog/views/page/common/CatalogHeaderView.tsx
+++ b/src/components/catalog/views/page/common/CatalogHeaderView.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { ICatalogNode } from '../../../../../api';
+import { ICatalogNode, LocalizeText } from '../../../../../api';
 import { Column, Flex, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogIconView } from '../../catalog-icon/CatalogIconView';
@@ -12,15 +12,15 @@ export interface CatalogHeaderViewProps
 export const CatalogHeaderView: FC<CatalogHeaderViewProps> = props =>
 {
     const { node = null } = props;
-    const { currentPage = null, activateNode = null, rootNode = null, getNodeById = null } = useCatalog();
+    const { currentPage = null, searchResult = null, rootNode = null, getNodeById = null } = useCatalog();
     
     return (
         <>
             <Flex className="catalog-header">
                 <Column gap={ 0 } className="catalog-header-content">
                     { currentPage && rootNode && <CatalogIconView icon={ getNodeById(currentPage.pageId, rootNode).iconId } /> }
-                    { currentPage && rootNode && <Text bold className="catalog-header-title h-100">{ getNodeById(currentPage.pageId, rootNode).localization }</Text> }
-                    <Text className="catalog-header-desc" dangerouslySetInnerHTML={ { __html: currentPage && currentPage.localization.getText(0) } }/>
+                    { currentPage && rootNode && <Text bold className="catalog-header-title h-100">{ !searchResult ? getNodeById(currentPage.pageId, rootNode).localization : LocalizeText('catalog.search.header') }</Text> }
+                    <Text className="catalog-header-desc" dangerouslySetInnerHTML={ { __html: !searchResult ? (currentPage && currentPage.localization.getText(0)) : LocalizeText('catalog.search.results', [ 'count', 'needle' ], [ searchResult.offers.length.toString(), searchResult.searchValue ]) } }/>
                 </Column>
                 <Flex className="catalog-header-image" style={ { backgroundImage: `url(${ currentPage && currentPage.localization.getImage(0) })` } } />
             </Flex>
diff --git a/src/components/catalog/views/page/common/CatalogSearchView.tsx b/src/components/catalog/views/page/common/CatalogSearchView.tsx
index 03984f2d9..7cba40ea5 100644
--- a/src/components/catalog/views/page/common/CatalogSearchView.tsx
+++ b/src/components/catalog/views/page/common/CatalogSearchView.tsx
@@ -1,14 +1,13 @@
 import { IFurnitureData } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { FaSearch, FaTimes } from 'react-icons/fa';
 import { CatalogPage, CatalogType, FilterCatalogNode, FurnitureOffer, GetOfferNodes, GetSessionDataManager, ICatalogNode, ICatalogPage, IPurchasableOffer, LocalizeText, PageLocalization, SearchResult } from '../../../../../api';
-import { Button, Flex } from '../../../../../common';
+import { Flex } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 
 export const CatalogSearchView: FC<{}> = props =>
 {
     const [ searchValue, setSearchValue ] = useState('');
-    const { currentType = null, rootNode = null, offersToNodes = null, searchResult = null, setSearchResult = null, setCurrentPage = null } = useCatalog();
+    const { currentType = null, rootNode = null, offersToNodes = null, setSearchResult = null, setCurrentPage = null } = useCatalog();
 
     useEffect(() =>
     {
@@ -81,14 +80,12 @@ export const CatalogSearchView: FC<{}> = props =>
     return (
         <Flex gap={ 1 } className="position-relative">
             <Flex fullWidth alignItems="center" position="relative">
-                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+                <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('catalog.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
             </Flex>
             { (!searchValue || !searchValue.length) &&
                 <i className="icon icon-pen position-absolute catalog-search-button"/> }
             { searchValue && !!searchValue.length &&
-                <Button variant="primary" className="catalog-search-button" onClick={ event => setSearchValue('') }>
-                    <i className="icon icon-clear position-absolute catalog-clear-button" />
-                </Button> }
+                <i className="icon icon-clear position-absolute catalog-clear-button" onClick={ event => setSearchValue('') } /> }
         </Flex>
     );
 }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
index 03d69dd74..b4eaa99af 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutBadgeDisplayView.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { LocalizeText } from '../../../../../api';
+import { LocalizeText, getTypePrice } from '../../../../../api';
 import { Base, Column, Flex, Grid, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogBadgeSelectorWidgetView } from '../widgets/CatalogBadgeSelectorWidgetView';
@@ -31,7 +31,7 @@ export const CatalogLayoutBadgeDisplayView: FC<CatalogLayoutProps> = props =>
                         <>
                             <Base position="relative" overflow="hidden">
                                 <CatalogViewProductWidgetView />
-                                <CatalogTotalPriceWidget className="credits-default-layout credits-bg py-1 px-2 bottom-1 end-1" justifyContent="end" alignItems="end" />
+                                <CatalogTotalPriceWidget className={ `credits-default-layout ${ getTypePrice(currentOffer.priceType) } py-1 px-2 bottom-2 end-2` } justifyContent="end" alignItems="end" />
                                 <Text bold variant="white" className="item-title" grow truncate>{ currentOffer.localizationName }</Text>
                             </Base>
                             <Column grow gap={ 1 }>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
index 6988e4da4..a2396a4a6 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutDefaultView.tsx
@@ -1,12 +1,12 @@
 import { FC } from 'react';
-import { ProductTypeEnum } from '../../../../../api';
-import { Base, Column, Flex, Grid, Text } from '../../../../../common';
+import { getTypePrice } from '../../../../../api';
+import { Base, Column, Flex, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
-import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView';
 import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
 import { CatalogLimitedItemWidgetView } from '../widgets/CatalogLimitedItemWidgetView';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
+import { CatalogSelectItemWidgetView } from '../widgets/CatalogSelectItemWidgetView';
 import { CatalogSpinnerWidgetView } from '../widgets/CatalogSpinnerWidgetView';
 import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
 import { CatalogViewProductWidgetView } from '../widgets/CatalogViewProductWidgetView';
@@ -28,7 +28,7 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                     <>
                         <Base position="relative" overflow="hidden">
                             <CatalogViewProductWidgetView />
-                            <CatalogTotalPriceWidget className="credits-default-layout credits-bg py-1 px-2 bottom-1 end-1" justifyContent="end" alignItems="end" />
+                            <CatalogTotalPriceWidget className={ `credits-default-layout ${ getTypePrice(currentOffer.priceType) } py-1 px-2 bottom-2 end-2` } justifyContent="end" alignItems="end" />
                             <CatalogLimitedItemWidgetView fullWidth position="absolute" className="top-1" />
                             <CatalogAddOnBadgeWidgetView position="absolute" className="bg-muted rounded top-1 end-1" />
                         </Base>
@@ -37,16 +37,18 @@ export const CatalogLayoutDefaultView: FC<CatalogLayoutProps> = props =>
                         </Column>
                     </> }
             </Column>
-            <Column className="grid-bg item-picker p-2" size={ 7 } overflow="hidden">
-                <CatalogItemGridWidgetView />
+            <Column>
+                <Column position="absolute" className="grid-bg p-2" size={ 7 } overflow="hidden" style={ { height: 'calc(100% - 480px)', width: '64%' } }>
+                    <CatalogItemGridWidgetView />
+                </Column>
+                <Flex gap={ 1 } position="absolute" className="quanity-container bottom-5">
+                    <CatalogSpinnerWidgetView />
+                </Flex>
+                <Flex gap={ 2 } position="absolute" className="purchase-buttons align-items-end bottom-3" style={ { width: '64%' } }>
+                    <CatalogPurchaseWidgetView />
+                </Flex>
+                <CatalogSelectItemWidgetView />
             </Column>
-            <Flex gap={ 1 } className="quanity-container mt-2">
-                <CatalogSpinnerWidgetView />
-            </Flex>
-            <Flex gap={ 2 } className="purchase-buttons align-items-end mt-2">
-                <CatalogPurchaseWidgetView />
-            </Flex>
-
         </div>
     );
 }
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
index a53ad1cc3..7c02ebe5b 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutGuildCustomFurniView.tsx
@@ -1,5 +1,6 @@
 import { FC } from 'react';
-import { Base, Column, Flex, Grid, Text } from '../../../../../common';
+import { getTypePrice } from '../../../../../api';
+import { Base, Column, Flex, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogGuildBadgeWidgetView } from '../widgets/CatalogGuildBadgeWidgetView';
 import { CatalogGuildSelectorWidgetView } from '../widgets/CatalogGuildSelectorWidgetView';
@@ -27,7 +28,7 @@ export const CatalogLayouGuildCustomFurniView: FC<CatalogLayoutProps> = props =>
                         <Base position="relative" overflow="hidden">
                             <CatalogViewProductWidgetView />
                             <CatalogGuildBadgeWidgetView position="absolute" className="top-1 end-1" />
-                            <CatalogTotalPriceWidget className="credits-default-layout credits-bg py-1 px-2 bottom-1 end-1" justifyContent="end" alignItems="end" />
+                            <CatalogTotalPriceWidget className={ `credits-default-layout ${ getTypePrice(currentOffer.priceType) } py-1 px-2 bottom-2 end-2` } justifyContent="end" alignItems="end" />
                         </Base>
                         <Column grow gap={ 1 }>
                             <Text bold variant="white" className="item-title" grow truncate>{ currentOffer.localizationName }</Text>
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx
index cf3daf023..e2646950e 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutSpacesView.tsx
@@ -1,6 +1,7 @@
 import { NitroPoint } from '@nitrots/nitro-renderer';
 import { FC, useEffect } from 'react';
-import { Base, Column, Flex, Grid, Text } from '../../../../../common';
+import { getTypePrice } from '../../../../../api';
+import { Base, Column, Flex, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
 import { CatalogSpacesWidgetView } from '../widgets/CatalogSpacesWidgetView';
@@ -30,7 +31,7 @@ export const CatalogLayoutSpacesView: FC<CatalogLayoutProps> = props =>
                     <>
                         <Base position="relative" overflow="hidden">
                             <CatalogViewProductWidgetView />
-                            <CatalogTotalPriceWidget className="credits-default-layout credits-bg py-1 px-2 bottom-1 end-1" justifyContent="end" alignItems="end" />
+                            <CatalogTotalPriceWidget className={ `credits-default-layout ${ getTypePrice(currentOffer.priceType) } py-1 px-2 bottom-2 end-2` } justifyContent="end" alignItems="end" />
                             <Text bold variant="white" className="item-title" grow truncate>{ currentOffer.localizationName }</Text>
                         </Base>
                         <Flex gap={ 2 } className="purchase-buttons align-items-end mt-2">
diff --git a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
index 04d154fc4..1006c6955 100644
--- a/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
+++ b/src/components/catalog/views/page/layout/pets/CatalogLayoutPetView.tsx
@@ -1,8 +1,8 @@
 import { ApproveNameMessageComposer, ApproveNameMessageEvent, ColorConverter, GetSellablePetPalettesComposer, PurchaseFromCatalogComposer, SellablePetPaletteData } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { FaFillDrip } from 'react-icons/fa';
-import { DispatchUiEvent, GetPetAvailableColors, GetPetIndexFromLocalization, LocalizeText, SendMessageComposer } from '../../../../../../api';
-import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutGridItem, LayoutPetImageView, Text } from '../../../../../../common';
+import { DispatchUiEvent, GetPetAvailableColors, GetPetIndexFromLocalization, LocalizeText, SendMessageComposer, getTypePrice } from '../../../../../../api';
+import { AutoGrid, Base, Button, Column, Flex, LayoutGridItem, LayoutPetImageView, Text } from '../../../../../../common';
 import { CatalogPurchaseFailureEvent } from '../../../../../../events';
 import { useCatalog, useMessageEvent } from '../../../../../../hooks';
 import { CatalogAddOnBadgeWidgetView } from '../../widgets/CatalogAddOnBadgeWidgetView';
@@ -205,26 +205,26 @@ export const CatalogLayoutPetView: FC<CatalogLayoutProps> = props =>
                     <>
                         <Base position="relative" overflow="hidden">
                             <CatalogViewProductWidgetView />
-                            <CatalogTotalPriceWidget className="credits-default-layout credits-bg py-1 px-2 bottom-1 end-1" justifyContent="end" alignItems="end" />
+                            <CatalogTotalPriceWidget className={ `credits-default-layout ${ getTypePrice(currentOffer.priceType) } py-1 px-2 bottom-2 end-2` } justifyContent="end" alignItems="end" />
                             <CatalogAddOnBadgeWidgetView position="absolute" className="bg-muted rounded bottom-1 end-1" />
                             { ((petIndex > -1) && (petIndex <= 7)) &&
                                 <Button position="absolute" className="bottom-1 start-1" onClick={ event => setColorsShowing(!colorsShowing) }>
                                     <FaFillDrip className="fa-icon" />
                                 </Button> }
                         </Base>
-                                    <Column size={ 7 } overflow="hidden">
-                        <AutoGrid className="grid-bg group-furni-picker p-2" columnCount={ 7 }>
-                            { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
-                            {
-                                return (
-                                    <LayoutGridItem key={ index } itemActive={ (selectedPaletteIndex === index) } onClick={ event => setSelectedPaletteIndex(index) }>
-                                        <LayoutPetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
-                                    </LayoutGridItem>
-                                );
-                            }) }
-                            { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => <LayoutGridItem itemHighlight key={ index } itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } className="clear-bg" onClick={ event => setSelectedColorIndex(index) } />) }
-                        </AutoGrid>
-            </Column>
+                        <Column size={ 7 } overflow="hidden">
+                            <AutoGrid className="grid-bg group-furni-picker p-2" columnCount={ 7 }>
+                                { !colorsShowing && (sellablePalettes.length > 0) && sellablePalettes.map((palette, index) =>
+                                {
+                                    return (
+                                        <LayoutGridItem key={ index } itemActive={ (selectedPaletteIndex === index) } onClick={ event => setSelectedPaletteIndex(index) }>
+                                            <LayoutPetImageView typeId={ petIndex } paletteId={ palette.paletteId } direction={ 2 } headOnly={ true } />
+                                        </LayoutGridItem>
+                                    );
+                                }) }
+                                { colorsShowing && (sellableColors.length > 0) && sellableColors.map((colorSet, index) => <LayoutGridItem itemHighlight key={ index } itemActive={ (selectedColorIndex === index) } itemColor={ ColorConverter.int2rgb(colorSet[0]) } className="clear-bg" onClick={ event => setSelectedColorIndex(index) } />) }
+                            </AutoGrid>
+                        </Column>
                         <Column grow gap={ 1 }>
                             <Text truncate>{ petBreedName }</Text>
                             <Column grow gap={ 1 }>
diff --git a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
index e4660545c..732837cd9 100644
--- a/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogItemGridWidgetView.tsx
@@ -44,7 +44,7 @@ export const CatalogItemGridWidgetView: FC<CatalogItemGridWidgetViewProps> = pro
     }
 
     return (
-        <AutoGrid innerRef={ elementRef } columnCount={ columnCount } { ...rest }>
+        <AutoGrid innerRef={ elementRef } columnCount={ columnCount } columnMinWidth={ 50 } { ...rest }>
             { currentPage.offers && (currentPage.offers.length > 0) && currentPage.offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer.offerId === offer.offerId)) } offer={ offer } selectOffer={ selectOffer } />) }
             { children }
         </AutoGrid>
diff --git a/src/components/catalog/views/page/widgets/CatalogPriceGridDisplayWidgetViev.tsx b/src/components/catalog/views/page/widgets/CatalogPriceGridDisplayWidgetViev.tsx
index bc7f642f1..583cb5d58 100644
--- a/src/components/catalog/views/page/widgets/CatalogPriceGridDisplayWidgetViev.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPriceGridDisplayWidgetViev.tsx
@@ -1,7 +1,6 @@
 import { FC } from 'react';
 import { IPurchasableOffer } from '../../../../../api';
 import { Flex, Text } from '../../../../../common';
-import { useCatalog } from '../../../../../hooks';
 interface CatalogPriceGridDisplayWidgetViewProps
 {
     offer: IPurchasableOffer;
@@ -11,8 +10,6 @@ interface CatalogPriceGridDisplayWidgetViewProps
 export const CatalogPriceGridDisplayWidgetView: FC<CatalogPriceGridDisplayWidgetViewProps> = props =>
 {
     const { offer = null, separator = false } = props;
-    const { purchaseOptions = null } = useCatalog();
-    const { quantity = 1 } = purchaseOptions;
 
     if(!offer) return null;
 
@@ -20,13 +17,14 @@ export const CatalogPriceGridDisplayWidgetView: FC<CatalogPriceGridDisplayWidget
         <>
             { (offer.priceInCredits > 0) &&
                 <Flex alignItems="end" justifyContent="end" gap={ 1 } className="grid-price-view">
-                    <Text bold>{ (offer.priceInCredits * quantity) }</Text>
+                    <Text bold>{ (offer.priceInCredits) }</Text>
                     <i className="icon icon-small-coin" />
-                </Flex> }
+                </Flex>
+            }
             { (offer.priceInActivityPoints > 0) &&
                 <Flex alignItems="end" justifyContent="end" gap={ 1 } className="grid-price-view">
                     { separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) && <Text bold>+</Text> }
-                    <Text bold>{ (offer.priceInActivityPoints * quantity) }</Text>
+                    <Text bold>{ (offer.priceInActivityPoints) }</Text>
                     <i className={ 'icon icon-small-' + offer.activityPointType } />
                 </Flex> }
         </>
diff --git a/src/components/catalog/views/page/widgets/CatalogSelectItemWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogSelectItemWidgetView.tsx
new file mode 100644
index 000000000..90ee4bd52
--- /dev/null
+++ b/src/components/catalog/views/page/widgets/CatalogSelectItemWidgetView.tsx
@@ -0,0 +1,17 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { Flex, Text } from '../../../../../common';
+import { useCatalog } from '../../../../../hooks';
+
+export const CatalogSelectItemWidgetView: FC<{}> = props =>
+{
+    const { currentOffer = null } = useCatalog();
+
+    if (currentOffer) return null;
+
+    return (
+        <Flex gap={ 2 } position="absolute" className="grid-bg item-not-picker p-2 bottom-3">
+            <Text bold center variant="muted" position="absolute" className="bottom-1 end-0 start-0 m-auto">{ LocalizeText('catalog.purchase.select.info') }</Text>
+        </Flex>
+    );
+}
diff --git a/src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx
index 6a53d996d..e7cd2755d 100644
--- a/src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogSpacesWidgetView.tsx
@@ -107,7 +107,7 @@ export const CatalogSpacesWidgetView: FC<CatalogSpacesWidgetViewProps> = props =
                 { SPACES_GROUP_NAMES.map((name, index) => <Button key={ index } active={ (selectedGroupIndex === index) } onClick={ event => setSelectedGroupIndex(index) }>{ LocalizeText(`catalog.spaces.tab.${ name }`) }</Button>) }
             </ButtonGroup>
             <Column className="grid-bg item-picker p-2" size={ 7 } overflow="hidden">
-                <AutoGrid columnCount={ columnCount } { ...rest }>
+                <AutoGrid columnCount={ columnCount } columnMinWidth={ 50 } { ...rest }>
                     { offers && (offers.length > 0) && offers.map((offer, index) => <CatalogGridOfferView key={ index } itemActive={ (currentOffer && (currentOffer === offer)) } offer={ offer } selectOffer={ offer => setSelectedOffer(offer) } />) }
                     { children }
                 </AutoGrid>
diff --git a/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
index c3d831b09..fe2b8d515 100644
--- a/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogSpinnerWidgetView.tsx
@@ -1,5 +1,4 @@
-import { FC } from 'react';
-import { FaCaretLeft, FaCaretRight } from 'react-icons/fa';
+import { ChangeEvent, FC, useState } from 'react';
 import { LocalizeText } from '../../../../../api';
 import { Flex, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
@@ -9,37 +8,42 @@ const MAX_VALUE: number = 100;
 
 export const CatalogSpinnerWidgetView: FC<{}> = props =>
 {
+    const [ quantityInput, setQuantityInput ] = useState<string>('1');
     const { currentOffer = null, purchaseOptions = null, setPurchaseOptions = null } = useCatalog();
     const { quantity = 1 } = purchaseOptions;
 
-    const updateQuantity = (value: number) =>
+    const updateQuantity = (value: string | number) =>
     {
-        if(isNaN(value)) value = 1;
+        value = Math.max(Number(value), MIN_VALUE);
+        value = Math.min(Number(value), MAX_VALUE);
 
-        value = Math.max(value, MIN_VALUE);
-        value = Math.min(value, MAX_VALUE);
-
-        if(value === quantity) return;
+        if(Number(value) === quantity) return;
 
         setPurchaseOptions(prevValue =>
         {
             const newValue = { ...prevValue };
 
-            newValue.quantity = value;
+            newValue.quantity = !value ? MIN_VALUE : Number(value);
 
             return newValue;
         });
     }
 
+    const changeQuantity = (event: ChangeEvent<HTMLInputElement>) =>
+    {
+        const value = event.target.value;
+
+        setQuantityInput(Number(value) > 100 ? MAX_VALUE.toString() : value);
+        updateQuantity(value);
+    }
+
     if(!currentOffer || !currentOffer.bundlePurchaseAllowed) return null;
 
     return (
         <>
-            <Text>{ LocalizeText('catalog.bundlewidget.spinner.select.amount') }</Text>
+            <Text variant="muted" className="mt-1">{ LocalizeText('catalog.bundlewidget.quantity') }</Text>
             <Flex alignItems="center" gap={ 1 }>
-                <FaCaretLeft className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity - 1) } />
-                <input type="number" className="form-control form-control-sm quantity-input" value={ quantity } onChange={ event => updateQuantity(event.target.valueAsNumber) } />
-                <FaCaretRight className="text-black cursor-pointer fa-icon" onClick={ event => updateQuantity(quantity + 1) } />
+                <input type="number" className="form-control form-control-sm quantity-input mt-2 ms-2" value={ quantityInput } onChange={ changeQuantity } />
             </Flex>
         </>
     );

From 848ac60bf4a1095b3755290a95f252e71cf78765 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Sat, 1 Jul 2023 12:36:52 +0200
Subject: [PATCH 113/134] Fixes

- Fix arrow left pagination
- The trophy with localizationId empty was not working correctly in color bronze
- Design tweaks
- Component optimization
---
 src/components/catalog/CatalogView.scss       |   6 +
 .../page/layout/CatalogLayoutTrophiesView.tsx | 113 +++++++-----------
 2 files changed, 48 insertions(+), 71 deletions(-)

diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index e2e457168..0ec542d7e 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -379,4 +379,10 @@
     height: 137px;
 }
 
+.color-trophy {
+    width: 38px;
+    height: 30px;
+    margin-right: 4px;
+}
+
 @import './views/targeted-offer/Offer.scss';
diff --git a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
index c0eb2287a..de43e05bb 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
@@ -1,5 +1,6 @@
-import { FC, useEffect, useRef, useState } from 'react';
-import { AutoGrid, Base, Button, Column, Flex, Text } from '../../../../../common';
+import { FC, useEffect, useState } from 'react';
+import { Base, Button, ButtonGroup, Column, Flex, Text } from '../../../../../common';
+import { GiftColorButton } from '../../../../../common/GiftColorButton';
 import { useCatalog } from '../../../../../hooks';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
 import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
@@ -11,69 +12,56 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
     const [ trophyText, setTrophyText ] = useState<string>('');
     const { setCurrentOffer = null, setPurchaseOptions = null, currentPage = null } = useCatalog();
     const [ index, setIndex ] = useState(0);
-    const elementRef = useRef<HTMLDivElement>();
     const [ trophies, setTrophies ] = useState([]);
-    const [ qtdOffers, setQtdOffers ] = useState(0)
-    
+    const [ trophyColor, setTrophyColor ] = useState<string>('_g');
+    const [ colors, setColors ] = useState<{ id: string, color: string }[]>([ { id: '_g', color: '#CBA200' }, { id: '_s', color: '#A2A2A2' }, { id: '_b', color: '#A25100' } ]);
+    const [ lastPageTrophies, setLastPageTrophies ] = useState<number>(currentPage.pageId);
+
     useEffect(() =>
-    {  
-        if (currentPage.offers.length !== qtdOffers)
+    {
+        if (currentPage.pageId !== lastPageTrophies && currentPage.layoutCode === 'trophies')
         {
-            setTrophies([]);
             setIndex(0);
+            setTrophies([]);
+            setTrophyColor('_g');
         }
-        if(trophies.length === 0) 
-        {
-            // Set the total offers from trophies catalog
-            setQtdOffers(currentPage.offers.length)
-            // Default : Gold Trophie and uniques (Staff)
-            const trophies = currentPage.offers.filter((trophy) => trophy.localizationId.includes('_g') || !trophy.localizationId.match(/[_gsb]/));
-            setCurrentOffer(trophies[index]);
-            setTrophies(trophies)
-        } 
+        
+        const trophies = currentPage.offers.filter( trophy => (trophyColor !== '_b' ? trophy.localizationId.endsWith(trophyColor) : trophy.localizationId.endsWith(trophyColor) || trophy.localizationId.endsWith(trophy.localizationId.charAt(trophy.localizationId.length - 2)) ) || (trophy.localizationId.charAt(trophy.localizationId.length - 2) !== '_' && trophy.localizationId !== '') );
+        
+        setTrophies(trophies)
+        setCurrentOffer(trophies[index]);
+        setLastPageTrophies(currentPage.pageId);
+         
         setPurchaseOptions(prevValue =>
         {
             const newValue = { ...prevValue };
             newValue.extraData = trophyText;
             return newValue;
         });
-    }, [ trophies, index, currentPage, trophyText, qtdOffers, setCurrentOffer, setPurchaseOptions, setQtdOffers ]);
-
+    }, [ trophyText, setPurchaseOptions, currentPage.offers, setCurrentOffer, index, trophyColor, currentPage.pageId, currentPage.layoutCode, lastPageTrophies ]);
 
-    const setTrophyColor = (color: string) =>  
+    const nextOffer = () =>
     {
-        //Set color to the selected Trophie (_g = gold, _s = silver, _b = bronze)
-        const trophies = currentPage.offers.filter((trophy) => trophy.localizationId.includes(color));
-        setTrophies(trophies)
-        setCurrentOffer(trophies[index]);
+        setIndex(prevValue =>
+        {
+            let newIndex = (prevValue + 1);
+
+            if(newIndex >= trophies.length) newIndex = 0;
+
+            return newIndex;
+        });
     }
 
     const lastOffer = () =>
     {
-        setIndex(prevIndex => prevIndex - 1);
-        if(index <= 0)
+        setIndex(prevValue =>
         {
-            setIndex(0);
-            setCurrentOffer(trophies[index]);
-        }
-        else 
-        {
-            setCurrentOffer(trophies[index - 1]);
-        }
-    }
+            let newIndex = (prevValue - 1);
 
-    const nextOffer = () =>
-    {
-        setIndex(prevIndex => prevIndex + 1);
-        if(index >= trophies.length - 1) 
-        {
-            setIndex(0);
-            setCurrentOffer(trophies[0]);
-        }
-        else 
-        {
-            setCurrentOffer(trophies[index + 1]);
-        }
+            if(newIndex < 0) newIndex = (trophies.length - 1);
+
+            return newIndex;
+        });
     }
 
     return (
@@ -82,42 +70,25 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
                 <Text dangerouslySetInnerHTML={ { __html: currentPage && currentPage.localization.getText(1) } } style={ { fontSize: '12px' } }></Text>
                 <Column fit overflow="hidden" className="p-2 rounded d-flex justify-content-center align-items-center">
                     <div className="position-absolute bottom-0" style={ { left: '105px' } }>
-                        <Button variant="primary" className="volter-button btn-sm" onClick={ lastOffer }>
+                        <Button variant="primary" className="btn btn-button btn-sm" onClick={ lastOffer }>
                             <Base className="flex-shrink-0 icon icon-chevron_left_gift" />
                         </Button>
                     </div>
-                    <div className="position-absolute bottom-0" style={ { top: '150px' } }>
+                    <div className="position-absolute bottom-3">
                         <CatalogViewTrophiesWidgetView />
                     </div>
                     <div className="position-absolute bottom-0" style={ { right: '105px' } }>
-                        <Button variant="primary" className="volter-button btn-sm" onClick={ nextOffer }>
+                        <Button variant="primary" className="btn btn-button btn-sm" onClick={ nextOffer }>
                             <Base className="flex-shrink-0 icon icon-chevron_right_gift" />
                         </Button>
                     </div>
                 </Column>
-                <CatalogTotalPriceWidget className="credits-default-layout credits-bg py-1 px-2 bottom-1 end-1" justifyContent="end" alignItems="end" />
+                <CatalogTotalPriceWidget className="credits-default-layout credits-bg py-1 px-2 bottom-0 end-0" justifyContent="end" alignItems="end" />
             </Column>
-            <Column className="grid-bg w-10 h-10 p-2 mt-2 flex" size={ 3 } overflow="hidden" gap={ 2 }>
-                <AutoGrid innerRef={ elementRef } columnCount={ 5 } >
-                    <Column className="catalog-grid-active cursor-pointer" gap={ 0 }>
-                        <Base fit className="unique-bg-override" />
-                        <div className="border border-2 border-white" style={ { backgroundColor: '#CBA200' } } onClick={ () => setTrophyColor('_g') } >
-                            <i className="mr-1 d-inline-block outline" />
-                        </div>
-                    </Column>
-                    <Column className="catalog-grid-active cursor-pointer" gap={ 0 }>
-                        <Base fit className="unique-bg-override" />
-                        <div className="border border-2 border-white" style={ { backgroundColor: '#A2A2A2' } } onClick={ () => setTrophyColor('_s') } >
-                            <i className="mr-1 d-inline-block outline" />
-                        </div>
-                    </Column>
-                    <Column className="catalog-grid-active cursor-pointer" gap={ 0 }>
-                        <Base fit className="unique-bg-override"/>
-                        <div className="border border-2 border-white" style={ { backgroundColor: '#A25100' } } onClick={ () => setTrophyColor('_b') } >
-                            <i className="mr-1 d-inline-block outline" />
-                        </div>
-                    </Column>
-                </AutoGrid>
+            <Column className="grid-bg p-2 mt-2" overflow="hidden">
+                <ButtonGroup fullWidth>
+                    { colors.map(color => <GiftColorButton key={ color.id } variant="dark" className="color-trophy cursor-pointer" active={ (color.id === trophyColor) } style={ { backgroundColor: color.color, borderRadius: '4px' } } onClick={ () => setTrophyColor(color.id) } />) }
+                </ButtonGroup>
             </Column>
             <Column size={ 3 } overflow="hidden">
                 <textarea className="flex-grow-1 form-control w-40 trophy-text mt-2" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />

From a613cef5bc62ab14a04f5ecd2d234dc8af0e77ee Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Sat, 1 Jul 2023 13:01:46 +0200
Subject: [PATCH 114/134] Catalog trophies - Auto scroll textarea and button

---
 .../catalog/views/page/layout/CatalogLayoutTrophiesView.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
index de43e05bb..e715f9065 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutTrophiesView.tsx
@@ -90,10 +90,10 @@ export const CatalogLayoutTrophiesView: FC<CatalogLayoutProps> = props =>
                     { colors.map(color => <GiftColorButton key={ color.id } variant="dark" className="color-trophy cursor-pointer" active={ (color.id === trophyColor) } style={ { backgroundColor: color.color, borderRadius: '4px' } } onClick={ () => setTrophyColor(color.id) } />) }
                 </ButtonGroup>
             </Column>
-            <Column size={ 3 } overflow="hidden">
+            <Column size={ 3 } position="absolute" overflow="hidden" style={ { height: 'calc(100% - 510px)', width: '64%' } }>
                 <textarea className="flex-grow-1 form-control w-40 trophy-text mt-2" defaultValue={ trophyText || '' } onChange={ event => setTrophyText(event.target.value) } />
             </Column>
-            <Flex gap={ 2 } className="purchase-buttons align-items-end mt-2">
+            <Flex gap={ 2 } position="absolute" className="purchase-buttons align-items-end bottom-3" style={ { width: '64%' } }>
                 <CatalogPurchaseWidgetView />
             </Flex>
 

From 974f40406dafdaa97229fc809267fd2dec55977c Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Sun, 2 Jul 2023 02:28:18 +0200
Subject: [PATCH 115/134] Catalog - Marketplace improved design

---
 src/assets/flash/catalogue/marketplace_bg.png | Bin 0 -> 1777 bytes
 src/assets/styles/bootstrap/_buttons.scss     |   4 ++
 src/components/catalog/CatalogView.scss       |  53 +++++++++++++-
 .../CatalogLayoutMarketplaceConfirmView.tsx   |  52 ++++++++++++++
 .../CatalogLayoutMarketplaceItemView.tsx      |  33 +++++----
 .../CatalogLayoutMarketplaceOwnItemsView.tsx  |  12 ++--
 ...atalogLayoutMarketplacePublicItemsView.tsx |  23 +++---
 ...CatalogLayoutMarketplaceSearchFormView.tsx |  56 ++++++++++-----
 .../marketplace/MarketplacePostOfferView.tsx  |  66 +++++++-----------
 9 files changed, 200 insertions(+), 99 deletions(-)
 create mode 100644 src/assets/flash/catalogue/marketplace_bg.png
 create mode 100644 src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceConfirmView.tsx

diff --git a/src/assets/flash/catalogue/marketplace_bg.png b/src/assets/flash/catalogue/marketplace_bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..83d2d3eff153f9073ae72b57a22dd9d68d189950
GIT binary patch
literal 1777
zcmcIlOOM-B6!uUaok3HC#G?WhmfHoW_;Ih}BsK|Enq-<t^)O^2W>~@X^>t!R>}zb#
zBr_~P6%SRYLSlyy{DW3v2}MF66+{<h2MbmRSg-+U#1d&Zj+2nZFv^BV&ds^`&UfC&
z*EZHKudY0?A_&52yVdBxc?O<`PM?DBU+$b)gJUV_T)rgSy!+JeAl%!l*)>7<^!*3_
zCij87ym6)5yng-K;o%=3ef;egKfrM+?W}Je9SJ|)Sp}@H9JO9f1mUss*|YS~qu)Ft
z2=_nfcem4R`-(+*pb(ckOc@0cpar3FaTF1{!&1><JwL2Uf8P315`DKSZ5g&^M|IZs
zTL&@QJXr72gB@zR(#7XjS1Kb57y_0OaTE-~#2QtlF|h@|vujln$B=ZVD%CQJ;<mjZ
z)_Kgtl7eKaX_{Cv6-V>R4l}i9MXX_@BCH}q#>m2kg$!}>k-(rRR$|w)I*ql7L6E9a
zKTRV`Rfof&GSn3w_f%w>rmA5TV;K-~vLB{oB!|hloMb}NU<r-=DD`<LX0*iNyJ=Md
zpYvdXXvQ5TlZ-*`)DekPq-a@iQ=o013=M)AI!T**U}fU;vBXJtKVoW!C44ugthvX+
z^xV{#OJ};#Zaf%=>r#~sSOBmD978ixQJ<$g>GS`HWA^tfn#iihjHEp7az2=rY-7qI
zVqL-F(>9@gnDIW7`7}{s4U)2|1ogwRR*+Gti?C%BE#0`FVN26;s0}^gl9Vh4=C1GU
zF9Nk~s~sjO2`OtgsuDP*_`Yi~Oi_{Qrp!FglnVvTkjn=1WWylD!9_<yIvx83`VCHZ
zvjk@Pc?-Lo0>>;z7Bnd?q5_kd=}@_#7j&7RvL{pOV1hLR6<soAdm;8=jL2Y~HS@{^
z#!|_ps8G~oRw{s3W|_)mqI-}v$I%Ugg2zY_U21te4hVFLACMkXqp&B5|9VsB10LJl
zg`DftriQi#BM?l>PoReT<AKSiXFN8W?6tY8$q)>Daomv>q1hl*C7N{rbEV0(e@tQ*
z3n8Z+_8E|#&=)x@;a)l<F{|~U2#a){x<Dui**iIq#X98w4J2o$eG>K<EL<4g`OqqA
zwwdNDS5c2Ea*mtZX!*7rYs0z(3G}AhI+JD_pM_vGhJ7C5_dbDl!E^0Kt$TLs#`j-6
zENG|isnw5~58VB*zx4BOhhKlN`PPN<`Q~>m^|LqSpU&QX#aw&+op)dStM$^2U*Fzp
Zeg4MdOUt*e)=>6NX*bs!H!r<<^&boH93}t&

literal 0
HcmV?d00001

diff --git a/src/assets/styles/bootstrap/_buttons.scss b/src/assets/styles/bootstrap/_buttons.scss
index 98645b1ea..c0d5fcf59 100644
--- a/src/assets/styles/bootstrap/_buttons.scss
+++ b/src/assets/styles/bootstrap/_buttons.scss
@@ -196,6 +196,10 @@
   &:active {
     border-image-source: url(@/assets/flash/buttons/volter_normal_btn_active.png);
   }
+
+  &.active {
+    border-image-source: url(@/assets/flash/buttons/volter_normal_btn_active.png);
+  }
 }
 
 .notification-buttons {
diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 27895722f..46d11266d 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -293,6 +293,24 @@
     }
 }
 
+.marketplace-bg {
+    border-image-source: url(@/assets/flash/catalogue/marketplace_bg.png);
+    border-image-slice: 6 6 6 6 fill;
+    border-image-width: 6px 6px 6px 6px;
+}
+
+.search-marketplace {
+    height: 116px;
+}
+
+.font-size-marketplace {
+    font-size: 13px;
+}
+
+.font-size-marketplace-small {
+    font-size: 10px;
+}
+
 .nitro-catalog-layout-vip-gifts-grid {
     .layout-grid-item {
         height: 55px !important;
@@ -301,8 +319,39 @@
 }
 
 .nitro-catalog-layout-marketplace-post-offer {
-    width: $marketplace-post-offer-width;
-    height: $marketplace-post-offer-height;
+    width: 299px;
+
+    .image-preview {
+        width: 48px;
+        height: 48px;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #F0F0F0;
+        border: 1px solid #5D5D5D;
+        border-radius: 8px;
+    }
+
+    .textarea-height {
+        height: 51px;
+    }
+}
+
+.nitro-catalog-layout-marketplace-confirm {
+    width: 279px;
+
+    .image-preview {
+        width: 48px;
+        height: 48px;
+        overflow: hidden;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #F0F0F0;
+        border: 1px solid #5D5D5D;
+        border-radius: 8px;
+    }
 }
 
 .nitro-catalog-layout-bundle-grid {
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceConfirmView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceConfirmView.tsx
new file mode 100644
index 000000000..ed89dd2d2
--- /dev/null
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceConfirmView.tsx
@@ -0,0 +1,52 @@
+import { BuyMarketplaceOfferMessageComposer } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
+import { GetImageIconUrlForProduct, LocalizeText, MarketplaceOfferData, ProductTypeEnum, SendMessageComposer } from '../../../../../../api';
+import { Base, Button, Column, Flex, LayoutLimitedEditionStyledNumberView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
+
+export interface CatalogLayoutMarketplaceConfirmViewProps
+{
+    offerData: MarketplaceOfferData;
+    setOfferData(offerData: MarketplaceOfferData): void;
+}
+
+export const CatalogLayoutMarketplaceConfirmView: FC<CatalogLayoutMarketplaceConfirmViewProps> = props =>
+{
+    const { offerData = null, setOfferData = null } = props;
+
+    const onBuy = () =>
+    {
+        SendMessageComposer(new BuyMarketplaceOfferMessageComposer(offerData.offerId));
+        setOfferData(null);
+    }
+
+    if (!offerData) return null;
+
+    return (
+        <NitroCardView className="nitro-catalog-layout-marketplace-confirm no-resize" theme="primary">
+            <NitroCardHeaderView headerText={ LocalizeText('catalog.marketplace.confirm_title') } onCloseClick={ event => setOfferData(null) } />
+            <NitroCardContentView overflow="hidden">
+                <Column className="px-2 py-2">
+                    <Flex>
+                        <Flex className="image-preview">
+                            <Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ GetImageIconUrlForProduct(((offerData.furniType === MarketplaceOfferData.TYPE_FLOOR) ? ProductTypeEnum.FLOOR : ProductTypeEnum.WALL), offerData.furniId, offerData.extraData) })`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center' } } />
+                            { (offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0) > 0 &&
+                                <div className="position-absolute bottom-0 unique-item-counter">
+                                    <LayoutLimitedEditionStyledNumberView value={ offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0 } />
+                                </div>
+                            }
+                        </Flex>
+                        <Text bold className="mt-3 px-3">{ LocalizeText(((offerData.furniType === 2) ? 'wallItem' : 'roomItem') + `.name.${ offerData.furniId }`) }</Text>
+                    </Flex>
+                    <Text className="font-italic">{ LocalizeText('catalog.marketplace.confirm_header') }</Text>
+                    <Text className="font-size-marketplace-small mt-2">{ LocalizeText('catalog.marketplace.confirm_price', [ 'price' ], [ offerData.price.toString() ]) }</Text>
+                    <Text className="font-size-marketplace-small">{ LocalizeText('catalog.marketplace.offer_details.average_price', [ 'days', 'average' ], [ '7', offerData.averagePrice.toString() ]) }</Text>
+                    <Text className="font-size-marketplace-small">{ LocalizeText('catalog.marketplace.offer_details.offer_count', [ 'count' ], [ offerData.offerCount.toString() ]) }</Text>
+                    <Flex justifyContent="between">
+                        <Button className="w-30" onClick={ onBuy }>{ LocalizeText('buy') }</Button>
+                        <Button className="w-30" onClick={ () => setOfferData(null) }>{ LocalizeText('generic.cancel') }</Button>
+                    </Flex>
+                </Column>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
index 1f19b6bf9..6e5f5a58d 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback, useMemo } from 'react';
-import { GetImageIconUrlForProduct, LocalizeText, MarketplaceOfferData, MarketPlaceOfferState, ProductTypeEnum } from '../../../../../../api';
-import { Button, Column, LayoutGridItem, Text } from '../../../../../../common';
+import { GetImageIconUrlForProduct, LocalizeText, MarketPlaceOfferState, MarketplaceOfferData, ProductTypeEnum } from '../../../../../../api';
+import { Base, Button, Column, Flex, LayoutLimitedEditionStyledNumberView, Text } from '../../../../../../common';
 
 export interface MarketplaceItemViewProps
 {
@@ -46,38 +46,43 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
     }, [ offerData ]);
 
     return (
-        <LayoutGridItem shrink center={ false } column={ false } alignItems="center" className="p-1">
+        <Flex shrink center={ false } column={ false } alignItems="center" className="p-1 marketplace-bg">
             <Column style={ { width: 40, height: 40 } }>
-                <LayoutGridItem column={ false } itemImage={ GetImageIconUrlForProduct(((offerData.furniType === MarketplaceOfferData.TYPE_FLOOR) ? ProductTypeEnum.FLOOR : ProductTypeEnum.WALL), offerData.furniId, offerData.extraData) } itemUniqueNumber={ offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0 } />
+                <Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ GetImageIconUrlForProduct(((offerData.furniType === MarketplaceOfferData.TYPE_FLOOR) ? ProductTypeEnum.FLOOR : ProductTypeEnum.WALL), offerData.furniId, offerData.extraData) })`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center' } } />
+                { (offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0) > 0 &&
+                    <div className="position-absolute bottom-0 unique-item-counter">
+                        <LayoutLimitedEditionStyledNumberView value={ offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0 } />
+                    </div>
+                }
             </Column>
             <Column grow gap={ 0 }>
-                <Text fontWeight="bold">{ getMarketplaceOfferTitle }</Text>
+                <Text small fontWeight="bold" className="mt-1 mb-2">{ getMarketplaceOfferTitle }</Text>
                 { (type === OWN_OFFER) &&
                     <>
-                        <Text>{ LocalizeText('catalog.marketplace.offer.price_own_item', [ 'price' ], [ offerData.price.toString() ]) }</Text>
-                        <Text>{ offerTime() }</Text>
+                        <Text className="font-size-marketplace-small">{ LocalizeText('catalog.marketplace.offer.price_own_item', [ 'price' ], [ offerData.price.toString() ]) }</Text>
+                        <Text className="font-size-marketplace-small">{ offerTime() }</Text>
                     </> }
                 { (type === PUBLIC_OFFER) &&
                     <>
-                        <Text>{ LocalizeText('catalog.marketplace.offer.price_public_item', [ 'price', 'average' ], [ offerData.price.toString(), ((offerData.averagePrice > 0) ? offerData.averagePrice.toString() : '-') ]) }</Text>
-                        <Text>{ LocalizeText('catalog.marketplace.offer_count', [ 'count' ], [ offerData.offerCount.toString() ]) }</Text>
+                        <Text className="font-size-marketplace-small">{ LocalizeText('catalog.marketplace.offer.price_public_item', [ 'price', 'average' ], [ offerData.price.toString(), ((offerData.averagePrice > 0) ? offerData.averagePrice.toString() : '-') ]) }</Text>
+                        <Text className="font-size-marketplace-small">{ LocalizeText('catalog.marketplace.offer_count', [ 'count' ], [ offerData.offerCount.toString() ]) }</Text>
                     </> }
             </Column>
-            <Column gap={ 1 }>
+            <Column gap={ 1 } alignItems="end">
                 { ((type === OWN_OFFER) && (offerData.status !== MarketPlaceOfferState.SOLD)) &&
-                    <Button variant="secondary" onClick={ () => onClick(offerData) }>
+                    <Button variant="secondary" className="w-75 p-0 px-3 mt-4" onClick={ () => onClick(offerData) }>
                         { LocalizeText('catalog.marketplace.offer.pick') }
                     </Button> }
                 { type === PUBLIC_OFFER &&
                     <>
-                        <Button variant="secondary" onClick={ () => onClick(offerData) }>
+                        <Button variant="secondary" className="w-75 p-0" onClick={ () => onClick(offerData) }>
                             { LocalizeText('buy') }
                         </Button>
-                        <Button variant="secondary" disabled>
+                        <Button variant="secondary" className="w-100 p-0 px-2" disabled>
                             { LocalizeText('catalog.marketplace.view_more') }
                         </Button>
                     </> }
             </Column>
-        </LayoutGridItem>
+        </Flex>
     );
 }
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx
index b74ab491e..ff5a55817 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceOwnItemsView.tsx
@@ -1,6 +1,6 @@
 import { CancelMarketplaceOfferMessageComposer, GetMarketplaceOwnOffersMessageComposer, MarketplaceCancelOfferResultEvent, MarketplaceOwnOffersEvent, RedeemMarketplaceOfferCreditsMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { LocalizeText, MarketplaceOfferData, MarketPlaceOfferState, NotificationAlertType, SendMessageComposer } from '../../../../../../api';
+import { LocalizeText, MarketPlaceOfferState, MarketplaceOfferData, NotificationAlertType, SendMessageComposer } from '../../../../../../api';
 import { Button, Column, Text } from '../../../../../../common';
 import { useMessageEvent, useNotification } from '../../../../../../hooks';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
@@ -77,21 +77,19 @@ export const CatalogLayoutMarketplaceOwnItemsView: FC<CatalogLayoutProps> = prop
     return (
         <Column overflow="hidden">
             { (creditsWaiting <= 0) &&
-                <Text center className="bg-muted rounded p-1">
+                <Text className="font-italic px-2 font-size-marketplace">
                     { LocalizeText('catalog.marketplace.redeem.no_sold_items') }
                 </Text> }
             { (creditsWaiting > 0) &&
                 <Column center gap={ 1 } className="bg-muted rounded p-2">
-                    <Text>
-                        { LocalizeText('catalog.marketplace.redeem.get_credits', [ 'count', 'credits' ], [ soldOffers.length.toString(), creditsWaiting.toString() ]) }
-                    </Text>
+                    <Text>{ LocalizeText('catalog.marketplace.redeem.get_credits', [ 'count', 'credits' ], [ soldOffers.length.toString(), creditsWaiting.toString() ]) }</Text>
                     <Button className="mt-1" onClick={ redeemSoldOffers }>
                         { LocalizeText('catalog.marketplace.offer.redeem') }
                     </Button>
                 </Column> }
             <Column gap={ 1 } overflow="hidden">
-                <Text truncate shrink fontWeight="bold">
-                    { LocalizeText('catalog.marketplace.items_found', [ 'count' ], [ offers.length.toString() ]) }
+                <Text truncate shrink className="font-size-marketplace-small">
+                    { LocalizeText(offers.length === 0 ? 'catalog.marketplace.no_items' : 'catalog.marketplace.items_found', [ 'count' ], [ offers.length.toString() ]) }
                 </Text>
                 <Column overflow="auto" className="nitro-catalog-layout-marketplace-grid">
                     { (offers.length > 0) && offers.map(offer => <CatalogLayoutMarketplaceItemView key={ offer.offerId } offerData={ offer } type={ OWN_OFFER } onClick={ takeItemBack } />) }
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
index 1225a0d7a..59a8f1ed2 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
@@ -4,6 +4,7 @@ import { IMarketplaceSearchOptions, LocalizeText, MarketplaceOfferData, Marketpl
 import { Button, ButtonGroup, Column, Text } from '../../../../../../common';
 import { useMessageEvent, useNotification, usePurse } from '../../../../../../hooks';
 import { CatalogLayoutProps } from '../CatalogLayout.types';
+import { CatalogLayoutMarketplaceConfirmView } from './CatalogLayoutMarketplaceConfirmView';
 import { CatalogLayoutMarketplaceItemView, PUBLIC_OFFER } from './CatalogLayoutMarketplaceItemView';
 import { SearchFormView } from './CatalogLayoutMarketplaceSearchFormView';
 
@@ -20,6 +21,7 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
     const [ searchType, setSearchType ] = useState(MarketplaceSearchType.BY_ACTIVITY);
     const [ totalItemsFound, setTotalItemsFound ] = useState(0);
     const [ offers, setOffers ] = useState(new Map<number, MarketplaceOfferData>());
+    const [ offerData, setOfferData ] = useState<MarketplaceOfferData>(null);
     const [ lastSearch, setLastSearch ] = useState<IMarketplaceSearchOptions>({ minPrice: -1, maxPrice: -1, query: '', type: 3 });
     const { getCurrencyAmount = null } = usePurse();
     const { simpleAlert = null, showConfirm = null } = useNotification();
@@ -51,15 +53,7 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
             simpleAlert(LocalizeText('catalog.alert.notenough.credits.description'), NotificationAlertType.DEFAULT, null, null, LocalizeText('catalog.alert.notenough.title'));
             return;
         }
-
-        const offerId = offerData.offerId;
-
-        showConfirm(LocalizeText('catalog.marketplace.confirm_header'), () =>
-        {
-            SendMessageComposer(new BuyMarketplaceOfferMessageComposer(offerId));
-        },
-        null, null, null, LocalizeText('catalog.marketplace.confirm_title'));
-    }, [ getCurrencyAmount, simpleAlert, showConfirm ]);
+    }, [ getCurrencyAmount, simpleAlert ]);
 
     useMessageEvent<MarketPlaceOffersEvent>(MarketPlaceOffersEvent, event =>
     {
@@ -135,27 +129,26 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
     return (
         <>
             <ButtonGroup>
-                <Button active={ (searchType === MarketplaceSearchType.BY_ACTIVITY) } onClick={ () => setSearchType(MarketplaceSearchType.BY_ACTIVITY) }>
+                <Button className="volter-button" active={ (searchType === MarketplaceSearchType.BY_ACTIVITY) } onClick={ () => setSearchType(MarketplaceSearchType.BY_ACTIVITY) }>
                     { LocalizeText('catalog.marketplace.search_by_activity') }
                 </Button>
-                <Button active={ (searchType === MarketplaceSearchType.BY_VALUE) } onClick={ () => setSearchType(MarketplaceSearchType.BY_VALUE) }>
+                <Button className="volter-button" active={ (searchType === MarketplaceSearchType.BY_VALUE) } onClick={ () => setSearchType(MarketplaceSearchType.BY_VALUE) }>
                     { LocalizeText('catalog.marketplace.search_by_value') }
                 </Button>
-                <Button active={ (searchType === MarketplaceSearchType.ADVANCED) } onClick={ () => setSearchType(MarketplaceSearchType.ADVANCED) }>
+                <Button className="volter-button" active={ (searchType === MarketplaceSearchType.ADVANCED) } onClick={ () => setSearchType(MarketplaceSearchType.ADVANCED) }>
                     { LocalizeText('catalog.marketplace.search_advanced') }
                 </Button>
             </ButtonGroup>
             <SearchFormView sortTypes={ getSortTypes } searchType={ searchType } onSearch={ requestOffers } />
             <Column gap={ 1 } overflow="hidden">
-                <Text truncate shrink fontWeight="bold">
-                    { LocalizeText('catalog.marketplace.items_found', [ 'count' ], [ offers.size.toString() ]) }
-                </Text>
+                <Text truncate shrink className="font-size-marketplace-small">{ LocalizeText('catalog.marketplace.items_found', [ 'count' ], [ offers.size.toString() ]) }. { LocalizeText('catalog.marketplace.items_shown', [ 'count' ], [ '250' ]) }.</Text>
                 <Column className="nitro-catalog-layout-marketplace-grid" overflow="auto">
                     { 
                         Array.from(offers.values()).map( (entry, index) => <CatalogLayoutMarketplaceItemView key={ index } offerData={ entry } type={ PUBLIC_OFFER } onClick={ purchaseItem } />)
                     }
                 </Column>
             </Column>
+            { offerData && <CatalogLayoutMarketplaceConfirmView offerData={ offerData } setOfferData={ setOfferData } /> }
         </>
     );
 }
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx
index e07a7b2b1..c5153810c 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceSearchFormView.tsx
@@ -40,32 +40,50 @@ export const SearchFormView: FC<SearchFormViewProps> = props =>
 
         setSortType(sortType);
 
+        if(searchType === MarketplaceSearchType.ADVANCED) (setSearchQuery(''), setMin(0), setMax(0));
         if(searchType === MarketplaceSearchType.BY_ACTIVITY || MarketplaceSearchType.BY_VALUE === searchType) onSearch({ minPrice: -1, maxPrice: -1, query: '', type: sortType });
     }, [ onSearch, searchType, sortTypes ]);
 
     return (
-        <Column gap={ 1 }>
-            <Flex alignItems="center" gap={ 1 }>
-                <Text className="col-3">{ LocalizeText('catalog.marketplace.sort_order') }</Text>
-                <select className="form-select form-select-sm" value={ sortType } onChange={ event => onSortTypeChange(parseInt(event.target.value)) }>
-                    { sortTypes.map(type => <option key={ type } value={ type }>{ LocalizeText(`catalog.marketplace.sort.${ type }`) }</option>) }
-                </select>
-            </Flex>
+        <Column gap={ 1 } className="marketplace-bg search-marketplace">
+            { searchType !== MarketplaceSearchType.ADVANCED &&
+                <Column className="mt-4" justifyContent="center" alignItems="center">
+                    <Text variant="muted" className="font-size-marketplace">{ LocalizeText('catalog.marketplace.sort_order') }</Text>
+                    <select className="form-select form-select-sm w-50" value={ sortType } onChange={ event => onSortTypeChange(parseInt(event.target.value)) }>
+                        { sortTypes.map(type => <option key={ type } value={ type }>{ LocalizeText(`catalog.marketplace.sort.${ type }`) }</option>) }
+                    </select>
+                </Column>
+            }
             { searchType === MarketplaceSearchType.ADVANCED &&
                 <>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <Text className="col-3">{ LocalizeText('catalog.marketplace.search_name') }</Text>
-                        <input className="form-control form-control-sm" type="text" value={ searchQuery } onChange={ event => setSearchQuery(event.target.value) }/>
-                    </Flex>
-                    <Flex alignItems="center" gap={ 1 }>
-                        <Text className="col-3">{ LocalizeText('catalog.marketplace.search_price') }</Text>
-                        <Flex fullWidth gap={ 1 }>
-                            <input className="form-control form-control-sm" type="number" min={ 0 } value={ min } onChange={ event => setMin(event.target.valueAsNumber) } />
-                            <input className="form-control form-control-sm" type="number" min={ 0 } value={ max } onChange={ event => setMax(event.target.valueAsNumber) } />
+                    <Column gap={ 1 } className="mt-1 px-2">
+                        <Flex alignItems="center">
+                            <Text variant="muted" className="col-4 font-size-marketplace">{ LocalizeText('catalog.marketplace.search_name') }</Text>
+                            <input className="form-control form-control-sm" type="text" value={ searchQuery } onChange={ event => setSearchQuery(event.target.value) }/>
                         </Flex>
-                    </Flex>
-                    <Button variant="secondary" className="mx-auto" onClick={ onClickSearch }>{ LocalizeText('generic.search') }</Button>
-                </> }
+                        <Flex alignItems="center">
+                            <Text variant="muted" className="col-4 font-size-marketplace">{ LocalizeText('catalog.marketplace.search_price') }</Text>
+                            <Flex justifyContent="center">
+                                <Flex justifyContent="start">
+                                    <input className="form-control form-control-sm w-75" type="number" min={ 0 } value={ min } onChange={ event => setMin(event.target.valueAsNumber) } />
+                                </Flex>
+                                <Flex justifyContent="end">
+                                    <input className="form-control form-control-sm w-75" type="number" min={ 0 } value={ max } onChange={ event => setMax(event.target.valueAsNumber) } />
+                                </Flex>
+                            </Flex>
+                        </Flex>
+                        <Flex alignItems="center">
+                            <Text variant="muted" className="col-4 font-size-marketplace">{ LocalizeText('catalog.marketplace.sort_order') }</Text>
+                            <select className="form-select form-select-sm w-100" value={ sortType } onChange={ event => onSortTypeChange(parseInt(event.target.value)) }>
+                                { sortTypes.map(type => <option key={ type } value={ type }>{ LocalizeText(`catalog.marketplace.sort.${ type }`) }</option>) }
+                            </select>
+                        </Flex>
+                        <Flex justifyContent="end">
+                            <Button variant="secondary" className="w-25 h-25" onClick={ onClickSearch }>{ LocalizeText('generic.search') }</Button>
+                        </Flex>
+                    </Column>
+                </>
+            }
         </Column>
     );
 }
diff --git a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
index 81ec855f7..ed672278c 100644
--- a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
@@ -1,7 +1,7 @@
 import { GetMarketplaceConfigurationMessageComposer, MakeOfferMessageComposer, MarketplaceConfigurationEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FurnitureItem, LocalizeText, ProductTypeEnum, SendMessageComposer } from '../../../../../../api';
-import { Base, Button, Column, Grid, LayoutFurniImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
+import { Button, Column, Flex, LayoutFurniImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
 import { CatalogPostMarketplaceOfferEvent } from '../../../../../../events';
 import { useCatalog, useMessageEvent, useNotification, useUiEvent } from '../../../../../../hooks';
 
@@ -16,13 +16,13 @@ export const MarketplacePostOfferView : FC<{}> = props =>
 
     const updateAskingPrice = (price: string) =>
     {
-        setTempAskingPrice(price);
+        setTempAskingPrice(Number(price) >= 10 ? '10' : price);
 
-        const newValue = parseInt(price);
+        const newValue = Number(price);
 
         if(isNaN(newValue) || (newValue === askingPrice)) return;
 
-        setAskingPrice(parseInt(price));
+        setAskingPrice(Number(price));
     }
 
     useMessageEvent<MarketplaceConfigurationEvent>(MarketplaceConfigurationEvent, event =>
@@ -58,9 +58,6 @@ export const MarketplacePostOfferView : FC<{}> = props =>
     if(!marketplaceConfiguration || !item) return null;
 
     const getFurniTitle = (item ? LocalizeText(item.isWallItem ? 'wallItem.name.' + item.type : 'roomItem.name.' + item.type) : '');
-    const getFurniDescription = (item ? LocalizeText(item.isWallItem ? 'wallItem.desc.' + item.type : 'roomItem.desc.' + item.type) : '');
-
-    const getCommission = () => Math.max(Math.ceil(((marketplaceConfiguration.commission * 0.01) * askingPrice)), 1);
 
     const postItem = () =>
     {
@@ -78,43 +75,28 @@ export const MarketplacePostOfferView : FC<{}> = props =>
     }
     
     return (
-        <NitroCardView className="nitro-catalog-layout-marketplace-post-offer" theme="primary">
+        <NitroCardView className="nitro-catalog-layout-marketplace-post-offer no-resize" theme="primary">
             <NitroCardHeaderView headerText={ LocalizeText('inventory.marketplace.make_offer.title') } onCloseClick={ event => setItem(null) } />
             <NitroCardContentView overflow="hidden">
-                <Grid fullHeight>
-                    <Column center className="bg-muted rounded p-2" size={ 4 } overflow="hidden">
-                        <LayoutFurniImageView productType={ item.isWallItem ? ProductTypeEnum.WALL : ProductTypeEnum.FLOOR } productClassId={ item.type } extraData={ item.extra.toString() } />
-                    </Column>
-                    <Column size={ 8 } justifyContent="between" overflow="hidden">
-                        <Column grow gap={ 1 }>
-                            <Text fontWeight="bold">{ getFurniTitle }</Text>
-                            <Text truncate shrink>{ getFurniDescription }</Text>
-                        </Column>
-                        <Column overflow="auto">
-                            <Text italics>
-                                { LocalizeText('inventory.marketplace.make_offer.expiration_info', [ 'time' ], [ marketplaceConfiguration.offerTime.toString() ]) }
-                            </Text>
-                            <div className="input-group has-validation">
-                                <input className="form-control form-control-sm" type="number" min={ 0 } value={ tempAskingPrice } onChange={ event => updateAskingPrice(event.target.value) } placeholder={ LocalizeText('inventory.marketplace.make_offer.price_request') } />
-                                { ((askingPrice < marketplaceConfiguration.minimumPrice) || isNaN(askingPrice)) &&
-                                    <Base className="invalid-feedback d-block">
-                                        { LocalizeText('inventory.marketplace.make_offer.min_price', [ 'minprice' ], [ marketplaceConfiguration.minimumPrice.toString() ]) }
-                                    </Base> }
-                                { ((askingPrice > marketplaceConfiguration.maximumPrice) && !isNaN(askingPrice)) &&
-                                    <Base className="invalid-feedback d-block">
-                                        { LocalizeText('inventory.marketplace.make_offer.max_price', [ 'maxprice' ], [ marketplaceConfiguration.maximumPrice.toString() ]) }
-                                    </Base> }
-                                { (!((askingPrice < marketplaceConfiguration.minimumPrice) || (askingPrice > marketplaceConfiguration.maximumPrice) || isNaN(askingPrice))) &&
-                                    <Base className="invalid-feedback d-block">
-                                        { LocalizeText('inventory.marketplace.make_offer.final_price', [ 'commission', 'finalprice' ], [ getCommission().toString(), (askingPrice + getCommission()).toString() ]) }
-                                    </Base> }
-                            </div>
-                            <Button disabled={ ((askingPrice < marketplaceConfiguration.minimumPrice) || (askingPrice > marketplaceConfiguration.maximumPrice) || isNaN(askingPrice)) } onClick={ postItem }>
-                                { LocalizeText('inventory.marketplace.make_offer.post') }
-                            </Button>
-                        </Column>
-                    </Column>
-                </Grid>
+                <Column className="px-2">
+                    <Flex>
+                        <Flex className="image-preview">
+                            <LayoutFurniImageView productType={ item.isWallItem ? ProductTypeEnum.WALL : ProductTypeEnum.FLOOR } productClassId={ item.type } extraData={ item.extra.toString() } />
+                        </Flex>
+                        <Text bold className="px-2">{ getFurniTitle }</Text>
+                    </Flex>
+                    <Text className="font-size-marketplace">{ LocalizeText('inventory.marketplace.make_offer.expiration_info', [ 'time' ], [ marketplaceConfiguration.displayTime.toString() ] ) }</Text>
+                    <Flex justifyContent="end" gap={ 2 }>
+                        <Text bold>{ LocalizeText('inventory.marketplace.make_offer.price_request') }</Text>
+                        <input className="form-control form-control-sm w-25" type="number" min={ 0 } value={ tempAskingPrice } onChange={ event => updateAskingPrice(event.target.value) } />
+                    </Flex>
+                    <Text className="font-size-marketplace">{ LocalizeText('inventory.marketplace.make_offer.average_price', [ 'days', 'price', 'price_no_commission' ], [ marketplaceConfiguration.offerTime.toString(), marketplaceConfiguration.minimumPrice.toString(), marketplaceConfiguration.commission.toString() ] ) }</Text>
+                    <textarea className="form-control form-control-sm font-size-marketplace-small overflow-hidden textarea-height" value={ askingPrice >= marketplaceConfiguration.minimumPrice ? LocalizeText('sell.in.marketplace.revenue.label') + ': ' + (askingPrice + 1) : LocalizeText('shop.marketplace.invalid.price', [ 'minPrice', 'maxPrice' ], [ marketplaceConfiguration.minimumPrice.toString(), marketplaceConfiguration.maximumPrice.toString() ]) } readOnly></textarea>
+                    <Flex justifyContent="between">
+                        <Button className="w-30" onClick={ postItem } disabled={ ((askingPrice < marketplaceConfiguration.minimumPrice) || (askingPrice > marketplaceConfiguration.maximumPrice) || isNaN(askingPrice)) }>{ LocalizeText('inventory.marketplace.make_offer.post') }</Button>
+                        <Button className="w-30" onClick={ () => setItem(null) }>{ LocalizeText('generic.cancel') }</Button>
+                    </Flex>
+                </Column>
             </NitroCardContentView>
         </NitroCardView>
     )

From ce3de8d7800216d39dcea0632c9029eadebeb10f Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Mon, 3 Jul 2023 15:58:06 +0200
Subject: [PATCH 116/134] Changed icon credits on price display

---
 src/assets/flash/catalogue/credits.png            | Bin 0 -> 310 bytes
 src/assets/styles/icons.scss                      |   6 ++++++
 .../widgets/CatalogPriceDisplayWidgetView.tsx     |   4 ++--
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/flash/catalogue/credits.png

diff --git a/src/assets/flash/catalogue/credits.png b/src/assets/flash/catalogue/credits.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9e12512c874c7a95d97770cc53621e0e47a9208
GIT binary patch
literal 310
zcmeAS@N?(olHy`uVBq!ia0vp^qChOd!3-orr?xQyDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(ehe5&=FTu0Z<#dxnj<4DUBG<f=0?HPpV_02E^|y%(4dq&P}~{DS{O0K>iJ
zy^%mM&H|6fVg?4j!ywFfJby(BP;j!Ri(`mJu<M0Jz6J%3mPD5`-|HX$v({X{_KCD%
zT8_Ha@>~Dhdi-|ZizxeW?SR_C(ns%v{Z`FdysF^iavNoL!_!$)!c<FU)qhR6a&~*T
z^p<rT&uWW*N}pM+vwUg2tk(I69@{0e(?ZqfXid9vyJXX(FcCM?ThaCl-X*>~7A3z>
v^jprSmW#V2uN*wE_(Sij#n(&k{bv2WkCp%T$?cbb&SUU&^>bP0l+XkKPKbR2

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 66a1c96f8..828fc75c9 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -952,6 +952,12 @@
         height: 10px;
     }
 
+    &.icon-credits {
+        background-image: url('@/assets/flash/catalogue/credits.png');
+        width: 21px;
+        height: 21px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx b/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
index 93606f920..ed30e6fe7 100644
--- a/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
+++ b/src/components/catalog/views/page/widgets/CatalogPriceDisplayWidgetView.tsx
@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { IPurchasableOffer } from '../../../../../api';
-import { Flex, LayoutCurrencyIcon, Text } from '../../../../../common';
+import { Base, Flex, LayoutCurrencyIcon, Text } from '../../../../../common';
 import { useCatalog } from '../../../../../hooks';
 
 interface CatalogPriceDisplayWidgetViewProps
@@ -22,7 +22,7 @@ export const CatalogPriceDisplayWidgetView: FC<CatalogPriceDisplayWidgetViewProp
             { (offer.priceInCredits > 0) &&
                 <Flex alignItems="center" gap={ 1 }>
                     <Text bold>{ (offer.priceInCredits * quantity) }</Text>
-                    <LayoutCurrencyIcon type={ -1 } />
+                    <Base className="icon icon-credits" />
                 </Flex> }
             { separator && (offer.priceInCredits > 0) && (offer.priceInActivityPoints > 0) &&
                 <Text bold>+</Text> }

From 426a218d70cbe4d1ff6e8a20bc186a4835bf10df Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Mon, 3 Jul 2023 21:40:43 +0200
Subject: [PATCH 117/134] Catalog - Sound machine improved design

- Improved design
- Fixed infostand song disk by thamelodev
---
 .../layout/CatalogLayoutSoundMachineView.tsx  | 97 +++++++++++--------
 .../infostand/InfoStandWidgetFurniView.tsx    |  4 +-
 2 files changed, 60 insertions(+), 41 deletions(-)

diff --git a/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx b/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
index 223be6905..7ee950b70 100644
--- a/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
+++ b/src/components/catalog/views/page/layout/CatalogLayoutSoundMachineView.tsx
@@ -1,27 +1,29 @@
-import { GetOfficialSongIdMessageComposer, MusicPriorities, OfficialSongIdMessageEvent } from '@nitrots/nitro-renderer';
+import { GetOfficialSongIdMessageComposer, GetSongInfoMessageComposer, MusicPriorities, OfficialSongIdMessageEvent, TraxSongInfoMessageEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { GetConfiguration, GetNitroInstance, LocalizeText, ProductTypeEnum, SendMessageComposer } from '../../../../../api';
-import { Button, Column, Flex, Grid, LayoutImage, Text } from '../../../../../common';
+import { GetConfiguration, GetNitroInstance, LocalizeText, ProductTypeEnum, SendMessageComposer, getTypePrice } from '../../../../../api';
+import { Button, Column, Flex, LayoutImage, Text } from '../../../../../common';
 import { useCatalog, useMessageEvent } from '../../../../../hooks';
 import { CatalogHeaderView } from '../../catalog-header/CatalogHeaderView';
 import { CatalogAddOnBadgeWidgetView } from '../widgets/CatalogAddOnBadgeWidgetView';
 import { CatalogItemGridWidgetView } from '../widgets/CatalogItemGridWidgetView';
 import { CatalogLimitedItemWidgetView } from '../widgets/CatalogLimitedItemWidgetView';
 import { CatalogPurchaseWidgetView } from '../widgets/CatalogPurchaseWidgetView';
-import { CatalogSpinnerWidgetView } from '../widgets/CatalogSpinnerWidgetView';
+import { CatalogSelectItemWidgetView } from '../widgets/CatalogSelectItemWidgetView';
 import { CatalogTotalPriceWidget } from '../widgets/CatalogTotalPriceWidget';
-import { CatalogViewProductWidgetView } from '../widgets/CatalogViewProductWidgetView';
 import { CatalogLayoutProps } from './CatalogLayout.types';
 
 export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props =>
 {
     const { page = null } = props;
     const [ songId, setSongId ] = useState(-1);
+    const [ duration, setDuration ] = useState('');
+    const [ isPlaying, setIsPlaying ] = useState(false);
     const [ officialSongId, setOfficialSongId ] = useState('');
     const { currentOffer = null, currentPage = null } = useCatalog();
 
-    const previewSong = (previewSongId: number) => GetNitroInstance().soundManager.musicController?.playSong(previewSongId, MusicPriorities.PRIORITY_PURCHASE_PREVIEW, 15, 0, 0, 0);
-
+    const previewSong = (previewSongId: number) => (GetNitroInstance().soundManager.musicController?.playSong(previewSongId, MusicPriorities.PRIORITY_PURCHASE_PREVIEW, 15, 0, 0, 0), setIsPlaying(true));
+    const stopPreviewSong = () => (GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW), setIsPlaying(false));
+    
     useMessageEvent<OfficialSongIdMessageEvent>(OfficialSongIdMessageEvent, event =>
     {
         const parser = event.getParser();
@@ -31,6 +33,17 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props =>
         setSongId(parser.songId);
     });
 
+    useMessageEvent<TraxSongInfoMessageEvent>(TraxSongInfoMessageEvent, event =>
+    {
+        const parser = event.getParser();
+
+        const duration = parser.songs.find( song => song.id === songId ).length;
+        const seconds = Math.floor((duration / 1000) % 60);
+        const minutes = Math.floor((duration / 1000 / 60) % 60);
+
+        setDuration([ minutes.toString(), seconds.toString().padStart(2, '0') ].join(':'));
+    });
+
     useEffect(() =>
     {
         if(!currentOffer) return;
@@ -59,55 +72,61 @@ export const CatalogLayoutSoundMachineView: FC<CatalogLayoutProps> = props =>
             setSongId(-1);
         }
 
-        return () => GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW);
+        return () => (GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW), setIsPlaying(false));
     }, [ currentOffer ]);
 
     useEffect(() =>
     {
-        return () => GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW);
+        SendMessageComposer(new GetSongInfoMessageComposer(songId));
+    }, [ songId ]);
+
+    useEffect(() =>
+    {
+        return () => (GetNitroInstance().soundManager.musicController?.stop(MusicPriorities.PRIORITY_PURCHASE_PREVIEW), setIsPlaying(false));
     }, []);
 
     return (
         <>
-            <Grid>
-                <Column size={ 7 } overflow="hidden">
-                    { GetConfiguration('catalog.headers') &&
-                        <CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) }/> }
-                    <CatalogItemGridWidgetView />
-                </Column>
-                <Column center={ !currentOffer } size={ 5 } overflow="hidden">
-                    { !currentOffer &&
-                        <>
-                            { !!page.localization.getImage(1) &&
-                                <LayoutImage imageUrl={ page.localization.getImage(1) } /> }
-                            <Text center dangerouslySetInnerHTML={ { __html: page.localization.getText(0) } } />
-                        </> }
+            <Column overflow="hidden">
+                <Column>{ GetConfiguration('catalog.headers') && <CatalogHeaderView imageUrl={ currentPage.localization.getImage(0) }/> }</Column>
+                <Column className="px-4 py-4" overflow="hidden">
+                    <Text className={ !currentOffer ? 'font-size-marketplace-small' : '' } bold={ !currentOffer ? false : true } dangerouslySetInnerHTML={ { __html: !currentOffer ? page.localization.getText(0) : currentOffer.localizationName } } />
+                    <Text className="font-size-marketplace-small">{ !currentOffer ? '00:00' : LocalizeText('catalog.song.length', [ 'min', 'sec' ], [ duration.split(':')[0], duration.split(':')[1] ] ) }</Text>
+                    <Column center className="mt-3">
+                        { !currentOffer && !!page.localization.getImage(1) && <LayoutImage imageUrl={ page.localization.getImage(1) } /> }
+                    </Column>
                     { currentOffer &&
                         <>
-                            <Flex center overflow="hidden" style={ { height: 140 } }>
+                            <Flex center overflow="hidden" className="mt-4">
                                 { (currentOffer.product.productType !== ProductTypeEnum.BADGE) &&
                                     <>
-                                        <CatalogViewProductWidgetView />
+                                        <LayoutImage imageUrl={ currentOffer.product.getIconUrl(currentOffer) } />
                                         <CatalogAddOnBadgeWidgetView className="bg-muted rounded bottom-1 end-1" />
-                                    </> }
+                                    </>
+                                }
                                 { (currentOffer.product.productType === ProductTypeEnum.BADGE) && <CatalogAddOnBadgeWidgetView className="scale-2" /> }
                             </Flex>
-                            <Column grow gap={ 1 }>
-                                <CatalogLimitedItemWidgetView fullWidth />
-                                <Text grow truncate>{ currentOffer.localizationName }</Text>
-                                { songId > -1 && <Button onClick={ () => previewSong(songId) }>{ LocalizeText('play_preview_button') }</Button>
-                                }
-                                <Flex justifyContent="between">
-                                    <Column gap={ 1 }>
-                                        <CatalogSpinnerWidgetView />
-                                    </Column>
-                                    <CatalogTotalPriceWidget justifyContent="end" alignItems="end" />
+                            <CatalogLimitedItemWidgetView position="absolute" className="end-0" />
+                            <Flex className="mt-5" justifyContent="between">
+                                <Flex className="p-2" style={ { backgroundColor: '#DADAD6', borderRadius: '12px' } }>
+                                    <Text className="font-size-marketplace-small px-2 mt-1">{ LocalizeText('play_preview') }</Text>
+                                    <Button className="px-2 p-0" onClick={ () => !isPlaying ? previewSong(songId) : stopPreviewSong() }>{ LocalizeText(!isPlaying ? 'play_preview_button' : 'playlist.editor.button.preview.stop') }</Button>
                                 </Flex>
-                                <CatalogPurchaseWidgetView />
-                            </Column>
-                        </> }
+                                <CatalogTotalPriceWidget position="absolute" className={ `${ getTypePrice(currentOffer.priceType) } py-1 px-2 end-2` } />
+                            </Flex>
+                        </>
+                    }
+                </Column>
+                <Column>
+                    <Column position="absolute" className="grid-bg p-2 bottom-5 mb-1" size={ 7 } overflow="hidden" style={ { height: 'calc(100% - 480px)', width: '64%' } }>
+                        <CatalogItemGridWidgetView />
+                    </Column>
+                    <Flex gap={ 2 } position="absolute" className="purchase-buttons align-items-end bottom-3" style={ { width: '64%' } }>
+                        <CatalogPurchaseWidgetView />
+                    </Flex>
+                    <CatalogSelectItemWidgetView />
                 </Column>
-            </Grid>
+            </Column>
         </>
     );
 }
diff --git a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
index b3a464c41..2c74bc6f1 100644
--- a/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
+++ b/src/components/room/widgets/avatar-info/infostand/InfoStandWidgetFurniView.tsx
@@ -1,6 +1,5 @@
 import { CrackableDataType, GroupInformationComposer, GroupInformationEvent, NowPlayingEvent, RoomControllerLevel, RoomObjectCategory, RoomObjectOperationType, RoomObjectVariable, RoomWidgetEnumItemExtradataParameter, RoomWidgetFurniInfoUsagePolicyEnum, SetObjectDataMessageComposer, SongInfoReceivedEvent, StringDataType } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
-import { FaTimes } from 'react-icons/fa';
 import { AvatarInfoFurni, CreateLinkEvent, GetGroupInformation, GetNitroInstance, GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../../../api';
 import { Base, Button, Column, Flex, LayoutBadgeImageView, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, Text, UserProfileIconView } from '../../../../../common';
 import { useMessageEvent, useRoom, useSoundEvent } from '../../../../../hooks';
@@ -332,7 +331,8 @@ export const InfoStandWidgetFurniView: FC<InfoStandWidgetFurniViewProps> = props
                 <Column overflow="visible" className="container-fluid content-area" gap={ 1 }>
                     <Column gap={ 1 }>
                         <Flex alignItems="center" justifyContent="between" gap={ 1 }>
-                            <Text gfbold variant="white" wrap>{ avatarInfo.name }</Text>
+                            { !(isSongDisk) && <Text gfbold variant="white" wrap>{ avatarInfo.name }</Text> }
+                            { (songName.length > 0) && <Text gfbold variant="white" wrap>{ songName }</Text> }
                             <i className="infostand-close" onClick={ onClose } />
                         </Flex>
                         <hr className="m-0" />

From a56e595454814eae7516b7feb2336b2cc42a0863 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Mon, 3 Jul 2023 22:47:33 +0200
Subject: [PATCH 118/134] Fix marketplace buy button

---
 .../marketplace/CatalogLayoutMarketplacePublicItemsView.tsx    | 3 +++
 .../views/page/layout/marketplace/MarketplacePostOfferView.tsx | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
index 59a8f1ed2..d54597aaa 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplacePublicItemsView.tsx
@@ -53,6 +53,9 @@ export const CatalogLayoutMarketplacePublicItemsView: FC<CatalogLayoutMarketplac
             simpleAlert(LocalizeText('catalog.alert.notenough.credits.description'), NotificationAlertType.DEFAULT, null, null, LocalizeText('catalog.alert.notenough.title'));
             return;
         }
+        
+        setOfferData(offerData);
+    
     }, [ getCurrencyAmount, simpleAlert ]);
 
     useMessageEvent<MarketPlaceOffersEvent>(MarketPlaceOffersEvent, event =>
diff --git a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
index ed672278c..6cc728fc5 100644
--- a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
@@ -67,6 +67,7 @@ export const MarketplacePostOfferView : FC<{}> = props =>
         {
             SendMessageComposer(new MakeOfferMessageComposer(askingPrice, item.isWallItem ? 2 : 1, item.id));
             setItem(null);
+            setTempAskingPrice('');
         },
         () => 
         {

From 560ded529988215830ff9b7a27214f22d1cc2dbc Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Tue, 4 Jul 2023 18:17:16 +0200
Subject: [PATCH 119/134] Inventory - Added Open Store button and improved
 design

---
 src/components/inventory/InventoryView.tsx        |  4 ++--
 .../views/InventoryCategoryEmptyView.tsx          | 15 +++++++++++----
 .../inventory/views/bot/InventoryBotView.tsx      |  7 ++++---
 .../views/furniture/InventoryFurnitureView.tsx    |  2 +-
 .../inventory/views/pet/InventoryPetView.tsx      |  7 ++++---
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index 542eff416..bf775866d 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -129,11 +129,11 @@ export const InventoryView: FC<{}> = props =>
                     { (currentTab === TAB_FURNITURE ) &&
                             <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } /> }
                     { (currentTab === TAB_PETS ) &&
-                            <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
+                            <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } /> }
                     { (currentTab === TAB_BADGES ) &&
                             <InventoryBadgeView /> }
                     { (currentTab === TAB_BOTS ) &&
-                            <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } /> }
+                            <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } /> }
                     { isTrading && <InventoryTradeView currentTab={ currentTab } setCurrentTab={ (e) => setCurrentTab(e) } cancelTrade={ onClose } /> }
                 </NitroCardContentView>
             </>
diff --git a/src/components/inventory/views/InventoryCategoryEmptyView.tsx b/src/components/inventory/views/InventoryCategoryEmptyView.tsx
index f250364e3..501a2a2e1 100644
--- a/src/components/inventory/views/InventoryCategoryEmptyView.tsx
+++ b/src/components/inventory/views/InventoryCategoryEmptyView.tsx
@@ -1,15 +1,17 @@
 import { FC } from 'react';
-import { Column, Grid, GridProps, Text } from '../../../common';
+import { CreateLinkEvent, LocalizeText } from '../../../api';
+import { Button, Column, Flex, Grid, GridProps, Text } from '../../../common';
 
 export interface InventoryCategoryEmptyViewProps extends GridProps
 {
     title: string;
     desc: string;
+    isTrading?: boolean;
 }
 
 export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = props =>
 {
-    const { title = '', desc = '', children = null, ...rest } = props;
+    const { title = '', desc = '', isTrading = false, children = null, ...rest } = props;
     
     return (
         <Grid { ...rest }>
@@ -17,8 +19,13 @@ export const InventoryCategoryEmptyView: FC<InventoryCategoryEmptyViewProps> = p
                 <div className="empty-image" />
             </Column>
             <Column justifyContent="center" size={ 7 } overflow="hidden">
-                <Text bold fontSize={ 5 } overflow="unset" truncate>{ title }</Text>
-                <Text overflow="auto">{ desc }</Text>
+                <Text variant="danger" bold fontSize={ 5 } overflow="unset">{ title }</Text>
+                <Text overflow="auto" className="mb-4">{ desc }</Text>
+                { !isTrading &&
+                    <Flex gap={ 2 } position="absolute" className="bottom-2">
+                        <Button className="py-3" onClick={ () => CreateLinkEvent('catalog/open') }>{ LocalizeText('inventory.open.catalog') }</Button>
+                    </Flex>
+                }
             </Column>
             { children }
         </Grid>
diff --git a/src/components/inventory/views/bot/InventoryBotView.tsx b/src/components/inventory/views/bot/InventoryBotView.tsx
index 8ea90d32e..861dbcf64 100644
--- a/src/components/inventory/views/bot/InventoryBotView.tsx
+++ b/src/components/inventory/views/bot/InventoryBotView.tsx
@@ -1,6 +1,6 @@
 import { IRoomSession, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { attemptBotPlacement, GetRoomEngine, LocalizeText, UnseenItemCategory } from '../../../../api';
+import { GetRoomEngine, LocalizeText, UnseenItemCategory, attemptBotPlacement } from '../../../../api';
 import { AutoGrid, Button, Column, Grid, LayoutRoomPreviewerView, Text } from '../../../../common';
 import { useInventoryBots, useInventoryUnseenTracker } from '../../../../hooks';
 import { InventoryCategoryEmptyView } from '../InventoryCategoryEmptyView';
@@ -10,11 +10,12 @@ interface InventoryBotViewProps
 {
     roomSession: IRoomSession;
     roomPreviewer: RoomPreviewer;
+    isTrading: boolean;
 }
 
 export const InventoryBotView: FC<InventoryBotViewProps> = props =>
 {
-    const { roomSession = null, roomPreviewer = null } = props;
+    const { roomSession = null, roomPreviewer = null, isTrading = false } = props;
     const [ isVisible, setIsVisible ] = useState(false);
     const { botItems = [], selectedBot = null, activate = null, deactivate = null } = useInventoryBots();
     const { isUnseen = null, removeUnseen = null } = useInventoryUnseenTracker();
@@ -64,7 +65,7 @@ export const InventoryBotView: FC<InventoryBotViewProps> = props =>
         return () => setIsVisible(false);
     }, []);
 
-    if(!botItems || !botItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.bots.title') } desc={ LocalizeText('inventory.empty.bots.desc') } />;
+    if(!botItems || !botItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } isTrading={ isTrading } />;
 
     return (
         <Grid>
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index b8e90fdd1..bde9c8e97 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -227,7 +227,7 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         setQuantity(1);
     }, [ filteredGroupItems ]);
 
-    if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } />;
+    if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } isTrading={ isTrading } />;
 
     return (
         <Grid>
diff --git a/src/components/inventory/views/pet/InventoryPetView.tsx b/src/components/inventory/views/pet/InventoryPetView.tsx
index 0855c98bf..138d41cc5 100644
--- a/src/components/inventory/views/pet/InventoryPetView.tsx
+++ b/src/components/inventory/views/pet/InventoryPetView.tsx
@@ -1,6 +1,6 @@
 import { IRoomSession, RoomObjectVariable, RoomPreviewer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { attemptPetPlacement, GetRoomEngine, LocalizeText, UnseenItemCategory } from '../../../../api';
+import { GetRoomEngine, LocalizeText, UnseenItemCategory, attemptPetPlacement } from '../../../../api';
 import { AutoGrid, Button, Column, Grid, LayoutRoomPreviewerView, Text } from '../../../../common';
 import { useInventoryPets, useInventoryUnseenTracker } from '../../../../hooks';
 import { InventoryCategoryEmptyView } from '../InventoryCategoryEmptyView';
@@ -10,11 +10,12 @@ interface InventoryPetViewProps
 {
     roomSession: IRoomSession;
     roomPreviewer: RoomPreviewer;
+    isTrading: boolean;
 }
 
 export const InventoryPetView: FC<InventoryPetViewProps> = props =>
 {
-    const { roomSession = null, roomPreviewer = null } = props;
+    const { roomSession = null, roomPreviewer = null, isTrading = false } = props;
     const [ isVisible, setIsVisible ] = useState(false);
     const { petItems = null, selectedPet = null, activate = null, deactivate = null } = useInventoryPets();
     const { isUnseen = null, removeUnseen = null } = useInventoryUnseenTracker();
@@ -63,7 +64,7 @@ export const InventoryPetView: FC<InventoryPetViewProps> = props =>
         return () => setIsVisible(false);
     }, []);
 
-    if(!petItems || !petItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.pets.title') } desc={ LocalizeText('inventory.empty.pets.desc') } />;
+    if(!petItems || !petItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } isTrading={ isTrading } />;
 
     return (
         <Grid>

From fd5c03d74f0d49ae73b54d7193144390da64f355 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Tue, 4 Jul 2023 20:49:47 +0200
Subject: [PATCH 120/134] Inventory - Fixed badges scroll & alignment badges in
 infostand

---
 src/components/inventory/InventoryView.scss   | 14 +++++++++
 src/components/inventory/InventoryView.tsx    |  2 +-
 .../views/badge/InventoryBadgeView.tsx        | 31 ++++++++++---------
 .../avatar-info/AvatarInfoWidgetView.scss     |  1 +
 4 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index 5ae9c7fe9..095e808f5 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -38,6 +38,7 @@
         border-image-source: url('@/assets/flash/inventory/trading_bg.png');
         border-image-slice: 15 15 15 15 fill;
         border-image-width: 15px 15px 15px 15px;
+        z-index: 1;
     }
 
     .credits-align {
@@ -66,3 +67,16 @@
         margin-top: 15px;
     }
 }
+
+.calc-wrapper {
+    width: 96%;
+    height: calc(100% - 80px);
+}
+
+.size-list-badges {
+    width: 315px;
+}
+
+.size-badges {
+    width: 145px;
+}
diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index bf775866d..8cb64d90a 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -112,7 +112,7 @@ export const InventoryView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey={ 'inventory' } className={ `${ isTrading ? 'nitro-inventory trading  no-resize' : 'nitro-inventory' }` } theme={ isTrading ? 'primary' : '' } >
+        <NitroCardView uniqueKey={ 'inventory' } className={ `${ isTrading ? 'nitro-inventory trading no-resize' : 'nitro-inventory' }` } theme={ isTrading ? 'primary' : '' } style={ { width: isTrading ? '490px' : '4px' } }>
             <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
             <>
                 <NitroCardTabsView>
diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index 399c2c324..2ed8e10f8 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -49,9 +49,9 @@ export const InventoryBadgeView: FC<{}> = props =>
     }, []);
 
     return (
-        <div className="badge-wrapper">
-            <Grid gap={ 2 } className="badges-list">
-                <Column size={ 8 } overflow="hidden">
+        <div className="badge-wrapper calc-wrapper">
+            <Grid gap={ 1 }>
+                <Column overflow="hidden" className="size-list-badges">
                     <Flex gap={ 1 } className="position-relative">
                         <Flex fullWidth alignItems="center" position="relative">
                             <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
@@ -66,7 +66,7 @@ export const InventoryBadgeView: FC<{}> = props =>
                         }) }
                     </AutoGrid>
                 </Column>
-                <Column className="justify-content-between" size={ 4 } overflow="auto">
+                <Column className="justify-content-between size-badges" overflow="auto">
                     <Column overflow="hidden">
                         <Text center bold>{ LocalizeText('inventory.badges.activebadges') }</Text>
                         <AutoGrid gap={ 1 } columnCount={ 5 }>
@@ -75,17 +75,20 @@ export const InventoryBadgeView: FC<{}> = props =>
                     </Column>
                 </Column>
             </Grid>
-            { !!selectedBadgeCode &&
-                <Flex className="bg-white pb-1 px-2 rounded mt-2" style={ { height: '50px' } } justifyContent={ 'between' } alignItems={ 'end' } gap={ 2 }>
-                    <Flex alignItems="start" gap={ 2 }>
-                        <LayoutBadgeImageView shrink badgeCode={ selectedBadgeCode } />
-                        <Text className="font-bold mt-2">{ LocalizeBadgeName(selectedBadgeCode) }</Text>
+            <Column gap={ 0 } position="absolute" className="bottom-2" style={ { width: '96%' } }>
+                { !!selectedBadgeCode &&
+                    <Flex className="bg-white pb-1 px-2 rounded mt-2" style={ { height: '50px' } } justifyContent={ 'between' } alignItems={ 'end' } gap={ 2 }>
+                        <Flex alignItems="start" gap={ 2 }>
+                            <LayoutBadgeImageView shrink badgeCode={ selectedBadgeCode } />
+                            <Text className="font-bold mt-2">{ LocalizeBadgeName(selectedBadgeCode) }</Text>
+                        </Flex>
+                        <Button className="btn btn-primary mb-1" style={ { fontSize: '12px' } } disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
                     </Flex>
-                    <Button className="btn btn-primary mb-1" style={ { fontSize: '12px' } } disabled={ !isWearingBadge(selectedBadgeCode) && !canWearBadges() } onClick={ event => toggleBadge(selectedBadgeCode) }>{ LocalizeText(isWearingBadge(selectedBadgeCode) ? 'inventory.badges.clearbadge' : 'inventory.badges.wearbadge') }</Button>
-                </Flex> }
-            <div className="nitro-progress-bar text-white mt-1">
-                <Text small center style={ { marginTop: '-1px' } }>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>
-            </div>
+                }
+                <div className="nitro-progress-bar text-white mt-1">
+                    <Text small center style={ { marginTop: '-1px' } }>{ LocalizeText('achievements.categories.score', [ 'score' ], [ achievementScore.toString() ]) }</Text>
+                </div>
+            </Column>
         </div>
     );
 }
diff --git a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
index 882b3e545..08323b8d1 100644
--- a/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
+++ b/src/components/room/widgets/avatar-info/AvatarInfoWidgetView.scss
@@ -157,6 +157,7 @@
         .badge-image {
             width: 45px;
             height: 45px;
+            margin: auto;
         }
 
         .motto-content {

From 9fcaad166c1c6c37de770d14409ea472b845d0ef Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Tue, 4 Jul 2023 21:00:42 +0200
Subject: [PATCH 121/134] Removed unnecesary style

---
 src/components/inventory/InventoryView.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index 8cb64d90a..ba6ab4abf 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -112,7 +112,7 @@ export const InventoryView: FC<{}> = props =>
     if(!isVisible) return null;
 
     return (
-        <NitroCardView uniqueKey={ 'inventory' } className={ `${ isTrading ? 'nitro-inventory trading no-resize' : 'nitro-inventory' }` } theme={ isTrading ? 'primary' : '' } style={ { width: isTrading ? '490px' : '4px' } }>
+        <NitroCardView uniqueKey={ 'inventory' } className={ `${ isTrading ? 'nitro-inventory trading no-resize' : 'nitro-inventory' }` } theme={ isTrading ? 'primary' : '' }>
             <NitroCardHeaderView headerText={ LocalizeText('inventory.title') } onCloseClick={ onClose } />
             <>
                 <NitroCardTabsView>

From b160d0d9cb14aa23b9c03b3aa0825a97fbc6db92 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Tue, 4 Jul 2023 21:32:30 +0200
Subject: [PATCH 122/134] Friend bar search - Retouch design

---
 src/components/friends/FriendsView.scss                | 10 +++++++++-
 .../friends/views/friends-bar/FriendBarItemView.tsx    |  6 +++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/friends/FriendsView.scss b/src/components/friends/FriendsView.scss
index 54e2fb674..d355ca059 100644
--- a/src/components/friends/FriendsView.scss
+++ b/src/components/friends/FriendsView.scss
@@ -184,7 +184,7 @@
         min-height: 36px;
 
         &.friend-bar-item-active {
-            margin-bottom:26px;
+            margin-bottom: 26px;
         }
 
         &.find-friends {
@@ -215,6 +215,10 @@
             }
         }
 
+        .font-size-friend {
+            font-size: 12px;
+        }
+
         .friend-bar-text {
             overflow: hidden;
             text-overflow: ellipsis;
@@ -246,6 +250,10 @@
                 height: 34px;
                 background-image: url('@/assets/images/toolbar/friend-search.png');
             }
+
+            &.friend-bar-item-active {
+                margin-bottom: 146px;
+            }
         }
     }
     
diff --git a/src/components/friends/views/friends-bar/FriendBarItemView.tsx b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
index 129e011c7..70ab90746 100644
--- a/src/components/friends/views/friends-bar/FriendBarItemView.tsx
+++ b/src/components/friends/views/friends-bar/FriendBarItemView.tsx
@@ -33,13 +33,13 @@ export const FriendBarItemView: FC<{ friend: MessengerFriend }> = props =>
     if(!friend)
     {
         return (
-            <div ref={ elementRef } className={ 'btn find-friends friend-bar-item friend-bar-search ' + (isVisible ? 'bottom-5 friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
+            <div ref={ elementRef } className={ 'btn find-friends friend-bar-item friend-bar-search ' + (isVisible ? 'friend-bar-item-active' : '') } onClick={ event => setVisible(prevValue => !prevValue) }>
                 <div className="friend-bar-item-head position-absolute"/>
                 <div className="friend-bar-text">{ LocalizeText('friend.bar.find.title') }</div>
                 { isVisible &&
                     <div className="search-content mt-3">
-                        <div className="bg-white text-black">{ LocalizeText('friend.bar.find.text') }</div>
-                        <Button className="mt-2" variant="white" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>{ LocalizeText('friend.bar.find.button') }</Button>
+                        <div className="bg-white text-black px-1 py-1 font-size-friend">{ LocalizeText('friend.bar.find.text') }</div>
+                        <Button className="mt-2 mb-4" variant="white" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) }>{ LocalizeText('friend.bar.find.button') }</Button>
                     </div>
                 }
             </div>

From d931a7740491f045a910668eced998af2aca31c2 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Thu, 6 Jul 2023 17:05:27 +0200
Subject: [PATCH 123/134] Inventory - Filters, design tweaks and bug fixes

---
 src/App.scss                                  |   4 +-
 src/assets/flash/inventory/allow_recycle.png  | Bin 0 -> 281 bytes
 src/assets/flash/inventory/allow_trade.png    | Bin 0 -> 322 bytes
 src/assets/flash/inventory/item.png           | Bin 0 -> 207 bytes
 .../flash/inventory/not_allow_recycle.png     | Bin 0 -> 338 bytes
 .../flash/inventory/not_allow_trade.png       | Bin 0 -> 383 bytes
 src/assets/flash/inventory/selected_item.png  | Bin 0 -> 221 bytes
 src/assets/styles/icons.scss                  |  24 ++++
 src/components/inventory/InventoryView.scss   |  61 +++++++++-
 src/components/inventory/InventoryView.tsx    |  18 ++-
 .../constants/InventoryFilterType.ts          |   9 ++
 src/components/inventory/constants/index.ts   |   1 +
 .../views/InventoryCategoryFilterView.tsx     | 107 ++++++++++++++++++
 .../views/badge/InventoryBadgeView.tsx        |  35 ++----
 .../furniture/InventoryFurnitureItemView.tsx  |   2 +-
 .../furniture/InventoryFurnitureView.tsx      |  42 ++++---
 16 files changed, 252 insertions(+), 51 deletions(-)
 create mode 100644 src/assets/flash/inventory/allow_recycle.png
 create mode 100644 src/assets/flash/inventory/allow_trade.png
 create mode 100644 src/assets/flash/inventory/item.png
 create mode 100644 src/assets/flash/inventory/not_allow_recycle.png
 create mode 100644 src/assets/flash/inventory/not_allow_trade.png
 create mode 100644 src/assets/flash/inventory/selected_item.png
 create mode 100644 src/components/inventory/constants/InventoryFilterType.ts
 create mode 100644 src/components/inventory/views/InventoryCategoryFilterView.tsx

diff --git a/src/App.scss b/src/App.scss
index 7e2ab894d..c212fccbd 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -27,8 +27,8 @@ $avatar-editor-height: 520px;
 $catalog-width: 570px;
 $catalog-height: 635px;
 
-$inventory-width: 490px;
-$inventory-height: 315px;
+$inventory-width: 485px;
+$inventory-height: 342px;
 
 $navigator-width: 425px;
 $navigator-height: 500px;
diff --git a/src/assets/flash/inventory/allow_recycle.png b/src/assets/flash/inventory/allow_recycle.png
new file mode 100644
index 0000000000000000000000000000000000000000..550ca111e6efb642079250e115e9de03d647c46f
GIT binary patch
literal 281
zcmeAS@N?(olHy`uVBq!ia0vp^0wB!63?wyl`GbKJV{wqX6T`Z5GB1G~mUKs7M+SzC
z{oH>NS%G}%0G|+7ApQRR`wt&Jq@7JmKbxL*I*lovVdno?K=IF){!9T<oFzei!T+Iv
zA=tk{2qakG5n0T@z;_sg8IR|$NC65KdAc};Xawi_2l6=^a;#F?_TB#DfqlB~lTFl`
z#7booZD-sObkb^@v6#(gvtZPX1<`R#+UqWI-8v#WGrXgZjr;1WjTc_zH0g%hK3!5J
zqPIG(AoRbSV)Kn{dy`uea`}(t_uC)R`5$|?`^65P&w_E!=YM7t_GNyxYY%rP&~^q-
LS3j3^P6<r_=6h$Z

literal 0
HcmV?d00001

diff --git a/src/assets/flash/inventory/allow_trade.png b/src/assets/flash/inventory/allow_trade.png
new file mode 100644
index 0000000000000000000000000000000000000000..b47fb880bd65028997eae576ddcae8f2d320485a
GIT binary patch
literal 322
zcmeAS@N?(olHy`uVBq!ia0vp^@<7bb!3-p|mpz#Pq!^2X+?^QKos)S9<glbW`Z_W&
zZ0zU$lgJ9>O9%LbxB}__-yi<J+WP<bnhW#%>J!wa6&t>J^#CZoXzJSOK#H>@$S?Rm
z6fgw)R|tUw3p^r=85sBugD~Uq{1quc!P%ZJjv*Ssp%WX08WcF3IS>B%ub<caQnK{u
zH?^rZog}-yuikdF+jd3#p<7AnK0AedUrunYxN2;bkSxt%@Y-=Imw<Y20>hl#G&jGs
z^It4{nE$Tv)90F1vpnsjet-E~^F>yoB7ODI1zZA;mvnYo9CFoGIMc#z$-HQ?8wdZR
zd;5iVJTup;V|tt6(D{t#!Qw3kkA+3Z+^hb(VDYtI47(?=7r(uHc0JIU44$rjF6*2U
FngE?xf-(RA

literal 0
HcmV?d00001

diff --git a/src/assets/flash/inventory/item.png b/src/assets/flash/inventory/item.png
new file mode 100644
index 0000000000000000000000000000000000000000..01a3d2d145f21922ae776c2fee0215016846e2e2
GIT binary patch
literal 207
zcmeAS@N?(olHy`uVBq!ia0vp^8X(NU3?z3ec*FxK#^NA%Cx&(BWL^R}Ea{HEjtmSN
z`?>!lvI6;R0X`wFKpF^^rtdrtq?k&A{DS{8Jl$^K1>|uSctjR6Fz_7)VaDV6D^h@h
zE}kxqAr}5`uWaOHFyLTz-1Gm^N#llv9aE0Q2hLFl_1Z3##hhHA$YsTT`_R<KRSPsP
sh-GkZscn5<f9IZ6OGZh2*5oD3_GYXb(?2?D0?lLaboFyt=akR{00M?SH~;_u

literal 0
HcmV?d00001

diff --git a/src/assets/flash/inventory/not_allow_recycle.png b/src/assets/flash/inventory/not_allow_recycle.png
new file mode 100644
index 0000000000000000000000000000000000000000..febfdc87e6c1df537a5476dcc6427e28da3fd48a
GIT binary patch
literal 338
zcmeAS@N?(olHy`uVBq!ia0vp^GC(ZA!3-pg1mE8UQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`6$5-iT!Hla_wPS^_;5)?<iD|T+S#=9v*~H4)0om3X8xZAl+Dn;qXne6
zOM?7@|HA=;mp|htpfG2FM`SSr1K(i~W;~w1A_XY8*we)^L?gI#VxZ6w1rBFN@rC#P
zADGQ@`(}S`+MK5I8UeQ_$Qs&tw#V@C>ZqiBX7){dCg**sP{7oag?pFMTpqQ#jDH(<
z-nq50^kCyj_lHOBomF#o)L(x>)ZpG33GT2fD_Vj#{N?5SJ@Z2v=e*sl52G2yHC`t!
z{F`_9p`^HXkfZtI>7Qc6XLCl$f7|lufW5PWc>d$$#S(u$9Ne>!P2tC<)8GCvalK^U
UoE^Nm0q9%?Pgg&ebxsLQ0PW(0*8l(j

literal 0
HcmV?d00001

diff --git a/src/assets/flash/inventory/not_allow_trade.png b/src/assets/flash/inventory/not_allow_trade.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc07c79441ad94637266de72735e97c94999e341
GIT binary patch
literal 383
zcmeAS@N?(olHy`uVBq!ia0vp^8bB<-!3-pWInT}qQjEnx?oJHr&dIz4a#+$GeH|GX
zHuiJ>Nn{1`<pO*{T!Hle?+-7Di2OG;{(rUg|MN8$=K0kps7)(21WKJSSaKUkag_x5
z1^<TuhD~R5&I3g`3p^r=85sBugD~Uq{1quc!7H9Fjv*Ssv6HxkS`>JkBe(r|SO4&=
zH{;y1FD{s!7rVG=iPFX>mHL(8@A|jw4SE&6%6zN)7R#Wd<Q0=*xdS{S=07XTD!W!D
zGtow5ZjM9R@*E!X0;?qshYa21ga19$dKePe*1+sGebI`C4`swp$+6#<)Gg_gcKe<8
zoe-a(+wn)=wwyKC@m%=0NSCzM`b)|i&2057n+q0PWK`^3xqrdojcV5)d^&CO#4gh!
z|6>uG{>_i`ncwT{IeN&l<{$Hn-ea-#Y;J(59=qFj|H9MaHJvAq?~QuR&byUcdXv(U
RGNAt$JYD@<);T3K0RTp8n$Q3M

literal 0
HcmV?d00001

diff --git a/src/assets/flash/inventory/selected_item.png b/src/assets/flash/inventory/selected_item.png
new file mode 100644
index 0000000000000000000000000000000000000000..838b3b4f37fb612efaeb0f5e27ecad637eeb7a1e
GIT binary patch
literal 221
zcmeAS@N?(olHy`uVBq!ia0vp^S|H593?x6vT4n+%#^NA%Cx&(BWL^R}Ea{HEjtmSN
z`?>!lvI6-$0X`wFK>Gjx|7E2GK!*R?urDBWB|(0{KtTovt(71?XMsm#F#`kNVGw3K
zp1&dmDCp(s;uzxL{r0LMAA=$fv!n3;|L1QAU6;#yvB#^~#7oja$T4k}Xv%cY=!mS}
zs?nD}|5>{Q2)=0YzA4|jxq)-7g8S^|WB;$YOq34!E|9Ib_^B7rR0dC1KbLh*2~7Z}
CDM_>d

literal 0
HcmV?d00001

diff --git a/src/assets/styles/icons.scss b/src/assets/styles/icons.scss
index 828fc75c9..ee8df67dd 100644
--- a/src/assets/styles/icons.scss
+++ b/src/assets/styles/icons.scss
@@ -958,6 +958,30 @@
         height: 21px;
     }
 
+    &.icon-recyclable {
+        background-image: url('@/assets/flash/inventory/allow_recycle.png');
+        width: 21px;
+        height: 21px;
+    }
+
+    &.icon-not-recyclable {
+        background-image: url('@/assets/flash/inventory/not_allow_recycle.png');
+        width: 29px;
+        height: 21px;
+    }
+
+    &.icon-tradeable {
+        background-image: url('@/assets/flash/inventory/allow_trade.png');
+        width: 31px;
+        height: 15px;
+    }
+
+    &.icon-not-tradeable {
+        background-image: url('@/assets/flash/inventory/not_allow_trade.png');
+        width: 40px;
+        height: 16px;
+    }
+
     &.spin {
         animation: rotating 1s linear infinite;
     }
diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index 095e808f5..910cba674 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -1,10 +1,9 @@
 .nitro-inventory {
     height: $inventory-height;
     min-height: $inventory-height;
-    max-height: $inventory-height + 150px;
     width: $inventory-width;
     min-width: $inventory-width;
-    max-width: $inventory-width + 150px;
+    max-width: $inventory-width;
     color: #000;
 
     input {
@@ -15,9 +14,24 @@
     &.trading {
         width: 535px;
         min-height: $inventory-height + 290px !important;
+        max-width: $inventory-width + 15px !important;
+        min-width: $inventory-width + 15px !important;
 
         .trading-inventory {
-            max-height: 200px;
+            max-height: 240px;
+        }
+
+        .nitro-item-count {
+            top: 0px;
+            right: -2px;
+            background-color: white;
+            padding: 0px;
+            padding-left: 3px;
+            padding-right: 3px;
+            color: #306A83;
+            border: 1px solid #2F6982;
+            font-weight: normal !important;
+            font-family: Goldfish;
         }
     }
 
@@ -66,11 +80,41 @@
         border-left: 2px solid #B4B4B4;
         margin-top: 15px;
     }
+
+    .inventory-items {
+
+        border-image-source: url(@/assets/flash/inventory/item.png) !important;
+        border-image-slice: 6 6 6 6 fill !important;
+        border-image-width: 6px 6px 6px 6px !important;
+
+        &.active {
+            border-image-source: url(@/assets/flash/inventory/selected_item.png) !important;
+            border-image-slice: 6 6 6 6 fill !important;
+            border-image-width: 6px 6px 6px 6px !important;
+        }
+
+        &.unseen {
+            background-color: #9BCA64;
+        }
+
+        .nitro-item-count {
+            top: 0px;
+            right: -2px;
+            background-color: white;
+            padding: 0px;
+            padding-left: 3px;
+            padding-right: 3px;
+            color: #306A83;
+            border: 1px solid #2F6982;
+            font-weight: normal !important;
+            font-family: Goldfish;
+        }
+    }
 }
 
 .calc-wrapper {
     width: 96%;
-    height: calc(100% - 80px);
+    height: calc(100% - 100px);
 }
 
 .size-list-badges {
@@ -80,3 +124,12 @@
 .size-badges {
     width: 145px;
 }
+
+.nitro-inventory-category-filter {
+    background-color: #C9C9C9;
+    height: 25px;
+}
+
+.text-shadow-around-text {
+    text-shadow: -1px 0 white, 0 1px white, 1px 0 #ececec, 0 -1px white;
+}
diff --git a/src/components/inventory/InventoryView.tsx b/src/components/inventory/InventoryView.tsx
index ba6ab4abf..28da493c7 100644
--- a/src/components/inventory/InventoryView.tsx
+++ b/src/components/inventory/InventoryView.tsx
@@ -1,9 +1,10 @@
 import { BadgePointLimitsEvent, ILinkEventTracker, IRoomSession, RoomEngineObjectEvent, RoomEngineObjectPlacedEvent, RoomPreviewer, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { AddEventLinkTracker, GetLocalization, GetRoomEngine, LocalizeText, RemoveLinkEventTracker, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
+import { AddEventLinkTracker, GetLocalization, GetRoomEngine, GroupItem, LocalizeText, RemoveLinkEventTracker, isObjectMoverRequested, setObjectMoverRequested } from '../../api';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
-import { useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useRoomEngineEvent, useRoomSessionManagerEvent } from '../../hooks';
+import { useInventoryBadges, useInventoryFurni, useInventoryTrade, useInventoryUnseenTracker, useMessageEvent, useRoomEngineEvent, useRoomSessionManagerEvent } from '../../hooks';
 import { TABS, TAB_BADGES, TAB_BOTS, TAB_FURNITURE, TAB_PETS, UNSEEN_CATEGORIES } from './constants';
+import { InventoryCategoryFilterView } from './views/InventoryCategoryFilterView';
 import { InventoryBadgeView } from './views/badge/InventoryBadgeView';
 import { InventoryBotView } from './views/bot/InventoryBotView';
 import { InventoryFurnitureView } from './views/furniture/InventoryFurnitureView';
@@ -16,8 +17,12 @@ export const InventoryView: FC<{}> = props =>
     const [ currentTab, setCurrentTab ] = useState<string>(TABS[0]);
     const [ roomSession, setRoomSession ] = useState<IRoomSession>(null);
     const [ roomPreviewer, setRoomPreviewer ] = useState<RoomPreviewer>(null);
+    const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>([]);
+    const [ filteredBadgeCodes, setFilteredBadgeCodes ] = useState<string[]>([]);
     const { isTrading = false, stopTrading = null } = useInventoryTrade();
-    const { getCount = null, resetCategory = null } = useInventoryUnseenTracker();
+    const { getCount = null } = useInventoryUnseenTracker();
+    const { groupItems = [] } = useInventoryFurni();
+    const { badgeCodes = [] } = useInventoryBadges();
 
     const onClose = () =>
     {
@@ -125,13 +130,14 @@ export const InventoryView: FC<{}> = props =>
                         );
                     }) }
                 </NitroCardTabsView>
-                <NitroCardContentView overflow={ `${ isTrading ? 'hidden' : 'auto' }` }>
+                <NitroCardContentView overflow="hidden">
+                    { (currentTab !== TAB_PETS && currentTab !== TAB_BOTS) && <InventoryCategoryFilterView currentTab={ currentTab } groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } badgeCodes={ badgeCodes } setBadgeCodes={ setFilteredBadgeCodes } /> }
                     { (currentTab === TAB_FURNITURE ) &&
-                            <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } /> }
+                            <InventoryFurnitureView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } filteredGroupItems={ filteredGroupItems } /> }
                     { (currentTab === TAB_PETS ) &&
                             <InventoryPetView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } /> }
                     { (currentTab === TAB_BADGES ) &&
-                            <InventoryBadgeView /> }
+                            <InventoryBadgeView filteredBadgeCodes={ filteredBadgeCodes } /> }
                     { (currentTab === TAB_BOTS ) &&
                             <InventoryBotView roomSession={ roomSession } roomPreviewer={ roomPreviewer } isTrading={ isTrading } /> }
                     { isTrading && <InventoryTradeView currentTab={ currentTab } setCurrentTab={ (e) => setCurrentTab(e) } cancelTrade={ onClose } /> }
diff --git a/src/components/inventory/constants/InventoryFilterType.ts b/src/components/inventory/constants/InventoryFilterType.ts
new file mode 100644
index 000000000..7efdaffb3
--- /dev/null
+++ b/src/components/inventory/constants/InventoryFilterType.ts
@@ -0,0 +1,9 @@
+export class InventoryFilterType
+{
+    public static EVERYTHING: string = 'inventory.filter.option.everything';
+    public static FLOOR: string = 'inventory.furni.tab.floor';
+    public static WALL: string = 'inventory.furni.tab.wall';
+    public static ANYWHERE: string = 'inventory.placement.option.anywhere';
+    public static IN_ROOM: string = 'inventory.placement.option.inroom';
+    public static IN_INVENTORY: string = 'inventory.placement.option.notinroom';
+}
diff --git a/src/components/inventory/constants/index.ts b/src/components/inventory/constants/index.ts
index 825c6c357..22efe5bc3 100644
--- a/src/components/inventory/constants/index.ts
+++ b/src/components/inventory/constants/index.ts
@@ -1 +1,2 @@
+export * from './InventoryFilterType';
 export * from './InventoryTabConstants';
diff --git a/src/components/inventory/views/InventoryCategoryFilterView.tsx b/src/components/inventory/views/InventoryCategoryFilterView.tsx
new file mode 100644
index 000000000..6f9552de9
--- /dev/null
+++ b/src/components/inventory/views/InventoryCategoryFilterView.tsx
@@ -0,0 +1,107 @@
+import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react';
+import { GroupItem, LocalizeBadgeName, LocalizeText } from '../../../api';
+import { Flex } from '../../../common';
+import { InventoryFilterType, TAB_BADGES, TAB_FURNITURE } from '../constants';
+
+export interface InventoryCategoryFilterViewProps
+{
+    currentTab: string;
+    groupItems: GroupItem[];
+    badgeCodes: string[];
+    setGroupItems: Dispatch<SetStateAction<GroupItem[]>>;
+    setBadgeCodes: Dispatch<SetStateAction<string[]>>;
+}
+
+export const InventoryCategoryFilterView: FC<InventoryCategoryFilterViewProps> = props =>
+{
+    const { currentTab = null, groupItems = [], badgeCodes = [], setGroupItems = null, setBadgeCodes = null } = props;
+    const [ filterType, setFilterType ] = useState<string>(InventoryFilterType.EVERYTHING);
+    const [ filterPlace, setFilterPlace ] = useState<string>(InventoryFilterType.IN_INVENTORY);
+    const [ searchValue, setSearchValue ] = useState('');
+
+    useEffect(() =>
+    {
+        if (currentTab !== TAB_BADGES) return;
+
+        let filteredBadgeCodes = [ ...badgeCodes ];
+
+        const filteredBadges = badgeCodes.filter( badge => badge.startsWith('ACH_') );
+
+        const numberMap = {};
+
+        filteredBadges.forEach(badge =>
+        {
+            const name = badge.split(/[\d]+/)[0];
+            const number = Number(badge.replace(name, ''));
+            
+            if (numberMap[name] === undefined || number > numberMap[name])
+            {
+                numberMap[name] = number;
+            }
+        });
+
+        const allBadges = Object.keys(numberMap).map( name => `${ name }${ numberMap[name] }` ).concat( badgeCodes.filter( badge => !badge.startsWith('ACH_') ) );
+
+        filteredBadgeCodes = allBadges.filter(badgeCode =>
+        {            
+            return LocalizeBadgeName(badgeCode).toLocaleLowerCase().includes(searchValue?.toLocaleLowerCase().replace(' ', ''));
+        });
+        
+        setBadgeCodes(filteredBadgeCodes);
+
+    }, [ badgeCodes, currentTab, searchValue, setBadgeCodes ]);
+    
+    useEffect(() =>
+    {
+        if (currentTab !== TAB_FURNITURE) return;
+
+        let filteredGroupItems = [ ...groupItems ];
+
+        const comparison = searchValue.toLocaleLowerCase();
+
+        if (filterType === InventoryFilterType.EVERYTHING) return setGroupItems(groupItems.filter( item => item.name.toLocaleLowerCase().includes(comparison) ));
+
+        filteredGroupItems = groupItems.filter(item =>
+        {            
+            const isWallFilter = (filterType === InventoryFilterType.WALL) ? item.isWallItem : false;
+            const isFloorFilter = (filterType === InventoryFilterType.FLOOR) ? !item.isWallItem : false;
+            const isSearchFilter = (item.name.toLocaleLowerCase().includes(comparison)) ? true : false;
+                
+            return comparison && comparison.length ? (isSearchFilter && (isWallFilter || isFloorFilter)) : isWallFilter || isFloorFilter;
+        });
+
+        setGroupItems(filteredGroupItems);
+    }, [ groupItems, setGroupItems, searchValue, filterType, currentTab ]);
+
+    useEffect(() =>
+    {
+        setFilterType(InventoryFilterType.EVERYTHING);
+        setFilterPlace(InventoryFilterType.IN_INVENTORY);
+        setSearchValue('');
+    }, [ currentTab ]);
+    
+    return (
+        <Flex className="nitro-inventory-category-filter rounded p-1 mt-n1" style={ { width: currentTab === TAB_BADGES ? '320px' : '100%' } }>
+            <Flex className="position-relative">
+                <Flex fullWidth alignItems="center" position="relative">
+                    <input type="text" className="form-control form-control-sm" value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
+                </Flex>
+                { (searchValue && !!searchValue.length) && <i className="icon icon-clear position-absolute cursor-pointer end-1 top-1" onClick={ event => setSearchValue('') } /> }
+            </Flex>
+            { (currentTab !== TAB_BADGES) &&
+                <>
+                    <Flex alignItems="center" position="relative" className="ms-2">
+                        <select className="form-select form-select-sm" value={ filterType } onChange={ event => setFilterType(event.target.value) }>
+                            { [ InventoryFilterType.EVERYTHING, InventoryFilterType.FLOOR, InventoryFilterType.WALL ].map((type, index) => <option key={ index } value={ type }>{ LocalizeText(type) }</option>) }
+                        </select>
+                    </Flex>
+                    <Flex alignItems="center" position="relative" className="ms-2">
+                        <select className="form-select form-select-sm" value={ filterPlace } onChange={ event => setFilterPlace(event.target.value) } disabled={ currentTab === TAB_FURNITURE }>
+                            { [ InventoryFilterType.ANYWHERE, InventoryFilterType.IN_ROOM, InventoryFilterType.IN_INVENTORY ].map((type, index) => <option key={ index } value={ type }>{ LocalizeText(type) }</option>) }
+                        </select>
+                    </Flex>
+                </>
+            }
+        </Flex>
+    );
+}
diff --git a/src/components/inventory/views/badge/InventoryBadgeView.tsx b/src/components/inventory/views/badge/InventoryBadgeView.tsx
index 2ed8e10f8..0ffc88593 100644
--- a/src/components/inventory/views/badge/InventoryBadgeView.tsx
+++ b/src/components/inventory/views/badge/InventoryBadgeView.tsx
@@ -4,26 +4,18 @@ import { AutoGrid, Button, Column, Flex, Grid, LayoutBadgeImageView, Text } from
 import { useAchievements, useInventoryBadges, useInventoryUnseenTracker } from '../../../../hooks';
 import { InventoryBadgeItemView } from './InventoryBadgeItemView';
 
-export const InventoryBadgeView: FC<{}> = props =>
+interface InventoryBadgeViewProps
 {
+    filteredBadgeCodes: string[];
+}
+
+export const InventoryBadgeView: FC<InventoryBadgeViewProps> = props =>
+{
+    const { filteredBadgeCodes = [] } = props;
     const [ isVisible, setIsVisible ] = useState(false);
-    const { badgeCodes = [], activeBadgeCodes = [], selectedBadgeCode = null, isWearingBadge = null, canWearBadges = null, toggleBadge = null, getBadgeId = null, activate = null, deactivate = null } = useInventoryBadges();
+    const { activeBadgeCodes = [], selectedBadgeCode = null, isWearingBadge = null, canWearBadges = null, toggleBadge = null, getBadgeId = null, activate = null, deactivate = null } = useInventoryBadges();
     const { isUnseen = null, removeUnseen = null } = useInventoryUnseenTracker();
     const { achievementScore = 0 } = useAchievements();
-    const [ searchValue, setSearchValue ] = useState('');
-
-    let search = searchValue?.toLocaleLowerCase().replace(' ', '');
-
-    const filterBadgeCodes = () =>
-    {
-        return badgeCodes.filter((badgeCode) =>
-        {
-            return LocalizeBadgeName(badgeCode).toLocaleLowerCase().includes(search);
-        });
-    };
-
-
-    const filteredBadgeCodes = filterBadgeCodes();
 
     useEffect(() =>
     {
@@ -49,14 +41,9 @@ export const InventoryBadgeView: FC<{}> = props =>
     }, []);
 
     return (
-        <div className="badge-wrapper calc-wrapper">
+        <div className="badge-wrapper calc-wrapper mt-n2">
             <Grid gap={ 1 }>
-                <Column overflow="hidden" className="size-list-badges">
-                    <Flex gap={ 1 } className="position-relative">
-                        <Flex fullWidth alignItems="center" position="relative">
-                            <input type="text" className="form-control form-control-sm" placeholder={ LocalizeText('generic.search') } value={ searchValue } onChange={ event => setSearchValue(event.target.value) } />
-                        </Flex>
-                    </Flex>
+                <Column overflow="hidden" className="size-list-badges mt-1">
                     <AutoGrid gap={ 1 } columnCount={ 5 }>
                         { filteredBadgeCodes && filteredBadgeCodes.length > 0 && filteredBadgeCodes.map((badgeCode, index) =>
                         {
@@ -66,7 +53,7 @@ export const InventoryBadgeView: FC<{}> = props =>
                         }) }
                     </AutoGrid>
                 </Column>
-                <Column className="justify-content-between size-badges" overflow="auto">
+                <Column className="justify-content-between size-badges position-absolute end-2 mt-n4" overflow="auto">
                     <Column overflow="hidden">
                         <Text center bold>{ LocalizeText('inventory.badges.activebadges') }</Text>
                         <AutoGrid gap={ 1 } columnCount={ 5 }>
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
index 15b988fa9..5106e7518 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureItemView.tsx
@@ -35,5 +35,5 @@ export const InventoryFurnitureItemView: FC<{ groupItem: GroupItem, isTrading: b
 
     const count = groupItem.getUnlockedCount();
 
-    return <LayoutGridItem className={ !count ? 'opacity-0-5 ' : '' } itemImage={ groupItem.iconUrl } itemCount={ groupItem.getUnlockedCount() } itemActive={ (groupItem === selectedItem) } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onClick={ event => (count && setGroupItem(groupItem)) } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } onDoubleClick={ onMouseEvent } { ...rest } />;
+    return <LayoutGridItem className={ !count ? 'inventory-items opacity-0-5 ' : 'inventory-items' } itemImage={ groupItem.iconUrl } itemCount={ groupItem.getUnlockedCount() } itemActive={ (groupItem === selectedItem) } itemUniqueNumber={ groupItem.stuffData.uniqueNumber } itemUnseen={ groupItem.hasUnseenItems } onClick={ event => (count && setGroupItem(groupItem)) } onMouseDown={ onMouseEvent } onMouseUp={ onMouseEvent } onMouseOut={ onMouseEvent } onDoubleClick={ onMouseEvent } { ...rest } />;
 }
diff --git a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
index bde9c8e97..ad1ccc216 100644
--- a/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
+++ b/src/components/inventory/views/furniture/InventoryFurnitureView.tsx
@@ -1,19 +1,19 @@
 import { IObjectData, IRoomSession, RoomObjectVariable, RoomPreviewer, TradingListAddItemComposer, TradingListAddItemsComposer, Vector3d } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { DispatchUiEvent, FurniCategory, GetRoomEngine, GetSessionDataManager, GroupItem, IFurnitureItem, LocalizeText, NotificationAlertType, SendMessageComposer, UnseenItemCategory, attemptItemPlacement, getGuildFurniType } from '../../../../api';
-import { AutoGrid, Button, Column, Grid, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
+import { AutoGrid, Base, Button, Column, Flex, Grid, LayoutLimitedEditionCompactPlateView, LayoutRarityLevelView, LayoutRoomPreviewerView, Text } from '../../../../common';
 import { CatalogPostMarketplaceOfferEvent } from '../../../../events';
 import { useInventoryFurni, useInventoryTrade, useInventoryUnseenTracker, useNotification } from '../../../../hooks';
 import { MAX_ITEMS_TO_TRADE } from '../../constants';
 import { InventoryCategoryEmptyView } from '../InventoryCategoryEmptyView';
 import { InventoryFurnitureItemView } from './InventoryFurnitureItemView';
-import { InventoryFurnitureSearchView } from './InventoryFurnitureSearchView';
 
 interface InventoryFurnitureViewProps
 {
     roomSession: IRoomSession;
     roomPreviewer: RoomPreviewer;
     isTrading: boolean;
+    filteredGroupItems: GroupItem[];
 }
 
 const attemptPlaceMarketplaceOffer = (groupItem: GroupItem) =>
@@ -29,9 +29,8 @@ const attemptPlaceMarketplaceOffer = (groupItem: GroupItem) =>
 
 export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
 {
-    const { roomSession = null, roomPreviewer = null, isTrading = null } = props;
+    const { roomSession = null, roomPreviewer = null, isTrading = null, filteredGroupItems = [] } = props;
     const [ isVisible, setIsVisible ] = useState(false);
-    const [ filteredGroupItems, setFilteredGroupItems ] = useState<GroupItem[]>([]);
     const [ groupItem, setGroupItem ] = useState<GroupItem>(null);
     const [ quantity, setQuantity ] = useState<number>(1);
     const { groupItems = [], selectedItem = null, activate = null, deactivate = null } = useInventoryFurni();
@@ -227,19 +226,33 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
         setQuantity(1);
     }, [ filteredGroupItems ]);
 
+    
     if(!groupItems || !groupItems.length) return <InventoryCategoryEmptyView title={ LocalizeText('inventory.empty.title') } desc={ LocalizeText('inventory.empty.desc') } isTrading={ isTrading } />;
-
+    
+    const totalItems = !isTrading ? selectedItem.items.length : selectedItem.getUnlockedCount();
+    
     return (
-        <Grid>
-            <Column size={ 7 } overflow="hidden">
-                <InventoryFurnitureSearchView groupItems={ groupItems } setGroupItems={ setFilteredGroupItems } />
-                <AutoGrid columnCount={ 5 } className={ isTrading ? 'trading-inventory' : '' }>
+        <Grid className="mt-n1">
+            <Column size={ 7 } overflow="hidden" style={ { height: `calc(100% - ${ !isTrading ? '34px' : '5px' })` } }>
+                <AutoGrid gap={ 1 } columnCount={ 5 } className={ isTrading ? 'trading-inventory' : '' }>
                     { filteredGroupItems && (filteredGroupItems.length > 0) && filteredGroupItems.map((item, index) => <InventoryFurnitureItemView key={ index } groupItem={ item } isTrading={ isTrading } attemptItemOffer={ (e) => attemptItemOffer(e) } setGroupItem={ (e) => setGroupItem(e) } />) }
                 </AutoGrid>
             </Column>
             <Column size={ 5 } overflow="auto">
-                <Column overflow="hidden" position="relative">
+                <Column overflow="hidden" position="relative" className="cursor-pointer">
                     <LayoutRoomPreviewerView roomPreviewer={ roomPreviewer } height={ 140 } />
+                    { (selectedItem && (selectedItem.items[0].isTradable || !selectedItem.items[0].isTradable)) &&
+                        <Flex gap={ 2 } position="absolute" className="top-2 start-2">
+                            <Base className={ `icon ${ (selectedItem.items[0].isTradable && totalItems > 0) ? 'icon-tradeable' : 'icon-not-tradeable' }` } title={ LocalizeText((selectedItem.items[0].isTradable && totalItems > 0) ? 'inventory.furni.preview.tradeable_amount' : 'inventory.furni.preview.not_tradeable') } />
+                            { (selectedItem.items[0].isTradable && totalItems > 0) && <Text variant="black" className="text-shadow-around-text mt-n1">{ totalItems }</Text> }
+                        </Flex>
+                    }
+                    { (selectedItem && (selectedItem.items[0].recyclable || !selectedItem.items[0].recyclable)) &&
+                        <Flex gap={ 2 } position="absolute" className="top-4 start-2">
+                            <Base className={ `icon ${ (selectedItem.items[0].recyclable && totalItems > 0) ? 'icon-recyclable' : 'icon-not-recyclable' }` } title={ LocalizeText((selectedItem.items[0].recyclable && totalItems > 0) ? 'inventory.furni.preview.recyclable_amount' : 'inventory.furni.preview.not_recyclable') } />
+                            { (selectedItem.items[0].recyclable && totalItems > 0) && <Text variant="black" className="text-shadow-around-text">{ totalItems }</Text> }
+                        </Flex>
+                    }
                     { selectedItem && selectedItem.stuffData.isUnique &&
                         <LayoutLimitedEditionCompactPlateView className="top-2 end-2" position="absolute" uniqueNumber={ selectedItem.stuffData.uniqueNumber } uniqueSeries={ selectedItem.stuffData.uniqueSeries } /> }
                     { (selectedItem && selectedItem.stuffData.rarityLevel > -1) &&
@@ -247,16 +260,17 @@ export const InventoryFurnitureView: FC<InventoryFurnitureViewProps> = props =>
                 </Column>
                 { selectedItem &&
                     <Column grow justifyContent="between" gap={ 2 }>
-                        <Text grow truncate bold>{ selectedItem.name }</Text>
-                        <Column gap={ 1 }>
+                        <Column gap={ 1 } position={ !isTrading ? 'absolute' : 'relative' } className="bottom-1" style={ { width: !isTrading ? '39%' : '' } }>
+                            <Text grow truncate bold>{ selectedItem.name }</Text>
+                            { (selectedItem.description) && <Text grow truncate small>{ selectedItem.description }</Text> }
                             { (!isTrading) &&
                                 <>
                                     { !!roomSession &&
-                                        <Button onClick={ event => attemptItemPlacement(selectedItem) }>
+                                        <Button className="p-0 px-2" onClick={ event => attemptItemPlacement(selectedItem) }>
                                             { LocalizeText('inventory.furni.placetoroom') }
                                         </Button> }
                                     { (selectedItem && selectedItem.isSellable) &&
-                                        <Button onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
+                                        <Button className="p-0 px-2" onClick={ event => attemptPlaceMarketplaceOffer(selectedItem) }>
                                             { LocalizeText('inventory.marketplace.sell') }
                                         </Button> }
                                 </>

From 6664b03626d71c7123d33db01bb3338f3e72c583 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Thu, 6 Jul 2023 20:46:42 +0200
Subject: [PATCH 124/134] Marketplace - Fixed design in limited

---
 src/components/catalog/CatalogView.scss       | 46 +++++++++++--------
 .../CatalogLayoutMarketplaceConfirmView.tsx   | 11 +----
 .../CatalogLayoutMarketplaceItemView.tsx      |  9 +---
 .../marketplace/MarketplacePostOfferView.tsx  |  4 +-
 4 files changed, 34 insertions(+), 36 deletions(-)

diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 46d11266d..70f5bd59e 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -311,6 +311,16 @@
     font-size: 10px;
 }
 
+.layout-grid-item {
+    
+    &.layout-marketplace {
+        background-color: transparent !important;
+        border: none !important;
+        border-color: none !important;
+        cursor: default;
+    }
+}
+
 .nitro-catalog-layout-vip-gifts-grid {
     .layout-grid-item {
         height: 55px !important;
@@ -322,15 +332,15 @@
     width: 299px;
 
     .image-preview {
-        width: 48px;
-        height: 48px;
-        overflow: hidden;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: #F0F0F0;
-        border: 1px solid #5D5D5D;
-        border-radius: 8px;
+        width: 48px !important;
+        height: 48px !important;
+        overflow: hidden !important;
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+        background-color: #F0F0F0 !important;
+        border: 1px solid #5D5D5D !important;
+        border-radius: 8px !important;
     }
 
     .textarea-height {
@@ -342,15 +352,15 @@
     width: 279px;
 
     .image-preview {
-        width: 48px;
-        height: 48px;
-        overflow: hidden;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        background-color: #F0F0F0;
-        border: 1px solid #5D5D5D;
-        border-radius: 8px;
+        width: 48px !important;
+        height: 48px !important;
+        overflow: hidden !important;
+        display: flex !important;
+        justify-content: center !important;
+        align-items: center !important;
+        background-color: #F0F0F0 !important;
+        border: 1px solid #5D5D5D !important;
+        border-radius: 8px !important;
     }
 }
 
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceConfirmView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceConfirmView.tsx
index ed89dd2d2..af2d4b66a 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceConfirmView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceConfirmView.tsx
@@ -1,7 +1,7 @@
 import { BuyMarketplaceOfferMessageComposer } from '@nitrots/nitro-renderer';
 import { FC } from 'react';
 import { GetImageIconUrlForProduct, LocalizeText, MarketplaceOfferData, ProductTypeEnum, SendMessageComposer } from '../../../../../../api';
-import { Base, Button, Column, Flex, LayoutLimitedEditionStyledNumberView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
+import { Button, Column, Flex, LayoutGridItem, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../../../../common';
 
 export interface CatalogLayoutMarketplaceConfirmViewProps
 {
@@ -27,14 +27,7 @@ export const CatalogLayoutMarketplaceConfirmView: FC<CatalogLayoutMarketplaceCon
             <NitroCardContentView overflow="hidden">
                 <Column className="px-2 py-2">
                     <Flex>
-                        <Flex className="image-preview">
-                            <Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ GetImageIconUrlForProduct(((offerData.furniType === MarketplaceOfferData.TYPE_FLOOR) ? ProductTypeEnum.FLOOR : ProductTypeEnum.WALL), offerData.furniId, offerData.extraData) })`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center' } } />
-                            { (offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0) > 0 &&
-                                <div className="position-absolute bottom-0 unique-item-counter">
-                                    <LayoutLimitedEditionStyledNumberView value={ offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0 } />
-                                </div>
-                            }
-                        </Flex>
+                        <LayoutGridItem className="layout-marketplace image-preview" itemImage={ GetImageIconUrlForProduct(((offerData.furniType === MarketplaceOfferData.TYPE_FLOOR) ? ProductTypeEnum.FLOOR : ProductTypeEnum.WALL), offerData.furniId, offerData.extraData) } itemUniqueNumber={ offerData.stuffData.uniqueNumber } />
                         <Text bold className="mt-3 px-3">{ LocalizeText(((offerData.furniType === 2) ? 'wallItem' : 'roomItem') + `.name.${ offerData.furniId }`) }</Text>
                     </Flex>
                     <Text className="font-italic">{ LocalizeText('catalog.marketplace.confirm_header') }</Text>
diff --git a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
index 6e5f5a58d..e97f9a054 100644
--- a/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/CatalogLayoutMarketplaceItemView.tsx
@@ -1,6 +1,6 @@
 import { FC, useCallback, useMemo } from 'react';
 import { GetImageIconUrlForProduct, LocalizeText, MarketPlaceOfferState, MarketplaceOfferData, ProductTypeEnum } from '../../../../../../api';
-import { Base, Button, Column, Flex, LayoutLimitedEditionStyledNumberView, Text } from '../../../../../../common';
+import { Button, Column, Flex, LayoutGridItem, Text } from '../../../../../../common';
 
 export interface MarketplaceItemViewProps
 {
@@ -48,12 +48,7 @@ export const CatalogLayoutMarketplaceItemView: FC<MarketplaceItemViewProps> = pr
     return (
         <Flex shrink center={ false } column={ false } alignItems="center" className="p-1 marketplace-bg">
             <Column style={ { width: 40, height: 40 } }>
-                <Base fit className="unique-bg-override" style={ { backgroundImage: `url(${ GetImageIconUrlForProduct(((offerData.furniType === MarketplaceOfferData.TYPE_FLOOR) ? ProductTypeEnum.FLOOR : ProductTypeEnum.WALL), offerData.furniId, offerData.extraData) })`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center' } } />
-                { (offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0) > 0 &&
-                    <div className="position-absolute bottom-0 unique-item-counter">
-                        <LayoutLimitedEditionStyledNumberView value={ offerData.isUniqueLimitedItem ? offerData.stuffData.uniqueNumber : 0 } />
-                    </div>
-                }
+                <LayoutGridItem className="layout-marketplace" itemImage={ GetImageIconUrlForProduct(((offerData.furniType === MarketplaceOfferData.TYPE_FLOOR) ? ProductTypeEnum.FLOOR : ProductTypeEnum.WALL), offerData.furniId, offerData.extraData) } itemUniqueNumber={ offerData.stuffData.uniqueNumber } />
             </Column>
             <Column grow gap={ 0 }>
                 <Text small fontWeight="bold" className="mt-1 mb-2">{ getMarketplaceOfferTitle }</Text>
diff --git a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
index 6cc728fc5..4153c73c4 100644
--- a/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
+++ b/src/components/catalog/views/page/layout/marketplace/MarketplacePostOfferView.tsx
@@ -16,7 +16,7 @@ export const MarketplacePostOfferView : FC<{}> = props =>
 
     const updateAskingPrice = (price: string) =>
     {
-        setTempAskingPrice(Number(price) >= 10 ? '10' : price);
+        setTempAskingPrice(Number(price) >= marketplaceConfiguration.maximumPrice ? marketplaceConfiguration.maximumPrice.toString() : price);
 
         const newValue = Number(price);
 
@@ -92,7 +92,7 @@ export const MarketplacePostOfferView : FC<{}> = props =>
                         <input className="form-control form-control-sm w-25" type="number" min={ 0 } value={ tempAskingPrice } onChange={ event => updateAskingPrice(event.target.value) } />
                     </Flex>
                     <Text className="font-size-marketplace">{ LocalizeText('inventory.marketplace.make_offer.average_price', [ 'days', 'price', 'price_no_commission' ], [ marketplaceConfiguration.offerTime.toString(), marketplaceConfiguration.minimumPrice.toString(), marketplaceConfiguration.commission.toString() ] ) }</Text>
-                    <textarea className="form-control form-control-sm font-size-marketplace-small overflow-hidden textarea-height" value={ askingPrice >= marketplaceConfiguration.minimumPrice ? LocalizeText('sell.in.marketplace.revenue.label') + ': ' + (askingPrice + 1) : LocalizeText('shop.marketplace.invalid.price', [ 'minPrice', 'maxPrice' ], [ marketplaceConfiguration.minimumPrice.toString(), marketplaceConfiguration.maximumPrice.toString() ]) } readOnly></textarea>
+                    <textarea className="form-control form-control-sm font-size-marketplace-small overflow-hidden textarea-height" value={ askingPrice >= marketplaceConfiguration.minimumPrice ? LocalizeText('sell.in.marketplace.revenue.label') + ': ' + (askingPrice - 1) : LocalizeText('shop.marketplace.invalid.price', [ 'minPrice', 'maxPrice' ], [ marketplaceConfiguration.minimumPrice.toString(), marketplaceConfiguration.maximumPrice.toString() ]) } readOnly></textarea>
                     <Flex justifyContent="between">
                         <Button className="w-30" onClick={ postItem } disabled={ ((askingPrice < marketplaceConfiguration.minimumPrice) || (askingPrice > marketplaceConfiguration.maximumPrice) || isNaN(askingPrice)) }>{ LocalizeText('inventory.marketplace.make_offer.post') }</Button>
                         <Button className="w-30" onClick={ () => setItem(null) }>{ LocalizeText('generic.cancel') }</Button>

From b438c3aa1c32769e9b7100e3965c885c55356e98 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Thu, 6 Jul 2023 21:49:16 +0200
Subject: [PATCH 125/134] Fix width inventory items and badges problem Google
 Chrome

---
 src/App.scss                                | 2 +-
 src/components/inventory/InventoryView.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index c212fccbd..8a8753738 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -27,7 +27,7 @@ $avatar-editor-height: 520px;
 $catalog-width: 570px;
 $catalog-height: 635px;
 
-$inventory-width: 485px;
+$inventory-width: 500px;
 $inventory-height: 342px;
 
 $navigator-width: 425px;
diff --git a/src/components/inventory/InventoryView.scss b/src/components/inventory/InventoryView.scss
index 910cba674..5c8c73b09 100644
--- a/src/components/inventory/InventoryView.scss
+++ b/src/components/inventory/InventoryView.scss
@@ -118,7 +118,7 @@
 }
 
 .size-list-badges {
-    width: 315px;
+    width: 335px;
 }
 
 .size-badges {

From 3056a5c26c2e2e0ee372f786db8f9ef63fac445e Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Fri, 14 Jul 2023 17:48:30 +0200
Subject: [PATCH 126/134] Catalog - Design item counter & fix width in chrome
 (now show 6 items)

---
 src/App.scss                                  |   2 +-
 .../flash/catalogue/item-counter-bg.png       | Bin 0 -> 177 bytes
 src/common/index.scss                         |  21 ++++++++++++++++++
 src/components/catalog/CatalogView.scss       |   2 +-
 src/components/catalog/CatalogView.tsx        |   2 +-
 5 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/assets/flash/catalogue/item-counter-bg.png

diff --git a/src/App.scss b/src/App.scss
index 8a8753738..80268e517 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -24,7 +24,7 @@ $achievement-height: 405px;
 $avatar-editor-width: 500px;
 $avatar-editor-height: 520px;
 
-$catalog-width: 570px;
+$catalog-width: 600px;
 $catalog-height: 635px;
 
 $inventory-width: 500px;
diff --git a/src/assets/flash/catalogue/item-counter-bg.png b/src/assets/flash/catalogue/item-counter-bg.png
new file mode 100644
index 0000000000000000000000000000000000000000..fb4dff0ba36e9ef76ac46710723102d3bfc2aebf
GIT binary patch
literal 177
zcmeAS@N?(olHy`uVBq!ia0vp^f<P?9!3-q3)Q_eCDaPU;cPEB*=VV?2IV|apzK#qG
z8~eHcB(eheYymzYuK$gIEQVQ5Kc50Arjj7P;QtIyw;Ol?d7K3vk;M!Qe1}1p@p%4<
z6riA*r;B5VMsRWh3lp0JL-B+k3JgMxMu`lwPXw?W`N8d-v7k*tS(!n!g+Wo&?2HFc
O2ZN`ppUXO@geCz0Vk}?)

literal 0
HcmV?d00001

diff --git a/src/common/index.scss b/src/common/index.scss
index 0075f0d0a..6139981a5 100644
--- a/src/common/index.scss
+++ b/src/common/index.scss
@@ -356,6 +356,27 @@
     color: #fff;
 }
 
+.nitro-catalog .layout-catalog-grid-item .nitro-item-count, .nitro-catalog .layout-grid-item .nitro-item-count {
+    border-image-source: url(@/assets/flash/catalogue/item-counter-bg.png);
+    border-image-slice:6 6 6 6 fill;
+    border-image-width:6px 6px 6px 6px;
+    color: #CCCB65;
+    font-family: Goldfish;
+    top: 23px;
+    right: 3px;
+    font-size: 8.5px;
+    padding-top: 0px;
+    padding-bottom: 0px;
+    padding-left: 6px;
+    padding-right: 3px;
+    z-index: 1;
+}
+
+.nitro-catalog .layout-catalog-grid-item .nitro-item-count:before, .nitro-catalog .layout-grid-item .nitro-item-count:before {
+    content: ' x';
+    display: inline;
+}
+
 .badge-wrapper {
     overflow: hidden;
 
diff --git a/src/components/catalog/CatalogView.scss b/src/components/catalog/CatalogView.scss
index 70f5bd59e..71e01b399 100644
--- a/src/components/catalog/CatalogView.scss
+++ b/src/components/catalog/CatalogView.scss
@@ -85,7 +85,7 @@
     }
 
     .item-not-picker {
-        width: calc(100% - 203px);
+        width: calc(100% - 216px);
         max-height: 30px;
         min-height: 30px;   
     }
diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx
index 59e5b0330..2a0f39b3b 100644
--- a/src/components/catalog/CatalogView.tsx
+++ b/src/components/catalog/CatalogView.tsx
@@ -100,7 +100,7 @@ export const CatalogView: FC<{}> = props =>
                                     { activeNodes && (activeNodes.length > 0) &&
                                         <CatalogNavigationView node={ activeNodes[0] } /> }
                                 </Column> }
-                            <Column size={ !navigationHidden ? 8 : 12 } overflow="hidden" className="ms-1">
+                            <Column size={ !navigationHidden ? 8 : 12 } overflow="hidden" className="ms-n1">
                                 { GetCatalogLayout(currentPage, () => setNavigationHidden(true)) }
                             </Column>
                         </Grid>

From 2f5d146478acf67a5cf0edf03d037864b60c28dc Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Wed, 27 Sep 2023 21:10:28 +0200
Subject: [PATCH 127/134] Fix localStorage by dank074

---
 src/api/utils/GetLocalStorage.ts                       |  2 +-
 src/common/draggable-window/DraggableWindow.tsx        |  2 +-
 src/components/avatar-editor/AvatarEditorView.tsx      |  6 +++---
 .../room/widgets/room-tools/RoomToolsWidgetView.tsx    | 10 +++++-----
 4 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/api/utils/GetLocalStorage.ts b/src/api/utils/GetLocalStorage.ts
index 769df6d7a..66faf54ff 100644
--- a/src/api/utils/GetLocalStorage.ts
+++ b/src/api/utils/GetLocalStorage.ts
@@ -2,7 +2,7 @@ export const GetLocalStorage = <T>(key: string) =>
 {
     try
     {
-        JSON.parse(window.localStorage.getItem(key)) as T ?? null
+        return JSON.parse(window.localStorage.getItem(key)) as T ?? null
     }
     catch(e)
     {
diff --git a/src/common/draggable-window/DraggableWindow.tsx b/src/common/draggable-window/DraggableWindow.tsx
index 8dd290b38..b96ded0ea 100644
--- a/src/common/draggable-window/DraggableWindow.tsx
+++ b/src/common/draggable-window/DraggableWindow.tsx
@@ -253,7 +253,7 @@ export const DraggableWindow: FC<DraggableWindowProps> = props =>
     {
         if(!uniqueKey) return;
 
-        const localStorage = JSON.parse(window.localStorage.getItem(`nitro.windows.${ uniqueKey }`)) as WindowSaveOptions;
+        const localStorage = GetLocalStorage(`nitro.windows.${ uniqueKey }`) as WindowSaveOptions;
 
         if(!localStorage || !localStorage.offset) return;
 
diff --git a/src/components/avatar-editor/AvatarEditorView.tsx b/src/components/avatar-editor/AvatarEditorView.tsx
index 73ec044e2..c15bfe180 100644
--- a/src/components/avatar-editor/AvatarEditorView.tsx
+++ b/src/components/avatar-editor/AvatarEditorView.tsx
@@ -1,7 +1,7 @@
 import { AvatarEditorFigureCategory, FigureSetIdsMessageEvent, GetWardrobeMessageComposer, IAvatarFigureContainer, ILinkEventTracker, SetClothingChangeDataMessageComposer, UserFigureComposer, UserWardrobePageEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { FaDice, FaTrash, FaUndo } from 'react-icons/fa';
-import { AddEventLinkTracker, AvatarEditorAction, AvatarEditorUtilities, BodyModel, FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetSessionDataManager, HeadModel, IAvatarEditorCategoryModel, LegModel, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, SetLocalStorage, TorsoModel, generateRandomFigure } from '../../api';
+import { AddEventLinkTracker, AvatarEditorAction, AvatarEditorUtilities, BodyModel, FigureData, GetAvatarRenderManager, GetClubMemberLevel, GetConfiguration, GetLocalStorage, GetSessionDataManager, HeadModel, IAvatarEditorCategoryModel, LegModel, LocalizeText, RemoveLinkEventTracker, SendMessageComposer, SetLocalStorage, TorsoModel, generateRandomFigure } from '../../api';
 import { Button, ButtonGroup, Column, Flex, Grid, NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../common';
 import { useMessageEvent } from '../../hooks';
 import { AvatarEditorFigurePreviewView } from './views/AvatarEditorFigurePreviewView';
@@ -29,8 +29,8 @@ export const AvatarEditorView: FC<{}> = props =>
     const [ genderFootballGate, setGenderFootballGate ] = useState<string>(null);
     const [ objectFootballGate, setObjectFootballGate ] = useState<number>(null);
     
-    const DEFAULT_MALE_FOOTBALL_GATE = JSON.parse(window.localStorage.getItem('nitro.look.footballgate.M')) || 'ch-3109-92-1408.lg-3116-82-1408.sh-3115-1408-1408';
-    const DEFAULT_FEMALE_FOOTBALL_GATE = JSON.parse(window.localStorage.getItem('nitro.look.footballgate.F')) || 'ch-3112-1408-1408.lg-3116-71-1408.sh-3115-1408-1408';
+    const DEFAULT_MALE_FOOTBALL_GATE = (GetLocalStorage('nitro.look.footballgate.M') || 'ch-3109-92-1408.lg-3116-82-1408.sh-3115-1408-1408') as string;
+    const DEFAULT_FEMALE_FOOTBALL_GATE = (GetLocalStorage('nitro.look.footballgate.F') || 'ch-3112-1408-1408.lg-3116-71-1408.sh-3115-1408-1408') as string;
     const maxWardrobeSlots = useMemo(() => GetConfiguration<number>('avatar.wardrobe.max.slots', 10), []);
 	
     const onClose = () =>
diff --git a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
index ccd8d44da..0ab4b4d6e 100644
--- a/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
+++ b/src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx
@@ -1,6 +1,6 @@
 import { GetGuestRoomResultEvent, NavigatorSearchComposer, RateFlatMessageComposer, RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { CreateLinkEvent, GetRoomEngine, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api';
+import { CreateLinkEvent, GetLocalStorage, GetRoomEngine, LocalizeText, SendMessageComposer, SetLocalStorage, TryVisitRoom } from '../../../../api';
 import { Base, Column, Flex, Text, TransitionAnimation, TransitionAnimationTypes, classNames } from '../../../../common';
 import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
 
@@ -64,8 +64,8 @@ export const RoomToolsWidgetView: FC<{}> = props =>
 
     const onChangeRoomHistory = (roomId: number, roomName: string) =>
     {
-        let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history'));
-
+        let newStorage = GetLocalStorage('nitro.room.history') as { roomId: number, roomName: string }[];
+        
         if (newStorage && newStorage.filter( (room: RoomDataParser) => room.roomId === roomId ).length > 0) return;
 
         if (newStorage && newStorage.length >= 10) newStorage.shift();
@@ -93,7 +93,7 @@ export const RoomToolsWidgetView: FC<{}> = props =>
     {
         const handleTabClose = () => 
         {
-            if (JSON.parse(window.localStorage.getItem('nitro.room.history'))) window.localStorage.removeItem('nitro.room.history');
+            if (GetLocalStorage('nitro.room.history')) window.localStorage.removeItem('nitro.room.history');
         };
     
         window.addEventListener('beforeunload', handleTabClose);
@@ -115,7 +115,7 @@ export const RoomToolsWidgetView: FC<{}> = props =>
 
     useEffect(() =>
     {
-        setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history')) ?? []);
+        setRoomHistory(GetLocalStorage('nitro.room.history') ?? []);
     }, [ ]);
 
     return (

From 971afd303ea8492a7f9d3d3beec4c3d54b1112b6 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Wed, 27 Sep 2023 21:20:11 +0200
Subject: [PATCH 128/134] Fix #93 - CatalogView by duckietm

---
 src/components/catalog/CatalogView.tsx | 34 ++++++++++++++------------
 1 file changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/components/catalog/CatalogView.tsx b/src/components/catalog/CatalogView.tsx
index 2a0f39b3b..2234ee158 100644
--- a/src/components/catalog/CatalogView.tsx
+++ b/src/components/catalog/CatalogView.tsx
@@ -10,20 +10,20 @@ import { CatalogHeaderView } from './views/page/common/CatalogHeaderView';
 import { GetCatalogLayout } from './views/page/layout/GetCatalogLayout';
 import { MarketplacePostOfferView } from './views/page/layout/marketplace/MarketplacePostOfferView';
 
-export const CatalogView: FC<{}> = props =>
+export const CatalogView: FC<{}> = props => 
 {
     const { isVisible = false, setIsVisible = null, rootNode = null, currentPage = null, navigationHidden = false, setNavigationHidden = null, activeNodes = [], searchResult = null, setSearchResult = null, openPageByName = null, openPageByOfferId = null, activateNode = null, getNodeById } = useCatalog();
 
-    useEffect(() =>
+    useEffect(() => 
     {
         const linkTracker: ILinkEventTracker = {
-            linkReceived: (url: string) =>
+            linkReceived: (url: string) => 
             {
                 const parts = url.split('/');
-        
+
                 if(parts.length < 2) return;
-        
-                switch(parts[1])
+
+                switch(parts[1]) 
                 {
                     case 'show':
                         setIsVisible(true);
@@ -35,27 +35,27 @@ export const CatalogView: FC<{}> = props =>
                         setIsVisible(prevValue => !prevValue);
                         return;
                     case 'open':
-                        if(parts.length > 2)
+                        if(parts.length > 2) 
                         {
-                            if(parts.length === 4)
+                            if(parts.length === 4) 
                             {
-                                switch(parts[2])
+                                switch(parts[2]) 
                                 {
                                     case 'offerId':
                                         openPageByOfferId(parseInt(parts[3]));
                                         return;
                                 }
                             }
-                            else
+                            else 
                             {
                                 openPageByName(parts[2]);
                             }
                         }
-                        else
+                        else 
                         {
                             setIsVisible(true);
                         }
-        
+
                         return;
                 }
             },
@@ -73,15 +73,17 @@ export const CatalogView: FC<{}> = props =>
                 <NitroCardView uniqueKey="catalog" className="nitro-catalog" style={ GetConfiguration('catalog.headers') ? { width: 710 } : {} }>
                     <NitroCardHeaderView headerText={ LocalizeText('catalog.title') } onCloseClick={ event => setIsVisible(false) } />
                     <NitroCardTabsView subClassName="w-100">
-                        { rootNode && (rootNode.children.length > 0) && rootNode.children.map(child =>
+                        { rootNode && (rootNode.children.length > 0) && rootNode.children.map((child, index) =>
                         {
                             if(!child.isVisible) return null;
-
+                            
+                            // Generate a unique key using the index of the map function
+                            const uniqueKey = `${ child.pageId }-${ index }`;
+                            
                             return (
-                                <NitroCardTabsItemView key={ child.pageId } isActive={ child.isActive } onClick={ event =>
+                                <NitroCardTabsItemView key={ uniqueKey } isActive={ child.isActive } onClick={ event => 
                                 {
                                     if(searchResult) setSearchResult(null);
-
                                     activateNode(child);
                                 } } >
                                     <Flex gap={ GetConfiguration('catalog.tab.icons') ? 1 : 0 } alignItems="center">

From 284e89d9239225caf98458cfb189b435fa740baa Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Wed, 27 Sep 2023 21:30:22 +0200
Subject: [PATCH 129/134]  Fix #93 - HotelView background size by duckietm

---
 src/components/hotel-view/HotelView.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/hotel-view/HotelView.scss b/src/components/hotel-view/HotelView.scss
index d3e56b8f8..39d451b2e 100644
--- a/src/components/hotel-view/HotelView.scss
+++ b/src/components/hotel-view/HotelView.scss
@@ -19,6 +19,7 @@
 		width: 100%;
 		background-position: left;
 		background-repeat: repeat-x;
+		background-size: contain;
 	}
 
 	.drape {

From df4397511b074d7c6d1682ba8d589753725e9768 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Wed, 27 Sep 2023 22:53:21 +0200
Subject: [PATCH 130/134] Messenger Friends - FollowFriendFailedEvent added

---
 .../MessengerFollowFriendFailedType.ts        |  7 +++++
 src/api/friends/index.ts                      |  1 +
 .../views/messenger/FriendsMessengerView.tsx  | 30 +++++++++++++++++--
 3 files changed, 35 insertions(+), 3 deletions(-)
 create mode 100644 src/api/friends/MessengerFollowFriendFailedType.ts

diff --git a/src/api/friends/MessengerFollowFriendFailedType.ts b/src/api/friends/MessengerFollowFriendFailedType.ts
new file mode 100644
index 000000000..3450bbcfd
--- /dev/null
+++ b/src/api/friends/MessengerFollowFriendFailedType.ts
@@ -0,0 +1,7 @@
+export class MessengerFollowFriendFailedType
+{
+    public static readonly NOT_IN_FRIEND_LIST = 0;
+    public static readonly FRIEND_OFFLINE = 1;
+    public static readonly FRIEND_NOT_IN_ROOM = 2;
+    public static readonly FRIEND_BLOCKED_STALKING = 3;
+}
diff --git a/src/api/friends/index.ts b/src/api/friends/index.ts
index 9779d5c9f..2f78f8daf 100644
--- a/src/api/friends/index.ts
+++ b/src/api/friends/index.ts
@@ -1,6 +1,7 @@
 export * from './FriendListTabs';
 export * from './GetGroupChatData';
 export * from './IGroupChatData';
+export * from './MessengerFollowFriendFailedType';
 export * from './MessengerFriend';
 export * from './MessengerGroupType';
 export * from './MessengerIconState';
diff --git a/src/components/friends/views/messenger/FriendsMessengerView.tsx b/src/components/friends/views/messenger/FriendsMessengerView.tsx
index ff6e8f73f..5eee7a4cc 100644
--- a/src/components/friends/views/messenger/FriendsMessengerView.tsx
+++ b/src/components/friends/views/messenger/FriendsMessengerView.tsx
@@ -1,9 +1,9 @@
-import { FollowFriendMessageComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
+import { FollowFriendFailedEvent, FollowFriendMessageComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, KeyboardEvent, useEffect, useRef, useState } from 'react';
-import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, ReportType, SendMessageComposer } from '../../../../api';
+import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, MessengerFollowFriendFailedType, RemoveLinkEventTracker, ReportType, SendMessageComposer } from '../../../../api';
 import { ButtonGroup, Column, Flex, LayoutAvatarImageView, LayoutBadgeImageView, LayoutItemCountView, NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../common';
 import { LayoutMessengerGrid } from '../../../../common/layout/LayoutMessengerGrid';
-import { useHelp, useMessenger } from '../../../../hooks';
+import { useHelp, useMessageEvent, useMessenger, useNotification } from '../../../../hooks';
 import { FriendsMessengerThreadView } from './messenger-thread/FriendsMessengerThreadView';
 
 export const FriendsMessengerView: FC<{}> = props =>
@@ -12,6 +12,7 @@ export const FriendsMessengerView: FC<{}> = props =>
     const [ lastThreadId, setLastThreadId ] = useState(-1);
     const [ messageText, setMessageText ] = useState('');
     const { visibleThreads = [], activeThread = null, getMessageThread = null, sendMessage = null, setActiveThreadId = null, closeThread = null } = useMessenger();
+    const { simpleAlert = null } = useNotification();
     const { report = null } = useHelp();
     const messagesBox = useRef<HTMLDivElement>();
 
@@ -34,6 +35,29 @@ export const FriendsMessengerView: FC<{}> = props =>
         send();
     }
 
+    useMessageEvent<FollowFriendFailedEvent>(FollowFriendFailedEvent, event =>
+    {
+        const parser = event.getParser();
+
+        if (!parser) return null;
+
+        switch(parser.errorCode)
+        {
+            case MessengerFollowFriendFailedType.NOT_IN_FRIEND_LIST:
+                simpleAlert(LocalizeText('friendlist.followerror.notfriend'), null, null, null, LocalizeText('friendlist.alert.title'), null);
+                break;
+            case MessengerFollowFriendFailedType.FRIEND_OFFLINE:
+                simpleAlert(LocalizeText('friendlist.followerror.offline'), null, null, null, LocalizeText('friendlist.alert.title'), null);
+                break;
+            case MessengerFollowFriendFailedType.FRIEND_NOT_IN_ROOM:
+                simpleAlert(LocalizeText('friendlist.followerror.hotelview'), null, null, null, LocalizeText('friendlist.alert.title'), null);
+                break;
+            case MessengerFollowFriendFailedType.FRIEND_BLOCKED_STALKING:
+                simpleAlert(LocalizeText('friendlist.followerror.prevented'), null, null, null, LocalizeText('friendlist.alert.title'), null);
+                break;
+        }
+    });
+
     useEffect(() =>
     {
         const linkTracker: ILinkEventTracker = {

From 0f2a548ef93767644c5252a6a8bfe41f04048eb6 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Sun, 1 Oct 2023 18:56:29 +0200
Subject: [PATCH 131/134] Camera - NotEnoughBalanceMessageEvent added & show
 alert wait after published

---
 .../camera/views/CameraWidgetCheckoutView.tsx | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/components/camera/views/CameraWidgetCheckoutView.tsx b/src/components/camera/views/CameraWidgetCheckoutView.tsx
index 7f0b9cc71..32b0d822c 100644
--- a/src/components/camera/views/CameraWidgetCheckoutView.tsx
+++ b/src/components/camera/views/CameraWidgetCheckoutView.tsx
@@ -1,8 +1,8 @@
-import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, CameraStorageUrlMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer';
+import { CameraPublishStatusMessageEvent, CameraPurchaseOKMessageEvent, CameraStorageUrlMessageEvent, NotEnoughBalanceMessageEvent, PublishPhotoMessageComposer, PurchasePhotoMessageComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useMemo, useState } from 'react';
 import { CreateLinkEvent, GetConfiguration, GetRoomEngine, LocalizeText, SendMessageComposer } from '../../../api';
 import { Button, Column, Flex, LayoutCurrencyIcon, LayoutImage, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
-import { useMessageEvent } from '../../../hooks';
+import { useMessageEvent, useNotification } from '../../../hooks';
 
 export interface CameraWidgetCheckoutViewProps
 {
@@ -21,6 +21,7 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
     const [ wasPicturePublished, setWasPicturePublished ] = useState(false);
     const [ isWaiting, setIsWaiting ] = useState(false);
     const [ publishCooldown, setPublishCooldown ] = useState(0);
+    const { simpleAlert } = useNotification();
 
     const publishDisabled = useMemo(() => GetConfiguration<boolean>('camera.publish.disabled', false), []);
 
@@ -34,6 +35,8 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
     {
         const parser = event.getParser();
 
+        if (!parser.ok) simpleAlert(LocalizeText('camera.publish.wait', [ 'minutes' ], [ Math.floor(parser.secondsToWait / 60).toString().replace('-', '') ]), null, null, null, LocalizeText('camera.purchase.pleasewait'));
+
         setPublishUrl(parser.extraDataId);
         setPublishCooldown(parser.secondsToWait);
         setWasPicturePublished(parser.ok);
@@ -47,6 +50,19 @@ export const CameraWidgetCheckoutView: FC<CameraWidgetCheckoutViewProps> = props
         setPictureUrl(GetConfiguration<string>('camera.url') + '/' + parser.url);
     });
 
+    useMessageEvent<NotEnoughBalanceMessageEvent>(NotEnoughBalanceMessageEvent, event =>
+    {
+        const parser = event.getParser();
+        
+        if (!parser) return null;
+
+        if (parser.notEnoughCredits && !parser.notEnoughActivityPoints) simpleAlert(LocalizeText('catalog.alert.notenough.credits.description'), null, null, null, LocalizeText('catalog.alert.notenough.title'));
+        
+        if (!parser.notEnoughCredits && parser.notEnoughActivityPoints) simpleAlert(LocalizeText(`catalog.alert.notenough.activitypoints.description.${ parser.activityPointType }`), null, null, null, LocalizeText(`catalog.alert.notenough.activitypoints.title.${ parser.activityPointType }`));
+        
+        setIsWaiting(false);
+    });
+
     const processAction = (type: string, value: string | number = null) =>
     {
         switch(type)

From cd6f149d92d701a35b35483c8fd871e7c37345ff Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Sun, 1 Oct 2023 19:31:11 +0200
Subject: [PATCH 132/134] Group Members - GuildMemberMgmtFailedMessageEvent
 added

---
 src/components/groups/views/GroupMembersView.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/groups/views/GroupMembersView.tsx b/src/components/groups/views/GroupMembersView.tsx
index 317bbcc3a..15c0705b9 100644
--- a/src/components/groups/views/GroupMembersView.tsx
+++ b/src/components/groups/views/GroupMembersView.tsx
@@ -1,4 +1,4 @@
-import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, ILinkEventTracker } from '@nitrots/nitro-renderer';
+import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, GuildMemberMgmtFailedMessageEvent, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../../api';
@@ -14,7 +14,7 @@ export const GroupMembersView: FC<{}> = props =>
     const [ totalPages, setTotalPages ] = useState<number>(0);
     const [ searchQuery, setSearchQuery ] = useState<string>('');
     const [ removingMemberName, setRemovingMemberName ] = useState<string>(null);
-    const { showConfirm = null } = useNotification();
+    const { showConfirm = null, simpleAlert = null } = useNotification();
 
     const getRankDescription = (member: GroupMemberParser) =>
     {
@@ -96,6 +96,17 @@ export const GroupMembersView: FC<{}> = props =>
         setRemovingMemberName(null);
     });
 
+    useMessageEvent<GuildMemberMgmtFailedMessageEvent>(GuildMemberMgmtFailedMessageEvent, event =>
+    {
+        const parser = event.getParser();
+
+        if (!parser) return null;
+
+        simpleAlert(LocalizeText(`group.membermgmt.fail.${ parser.reason }`), null, null, null, LocalizeText('group.membermgmt.fail.title'));
+
+        refreshMembers();
+    });
+
     useEffect(() =>
     {
         const linkTracker: ILinkEventTracker = {

From ab9ab9dc7ede62d1673c8f7df7f0c2c59165d682 Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Sun, 1 Oct 2023 19:59:43 +0200
Subject: [PATCH 133/134] Group creator - GuildEditFailedMessageEvent added

---
 .../groups/views/GroupCreatorView.tsx          | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/groups/views/GroupCreatorView.tsx b/src/components/groups/views/GroupCreatorView.tsx
index 7f75b0535..bef485ae3 100644
--- a/src/components/groups/views/GroupCreatorView.tsx
+++ b/src/components/groups/views/GroupCreatorView.tsx
@@ -1,8 +1,8 @@
-import { GroupBuyComposer, GroupBuyDataComposer, GroupBuyDataEvent } from '@nitrots/nitro-renderer';
+import { GroupBuyComposer, GroupBuyDataComposer, GroupBuyDataEvent, GuildEditFailedMessageEvent, HabboClubLevelEnum } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { HasHabboClub, IGroupData, LocalizeText, SendMessageComposer } from '../../../api';
+import { CreateLinkEvent, GetSessionDataManager, HasHabboClub, IGroupData, LocalizeText, SendMessageComposer } from '../../../api';
 import { Base, Button, Column, Flex, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
-import { useMessageEvent } from '../../../hooks';
+import { useMessageEvent, useNotification } from '../../../hooks';
 import { GroupTabBadgeView } from './tabs/GroupTabBadgeView';
 import { GroupTabColorsView } from './tabs/GroupTabColorsView';
 import { GroupTabCreatorConfirmationView } from './tabs/GroupTabCreatorConfirmationView';
@@ -23,6 +23,7 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
     const [ groupData, setGroupData ] = useState<IGroupData>(null);
     const [ availableRooms, setAvailableRooms ] = useState<{ id: number, name: string }[]>(null);
     const [ purchaseCost, setPurchaseCost ] = useState<number>(0);
+    const { simpleAlert = null } = useNotification();
 
     const onCloseClose = () =>
     {
@@ -97,6 +98,17 @@ export const GroupCreatorView: FC<GroupCreatorViewProps> = props =>
         setPurchaseCost(parser.groupCost);
     });
 
+    useMessageEvent<GuildEditFailedMessageEvent>(GuildEditFailedMessageEvent, event =>
+    {
+        const parser = event.getParser();
+        
+        if (!parser) return null;
+
+        GetSessionDataManager().clubLevel === HabboClubLevelEnum.NO_CLUB 
+            ? CreateLinkEvent('habboUI/open/hccenter')
+            : simpleAlert(LocalizeText(`group.edit.fail.${ parser.reason }`), null, null, null, LocalizeText('group.edit.fail.title'));
+    });
+
     useEffect(() =>
     {
         setCurrentTab(1);

From 0024d9c7a5d26006de869cdafab58649c9c7b95b Mon Sep 17 00:00:00 2001
From: object <110488133+oobjectt@users.noreply.github.com>
Date: Sun, 1 Oct 2023 20:20:01 +0200
Subject: [PATCH 134/134] Group members - HabboGroupJoinFailedMessageEvent
 added

---
 src/components/groups/views/GroupMembersView.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/groups/views/GroupMembersView.tsx b/src/components/groups/views/GroupMembersView.tsx
index 15c0705b9..d6022880f 100644
--- a/src/components/groups/views/GroupMembersView.tsx
+++ b/src/components/groups/views/GroupMembersView.tsx
@@ -1,7 +1,7 @@
-import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, GuildMemberMgmtFailedMessageEvent, ILinkEventTracker } from '@nitrots/nitro-renderer';
+import { GroupAdminGiveComposer, GroupAdminTakeComposer, GroupConfirmMemberRemoveEvent, GroupConfirmRemoveMemberComposer, GroupMemberParser, GroupMembersComposer, GroupMembersEvent, GroupMembershipAcceptComposer, GroupMembershipDeclineComposer, GroupMembersParser, GroupRank, GroupRemoveMemberComposer, GuildMemberMgmtFailedMessageEvent, HabboGroupJoinFailedMessageEvent, HabboGroupJoinFailedMessageParser, ILinkEventTracker } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
-import { AddEventLinkTracker, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../../api';
+import { AddEventLinkTracker, CreateLinkEvent, GetSessionDataManager, GetUserProfile, LocalizeText, RemoveLinkEventTracker, SendMessageComposer } from '../../../api';
 import { Base, Button, Column, Flex, Grid, LayoutAvatarImageView, LayoutBadgeImageView, NitroCardContentView, NitroCardHeaderView, NitroCardView, Text } from '../../../common';
 import { useMessageEvent, useNotification } from '../../../hooks';
 
@@ -107,6 +107,17 @@ export const GroupMembersView: FC<{}> = props =>
         refreshMembers();
     });
 
+    useMessageEvent<HabboGroupJoinFailedMessageEvent>(HabboGroupJoinFailedMessageEvent, event =>
+    {
+        const parser = event.getParser();
+
+        if (!parser) return null;
+
+        parser.reason == HabboGroupJoinFailedMessageParser.INSUFFICIENT_SUBSCRIPTION_LEVEL 
+            ? CreateLinkEvent('habboUI/open/hccenter')
+            : simpleAlert(LocalizeText(`group.joinfail.${ parser.reason }`), null, null, null, LocalizeText('group.joinfail.title'));
+    });
+
     useEffect(() =>
     {
         const linkTracker: ILinkEventTracker = {