From 7c013379844f10450f4bcf4c3b6d14a283f3f7eb Mon Sep 17 00:00:00 2001
From: duckietm <troop@mailtjes.com>
Date: Tue, 3 Mar 2026 09:12:12 +0100
Subject: [PATCH] :up: Fix Room Settings / HC now hidden when not HC and small
 fixes

---
 src/common/card/NitroCardHeaderView.tsx       |   7 +-
 .../NavigatorRoomSettingsAccessTabView.tsx    |  90 +++++++--------
 .../NavigatorRoomSettingsBasicTabView.tsx     |  83 +++++++------
 .../NavigatorRoomSettingsModTabView.tsx       |  46 ++++----
 .../NavigatorRoomSettingsRightsTabView.tsx    | 109 +++++++++++++++---
 .../NavigatorRoomSettingsView.tsx             |   4 +-
 .../NavigatorRoomSettingsVipChatTabView.tsx   |  21 ++--
 7 files changed, 221 insertions(+), 139 deletions(-)

diff --git a/src/common/card/NitroCardHeaderView.tsx b/src/common/card/NitroCardHeaderView.tsx
index 5734567..8bb354c 100644
--- a/src/common/card/NitroCardHeaderView.tsx
+++ b/src/common/card/NitroCardHeaderView.tsx
@@ -7,13 +7,15 @@ interface NitroCardHeaderViewProps extends ColumnProps
     headerText: string;
     isGalleryPhoto?: boolean;
     noCloseButton?: boolean;
+    isInfoToHabboPages?: 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, onReportPhoto = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
+    const { headerText = null, isGalleryPhoto = false, noCloseButton = false, isInfoToHabboPages = false, onReportPhoto = null, onClickInfoHabboPages = null, onCloseClick = null, justifyContent = 'center', alignItems = 'center', classNames = [], children = null, ...rest } = props;
 
 
 
@@ -32,6 +34,9 @@ export const NitroCardHeaderView: FC<NitroCardHeaderViewProps> = props =>
                         <FaFlag className="fa-icon" />
                     </Base>
                 }
+                { isInfoToHabboPages &&
+                    <Base className="absolute right-8 nitro-card-header-info-habbopages cursor-pointer" position="absolute" onClick={ onClickInfoHabboPages } />
+                }
                 <div className="absolute flex items-center justify-center cursor-pointer right-2 p-[2px] ubuntu-close-button" onClick={ onCloseClick } onMouseDownCapture={ onMouseDown }>
                 </div>
 
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
index 66385c4..57ae347 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsAccessTabView.tsx
@@ -1,7 +1,7 @@
 import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { IRoomData, LocalizeText } from '../../../../api';
-import { Text } from '../../../../common';
+import { Column, Flex, Text } from '../../../../common';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -21,7 +21,7 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
         if(!isTryingPassword || ((password.length <= 0) || (confirmPassword.length <= 0) || (password !== confirmPassword))) return;
 
         handleChange('password', password);
-    };
+    }
 
     useEffect(() =>
     {
@@ -32,57 +32,57 @@ export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabView
 
     return (
         <>
-            <div className="flex flex-col gap-1">
-                <Text small bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
-                <Text small>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
-            </div>
-            <div className="overflow-auto">
-                <div className="flex flex-col gap-1">
-                    <Text small bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
-                    <div className="flex items-center gap-1">
-                        <input checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
-                        <Text small>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
-                    </div>
-                    <div className="flex items-center gap-1">
-                        <input checked={ (roomData.lockState === RoomDataParser.DOORBELL_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.DOORBELL_STATE) } />
-                        <Text small>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
-                    </div>
-                    <div className="flex items-center gap-1">
-                        <input checked={ (roomData.lockState === RoomDataParser.INVISIBLE_STATE) && !isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => handleChange('lock_state', RoomDataParser.INVISIBLE_STATE) } />
-                        <Text small>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
-                    </div>
-                    <div className="flex w-full gap-1">
-                        <input checked={ (roomData.lockState === RoomDataParser.PASSWORD_STATE) || isTryingPassword } className="form-check-input" name="lockState" type="radio" onChange={ event => setIsTryingPassword(event.target.checked) } />
+            <Column gap={ 1 }>
+                <Text bold>{ LocalizeText('navigator.roomsettings.roomaccess.caption') }</Text>
+                <Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
+            </Column>
+            <Column overflow="auto">
+                <Column gap={ 1 }>
+                    <Text bold>{ LocalizeText('navigator.roomsettings.doormode') }</Text>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.OPEN_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.OPEN_STATE) } />
+                        <Text>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
+                    </Flex>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.DOORBELL_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.DOORBELL_STATE) } />
+                        <Text>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
+                    </Flex>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.INVISIBLE_STATE) && !isTryingPassword } onChange={ event => handleChange('lock_state', RoomDataParser.INVISIBLE_STATE) } />
+                        <Text>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
+                    </Flex>
+                    <Flex fullWidth gap={ 1 }>
+                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomData.lockState === RoomDataParser.PASSWORD_STATE) || isTryingPassword } onChange={ event => setIsTryingPassword(event.target.checked) } />
                         { !isTryingPassword && (roomData.lockState !== RoomDataParser.PASSWORD_STATE) &&
-                            <Text small>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
+                            <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
                         { (isTryingPassword || (roomData.lockState === RoomDataParser.PASSWORD_STATE)) &&
-                            <div className="flex flex-col gap-1">
-                                <Text small>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
-                                <input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.password') } type="password" value={ password } onChange={ event => setPassword(event.target.value) } onFocus={ event => setIsTryingPassword(true) } />
+                            <Column gap={ 1 }>
+                                <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
+                                <input type="password" className="form-control form-control-sm col-4" value={ password } onChange={ event => setPassword(event.target.value) } placeholder={ LocalizeText('navigator.roomsettings.password') } onFocus={ event => setIsTryingPassword(true) } />
                                 { isTryingPassword && (password.length <= 0) &&
-                                    <Text small bold variant="danger">
+                                    <Text bold small variant="danger">
                                         { LocalizeText('navigator.roomsettings.passwordismandatory') }
                                     </Text> }
-                                <input className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm col-span-4" placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } type="password" value={ confirmPassword } onBlur={ saveRoomPassword } onChange={ event => setConfirmPassword(event.target.value) } />
+                                <input type="password" className="form-control form-control-sm col-4" value={ confirmPassword } onChange={ event => setConfirmPassword(event.target.value) } onBlur={ saveRoomPassword } placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } />
                                 { isTryingPassword && ((password.length > 0) && (password !== confirmPassword)) &&
-                                    <Text small bold variant="danger">
+                                    <Text bold small variant="danger">
                                         { LocalizeText('navigator.roomsettings.invalidconfirm') }
                                     </Text> }
-                            </div> }
-                    </div>
-                </div>
-                <div className="flex flex-col gap-1">
-                    <Text small bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
-                    <div className="flex items-center gap-1">
-                        <input checked={ roomData.allowPets } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets', event.target.checked) } />
-                        <Text small>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
-                    </div>
-                    <div className="flex items-center gap-1">
-                        <input checked={ roomData.allowPetsEat } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
-                        <Text small>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
-                    </div>
-                </div>
-            </div>
+                            </Column> }
+                    </Flex>
+                </Column>
+                <Column gap={ 1 }>
+                    <Text bold>{ LocalizeText('navigator.roomsettings.pets') }</Text>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <input className="form-check-input" type="checkbox" checked={ roomData.allowPets } onChange={ event => handleChange('allow_pets', event.target.checked) } />
+                        <Text>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
+                    </Flex>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <input className="form-check-input" type="checkbox" checked={ roomData.allowPetsEat } onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
+                        <Text>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
+                    </Flex>
+                </Column>
+            </Column>
         </>
     );
 };
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
index 88455db..dc4ca42 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsBasicTabView.tsx
@@ -1,10 +1,9 @@
-import { CreateLinkEvent, RoomDeleteComposer, RoomSettingsSaveErrorEvent, RoomSettingsSaveErrorParser } from '@nitrots/nitro-renderer';
+import { RoomDeleteComposer, RoomSettingsSaveErrorEvent, RoomSettingsSaveErrorParser } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { FaTimes } from 'react-icons/fa';
-import { GetMaxVisitorsList, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
-import { Column, Text } from '../../../../common';
+import { CreateLinkEvent, GetMaxVisitorsList, IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
+import { Base, Column, Flex, Text } from '../../../../common';
 import { useMessageEvent, useNavigator, useNotification } from '../../../../hooks';
-import { NitroInput } from '../../../../layout';
 
 const ROOM_NAME_MIN_LENGTH = 3;
 const ROOM_NAME_MAX_LENGTH = 60;
@@ -34,9 +33,9 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
     {
         const parser = event.getParser();
 
-        if(!parser) return;
+        if (!parser) return;
 
-        switch(parser.code)
+        switch (parser.code)
         {
             case RoomSettingsSaveErrorParser.ERROR_INVALID_TAG:
                 setTypeError('navigator.roomsettings.unacceptablewords');
@@ -51,7 +50,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
 
     const deleteRoom = () =>
     {
-        showConfirm(LocalizeText('navigator.roomsettings.deleteroom.confirm.message', [ 'room_name' ], [ roomData.roomName ]), () =>
+        showConfirm(LocalizeText('navigator.roomsettings.deleteroom.confirm.message', [ 'room_name' ], [ roomData.roomName ] ), () =>
         {
             SendMessageComposer(new RoomDeleteComposer(roomData.roomId));
 
@@ -60,21 +59,21 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
             CreateLinkEvent('navigator/search/myworld_view');
         },
         null, null, null, LocalizeText('navigator.roomsettings.deleteroom.confirm.title'));
-    };
+    }
 
     const saveRoomName = () =>
     {
         if((roomName === roomData.roomName) || (roomName.length < ROOM_NAME_MIN_LENGTH) || (roomName.length > ROOM_NAME_MAX_LENGTH)) return;
 
         handleChange('name', roomName);
-    };
+    }
 
     const saveRoomDescription = () =>
     {
         if((roomDescription === roomData.roomDescription) || (roomDescription.length > DESC_MAX_LENGTH)) return;
 
         handleChange('description', roomDescription);
-    };
+    }
 
     const saveTags = (index: number) =>
     {
@@ -87,7 +86,7 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
         setTypeError('');
         setTagIndex(index);
         handleChange('tags', (roomTag1 === '' && roomTag2 !== '') ? [ roomTag2 ] : [ roomTag1, roomTag2 ]);
-    };
+    }
 
     useEffect(() =>
     {
@@ -99,44 +98,44 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
 
     return (
         <>
-            <div className="flex items-center gap-1">
-                <Text small className="col-span-3">{ LocalizeText('navigator.roomname') }</Text>
+            <Flex alignItems="center" gap={ 1 }>
+                <Text className="col-3">{ LocalizeText('navigator.roomname') }</Text>
                 <Column fullWidth gap={ 0 }>
-                    <NitroInput className="form-control-sm" maxLength={ ROOM_NAME_MAX_LENGTH } value={ roomName } onBlur={ saveRoomName } onChange={ event => setRoomName(event.target.value) } />
+                    <input className="form-control form-control-sm" value={ roomName } maxLength={ ROOM_NAME_MAX_LENGTH } onChange={ event => setRoomName(event.target.value) } onBlur={ saveRoomName } />
                     { (roomName.length < ROOM_NAME_MIN_LENGTH) &&
                         <Text bold small variant="danger">
                             { LocalizeText('navigator.roomsettings.roomnameismandatory') }
                         </Text> }
                 </Column>
-            </div>
-            <div className="flex items-center gap-1">
-                <Text small className="col-span-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
-                <textarea className="min-h-[calc(1.5em+ .5rem+2px)] px-[.5rem] py-[.25rem]  rounded-[.2rem] form-control-sm" maxLength={ DESC_MAX_LENGTH } value={ roomDescription } onBlur={ saveRoomDescription } onChange={ event => setRoomDescription(event.target.value) } />
-            </div>
-            <div className="flex items-center gap-1">
-                <Text small className="col-span-3">{ LocalizeText('navigator.category') }</Text>
+            </Flex>
+            <Flex alignItems="center" gap={ 1 }>
+                <Text className="col-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
+                <textarea className="form-control form-control-sm" value={ roomDescription } maxLength={ DESC_MAX_LENGTH } onChange={ event => setRoomDescription(event.target.value) } onBlur={ saveRoomDescription } />
+            </Flex>
+            <Flex alignItems="center" gap={ 1 }>
+                <Text className="col-3">{ LocalizeText('navigator.category') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.categoryId } onChange={ event => handleChange('category', event.target.value) }>
                     { categories && categories.map(category => <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>) }
                 </select>
-            </div>
-            <div className="flex items-center gap-1">
-                <Text small className="col-span-3">{ LocalizeText('navigator.maxvisitors') }</Text>
+            </Flex>
+            <Flex alignItems="center" gap={ 1 }>
+                <Text className="col-3">{ LocalizeText('navigator.maxvisitors') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.userCount } onChange={ event => handleChange('max_visitors', event.target.value) }>
                     { GetMaxVisitorsList && GetMaxVisitorsList.map(value => <option key={ value } value={ value }>{ value }</option>) }
                 </select>
-            </div>
-            <div className="flex items-center gap-0">
-                <Text small className="col-span-3">{ LocalizeText('navigator.tradesettings') }</Text>
+            </Flex>
+            <Flex alignItems="center" gap={ 1 }>
+                <Text className="col-3">{ LocalizeText('navigator.tradesettings') }</Text>
                 <select className="form-select form-select-sm" value={ roomData.tradeState } onChange={ event => handleChange('trade_state', event.target.value) }>
                     <option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
                     <option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option>
                     <option value="2">{ LocalizeText('navigator.roomsettings.trade_allowed') }</option>
                 </select>
-            </div>
-            <div className="flex items-center gap-1">
-                <Text small className="col-span-3">{ LocalizeText('navigator.tags') }</Text>
+            </Flex>
+            <Flex alignItems="center" gap={ 1 }>
+                <Text className="col-3">{ LocalizeText('navigator.tags') }</Text>
                 <Column fullWidth gap={ 0 }>
-                    <NitroInput className="form-control-sm" value={ roomTag1 } onBlur={ () => saveTags(0) } onChange={ event => setRoomTag1(event.target.value) } />
+                    <input className="form-control form-control-sm" value={ roomTag1 } onChange={ event => setRoomTag1(event.target.value) } onBlur={ () => saveTags(0) } />
                     { (roomTag1.length > TAGS_MAX_LENGTH) &&
                         <Text bold small variant="danger">
                             { LocalizeText('navigator.roomsettings.toomanycharacters') }
@@ -147,23 +146,23 @@ export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewP
                         </Text> }
                 </Column>
                 <Column fullWidth gap={ 0 }>
-                    <NitroInput className="form-control-sm" value={ roomTag2 } onBlur={ () => saveTags(1) } onChange={ event => setRoomTag2(event.target.value) } />
+                    <input className="form-control form-control-sm" value={ roomTag2 } onChange={ event => setRoomTag2(event.target.value) } onBlur={ () => saveTags(1) } />
                     { (roomTag2.length > TAGS_MAX_LENGTH) &&
                         <Text bold small variant="danger">
                             { LocalizeText('navigator.roomsettings.toomanycharacters') }
                         </Text> }
                     { (tagIndex === 1 && typeError != '') &&
-                        <Text bold small variant="danger">
-                            { LocalizeText(typeError) }
-                        </Text> }
+                    <Text bold small variant="danger">
+                        { LocalizeText(typeError) }
+                    </Text> }
                 </Column>
-            </div>
-            <div className="flex items-center gap-1">
-                <div className="col-span-1" />
-                <input checked={ roomData.allowWalkthrough } className="form-check-input" type="checkbox" onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
-                <Text small>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
-            </div>
-            <Text small bold pointer underline className="flex items-center justify-center gap-1" variant="danger" onClick={ deleteRoom }>
+            </Flex>
+            <Flex alignItems="center" gap={ 1 }>
+                <Base className="col-3" />
+                <input className="form-check-input" type="checkbox" checked={ roomData.allowWalkthrough } onChange={ event => handleChange('allow_walkthrough', event.target.checked) } />
+                <Text>{ LocalizeText('navigator.roomsettings.allow_walk_through') }</Text>
+            </Flex>
+            <Text variant="danger" underline bold pointer className="d-flex justify-content-center align-items-center gap-1" onClick={ deleteRoom }>
                 <FaTimes className="fa-icon" />
                 { LocalizeText('navigator.roomsettings.delete') }
             </Text>
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
index 9a00f94..36206a7 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsModTabView.tsx
@@ -27,12 +27,12 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
             if(index >= 0) newValue.splice(index, 1);
 
             return newValue;
-        });
+        })
 
         SendMessageComposer(new RoomUnbanUserComposer(userId, roomData.roomId));
 
         setSelectedUserId(-1);
-    };
+    }
 
     useMessageEvent<BannedUsersFromRoomEvent>(BannedUsersFromRoomEvent, event =>
     {
@@ -51,15 +51,15 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
     return (
         <Grid overflow="auto">
             <Column size={ 6 }>
-                <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
-                <Flex className="bg-white rounded list-container p-2" overflow="hidden">
-                    <Column fullWidth gap={ 1 } overflow="auto">
+                <Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ bannedUsers.length })</Text>
+                <Flex overflow="hidden" className="bg-white rounded list-container p-2">
+                    <Column fullWidth overflow="auto" gap={ 1 }>
                         { bannedUsers && (bannedUsers.length > 0) && bannedUsers.map((user, index) =>
                         {
                             return (
                                 <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
-                                    <UserProfileIconView userName={ user.userName } />
-                                    <Text small grow pointer onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
+                                    <UserProfileIconView userName={ user.userId } />
+                                    <Text pointer grow onClick={ event => setSelectedUserId(user.userId) }> { user.userName }</Text>
                                 </Flex>
                             );
                         }) }
@@ -70,9 +70,9 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                 </Button>
             </Column>
             <Column size={ 6 }>
-                <div className="flex flex-col gap-1">
-                    <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
-                    <div className="flex items-center gap-1">
+                <Column gap={ 1 }>
+                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
+                    <Flex alignItems="center" gap={ 1 }>
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowMute } onChange={ event => handleChange('moderation_mute', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
                                 { LocalizeText('navigator.roomsettings.moderation.none') }
@@ -81,11 +81,11 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.rights') }
                             </option>
                         </select>
-                    </div>
-                </div>
-                <div className="flex flex-col gap-1">
-                    <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
-                    <div className="flex items-center gap-1">
+                    </Flex>
+                </Column>
+                <Column gap={ 1 }>
+                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.kick.header') }</Text>
+                    <Flex alignItems="center" gap={ 1 }>
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowKick } onChange={ event => handleChange('moderation_kick', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
                                 { LocalizeText('navigator.roomsettings.moderation.none') }
@@ -97,11 +97,11 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.all') }
                             </option>
                         </select>
-                    </div>
-                </div>
-                <div className="flex flex-col gap-1">
-                    <Text small bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
-                    <div className="flex items-center gap-1">
+                    </Flex>
+                </Column>
+                <Column gap={ 1 }>
+                    <Text bold>{ LocalizeText('navigator.roomsettings.moderation.ban.header') }</Text>
+                    <Flex alignItems="center" gap={ 1 }>
                         <select className="form-select form-select-sm" value={ roomData.moderationSettings.allowBan } onChange={ event => handleChange('moderation_ban', event.target.value) }>
                             <option value={ RoomModerationSettings.MODERATION_LEVEL_NONE }>
                                 { LocalizeText('navigator.roomsettings.moderation.none') }
@@ -110,9 +110,9 @@ export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewPro
                                 { LocalizeText('navigator.roomsettings.moderation.rights') }
                             </option>
                         </select>
-                    </div>
-                </div>
+                    </Flex>
+                </Column>
             </Column>
         </Grid>
     );
-};
+}
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
index 242cb26..3f77676 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsRightsTabView.tsx
@@ -1,8 +1,8 @@
-import { FlatControllerAddedEvent, FlatControllerRemovedEvent, FlatControllersEvent, RemoveAllRightsMessageComposer, RoomTakeRightsComposer, RoomUsersWithRightsComposer } from '@nitrots/nitro-renderer';
+import { FlatControllerAddedEvent, FlatControllerRemovedEvent, FlatControllersEvent, RemoveAllRightsMessageComposer, RoomGiveRightsComposer, RoomTakeRightsComposer, RoomUsersWithRightsComposer } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { IRoomData, LocalizeText, SendMessageComposer } from '../../../../api';
 import { Button, Column, Flex, Grid, Text, UserProfileIconView } from '../../../../common';
-import { useMessageEvent } from '../../../../hooks';
+import { useFriends, useMessageEvent } from '../../../../hooks';
 
 interface NavigatorRoomSettingsTabViewProps
 {
@@ -10,10 +10,38 @@ interface NavigatorRoomSettingsTabViewProps
     handleChange: (field: string, value: string | number | boolean) => void;
 }
 
+const STAFF_CHAT_ID = -1;
+const STAFF_CHAT_NAME = 'Staff Chat';
+
 export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
 {
     const { roomData = null } = props;
     const [ usersWithRights, setUsersWithRights ] = useState<Map<number, string>>(new Map());
+    const { onlineFriends = [], offlineFriends = [] } = useFriends();
+
+    const allFriendsRaw = [ ...onlineFriends, ...offlineFriends ];
+
+    const allFriends = allFriendsRaw.filter(friend =>
+    {
+        if(friend.id === STAFF_CHAT_ID) return false;
+        if(friend.name === STAFF_CHAT_NAME) return false;
+		if(friend.id <= 0) return false;
+
+        return true;
+    });
+
+    const filteredUsersWithRights = new Map(
+        Array.from(usersWithRights.entries()).filter(([ id, name ]) =>
+        {
+            if(id === STAFF_CHAT_ID) return false;
+            if(name === STAFF_CHAT_NAME) return false;
+			if(id <= 0) return false;
+
+            return true;
+        })
+    );
+
+    const friendsWithoutRights = allFriends.filter(friend => !filteredUsersWithRights.has(friend.id));
 
     useMessageEvent<FlatControllersEvent>(FlatControllersEvent, event =>
     {
@@ -58,34 +86,83 @@ export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabView
 
     useEffect(() =>
     {
+        if(!roomData) return;
+
         SendMessageComposer(new RoomUsersWithRightsComposer(roomData.roomId));
-    }, [ roomData.roomId ]);
+    }, [ roomData?.roomId ]);
 
     return (
         <Grid>
             <Column size={ 6 }>
-                <Text small bold>
-                    { LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ usersWithRights.size.toString(), usersWithRights.size.toString() ]) }
+                <Text bold>
+                    { LocalizeText(
+                        'navigator.flatctrls.userswithrights',
+                        [ 'displayed', 'total' ],
+                        [
+                            filteredUsersWithRights.size.toString(),
+                            filteredUsersWithRights.size.toString()
+                        ]
+                    ) }
                 </Text>
-                <Flex className="bg-white rounded list-container p-2" overflow="hidden">
-                    <Column fullWidth gap={ 1 } overflow="auto">
-                        { Array.from(usersWithRights.entries()).map(([ id, name ], index) =>
+
+                <Flex overflow="hidden" className="p-2 bg-white rounded list-container">
+                    <Column fullWidth overflow="auto" gap={ 1 }>
+                        { Array.from(filteredUsersWithRights.entries()).map(([ id, name ], index) =>
                         {
                             return (
-                                <Flex key={ index } shrink alignItems="center" gap={ 1 } overflow="hidden">
-                                    <UserProfileIconView userName={ name } />
-                                    <Text small grow pointer onClick={ event => SendMessageComposer(new RoomTakeRightsComposer(id)) }> { name }</Text>
+                                <Flex key={ `${id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
+                                    <UserProfileIconView userId={ id } />
+                                    <Text
+                                        pointer
+                                        grow
+                                        onClick={ () => SendMessageComposer(new RoomTakeRightsComposer(id)) }>
+                                        { name }
+                                    </Text>
+                                </Flex>
+                            );
+                        }) }
+                    </Column>
+                </Flex>
+
+                <Button
+                    variant="danger"
+                    disabled={ !filteredUsersWithRights.size }
+                    onClick={ () => roomData && SendMessageComposer(new RemoveAllRightsMessageComposer(roomData.roomId)) }>
+                    { LocalizeText('navigator.flatctrls.clear') }
+                </Button>
+            </Column>
+
+            <Column size={ 6 }>
+                <Text bold>
+                    { LocalizeText(
+                        'navigator.flatctrls.friends',
+                        [ 'displayed', 'total' ],
+                        [
+                            friendsWithoutRights.length.toString(),
+                            allFriends.length.toString()
+                        ]
+                    ) }
+                </Text>
+
+                <Flex overflow="hidden" className="p-2 bg-white rounded list-container">
+                    <Column fullWidth overflow="auto" gap={ 1 }>
+                        { friendsWithoutRights.map((friend, index) =>
+                        {
+                            return (
+                                <Flex key={ `${friend.id}-${index}` } shrink alignItems="center" gap={ 1 } overflow="hidden">
+                                    <UserProfileIconView userId={ friend.id } />
+                                    <Text
+                                        pointer
+                                        grow
+                                        onClick={ () => SendMessageComposer(new RoomGiveRightsComposer(friend.id)) }>
+                                        { friend.name }
+                                    </Text>
                                 </Flex>
                             );
                         }) }
                     </Column>
                 </Flex>
             </Column>
-            <Column justifyContent="end" size={ 6 }>
-                <Button disabled={ !usersWithRights.size } variant="danger" onClick={ event => SendMessageComposer(new RemoveAllRightsMessageComposer(roomData.roomId)) } >
-                    { LocalizeText('navigator.flatctrls.clear') }
-                </Button>
-            </Column>
         </Grid>
     );
 };
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx
index d6f31ed..7b9ecec 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 className="nitro-room-settings" uniqueKey="nitro-room-settings">
-            <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings') } onCloseClick={ onClose } />
+            <NitroCardHeaderView headerText={ LocalizeText('navigator.roomsettings') } isInfoToHabboPages={ currentTab === TABS[3] } onClickInfoHabboPages={ () => { if(currentTab === TABS[3]) CreateLinkEvent('habbopages/chat/options'); } } onCloseClick={ onClose } />
             <NitroCardTabsView>
                 { TABS.map(tab =>
                 {
diff --git a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
index db2f5a8..aa4f1af 100644
--- a/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
+++ b/src/components/navigator/views/room-settings/NavigatorRoomSettingsVipChatTabView.tsx
@@ -1,6 +1,6 @@
 import { RoomChatSettings } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
-import { IRoomData, LocalizeText } from '../../../../api';
+import { GetClubMemberLevel, IRoomData, LocalizeText } from '../../../../api';
 import { Column, Grid, Text } from '../../../../common';
 import { NitroInput } from '../../../../layout';
 
@@ -14,6 +14,7 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
 {
     const { roomData = null, handleChange = null } = props;
     const [ chatDistance, setChatDistance ] = useState<number>(0);
+    const isHC = GetClubMemberLevel() > 0;
 
     useEffect(() =>
     {
@@ -26,45 +27,45 @@ export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabVie
                 <Text small bold>{ LocalizeText('navigator.roomsettings.vip.caption') }</Text>
                 <Text small>{ LocalizeText('navigator.roomsettings.vip.info') }</Text>
             </div>
-            <Grid overflow="auto">
+            <Grid className={ !isHC ? 'opacity-50 pointer-events-none' : '' } overflow="auto">
                 <Column gap={ 1 } size={ 6 }>
                     <Text small bold>{ LocalizeText('navigator.roomsettings.chat_settings') }</Text>
                     <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.info') }</Text>
-                    <select className="form-select form-select-sm" value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
+                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.mode } onChange={ event => handleChange('bubble_mode', event.target.value) }>
                         <option value={ RoomChatSettings.CHAT_MODE_FREE_FLOW }>{ LocalizeText('navigator.roomsettings.chat.mode.free.flow') }</option>
                         <option value={ RoomChatSettings.CHAT_MODE_LINE_BY_LINE }>{ LocalizeText('navigator.roomsettings.chat.mode.line.by.line') }</option>
                     </select>
-                    <select className="form-select form-select-sm" value={ roomData.chatSettings.weight } onChange={ event => handleChange('chat_weight', event.target.value) }>
+                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.weight } onChange={ event => handleChange('chat_weight', event.target.value) }>
                         <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.normal') }</option>
                         <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_THIN }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.thin') }</option>
                         <option value={ RoomChatSettings.CHAT_BUBBLE_WIDTH_WIDE }>{ LocalizeText('navigator.roomsettings.chat.bubbles.width.wide') }</option>
                     </select>
-                    <select className="form-select form-select-sm" value={ roomData.chatSettings.speed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
+                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.speed } onChange={ event => handleChange('bubble_speed', event.target.value) }>
                         <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_FAST }>{ LocalizeText('navigator.roomsettings.chat.speed.fast') }</option>
                         <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.speed.normal') }</option>
                         <option value={ RoomChatSettings.CHAT_SCROLL_SPEED_SLOW }>{ LocalizeText('navigator.roomsettings.chat.speed.slow') }</option>
                     </select>
-                    <select className="form-select form-select-sm" value={ roomData.chatSettings.protection } onChange={ event => handleChange('flood_protection', event.target.value) }>
+                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.chatSettings.protection } onChange={ event => handleChange('flood_protection', event.target.value) }>
                         <option value={ RoomChatSettings.FLOOD_FILTER_LOOSE }>{ LocalizeText('navigator.roomsettings.chat.flood.loose') }</option>
                         <option value={ RoomChatSettings.FLOOD_FILTER_NORMAL }>{ LocalizeText('navigator.roomsettings.chat.flood.normal') }</option>
                         <option value={ RoomChatSettings.FLOOD_FILTER_STRICT }>{ LocalizeText('navigator.roomsettings.chat.flood.strict') }</option>
                     </select>
                     <Text small>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
-                    <NitroInput className="form-control-sm" min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
+                    <NitroInput className="form-control-sm" disabled={ !isHC } min="0" type="number" value={ chatDistance } onBlur={ event => handleChange('chat_distance', chatDistance) } onChange={ event => setChatDistance(event.target.valueAsNumber) } />
                 </Column>
                 <Column gap={ 1 } size={ 6 }>
                     <Text small bold>{ LocalizeText('navigator.roomsettings.vip_settings') }</Text>
                     <div className="flex items-center gap-1">
-                        <input checked={ roomData.hideWalls } className="form-check-input" type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
+                        <input checked={ roomData.hideWalls } className="form-check-input" disabled={ !isHC } type="checkbox" onChange={ event => handleChange('hide_walls', event.target.checked) } />
                         <Text small>{ LocalizeText('navigator.roomsettings.hide_walls') }</Text>
                     </div>
-                    <select className="form-select form-select-sm" value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
+                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.wallThickness } onChange={ event => handleChange('wall_thickness', event.target.value) }>
                         <option value="0">{ LocalizeText('navigator.roomsettings.wall_thickness.normal') }</option>
                         <option value="1">{ LocalizeText('navigator.roomsettings.wall_thickness.thick') }</option>
                         <option value="-1">{ LocalizeText('navigator.roomsettings.wall_thickness.thin') }</option>
                         <option value="-2">{ LocalizeText('navigator.roomsettings.wall_thickness.thinnest') }</option>
                     </select>
-                    <select className="form-select form-select-sm" value={ roomData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
+                    <select className="form-select form-select-sm" disabled={ !isHC } value={ roomData.floorThickness } onChange={ event => handleChange('floor_thickness', event.target.value) }>
                         <option value="0">{ LocalizeText('navigator.roomsettings.floor_thickness.normal') }</option>
                         <option value="1">{ LocalizeText('navigator.roomsettings.floor_thickness.thick') }</option>
                         <option value="-1">{ LocalizeText('navigator.roomsettings.floor_thickness.thin') }</option>