Navigator updates

src/components/navigator/NavigatorView.scss

@@ -1,24 +1,63 @@
 .nitro-navigator {
     width: $navigator-width;
     height: $navigator-height;
-}
 
-.nitro-navigator-doorbell {
+    .navigator-grid {
-    width: 250px;
 
-    .content-area {
+        .navigator-item {
-        min-height: 143px;
+
-        height: 143px;
+            .badge {
+                width: 35px;
+                min-width: 35px;
+            }
+        }
+
+        &:not(.two-columns) {
+
+            .navigator-item {
+    
+                &:nth-child(odd) {
+                    background-color: $grid-active-bg-color;
+                }
+            }
+        }
+    
+        &.two-columns {
+    
+            .navigator-item {
+        
+                &:nth-child(4n-2),
+                &:nth-child(4n-3) {
+                    background: $grid-active-bg-color;
+                }
+            }
+        }
     }
 }
 
+.nitro-navigator-doorbell,
 .nitro-navigator-password {
     width: 250px;
-
-    .content-area {
-        min-height: 218px;
-        height: 218px;
-    }
 }
 
-@import './views/NavigatorViews';
+.nitro-room-info {
+    width: $room-info-width;
+    max-height: 300px;
+}
+
+.nitro-room-link {
+    width: 400px;
+}
+
+.nitro-room-settings {
+    width: 400px;
+
+    .list-container {
+        min-height: 100px;
+        max-height: 100px;
+
+        .list-item {
+            background-color: $grid-active-bg-color;
+        }
+    }
+}

src/components/navigator/NavigatorView.tsx

@@ -1,6 +1,8 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { ConvertGlobalRoomIdMessageComposer, HabboWebTools, ILinkEventTracker, LegacyExternalInterface, NavigatorInitComposer, NavigatorSearchComposer, RoomDataParser, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useEffect, useMemo, useReducer, useState } from 'react';
 import { AddEventLinkTracker, GoToDesktop, LocalizeText, RemoveLinkEventTracker, TryVisitRoom } from '../../api';
+import { Column } from '../../common/Column';
 import { NavigatorEvent, UpdateDoorStateEvent } from '../../events';
 import { UseMountEffect } from '../../hooks';
 import { useRoomSessionManagerEvent } from '../../hooks/events/nitro/session/room-session-manager-event';
@@ -246,15 +248,17 @@ export const NavigatorView: FC<{}> = props =>
                                     </NitroCardTabsItemView>
                                 );
                             }) }
-                        <NitroCardTabsItemView isActive={ isCreatorOpen } onClick={ () => setCreatorOpen(true) }>
+                        <NitroCardTabsItemView isActive={ isCreatorOpen } onClick={ event => setCreatorOpen(true) }>
-                            <i className="fas fa-plus" />
+                            <FontAwesomeIcon icon="plus" />
                         </NitroCardTabsItemView>
                     </NitroCardTabsView>
                     <NitroCardContentView>
                         { !isCreatorOpen &&
                             <>
                                 <NavigatorSearchView sendSearch={ sendSearch } />
-                                { (navigatorState.searchResult && navigatorState.searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
+                                <Column overflow="auto">
+                                    { (navigatorState.searchResult && navigatorState.searchResult.results.map((result, index) => <NavigatorSearchResultView key={ index } searchResult={ result } />)) }
+                                </Column>
                             </> }
                         { isCreatorOpen && <NavigatorRoomCreatorView /> }
                     </NitroCardContentView>

src/components/navigator/common/NavigatorSearchResultViewDisplayMode.ts

@@ -1,10 +1,3 @@
-import { NavigatorSearchResultList } from '@nitrots/nitro-renderer';
-
-export interface NavigatorSearchResultViewProps
-{
-    searchResult: NavigatorSearchResultList;
-}
-
 export class NavigatorSearchResultViewDisplayMode
 {
     public static readonly LIST: number                 = 0;

src/components/navigator/common/RoomModels.ts

@@ -1,11 +1,13 @@
 import { HabboClubLevelEnum } from '@nitrots/nitro-renderer';
 
-export interface NavigatorRoomCreatorViewProps
+export interface IRoomModel
 {
-    
+    clubLevel: number;
+    tileSize: number;
+    name: string;
 }
 
-export const NAVIGATOR_ROOM_MODELS: { clubLevel: number, tileSize: number, name: string }[] = [
+export const RoomModels: IRoomModel[] = [
     { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 104, name: 'a' },
     { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 94, name: 'b' },
     { clubLevel: HabboClubLevelEnum.NO_CLUB, tileSize: 36, name: 'c' },

src/components/navigator/views/NavigatorViews.scss

@@ -1,6 +0,0 @@
-@import './creator/NavigatorRoomCreatorView';
-@import './search-result/NavigatorSearchResultView';
-@import './search-result-item/NavigatorSearchResultItemView';
-@import './room-info/NavigatorRoomInfoView';
-@import './room-link/NavigatorRoomLinkView';
-@import './room-settings/NavigatorRoomSettingsView';

src/components/navigator/views/creator/NavigatorRoomCreatorView.scss

@@ -1,26 +0,0 @@
-.room-model-list {
-    display: flex;
-    overflow-x: auto;
-    scroll-snap-type: x mandatory;
-    scroll-behavior: smooth;
-    -webkit-overflow-scrolling: touch;
-
-    > div {
-        border-color: $grid-border-color !important;
-        background-color: $grid-bg-color;
-    
-        &.active {
-            border-color: $grid-active-border-color !important;
-            background-color: $grid-active-bg-color;
-        }
-
-        &.disabled {
-            cursor: not-allowed;
-
-            img {
-                opacity: .5;
-                filter: grayscale(1);
-            }
-        }
-    }
-}

src/components/navigator/views/creator/NavigatorRoomCreatorView.tsx

@@ -1,25 +1,47 @@
 /* eslint-disable no-template-curly-in-string */
 import { HabboClubLevelEnum, RoomCreateComposer } from '@nitrots/nitro-renderer';
-import classNames from 'classnames';
+import { FC, useEffect, useState } from 'react';
-import { FC, useCallback, useEffect, useState } from 'react';
 import { GetConfiguration, GetSessionDataManager, LocalizeText } from '../../../../api';
+import { Column } from '../../../../common/Column';
+import { Flex } from '../../../../common/Flex';
+import { Grid } from '../../../../common/Grid';
+import { LayoutGridItem } from '../../../../common/layout/LayoutGridItem';
+import { Text } from '../../../../common/Text';
+import { BatchUpdates } from '../../../../hooks';
 import { SendMessageHook } from '../../../../hooks/messages';
 import { CurrencyIcon } from '../../../../views/shared/currency-icon/CurrencyIcon';
+import { IRoomModel, RoomModels } from '../../common/RoomModels';
 import { useNavigatorContext } from '../../context/NavigatorContext';
-import { NavigatorRoomCreatorViewProps, NAVIGATOR_ROOM_MODELS } from './NavigatorRoomCreatorView.types';
 
-export const NavigatorRoomCreatorView: FC<NavigatorRoomCreatorViewProps> = props =>
+export const NavigatorRoomCreatorView: FC<{}> = props =>
 {
+    const [ maxVisitorsList, setMaxVisitorsList ] = useState<number[]>(null);
+    const [ name, setName ] = useState<string>(null);
+    const [ description, setDescription ] = useState<string>(null);
+    const [ category, setCategory ] = useState<number>(null);
+    const [ visitorsCount, setVisitorsCount ] = useState<number>(null);
+    const [ tradesSetting, setTradesSetting ] = useState<number>(0);
+    const [ selectedModelName, setSelectedModelName ] = useState<string>(RoomModels[0].name);
     const { navigatorState = null } = useNavigatorContext();
     const { categories = null } = navigatorState;
 
-    const [ maxVisitorsList, setMaxVisitorsList ] = useState(null);
+    const getRoomModelImage = (name: string) => GetConfiguration<string>('images.url') + `/navigator/models/model_${ name }.png`;
-    const [ name, setName ] = useState(null);
+
-    const [ description, setDescription ] = useState(null);
+    const selectModel = (model: IRoomModel) =>
-    const [ category, setCategory ] = useState(null);
+    {
-    const [ visitorsCount, setVisitorsCount ] = useState(null);
+        if(!model) return;
-    const [ tradesSetting, setTradesSetting ] = useState(0);
+
-    const [ selectedModelName, setSelectedModelName ] = useState(NAVIGATOR_ROOM_MODELS[0].name);
+        if(model.clubLevel > GetSessionDataManager().clubLevel) return;
+
+        setSelectedModelName(name);
+    }
+
+    const createRoom = () =>
+    {
+        if(!name || name.length < 3) return;
+
+        SendMessageHook(new RoomCreateComposer(name, description, 'model_' + selectedModelName, Number(category), Number(visitorsCount), tradesSetting));
+    }
 
     useEffect(() =>
     {
@@ -27,13 +49,13 @@ export const NavigatorRoomCreatorView: FC<NavigatorRoomCreatorViewProps> = props
         {
             const list = [];
 
-            for(let i = 10; i <= 100; i = i + 10)
+            for(let i = 10; i <= 100; i = i + 10) list.push(i);
-            {
-                list.push(i);
-            }
 
-            setMaxVisitorsList(list);
+            BatchUpdates(() =>
-            setVisitorsCount(list[0]);
+            {
+                setMaxVisitorsList(list);
+                setVisitorsCount(list[0]);
+            });
         }
     }, [ maxVisitorsList ]);
 
@@ -41,89 +63,60 @@ export const NavigatorRoomCreatorView: FC<NavigatorRoomCreatorViewProps> = props
     {
         if(categories) setCategory(categories[0].id);
     }, [ categories ]);
-    
-    const getRoomModelImage = useCallback((name: string) =>
-    {
-        return GetConfiguration<string>('images.url') + `/navigator/models/model_${ name }.png`;
-    }, []);
-
-    const selectModel = useCallback((name: string) =>
-    {
-        const model = NAVIGATOR_ROOM_MODELS.find(model => model.name === name);
-
-        if(!model) return;
-
-        if(model.clubLevel > GetSessionDataManager().clubLevel) return;
-
-        setSelectedModelName(name);
-    }, [ setSelectedModelName ]);
-
-    const createRoom = useCallback(() =>
-    {
-        if(!name || name.length < 3) return;
-
-        SendMessageHook(new RoomCreateComposer(name, description, 'model_' + selectedModelName, Number(category), Number(visitorsCount), tradesSetting));
-    }, [ name, description, category, visitorsCount, tradesSetting, selectedModelName ]);
 
     return (
-        <div className="text-black d-flex flex-column h-100 justify-content-center">
+        <Column overflow="hidden">
-            <div className="row row-cols-2 mb-2">
+            <Grid fullHeight={ false }>
-                <div className="col mb-2">
+                <Column size={ 6 } gap={ 1 }>
-                    <div className="form-group">
+                    <Text>{ LocalizeText('navigator.createroom.roomnameinfo') }</Text>
-                        <label>{ LocalizeText('navigator.createroom.roomnameinfo') }</label>
+                    <input type="text" className="form-control form-control-sm" onChange={ (e) => setName(e.target.value) } />
-                        <input type="text" className="form-control form-control-sm" onChange={ (e) => setName(e.target.value) } />
+                </Column>
-                    </div>
+                <Column size={ 6 } gap={ 1 }>
-                </div>
+                    <Text>{ LocalizeText('navigator.category') }</Text>
-                <div className="col">
+                    <select className="form-select form-select-sm" onChange={ (e) => setCategory(Number(e.target.value)) }>
-                    <div className="form-group">
+                        { categories && categories.map(category =>
-                        <label>{ LocalizeText('navigator.category') }</label>
+                            {
-                        <select className="form-select form-select-sm" onChange={ (e) => setCategory(e.target.value) }>
+                                return <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>
-                            { categories && categories.map(category =>
+                            }) }
-                                {
+                    </select>
-                                    return <option key={ category.id } value={ category.id }>{ LocalizeText(category.name) }</option>
+                </Column>
-                                }) }
+                <Column size={ 6 } gap={ 1 }>
-                        </select>
+                    <Text>{ LocalizeText('navigator.maxvisitors') }</Text>
-                    </div>
+                    <select className="form-select form-select-sm" onChange={ (e) => setVisitorsCount(Number(e.target.value)) }>
-                </div>
+                        { maxVisitorsList && maxVisitorsList.map(value =>
-                <div className="col">
+                            {
-                    <div className="form-group">
+                                return <option key={ value } value={ value }>{ value }</option>
-                        <label>{ LocalizeText('navigator.maxvisitors') }</label>
+                            }) }
-                        <select className="form-select form-select-sm" onChange={ (e) => setVisitorsCount(e.target.value) }>
+                    </select>
-                            { maxVisitorsList && maxVisitorsList.map(value =>
+                </Column>
-                                {
+                <Column size={ 6 } gap={ 1 }>
-                                    return <option key={ value } value={ value }>{ value }</option>
+                    <Text>{ LocalizeText('navigator.tradesettings') }</Text>
-                                }) }
+                    <select className="form-select form-select-sm" onChange={ (e) => setTradesSetting(Number(e.target.value)) }>
-                        </select>
+                        <option value="0">{ LocalizeText('navigator.roomsettings.trade_not_allowed') }</option>
-                    </div>
+                        <option value="1">{ LocalizeText('navigator.roomsettings.trade_not_with_Controller') }</option>
-                </div>
+                        <option value="2">{ LocalizeText('navigator.roomsettings.trade_allowed') }</option>
-                <div className="col">
+                    </select>
-                    <div className="form-group">
+                </Column>
-                        <label>{ LocalizeText('navigator.tradesettings') }</label>
+            </Grid>
-                        <select className="form-select form-select-sm" onChange={ (e) => setTradesSetting(Number(e.target.value)) }>
+            <Column gap={ 1 }>
-                            <option value="0">{ LocalizeText('${navigator.roomsettings.trade_not_allowed}') }</option>
+                <Text>{ LocalizeText('navigator.createroom.roomdescinfo') }</Text>
-                            <option value="1">{ LocalizeText('${navigator.roomsettings.trade_not_with_Controller}') }</option>
-                            <option value="2">{ LocalizeText('${navigator.roomsettings.trade_allowed}') }</option>
-                        </select>
-                    </div>
-                </div>
-            </div>
-            <div className="form-group mb-3">
-                <label>{ LocalizeText('navigator.createroom.roomdescinfo') }</label>
                 <input type="text" className="form-control form-control-sm" onChange={ (e) => setDescription(e.target.value) } />
-            </div>
+            </Column>
-            <div className="room-model-list pb-2 mb-2">
+            <Flex overflow="auto" gap={ 1 }>
                 {
-                    NAVIGATOR_ROOM_MODELS.map(model =>
+                    RoomModels.map(model =>
                         {
-                            return (<div key={ model.name } onClick={ () => selectModel(model.name) } className={ 'h-100 cursor-pointer d-flex flex-column justify-content-center align-items-center p-1 me-2 rounded border border-2' + classNames({ ' active': selectedModelName === model.name, ' disabled': GetSessionDataManager().clubLevel < model.clubLevel }) }>
+                            return (<LayoutGridItem fullHeight key={ model.name } onClick={ () => selectModel(model) } itemActive={ (selectedModelName === model.name) } overflow="unset" gap={ 0 } className="p-1" disabled={ (GetSessionDataManager().clubLevel < model.clubLevel) }>
-                                <img alt="" src={ getRoomModelImage(model.name) } />
+                                <Flex fullHeight center overflow="hidden">
-                                <div>{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</div>
+                                    <img alt="" src={ getRoomModelImage(model.name) } />
-                                { model.clubLevel > HabboClubLevelEnum.NO_CLUB && <CurrencyIcon type="hc" /> }
+                                </Flex>
-                            </div>);
+                                <Text bold>{ model.tileSize } { LocalizeText('navigator.createroom.tilesize') }</Text>
+                                { model.clubLevel > HabboClubLevelEnum.NO_CLUB && <CurrencyIcon position="absolute" className="top-1 end-1" type="hc" /> }
+                            </LayoutGridItem>);
                         })
                 }
-            </div>
+            </Flex>
             <button className="btn btn-success float-end" onClick={ () => createRoom() } disabled={ !name || name.length < 3 }>{ LocalizeText('navigator.createroom.create') }</button>
-        </div>
+        </Column>
     );
 }

src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.tsx

@@ -1,41 +1,60 @@
-import { FC, useCallback } from 'react';
+import { RoomDataParser } from '@nitrots/nitro-renderer';
+import { FC } from 'react';
 import { CreateRoomSession, GoToDesktop, LocalizeText } from '../../../../api';
+import { Button } from '../../../../common/Button';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { UpdateDoorStateEvent } from '../../../../events';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { NavigatorRoomDoorbellViewProps } from './NavigatorRoomDoorbellView.types';
+
+export interface NavigatorRoomDoorbellViewProps
+{
+    roomData: RoomDataParser;
+    state: string;
+    onClose: (state: string) => void;
+}
 
 export const NavigatorRoomDoorbellView: FC<NavigatorRoomDoorbellViewProps> = props =>
 {
     const { roomData = null, state = null, onClose = null } = props;
 
-    const close = useCallback(() =>
+    const close = () =>
     {
         if(state === UpdateDoorStateEvent.STATE_WAITING) GoToDesktop();
 
         onClose(null);
-    }, [ state, onClose ]);
+    }
 
-    const ring = useCallback(() =>
+    const ring = () =>
     {
         if(!roomData) return;
 
         CreateRoomSession(roomData.roomId);
 
         onClose(UpdateDoorStateEvent.STATE_PENDING_SERVER);
-    }, [ roomData, onClose ]);
+    }
 
     return (
         <NitroCardView className="nitro-navigator-doorbell" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('navigator.doorbell.title') } onCloseClick={ close } />
-            <NitroCardContentView className="text-black d-flex flex-column">
+            <NitroCardContentView>
-                { roomData && <span className="fw-bold">{ roomData.roomName }</span> }
+                <Column gap={ 1 }>
-                { (state === UpdateDoorStateEvent.START_DOORBELL) && <span>{ LocalizeText('navigator.doorbell.info') }</span> }
+                    { roomData &&
-                { (state === UpdateDoorStateEvent.STATE_WAITING) && <span>{ LocalizeText('navigator.doorbell.waiting') }</span> }
+                        <Text bold>{ roomData.roomName }</Text> }
-                { (state === UpdateDoorStateEvent.STATE_NO_ANSWER) && <span>{ LocalizeText('navigator.doorbell.no.answer') }</span> }
+                    { (state === UpdateDoorStateEvent.START_DOORBELL) &&
-                <div className="d-flex flex-column mt-1">
+                        <Text>{ LocalizeText('navigator.doorbell.info') }</Text> }
-                    { (state === UpdateDoorStateEvent.START_DOORBELL) && <button type="button" className="btn btn-success btn-sm" onClick={ ring }>{ LocalizeText('navigator.doorbell.button.ring') }</button> }
+                    { (state === UpdateDoorStateEvent.STATE_WAITING) &&
-                    <button type="button" className="btn btn-danger btn-sm mt-1" onClick={ close }>{ LocalizeText('generic.cancel') }</button>
+                        <Text>{ LocalizeText('navigator.doorbell.waiting') }</Text> }
-                </div>
+                    { (state === UpdateDoorStateEvent.STATE_NO_ANSWER) &&
+                        <Text>{ LocalizeText('navigator.doorbell.no.answer') }</Text> }
+                </Column>
+                { (state === UpdateDoorStateEvent.START_DOORBELL) &&
+                    <Button variant="success" size="sm" onClick={ ring }>
+                        { LocalizeText('navigator.doorbell.button.ring') }
+                    </Button> }
+                <Button variant="danger" size="sm" onClick={ close }>
+                    { LocalizeText('generic.cancel') }
+                </Button>
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/navigator/views/room-doorbell/NavigatorRoomDoorbellView.types.ts

@@ -1,8 +0,0 @@
-import { RoomDataParser } from '@nitrots/nitro-renderer';
-
-export interface NavigatorRoomDoorbellViewProps
-{
-    roomData: RoomDataParser;
-    state: string;
-    onClose: (state: string) => void;
-}

src/components/navigator/views/room-info/NavigatorRoomInfoView.scss

@@ -1,23 +0,0 @@
-.nitro-room-info {
-    width: $room-info-width;
-    max-height: 300px;
-
-
-    .gray {
-        filter: grayscale(1);
-        opacity: .5;
-    }
-
-    .room-thumbnail {
-        position: relative;
-        width: 110px;
-        height: 110px;
-        background: url("../../../../assets/images/navigator/thumbnail_placeholder.png") no-repeat center;
-        background-color: rgba($black, .125);
-    }
-
-    .group-badge {
-        width: 50px;
-        height: 50px;
-    }
-}

src/components/navigator/views/room-info/NavigatorRoomInfoView.tsx

@@ -133,11 +133,9 @@ export const NavigatorRoomInfoView: FC<NavigatorRoomInfoViewProps> = props =>
                 { roomInfoData.enteredGuestRoom &&
                     <>
                         <Flex gap={ 2 } overflow="hidden">
-                            <Flex center>
+                            <RoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef }>
-                                <RoomThumbnailView customUrl={ roomInfoData.enteredGuestRoom.officialRoomPicRef }>
+                                { hasPermission('settings') && <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
-                                    { hasPermission('settings') && <i className="icon icon-camera-small position-absolute b-0 r-0 m-1 cursor-pointer" onClick={ () => processAction('open_room_thumbnail_camera') } /> }
+                            </RoomThumbnailView>
-                                </RoomThumbnailView>
-                            </Flex>
                             <Column grow gap={ 1 } overflow="hidden">
                                 <Flex gap={ 1 }>
                                     <Column grow gap={ 1 }>

src/components/navigator/views/room-link/NavigatorRoomLinkView.scss

@@ -1,3 +0,0 @@
-.nitro-room-link {
-    width: 400px;
-}

src/components/navigator/views/room-password/NavigatorRoomPasswordView.tsx

@@ -1,18 +1,28 @@
+import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC, useCallback, useState } from 'react';
 import { CreateRoomSession, LocalizeText } from '../../../../api';
+import { Button } from '../../../../common/Button';
+import { Column } from '../../../../common/Column';
+import { Text } from '../../../../common/Text';
 import { UpdateDoorStateEvent } from '../../../../events';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardView } from '../../../../layout';
-import { NavigatorRoomPasswordViewProps } from './NavigatorRoomPasswordView.types';
+
+export interface NavigatorRoomPasswordViewProps
+{
+    roomData: RoomDataParser;
+    state: string;
+    onClose: (state: string) => void;
+}
 
 export const NavigatorRoomPasswordView: FC<NavigatorRoomPasswordViewProps> = props =>
 {
     const { roomData = null, state = null, onClose = null } = props;
     const [ password, setPassword ] = useState('');
 
-    const close = useCallback(() =>
+    const close = () =>
     {
         onClose(null);
-    }, [ onClose ]);
+    }
 
     const tryEntering = useCallback(() =>
     {
@@ -26,18 +36,24 @@ export const NavigatorRoomPasswordView: FC<NavigatorRoomPasswordViewProps> = pro
     return (
         <NitroCardView className="nitro-navigator-password" simple={ true }>
             <NitroCardHeaderView headerText={ LocalizeText('navigator.password.title') } onCloseClick={ close } />
-            <NitroCardContentView className="text-black d-flex flex-column">
+            <NitroCardContentView>
-                { roomData && <span className="fw-bold">{ roomData.roomName }</span> }
+                <Column gap={ 1 }>
-                { (state === UpdateDoorStateEvent.START_PASSWORD) && <span>{ LocalizeText('navigator.password.info') }</span> }
+                    { roomData &&
-                { (state === UpdateDoorStateEvent.STATE_WRONG_PASSWORD) && <span>{ LocalizeText('navigator.password.retryinfo') }</span> }
+                        <Text bold>{ roomData.roomName }</Text> }
-                <div className="form-group mt-1">
+                    { (state === UpdateDoorStateEvent.START_PASSWORD) &&
-                    <label>{ LocalizeText('navigator.password.enter') }</label>
+                        <Text>{ LocalizeText('navigator.password.info') }</Text> }
+                    { (state === UpdateDoorStateEvent.STATE_WRONG_PASSWORD) &&
+                        <Text>{ LocalizeText('navigator.password.retryinfo') }</Text> }
+                </Column>
+                <Column gap={ 1 }>
+                    <Text>{ LocalizeText('navigator.password.enter') }</Text>
                     <input type="password" className="form-control form-control-sm" onChange={ event => setPassword(event.target.value) } />
-                </div>
+                </Column>
-                <div className="d-flex flex-column mt-1">
+                <Button variant="success" size="sm" onClick={ tryEntering }>
-                    <button type="button" className="btn btn-success btn-sm" onClick={ tryEntering }>{ LocalizeText('navigator.password.button.try') }</button>
+                    { LocalizeText('navigator.password.button.try') }</Button>
-                    <button type="button" className="btn btn-danger btn-sm mt-1" onClick={ close }>{ LocalizeText('generic.cancel') }</button>
+                <Button variant="danger" size="sm" onClick={ close }>
-                </div>
+                        { LocalizeText('generic.cancel') }
+                    </Button>
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/navigator/views/room-password/NavigatorRoomPasswordView.types.ts

@@ -1,8 +0,0 @@
-import { RoomDataParser } from '@nitrots/nitro-renderer';
-
-export interface NavigatorRoomPasswordViewProps
-{
-    roomData: RoomDataParser;
-    state: string;
-    onClose: (state: string) => void;
-}

src/components/navigator/views/room-settings/NavigatorRoomSettingsView.scss

@@ -1,49 +0,0 @@
-.nitro-room-settings {
-    width: 400px;
-
-    .user-rights-container {
-
-        .row {
-    
-            .col:nth-child(even) {
-                //background: $light !important;
-            }
-        }
-    }
-
-    .list-container {
-        max-height: 100px;
-        min-height: 100px;
-        overflow-y: scroll;
-        background-color: white;
-        border-radius: 5px;
-        text-align: center;
-
-        &.rights {
-            max-height: 80%;
-            min-height: 80%;
-            margin-bottom: 5px;
-        }
-
-        &.friends-rights {
-            max-height: 90%;
-            min-height: 90%;
-        }
-
-        .rights-button
-        {
-            float: right;
-            margin: 2px;
-            font-size: 7px;
-            padding: 3px;
-            min-height: unset;
-        }
-
-        .list-item {
-            &.selected {
-                background-color: cadetblue;
-            }
-        }
-    }
-    
-}

src/components/navigator/views/room-settings/NavigatorRoomSettingsView.tsx

@@ -1,17 +1,14 @@
 import { RoomBannedUsersComposer, RoomBannedUsersEvent, RoomSettingsEvent, RoomUsersWithRightsComposer, RoomUsersWithRightsEvent, SaveRoomSettingsComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useEffect, useState } from 'react';
+import { FC, useCallback, useState } from 'react';
 import { LocalizeText } from '../../../../api';
-import { FriendsEvent } from '../../../../events';
-import { FriendListContentEvent } from '../../../../events/friends/FriendListContentEvent';
-import { dispatchUiEvent, useUiEvent } from '../../../../hooks';
 import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
 import { NitroCardContentView, NitroCardHeaderView, NitroCardTabsItemView, NitroCardTabsView, NitroCardView } from '../../../../layout';
 import RoomSettingsData from '../../common/RoomSettingsData';
-import { NavigatorRoomSettingsAccessTabView } from './views/tab-access/NavigatorRoomSettingsAccessTabView';
+import { NavigatorRoomSettingsAccessTabView } from './views/NavigatorRoomSettingsAccessTabView';
-import { NavigatorRoomSettingsBasicTabView } from './views/tab-basic/NavigatorRoomSettingsBasicTabView';
+import { NavigatorRoomSettingsBasicTabView } from './views/NavigatorRoomSettingsBasicTabView';
-import { NavigatorRoomSettingsModTabView } from './views/tab-mod/NavigatorRoomSettingsModTabView';
+import { NavigatorRoomSettingsModTabView } from './views/NavigatorRoomSettingsModTabView';
-import { NavigatorRoomSettingsRightsTabView } from './views/tab-rights/NavigatorRoomSettingsRightsTabView';
+import { NavigatorRoomSettingsRightsTabView } from './views/NavigatorRoomSettingsRightsTabView';
-import { NavigatorRoomSettingsVipChatTabView } from './views/tab-vipchat/NavigatorRoomSettingsVipChatTabView';
+import { NavigatorRoomSettingsVipChatTabView } from './views/NavigatorRoomSettingsVipChatTabView';
 
 const TABS: string[] = [
     'navigator.roomsettings.tab.1',
@@ -25,7 +22,6 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
 {
     const [ roomSettingsData, setRoomSettingsData ] = useState<RoomSettingsData>(null);
     const [ currentTab, setCurrentTab ] = useState(TABS[0]);
-    const [ friends, setFriends ] = useState<Map<number, string>>(new Map());
 
     const updateSettings = useCallback((roomSettings: RoomSettingsData) =>
     {
@@ -73,24 +69,11 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
         setRoomSettingsData(data);
     }, [roomSettingsData]);
 
-    const onFriendsListContentEvent = useCallback((event: FriendListContentEvent) =>
-    {
-        if(!roomSettingsData || !event.friends) return;
-
-        setFriends(event.friends);
-    }, [roomSettingsData]);
-
     CreateMessageHook(RoomSettingsEvent, onRoomSettingsEvent);
     CreateMessageHook(RoomUsersWithRightsEvent, onRoomUsersWithRightsEvent);
     CreateMessageHook(RoomBannedUsersEvent, onRoomBannedUsersEvent);
-    useUiEvent(FriendListContentEvent.FRIEND_LIST_CONTENT, onFriendsListContentEvent);
 
-    useEffect(() =>
+    const saveSettings = useCallback((data: RoomSettingsData) =>
-    {
-        if(roomSettingsData) dispatchUiEvent(new FriendsEvent(FriendsEvent.REQUEST_FRIEND_LIST));
-    }, [roomSettingsData])
-
-    const save = useCallback((data: RoomSettingsData) =>
     {
         SendMessageHook(
             new SaveRoomSettingsComposer(
@@ -132,6 +115,109 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
         }
     }, [ setRoomSettingsData ]);
 
+    const handleChange = useCallback((field: string, value: string | number | boolean) =>
+    {
+        const roomSettings = Object.assign({}, roomSettingsData);
+
+        let save = true;
+
+        switch(field)
+        {
+            case 'name':
+                roomSettings.roomName = String(value);
+                save = false;
+                break;
+            case 'description':
+                roomSettings.roomDescription = String(value);
+                save = false;
+                break;
+            case 'category':
+                roomSettings.categoryId = Number(value);
+                break;
+            case 'max_visitors': 
+                roomSettings.userCount = Number(value);
+                break;
+            case 'trade_state':
+                roomSettings.tradeState =  Number(value);
+                break;
+            case 'allow_walkthrough':
+                roomSettings.allowWalkthrough = Boolean(value);
+                break;
+            case 'allow_pets':
+                roomSettings.allowPets = Boolean(value);
+                break;
+            case 'allow_pets_eat':
+                roomSettings.allowPetsEat = Boolean(value);
+                break;
+            case 'hide_walls':
+                roomSettings.hideWalls = Boolean(value);
+                break;
+            case 'wall_thickness':
+                roomSettings.wallThickness = Number(value);
+                break;
+            case 'floor_thickness':
+                roomSettings.floorThickness = Number(value);
+                break;
+            case 'lock_state':
+                roomSettings.lockState = Number(value);
+
+                if(Number(value) === 3) save = false;
+                break;
+            case 'password':
+                roomSettings.password = String(value);
+                save = false;
+                break;
+            case 'confirm_password':
+                roomSettings.confirmPassword = String(value);
+                save = false;
+                break;
+            case 'moderation_mute':
+                roomSettings.muteState = Number(value);
+                break;
+            case 'moderation_kick':
+                roomSettings.kickState = Number(value);
+                break;
+            case 'moderation_ban':
+                roomSettings.banState = Number(value);
+                break;
+            case 'bubble_mode':
+                roomSettings.chatBubbleMode = Number(value);
+                break;
+            case 'chat_weight':
+                roomSettings.chatBubbleWeight = Number(value);
+                break;
+            case 'bubble_speed':
+                roomSettings.chatBubbleSpeed = Number(value);
+                break;
+            case 'flood_protection':
+                roomSettings.chatFloodProtection = Number(value);
+                break;
+            case 'chat_distance':
+                roomSettings.chatDistance = Number(value);
+                save = false;
+                break;
+            case 'unban_user':
+                roomSettings.bannedUsers.delete(Number(value));
+                save = false;
+                break;
+            case 'remove_rights_user':
+                roomSettings.usersWithRights.delete(Number(value));
+                save = false;
+                break;
+            case 'remove_all_rights':
+                roomSettings.usersWithRights.clear();
+                save = false;
+                break;
+            case 'save':
+                save = true;
+                break;
+        }
+
+        setRoomSettingsData(roomSettings);
+
+        if(save) saveSettings(roomSettings);
+    }, [ roomSettingsData, saveSettings ]);
+
     if(!roomSettingsData) return null;
     
     return (
@@ -143,12 +229,17 @@ export const NavigatorRoomSettingsView: FC<{}> = props =>
                         return <NitroCardTabsItemView key={ tab } isActive={ (currentTab === tab) } onClick={ event => setCurrentTab(tab) }>{ LocalizeText(tab) }</NitroCardTabsItemView>
                     }) }
             </NitroCardTabsView>
-            <NitroCardContentView className="text-black">
+            <NitroCardContentView>
-                { currentTab === TABS[0] && <NavigatorRoomSettingsBasicTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
+                { currentTab === TABS[0] &&
-                { currentTab === TABS[1] && <NavigatorRoomSettingsAccessTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
+                    <NavigatorRoomSettingsBasicTabView roomSettingsData={ roomSettingsData } handleChange={ handleChange } /> }
-                { currentTab === TABS[2] && <NavigatorRoomSettingsRightsTabView roomSettingsData= {roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } friends={friends} /> }
+                { currentTab === TABS[1] &&
-                { currentTab === TABS[3] && <NavigatorRoomSettingsVipChatTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
+                    <NavigatorRoomSettingsAccessTabView roomSettingsData={ roomSettingsData } handleChange={ handleChange } /> }
-                { currentTab === TABS[4] && <NavigatorRoomSettingsModTabView roomSettingsData={ roomSettingsData } setRoomSettingsData={ updateSettings } onSave={ save } /> }
+                { currentTab === TABS[2] &&
+                    <NavigatorRoomSettingsRightsTabView roomSettingsData= {roomSettingsData } handleChange={ handleChange } /> }
+                { currentTab === TABS[3] &&
+                    <NavigatorRoomSettingsVipChatTabView roomSettingsData={ roomSettingsData } handleChange={ handleChange } /> }
+                { currentTab === TABS[4] &&
+                    <NavigatorRoomSettingsModTabView roomSettingsData={ roomSettingsData } handleChange={ handleChange } /> }
             </NitroCardContentView>
         </NitroCardView>
     );

src/components/navigator/views/room-settings/NavigatorRoomSettingsView.types.ts

@@ -1,8 +0,0 @@
-import RoomSettingsData from '../../common/RoomSettingsData';
-
-export class NavigatorRoomSettingsTabViewProps
-{
-    roomSettingsData: RoomSettingsData;
-    setRoomSettingsData: (roomSettings: RoomSettingsData) => void;
-    onSave: (data: RoomSettingsData) => void;
-}

src/components/navigator/views/room-settings/views/NavigatorRoomSettingsAccessTabView.tsx

@@ -0,0 +1,73 @@
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { Column } from '../../../../../common/Column';
+import { Flex } from '../../../../../common/Flex';
+import { Text } from '../../../../../common/Text';
+import { NavigatorRoomSettingsTabViewProps } from './NavigatorRoomSettingsTabViewProps.types';
+
+export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
+{
+    const { roomSettingsData = null, handleChange = null } = props;
+
+    const isPasswordValid = useCallback(() =>
+    {
+        return (roomSettingsData.password && (roomSettingsData.password.length > 0) && (roomSettingsData.password === roomSettingsData.confirmPassword));
+    }, [ roomSettingsData ]);
+
+    const trySave = useCallback(() =>
+    {
+        if(isPasswordValid()) handleChange('save', null);
+    }, [ isPasswordValid, handleChange ]);
+
+    return (
+        <>
+            <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={ (roomSettingsData.lockState === 0) } onChange={ event => handleChange('lock_state', 0) } />
+                        <Text>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
+                    </Flex>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomSettingsData.lockState === 1) } onChange={ event => handleChange('lock_state', 1) } />
+                        <Text>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
+                    </Flex>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomSettingsData.lockState === 2) } onChange={ event => handleChange('lock_state', 2) } />
+                        <Text>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
+                    </Flex>
+                    <Flex fullWidth gap={ 1 }>
+                        <input className="form-check-input" type="radio" name="lockState" checked={ (roomSettingsData.lockState === 3) } onChange={ event => handleChange('lock_state', 3) } />
+                        { (roomSettingsData.lockState !== 3) &&
+                            <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
+                        { (roomSettingsData.lockState === 3) &&
+                            <Column gap={ 1 }>
+                                <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
+                                <input type="password" className="form-control form-control-sm col-4" value={ roomSettingsData.password ?? '' } onChange={ (e) => handleChange('password', e.target.value) } onBlur={ trySave } placeholder={ LocalizeText('navigator.roomsettings.password') } />
+                                <input type="password" className="form-control form-control-sm col-4" value={ roomSettingsData.confirmPassword ?? '' } onChange={ (e) => handleChange('confirm_password', e.target.value) } onBlur={ trySave } placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } />
+                                { !isPasswordValid() &&
+                                    <Text bold small variant="danger">
+                                        { LocalizeText('navigator.roomsettings.invalidconfirm') }
+                                    </Text> }
+                            </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={ roomSettingsData.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={ roomSettingsData.allowPetsEat } onChange={ event => handleChange('allow_pets_eat', event.target.checked) } />
+                        <Text>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
+                    </Flex>
+                </Column>
+            </Column>
+        </>
+    );
+};

src/components/navigator/views/room-settings/views/NavigatorRoomSettingsBasicTabView.tsx

@@ -1,66 +1,31 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { FC, useCallback, useState } from 'react';
+import { FC, useState } from 'react';
-import { LocalizeText } from '../../../../../../api';
+import { LocalizeText } from '../../../../../api';
-import { Base } from '../../../../../../common/Base';
+import { Base } from '../../../../../common/Base';
-import { Flex } from '../../../../../../common/Flex';
+import { Flex } from '../../../../../common/Flex';
-import { Text } from '../../../../../../common/Text';
+import { Text } from '../../../../../common/Text';
-import { GetMaxVisitorsList } from '../../../../common/RoomSettingsUtils';
+import { GetMaxVisitorsList } from '../../../common/RoomSettingsUtils';
-import { useNavigatorContext } from '../../../../context/NavigatorContext';
+import { useNavigatorContext } from '../../../context/NavigatorContext';
-import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
+import { NavigatorRoomSettingsTabViewProps } from './NavigatorRoomSettingsTabViewProps.types';
 
 const DESC_MAX_LENGTH = 255;
 
 export const NavigatorRoomSettingsBasicTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
 {
-    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
+    const { roomSettingsData = null, handleChange = null } = props;
     const [ maxVisitorsList, setMaxVisitorsList ] = useState(GetMaxVisitorsList());
     const { navigatorState = null } = useNavigatorContext();
     const { categories = null } = navigatorState;
 
-    const handleChange = useCallback((field: string, value: string | number | boolean) =>
-    {
-        const roomSettings = Object.assign({}, roomSettingsData);
-
-        let save = true;
-
-        switch(field)
-        {
-            case 'name':
-                roomSettings.roomName = String(value);
-                save = false;
-                break;
-            case 'description':
-                roomSettings.roomDescription = String(value);
-                save = false;
-                break;
-            case 'category':
-                roomSettings.categoryId =  Number(value);
-                break;
-            case 'max_visitors': 
-                roomSettings.userCount = Number(value);
-                break;
-            case 'trade_state':
-                roomSettings.tradeState =  Number(value);
-                break;
-            case 'allow_walkthrough':
-                roomSettings.allowWalkthrough = Boolean(value);
-                break;
-        }
-
-        setRoomSettingsData(roomSettings);
-
-        if(save) onSave(roomSettings);
-    }, [ roomSettingsData, setRoomSettingsData, onSave ]);
-
     return (
         <>
             <Flex alignItems="center" gap={ 1 }>
                 <Text className="col-3">{ LocalizeText('navigator.roomname') }</Text>
-                <input className="form-control form-control-sm" value={ roomSettingsData.roomName } onChange={ event => handleChange('name', event.target.value) } onBlur={ () => onSave(roomSettingsData) } />
+                <input className="form-control form-control-sm" value={ roomSettingsData.roomName } onChange={ event => handleChange('name', event.target.value) } onBlur={ event => handleChange('save', null) } />
             </Flex>
             <Flex alignItems="center" gap={ 1 }>
                 <Text className="col-3">{ LocalizeText('navigator.roomsettings.desc') }</Text>
-                <textarea className="form-control form-control-sm" value={ roomSettingsData.roomDescription } onChange={ event => handleChange('description', event.target.value) } onBlur={ () => onSave(roomSettingsData) } maxLength={ DESC_MAX_LENGTH } />
+                <textarea className="form-control form-control-sm" value={ roomSettingsData.roomDescription } onChange={ event => handleChange('description', event.target.value) } onBlur={ event => handleChange('save', null) } maxLength={ DESC_MAX_LENGTH } />
             </Flex>
             <Flex alignItems="center" gap={ 1 }>
                 <Text className="col-3">{ LocalizeText('navigator.category') }</Text>

src/components/navigator/views/room-settings/views/NavigatorRoomSettingsModTabView.tsx

@@ -0,0 +1,47 @@
+import { RoomUnbanUserComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { Base } from '../../../../../common/Base';
+import { Button } from '../../../../../common/Button';
+import { Column } from '../../../../../common/Column';
+import { Grid } from '../../../../../common/Grid';
+import { Text } from '../../../../../common/Text';
+import { SendMessageHook } from '../../../../../hooks';
+import { NavigatorRoomSettingsTabViewProps } from './NavigatorRoomSettingsTabViewProps.types';
+
+export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
+{
+    const { roomSettingsData = null, handleChange = null } = props;
+    const [ selectedUserId, setSelectedUserId ] = useState<number>(-1);
+
+    const unBanUser = useCallback((userId: number) =>
+    {
+        handleChange('unban_user', userId)
+
+        SendMessageHook(new RoomUnbanUserComposer(userId, roomSettingsData.roomId));
+        setSelectedUserId(-1);
+    }, [ roomSettingsData, handleChange ]);
+
+    return (
+        <>
+            <Grid overflow="auto">
+                <Column size={ 6 }>
+                <Text bold>{ LocalizeText('navigator.roomsettings.moderation.banned.users') } ({ roomSettingsData.bannedUsers.size })</Text>
+                    <Column className="bg-white rounded" overflow="hidden">
+                        <Base className="list-container" overflow="auto">
+                            { Array.from(roomSettingsData.bannedUsers.entries()).map(([id, name], index) =>
+                                {
+                                    return <Text key={index} className={ ((id === selectedUserId) ? 'selected' : '') } onClick={ event => setSelectedUserId(id)}> { name }</Text>
+                                }) }
+                        </Base>
+                    </Column>
+                </Column>
+                <Column size={ 6 } justifyContent="end">
+                    <Button disabled={ (selectedUserId < 1) } onClick={ event => unBanUser(selectedUserId) }>
+                        { LocalizeText('navigator.roomsettings.moderation.unban')} {selectedUserId > 0 && roomSettingsData.bannedUsers.get(selectedUserId) }
+                    </Button>
+                </Column>
+            </Grid>
+        </>
+    );
+}

src/components/navigator/views/room-settings/views/NavigatorRoomSettingsRightsTabView.tsx

@@ -0,0 +1,83 @@
+import { RemoveAllRightsMessageComposer, RoomTakeRightsComposer } from '@nitrots/nitro-renderer';
+import { FC, useCallback } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { Button } from '../../../../../common/Button';
+import { Column } from '../../../../../common/Column';
+import { Flex } from '../../../../../common/Flex';
+import { Grid } from '../../../../../common/Grid';
+import { Text } from '../../../../../common/Text';
+import { SendMessageHook } from '../../../../../hooks';
+import { UserProfileIconView } from '../../../../../layout';
+import { NavigatorRoomSettingsTabViewProps } from './NavigatorRoomSettingsTabViewProps.types';
+
+export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
+{
+    const { roomSettingsData = null, handleChange = null } = props;
+
+    const removeUserRights = useCallback( (userId: number) =>
+    {
+        handleChange('remove_rights_user', userId);
+
+        SendMessageHook(new RoomTakeRightsComposer(userId));
+    }, [ handleChange ]);
+
+    const removeAllRights = useCallback( () =>
+    {
+        handleChange('remove_all_rights', null);
+        
+        SendMessageHook(new RemoveAllRightsMessageComposer(roomSettingsData.roomId));
+    }, [ roomSettingsData, handleChange ]);
+
+    return (
+        <>
+            <Grid overflow="auto">
+                <Column size={ 6 }>
+                    <Text bold>
+                        { LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString() ]) }
+                    </Text>
+                    <Column fullWidth className="bg-white rounded list-container p-2" overflow="auto" gap={ 1 }>
+                        { Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
+                            {
+                                return (
+                                    <Flex key={ index } alignItems="center" gap={ 1 } overflow="hidden">
+                                        <UserProfileIconView userName={ name } />
+                                        <Text pointer grow key={index} onClick={ event => removeUserRights(id) }> { name }</Text>
+                                    </Flex>
+                                );
+                            }) }
+                    </Column>
+                    <Button variant="danger" disabled={ !roomSettingsData.usersWithRights.size } onClick={ removeAllRights } >
+                        { LocalizeText('navigator.flatctrls.clear') }
+                    </Button>
+                </Column>
+                <Column size={ 6 }>
+                    <Column gap={ 1 }>
+                        <Text bold>{ LocalizeText('navigator.roomsettings.moderation.mute.header') }</Text>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <input className="form-check-input" type="checkbox" checked={ (roomSettingsData.muteState === 1) } onChange={ event => handleChange('moderation_mute', (event.target.checked ? 1 : 0)) } />
+                            <Text>{ LocalizeText('navigator.roomsettings.moderation.rights') }</Text>
+                        </Flex>
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Text bold>{LocalizeText('navigator.roomsettings.moderation.kick.header')}</Text>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <input className="form-check-input" type="checkbox" checked={ (roomSettingsData.kickState === 0) } onChange={ event => handleChange('moderation_kick', (event.target.checked ? 0 : 2)) } />
+                            <Text>{ LocalizeText('navigator.roomsettings.moderation.all') }</Text>
+                        </Flex>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <input className="form-check-input" type="checkbox" checked={ ((roomSettingsData.kickState === 1) || (roomSettingsData.kickState === 0)) } disabled={ (roomSettingsData.kickState === 0) } onChange={ event => handleChange('moderation_kick', (event.target.checked ? 1 : 2)) } />
+                            <Text>{ LocalizeText('navigator.roomsettings.moderation.rights') }</Text>
+                        </Flex>
+                    </Column>
+                    <Column gap={ 1 }>
+                        <Text bold>{LocalizeText('navigator.roomsettings.moderation.ban.header')}</Text>
+                        <Flex alignItems="center" gap={ 1 }>
+                            <input className="form-check-input" type="checkbox" checked={ (roomSettingsData.banState === 1) } onChange={ event => handleChange('moderation_ban', (event.target.checked ? 1 : 0)) } />
+                            <Text>{ LocalizeText('navigator.roomsettings.moderation.rights') }</Text>
+                        </Flex>
+                    </Column>
+                </Column>
+            </Grid>
+        </>
+    );
+}

src/components/navigator/views/room-settings/views/NavigatorRoomSettingsTabViewProps.types.ts

@@ -0,0 +1,7 @@
+import RoomSettingsData from '../../../common/RoomSettingsData';
+
+export class NavigatorRoomSettingsTabViewProps
+{
+    roomSettingsData: RoomSettingsData;
+    handleChange: (field: string, value: string | number | boolean) => void;
+}

src/components/navigator/views/room-settings/views/NavigatorRoomSettingsVipChatTabView.tsx

@@ -0,0 +1,67 @@
+import { FC } from 'react';
+import { LocalizeText } from '../../../../../api';
+import { Column } from '../../../../../common/Column';
+import { Flex } from '../../../../../common/Flex';
+import { Grid } from '../../../../../common/Grid';
+import { Text } from '../../../../../common/Text';
+import { NavigatorRoomSettingsTabViewProps } from './NavigatorRoomSettingsTabViewProps.types';
+
+export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
+{
+    const { roomSettingsData = null, handleChange = null } = props;
+
+    return (
+        <>
+            <Column gap={ 1 }>
+                <Text bold>{LocalizeText('navigator.roomsettings.vip.caption')}</Text>
+                <Text>{LocalizeText('navigator.roomsettings.vip.info')}</Text>
+            </Column>
+            <Grid overflow="auto">
+                <Column size={ 6 } gap={ 1 }>
+                    <Text bold>{LocalizeText('navigator.roomsettings.chat_settings')}</Text>
+                    <Text>{LocalizeText('navigator.roomsettings.chat_settings.info')}</Text>
+                    <select className="form-select form-select-sm" value={roomSettingsData.chatBubbleMode} onChange={event => handleChange('bubble_mode', event.target.value)}>
+                        <option value="0">{LocalizeText('navigator.roomsettings.chat.mode.free.flow')}</option>
+                        <option value="1">{LocalizeText('navigator.roomsettings.chat.mode.line.by.line')}</option>
+                    </select>
+                    <select className="form-select form-select-sm" value={roomSettingsData.chatBubbleWeight} onChange={event => handleChange('chat_weight', event.target.value)}>
+                        <option value="0">{LocalizeText('navigator.roomsettings.chat.bubbles.width.normal')}</option>
+                        <option value="1">{LocalizeText('navigator.roomsettings.chat.bubbles.width.thin')}</option>
+                        <option value="2">{LocalizeText('navigator.roomsettings.chat.bubbles.width.wide')}</option>
+                    </select>
+                    <select className="form-select form-select-sm" value={roomSettingsData.chatBubbleSpeed} onChange={event => handleChange('bubble_speed', event.target.value)}>
+                        <option value="0">{LocalizeText('navigator.roomsettings.chat.speed.fast')}</option>
+                        <option value="1">{LocalizeText('navigator.roomsettings.chat.speed.normal')}</option>
+                        <option value="2">{LocalizeText('navigator.roomsettings.chat.speed.slow')}</option>
+                    </select>
+                    <select className="form-select form-select-sm" value={roomSettingsData.chatFloodProtection} onChange={event => handleChange('flood_protection', event.target.value)}>
+                        <option value="0">{LocalizeText('navigator.roomsettings.chat.flood.loose')}</option>
+                        <option value="1">{LocalizeText('navigator.roomsettings.chat.flood.normal')}</option>
+                        <option value="2">{LocalizeText('navigator.roomsettings.chat.flood.strict')}</option>
+                    </select>
+                    <Text>{ LocalizeText('navigator.roomsettings.chat_settings.hearing.distance') }</Text>
+                    <input type="number" min="0" className="form-control form-control-sm" value={roomSettingsData.chatDistance} onChange={event => handleChange('chat_distance', event.target.valueAsNumber)} onBlur={ event => handleChange('save', null) } />
+                </Column>
+                <Column size={ 6 } gap={ 1 }>
+                    <Text bold>{LocalizeText('navigator.roomsettings.vip_settings')}</Text>
+                    <Flex alignItems="center" gap={ 1 }>
+                        <input className="form-check-input" type="checkbox" checked={roomSettingsData.hideWalls} onChange={(e) => handleChange('hide_walls', e.target.checked)} />
+                        <Text>{LocalizeText('navigator.roomsettings.hide_walls')}</Text>
+                    </Flex>
+                    <select className="form-select form-select-sm" value={roomSettingsData.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={roomSettingsData.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>
+                        <option value="-2">{LocalizeText('navigator.roomsettings.floor_thickness.thinnest')}</option>
+                    </select>
+                </Column>
+            </Grid>
+        </>
+    );
+}

src/components/navigator/views/room-settings/views/tab-access/NavigatorRoomSettingsAccessTabView.tsx

@@ -1,102 +0,0 @@
-import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../../../api';
-import { Column } from '../../../../../../common/Column';
-import { Flex } from '../../../../../../common/Flex';
-import { Text } from '../../../../../../common/Text';
-import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
-
-export const NavigatorRoomSettingsAccessTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
-{
-    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
-
-    const handleChange = useCallback((field: string, value: string | number | boolean) =>
-    {
-        const roomSettings = Object.assign({}, roomSettingsData);
-
-        let save = true;
-
-        switch(field)
-        {
-            case 'lock_state':
-                roomSettings.lockState = Number(value);
-
-                if(Number(value) === 3) save = false;
-                break;
-            case 'password':
-                roomSettings.password = String(value);
-                save = false;
-                break;
-            case 'confirm_password':
-                roomSettings.confirmPassword = String(value);
-                save = false;
-                break;
-            case 'allow_pets':
-                roomSettings.allowPets = Boolean(value);
-                break;
-            case 'allow_pets_eat':
-                roomSettings.allowPetsEat = Boolean(value);
-                break;
-        }
-
-        setRoomSettingsData(roomSettings);
-
-        if(save) onSave(roomSettings);
-    }, [ roomSettingsData, setRoomSettingsData, onSave ]);
-
-    const isPasswordValid = useCallback(() =>
-    {
-        return (roomSettingsData.password && (roomSettingsData.password.length > 0) && (roomSettingsData.password === roomSettingsData.confirmPassword));
-    }, [ roomSettingsData ]);
-
-    const trySave = useCallback(() =>
-    {
-        if(isPasswordValid()) onSave(roomSettingsData);
-    }, [isPasswordValid, onSave, roomSettingsData]);
-
-    return (
-        <>
-            <Text bold>{LocalizeText('navigator.roomsettings.roomaccess.caption')}</Text>
-            <Text>{ LocalizeText('navigator.roomsettings.roomaccess.info') }</Text>
-            <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={ roomSettingsData.lockState === 0 } onChange={ (e) => handleChange('lock_state', 0) } />
-                    <Text>{ LocalizeText('navigator.roomsettings.doormode.open') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="radio" name="lockState" checked={ roomSettingsData.lockState === 1 } onChange={ (e) => handleChange('lock_state', 1) } />
-                    <Text>{ LocalizeText('navigator.roomsettings.doormode.doorbell') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="radio" name="lockState" checked={ roomSettingsData.lockState === 2 } onChange={ (e) => handleChange('lock_state', 2) } />
-                    <Text>{ LocalizeText('navigator.roomsettings.doormode.invisible') }</Text>
-                </Flex>
-                <Flex fullWidth gap={ 1 }>
-                    <input className="form-check-input" type="radio" name="lockState" checked={ roomSettingsData.lockState === 3 } onChange={ (e) => handleChange('lock_state', 3) } />
-                    { (roomSettingsData.lockState !== 3) && <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text> }
-                    { roomSettingsData.lockState === 3 &&
-                        <Column gap={ 1 }>
-                            <Text>{ LocalizeText('navigator.roomsettings.doormode.password') }</Text>
-                            <input type="password" className="form-control form-control-sm col-4" value={ roomSettingsData.password ?? '' } onChange={ (e) => handleChange('password', e.target.value) } onBlur={ trySave } placeholder={ LocalizeText('navigator.roomsettings.password') } />
-                            <input type="password" className="form-control form-control-sm col-4" value={ roomSettingsData.confirmPassword ?? '' } onChange={ (e) => handleChange('confirm_password', e.target.value) } onBlur={ trySave } placeholder={ LocalizeText('navigator.roomsettings.passwordconfirm') } />
-                                { !isPasswordValid() &&
-                                    <small className="text-danger fw-bold">
-                                        { LocalizeText('navigator.roomsettings.invalidconfirm') }
-                                    </small> }
-                        </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={ roomSettingsData.allowPets } onChange={ (e) => handleChange('allow_pets', e.target.checked) } />
-                    <Text>{ LocalizeText('navigator.roomsettings.allowpets') }</Text>
-                </Flex>
-                <Flex alignItems="center" gap={ 1 }>
-                    <input className="form-check-input" type="checkbox" checked={ roomSettingsData.allowPetsEat } onChange={ (e) => handleChange('allow_pets_eat', e.target.checked) } />
-                    <Text>{ LocalizeText('navigator.roomsettings.allowfoodconsume') }</Text>
-                </Flex>
-            </Column>
-        </>
-    );
-};

src/components/navigator/views/room-settings/views/tab-mod/NavigatorRoomSettingsModTabView.tsx

@@ -1,107 +0,0 @@
-import { RoomUnbanUserComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useState } from 'react';
-import { LocalizeText } from '../../../../../../api';
-import { SendMessageHook } from '../../../../../../hooks';
-import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
-
-export const NavigatorRoomSettingsModTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
-{
-    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
-    const [selectedUserId, setSelectedUserId] = useState<number>(-1);
-
-    const handleChange = useCallback((field: string, value: string | number | boolean) =>
-    {
-        const clone = Object.assign({}, roomSettingsData);
-        let save = true;
-
-        switch(field)
-        {
-            case 'moderation_mute':
-                clone.muteState = Number(value);
-                break;
-            case 'moderation_kick':
-                clone.kickState = Number(value);
-                break;
-            case 'moderation_ban':
-                clone.banState = Number(value);
-                break;
-        }
-
-        setRoomSettingsData(clone);
-
-        if(save) onSave(clone);
-    }, [roomSettingsData, setRoomSettingsData, onSave]);
-
-    const unBanUser = useCallback((userId: number) =>
-    {
-        const clone = Object.assign({}, roomSettingsData);
-
-        clone.bannedUsers.delete(userId);
-        setRoomSettingsData(clone);
-
-        SendMessageHook(new RoomUnbanUserComposer(userId, roomSettingsData.roomId));
-        setSelectedUserId(-1);
-    }, [roomSettingsData, setRoomSettingsData]);
-
-    return (
-        <>
-            <div className="mb-3">{LocalizeText('navigator.roomsettings.moderation.header')}</div>
-            <div className="form-group mb-1" >
-                <div className="fw-bold">{LocalizeText('navigator.roomsettings.moderation.mute.header')}</div>
-                <div className="form-check form-check-inline">
-                    <input className="form-check-input" type="radio" name="moderation_mute" checked={roomSettingsData.muteState === 0} onChange={(e) => handleChange('moderation_mute', 0)} />
-                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.none')}</label>
-                </div>
-                <div className="form-check form-check-inline">
-                    <input className="form-check-input" type="radio" name="moderation_mute" checked={roomSettingsData.muteState === 1} onChange={(e) => handleChange('moderation_mute', 1)} />
-                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.rights')}</label>
-                </div>
-            </div>
-            <div className="form-group mb-1" >
-                <div className="fw-bold">{LocalizeText('navigator.roomsettings.moderation.kick.header')}</div>
-                <div className="form-check form-check-inline">
-                    <input className="form-check-input" type="radio" name="moderation_kick" checked={roomSettingsData.kickState === 0} onChange={(e) => handleChange('moderation_kick', 0)} />
-                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.all')}</label>
-                </div>
-                <div className="form-check form-check-inline">
-                    <input className="form-check-input" type="radio" name="moderation_kick" checked={roomSettingsData.kickState === 1} onChange={(e) => handleChange('moderation_kick', 1)} />
-                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.rights')}</label>
-                </div>
-                <div className="form-check form-check-inline">
-                    <input className="form-check-input" type="radio" name="moderation_kick" checked={roomSettingsData.kickState === 2} onChange={(e) => handleChange('moderation_kick', 2)} />
-                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.none')}</label>
-                </div>
-            </div>
-            <div className="form-group mb-1" >
-                <div className="fw-bold">{LocalizeText('navigator.roomsettings.moderation.ban.header')}</div>
-                <div className="form-check form-check-inline">
-                    <input className="form-check-input" type="radio" name="moderation_ban" checked={roomSettingsData.banState === 0} onChange={(e) => handleChange('moderation_ban', 0)} />
-                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.none')}</label>
-                </div>
-                <div className="form-check form-check-inline">
-                    <input className="form-check-input" type="radio" name="moderation_ban" checked={roomSettingsData.banState === 1} onChange={(e) => handleChange('moderation_ban', 1)} />
-                    <label className="form-check-label">{LocalizeText('navigator.roomsettings.moderation.rights')}</label>
-                </div>
-            </div>
-            <div className="fw-bold mt-3 mb-1">{LocalizeText('navigator.roomsettings.moderation.banned.users')} ({roomSettingsData.bannedUsers.size})</div>
-            <div className="row">
-                <div className="col-6">
-                    <div className="list-container">
-                        {
-                            Array.from(roomSettingsData.bannedUsers.entries()).map(([id, name], index) =>
-                            {
-                                return <div key={index} className={'list-item' + ((id === selectedUserId) ? ' selected' : '')} onClick={e => setSelectedUserId(id)} >
-                                    {name}
-                                </div>
-                            })
-                        }
-                    </div>
-                </div>
-                <div className="col-6">
-                    <button className={'btn btn-primary btn-sm w-100' + ((selectedUserId < 1) ? ' disabled' : '')} onClick={ e => unBanUser(selectedUserId) }>{LocalizeText('navigator.roomsettings.moderation.unban')} {selectedUserId > 0 && roomSettingsData.bannedUsers.get(selectedUserId)}
-                    </button>
-                </div>
-            </div>
-        </>
-    );
-}

src/components/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.tsx

@@ -1,152 +0,0 @@
-import { RemoveAllRightsMessageComposer, RoomGiveRightsComposer, RoomTakeRightsComposer } from '@nitrots/nitro-renderer';
-import { FC, useCallback, useMemo } from 'react';
-import { LocalizeText } from '../../../../../../api';
-import { SendMessageHook } from '../../../../../../hooks';
-import { UserProfileIconView } from '../../../../../../layout';
-import { NavigatorRoomSettingsRightsTabViewProps } from './NavigatorRoomSettingsRightsTabView.types';
-
-export const NavigatorRoomSettingsRightsTabView: FC<NavigatorRoomSettingsRightsTabViewProps> = props =>
-{
-    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null, friends = null } = props;
-
-    const removeUserRights = useCallback( (userId: number) =>
-    {
-        const clone = Object.assign({}, roomSettingsData);
-
-        clone.usersWithRights.delete(userId);
-
-        setRoomSettingsData(clone);
-        SendMessageHook(new RoomTakeRightsComposer(userId));
-    }, [roomSettingsData, setRoomSettingsData]);
-
-    const giveUserRights = useCallback( (userId: number, name: string) =>
-    {
-        const clone = Object.assign({}, roomSettingsData);
-
-        clone.usersWithRights.set(userId, name);
-
-        setRoomSettingsData(clone);
-        SendMessageHook(new RoomGiveRightsComposer(userId));
-    }, [roomSettingsData, setRoomSettingsData]);
-
-    const removeAllRights = useCallback( () =>
-    {
-        const clone = Object.assign({}, roomSettingsData);
-
-        clone.usersWithRights = new Map();
-
-        setRoomSettingsData(clone);
-        SendMessageHook(new RemoveAllRightsMessageComposer(clone.roomId));
-    }, [roomSettingsData, setRoomSettingsData]);
-
-    const friendsWithoutRights = useMemo(() =>
-    {
-        const map = new Map<number, string>();
-
-        friends.forEach((name, id) =>
-        {
-            if(!roomSettingsData.usersWithRights.has(id))
-                map.set(id, name);
-        });
-
-        return map;
-    }, [friends, roomSettingsData]);
-
-    return (
-        <div className="d-flex flex-column h-100 overflow-hidden user-rights">
-            <div className="row">
-                <div className="col">
-                    filter
-                </div>
-            </div>
-            <div className="row h-100">
-                <div className="col-6 d-flex flex-column h-100">
-                    <div className="fw-bold mb-1">{ LocalizeText('navigator.flatctrls.userswithrights', [ 'displayed', 'total' ], [ roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString() ]) }</div>
-                    <div className="d-flex flex-column justify-content-between rounded bg-white h-100 overflow-hidden px-2 py-1 user-rights-container">
-                        <div className="row row-cols-1 overflow-auto">
-                            { Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
-                                {
-                                    return (
-                                        <div key={index} className="d-flex align-items-center col w-100" onClick={ () => removeUserRights(id) }>
-                                            <div className="d-flex align-items-center me-2">
-                                                <UserProfileIconView userName={ name } />
-                                                <span>{ name }</span>
-                                            </div>
-                                            <i className="fas fa-caret-right fw-bold text-black me-2" />
-                                        </div>
-                                    );
-                                })
-                            }
-                        </div>
-                        <button className="btn btn-danger btn-sm w-100" disabled={ !roomSettingsData.usersWithRights.size } onClick={ removeAllRights } >{ LocalizeText('navigator.flatctrls.clear') }</button>
-                    </div>
-                </div>
-                <div className="col-6 d-flex flex-column h-100">
-                    <div className="fw-bold mb-1">{ LocalizeText('navigator.flatctrls.friends', [ 'displayed', 'total' ], [ friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString() ]) }</div>
-                    <div className="d-flex flex-column rounded bg-white h-100 overflow-hidden px-2 py-1 user-rights-container">
-                        <div className="row row-cols-1 overflow-auto">
-                            { Array.from(friendsWithoutRights.entries()).map(([id, name], index) =>
-                                {
-                                    return (
-                                        <div key={index} className="d-flex align-items-center col w-100" onClick={ () => giveUserRights(id, name) }>
-                                            <i className="fas fa-caret-left fw-bold text-black me-2" />
-                                            <div className="d-flex align-items-center">
-                                                <UserProfileIconView userName={ name } />
-                                                <span>{ name }</span>
-                                            </div>
-                                        </div>
-                                    );
-                                })
-                            }
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-            // <div className="row h-100">
-            //     <div className="col-6">
-            //         <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.userswithrights', ['displayed', 'total'], [roomSettingsData.usersWithRights.size.toString(), roomSettingsData.usersWithRights.size.toString()])}</div>
-            //     </div>
-            //     <div className="col-6">
-            //         <div className="fw-bold mb-2">{LocalizeText('navigator.flatctrls.friends', ['displayed', 'total'], [friendsWithoutRights.size.toString(), friendsWithoutRights.size.toString()])}</div>
-            //     </div>
-            // </div>
-            // <div className="row h-100">
-            //     <div className="col-6 d-flex flex-column h-100">
-            //         <div className="row row-cols-1 g-0 overflow-auto">
-            //             {
-            //                 Array.from(roomSettingsData.usersWithRights.entries()).map(([id, name], index) =>
-            //                 {
-            //                     return (
-            //                         <div key={ index } className="col">
-            //                             <span className="w-100" >{name}</span> 
-            //                             <button className="btn btn-danger btn-sm rights-button" onClick={ () => removeUserRights(id) }>
-            //                                 <i className="fas fa-times" />
-            //                             </button>
-            //                         </div>
-            //                     );
-            //                 })
-            //             }
-            //         </div>
-            //         <button className={'btn btn-danger btn-sm w-100' + ((roomSettingsData.usersWithRights.size < 1) ? ' disabled' : '')} onClick={ removeAllRights } >{ LocalizeText('navigator.flatctrls.clear') }</button>
-            //     </div>
-            //     <div className="col-6 d-flex flex-column h-100">
-            //         <div className="row row-cols-1 g-0 overflow-auto bg-white h-100">
-            //             {
-            //                 Array.from(friendsWithoutRights.entries()).map(([id, name], index) =>
-            //                 {
-            //                     return (
-            //                         <div key={index} className="col">
-            //                             <span className="w-100">{name}</span>
-            //                             <button className="btn btn-success btn-sm rights-button" onClick={ () => giveUserRights(id, name) }>
-            //                                 <i className="fas fa-chevron-left" />
-            //                             </button>
-            //                         </div>
-            //                     );
-            //                 })
-            //             }
-            //         </div>
-            //     </div >
-            // </div >
-    );
-}

src/components/navigator/views/room-settings/views/tab-rights/NavigatorRoomSettingsRightsTabView.types.ts

@@ -1,6 +0,0 @@
-import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
-
-export interface NavigatorRoomSettingsRightsTabViewProps extends NavigatorRoomSettingsTabViewProps
-{
-    friends: Map<number, string>;
-}

src/components/navigator/views/room-settings/views/tab-vipchat/NavigatorRoomSettingsVipChatTabView.tsx

@@ -1,108 +0,0 @@
-import { FC, useCallback } from 'react';
-import { LocalizeText } from '../../../../../../api';
-import { NavigatorRoomSettingsTabViewProps } from '../../NavigatorRoomSettingsView.types';
-
-export const NavigatorRoomSettingsVipChatTabView: FC<NavigatorRoomSettingsTabViewProps> = props =>
-{
-    const { roomSettingsData = null, setRoomSettingsData = null, onSave = null } = props;
-
-    const handleChange = useCallback((field: string, value: string | number | boolean) =>
-    {
-        const clone = Object.assign({}, roomSettingsData);
-        let save = true;
-
-        switch(field)
-        {
-            case 'hide_walls':
-                clone.hideWalls = Boolean(value);
-                break;
-            case 'wall_thickness':
-                clone.wallThickness = Number(value);
-                break;
-            case 'floor_thickness':
-                clone.floorThickness = Number(value);
-                break;
-            case 'bubble_mode':
-                clone.chatBubbleMode = Number(value);
-                break;
-            case 'chat_weight':
-                clone.chatBubbleWeight = Number(value);
-                break;
-            case 'bubble_speed':
-                clone.chatBubbleSpeed = Number(value);
-                break;
-            case 'flood_protection':
-                clone.chatFloodProtection = Number(value);
-                break;
-            case 'chat_distance':
-                clone.chatDistance = Number(value);
-                save = false;
-                break;
-        }
-
-        setRoomSettingsData(clone);
-
-        if(save) onSave(clone);
-    }, [roomSettingsData, setRoomSettingsData, onSave]);
-
-    return (
-        <>
-            <div className="fw-bold">{LocalizeText('navigator.roomsettings.vip.caption')}</div>
-            <div className="mb-3">{LocalizeText('navigator.roomsettings.vip.info')}</div>
-            <div className="fw-bold">{LocalizeText('navigator.roomsettings.vip_settings')}</div>
-            <div className="form-check">
-                <input className="form-check-input" type="checkbox" checked={roomSettingsData.hideWalls} onChange={(e) => handleChange('hide_walls', e.target.checked)} />
-                <label className="form-check-label">{LocalizeText('navigator.roomsettings.hide_walls')}</label>
-            </div>
-            <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={roomSettingsData.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>
-            </div>
-            <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={roomSettingsData.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>
-                    <option value="-2">{LocalizeText('navigator.roomsettings.floor_thickness.thinnest')}</option>
-                </select>
-            </div>
-            <div className="fw-bold">{LocalizeText('navigator.roomsettings.chat_settings')}</div>
-            <div className="mb-2">{LocalizeText('navigator.roomsettings.chat_settings.info')}</div>
-            <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={roomSettingsData.chatBubbleMode} onChange={event => handleChange('bubble_mode', event.target.value)}>
-                    <option value="0">{LocalizeText('navigator.roomsettings.chat.mode.free.flow')}</option>
-                    <option value="1">{LocalizeText('navigator.roomsettings.chat.mode.line.by.line')}</option>
-                </select>
-            </div>
-            <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={roomSettingsData.chatBubbleWeight} onChange={event => handleChange('chat_weight', event.target.value)}>
-                    <option value="0">{LocalizeText('navigator.roomsettings.chat.bubbles.width.normal')}</option>
-                    <option value="1">{LocalizeText('navigator.roomsettings.chat.bubbles.width.thin')}</option>
-                    <option value="2">{LocalizeText('navigator.roomsettings.chat.bubbles.width.wide')}</option>
-                </select>
-            </div>
-            <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={roomSettingsData.chatBubbleSpeed} onChange={event => handleChange('bubble_speed', event.target.value)}>
-                    <option value="0">{LocalizeText('navigator.roomsettings.chat.speed.fast')}</option>
-                    <option value="1">{LocalizeText('navigator.roomsettings.chat.speed.normal')}</option>
-                    <option value="2">{LocalizeText('navigator.roomsettings.chat.speed.slow')}</option>
-                </select>
-            </div>
-            <div className="form-group mb-1">
-                <select className="form-select form-select-sm" value={roomSettingsData.chatFloodProtection} onChange={event => handleChange('flood_protection', event.target.value)}>
-                    <option value="0">{LocalizeText('navigator.roomsettings.chat.flood.loose')}</option>
-                    <option value="1">{LocalizeText('navigator.roomsettings.chat.flood.normal')}</option>
-                    <option value="2">{LocalizeText('navigator.roomsettings.chat.flood.strict')}</option>
-                </select>
-            </div>
-            <div className="form-group mb-0">
-                <label>{LocalizeText('navigator.roomsettings.chat_settings.hearing.distance')}</label>
-                <input type="number" min="0" className="form-control form-control-sm" value={roomSettingsData.chatDistance} onChange={event => handleChange('chat_distance', event.target.valueAsNumber)} onBlur={() => onSave(roomSettingsData)} />
-            </div>
-        </>
-    );
-}

src/components/navigator/views/search-result-item/NavigatorSearchResultItemView.scss

@@ -1,11 +0,0 @@
-.nitro-navigator-result {
-    color: $black;
-
-    .badge {
-        width: 35px;
-
-        .fas {
-            margin-right: 2px;
-        }
-    }
-}

src/components/navigator/views/search-result/NavigatorSearchResultItemView.tsx

@@ -2,12 +2,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { RoomDataParser } from '@nitrots/nitro-renderer';
 import { FC, MouseEvent } from 'react';
 import { CreateRoomSession, GetSessionDataManager, TryVisitRoom } from '../../../../api';
-import { Flex, FlexProps } from '../../../../common/Flex';
+import { Flex } from '../../../../common/Flex';
+import { LayoutGridItemProps } from '../../../../common/layout/LayoutGridItem';
 import { Text } from '../../../../common/Text';
 import { UpdateDoorStateEvent } from '../../../../events';
 import { dispatchUiEvent } from '../../../../hooks';
 
-export interface NavigatorSearchResultItemViewProps extends FlexProps
+export interface NavigatorSearchResultItemViewProps extends LayoutGridItemProps
 {
     roomData: RoomDataParser
 }
@@ -70,7 +71,7 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
     }
 
     return (
-        <Flex pointer onClick={ visitRoom } overflow="hidden" gap={ 2 } { ...rest }>
+        <Flex pointer overflow="hidden" alignItems="center" onClick={ visitRoom } gap={ 2 } className="navigator-item px-2 py-1 small" { ...rest }>
             <Flex center className={ 'badge p-1 ' + getUserCounterColor() } gap={ 1 }>
                 <FontAwesomeIcon icon="user" />
                 { roomData.userCount }
@@ -82,26 +83,6 @@ export const NavigatorSearchResultItemView: FC<NavigatorSearchResultItemViewProp
                 { (roomData.doorMode !== RoomDataParser.OPEN_STATE) && 
                     <i className={ ('icon icon-navigator-room-' + ((roomData.doorMode === RoomDataParser.DOORBELL_STATE) ? 'locked' : (roomData.doorMode === RoomDataParser.PASSWORD_STATE) ? 'password' : (roomData.doorMode === RoomDataParser.INVISIBLE_STATE) ? 'invisible' : '')) } /> }
             </Flex>
-            {/* <div className="d-flex flex-column justify-content-center align-items-center nitro-navigator-result small cursor-pointer" onClick={ visitRoom }>
-                <div className="d-flex justify-content-between w-100 px-2 py-1">
-                    <div className="d-flex justify-content-center flex-grow-1 overflow-hidden">
-                        <div className={ 'd-flex align-items-center justify-content-center badge p-1 ' + getUserCounterColor() }>
-                            <i className="fas fa-user"></i>
-                            { roomData.userCount }
-                        </div>
-                        <div className="d-flex flex-column justify-content-center align-items-start flex-grow-1 px-2 overflow-hidden">
-                            <span className="d-block text-truncate" style={ { maxWidth: '95%' } }>{ roomData.roomName }</span>
-                        </div>
-                    </div>
-                    <div className="d-flex flex-row-reverse align-items-center">
-                        <i className="icon icon-navigator-info" onClick={ openInfo }></i>
-                        { roomData.habboGroupId > 0 && <i className="icon icon-navigator-room-group me-2"></i> }
-                        { roomData.doorMode !== RoomDataParser.OPEN_STATE && 
-                            <i className={ 'me-2 icon icon-navigator-room-' + classNames( { 'locked': roomData.doorMode === RoomDataParser.DOORBELL_STATE, 'password': roomData.doorMode === RoomDataParser.PASSWORD_STATE, 'invisible': roomData.doorMode === RoomDataParser.INVISIBLE_STATE })}></i>
-                        }
-                    </div>
-                </div>
-            </div> */}
             { children }
         </Flex>
     );

src/components/navigator/views/search-result/NavigatorSearchResultView.scss

@@ -1,35 +0,0 @@
-.nitro-navigator-search-result {
-    border: 1px solid #ced4da;
-
-    .nitro-navigator-result-list {
-
-        .nitro-navigator-result {
-            background: $grid-active-bg-color;
-        }
-    
-        &.row {
-    
-            &.row-cols-1 {
-    
-                .col:nth-child(even) {
-    
-                    .nitro-navigator-result {
-                        background: $white !important;
-                    }
-                } 
-            }
-    
-            &.row-cols-2 {
-    
-                .col:nth-child(4n+3),
-                .col:nth-child(4n+4) {
-                    
-                    .nitro-navigator-result {
-                        background: $white !important;
-                    }
-                }
-            }
-        }
-    }
-    
-}

src/components/navigator/views/search-result/NavigatorSearchResultView.tsx

@@ -1,48 +1,39 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { NavigatorSearchResultList } from '@nitrots/nitro-renderer';
 import { FC, useEffect, useState } from 'react';
 import { LocalizeText } from '../../../../api';
 import { Column } from '../../../../common/Column';
 import { Flex } from '../../../../common/Flex';
 import { Grid } from '../../../../common/Grid';
 import { Text } from '../../../../common/Text';
-import { NavigatorSearchResultItemView } from '../search-result-item/NavigatorSearchResultItemView';
+import { BatchUpdates } from '../../../../hooks';
-import { NavigatorSearchResultViewDisplayMode, NavigatorSearchResultViewProps } from './NavigatorSearchResultView.types';
+import { NavigatorSearchResultViewDisplayMode } from '../../common/NavigatorSearchResultViewDisplayMode';
+import { NavigatorSearchResultItemView } from './NavigatorSearchResultItemView';
+
+export interface NavigatorSearchResultViewProps
+{
+    searchResult: NavigatorSearchResultList;
+}
 
 export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = props =>
 {
     const { searchResult = null } = props;
 
-    const [ isExtended, setIsExtended ]     = useState(true);
+    const [ isExtended, setIsExtended ] = useState(true);
-    const [ displayMode, setDisplayMode ]   = useState<number>(0);
+    const [ displayMode, setDisplayMode ] = useState<number>(0);
 
-    useEffect(() =>
+    const getResultTitle = () =>
-    {
-        if(!searchResult) return;
-
-        //setIsExtended(searchResult.closed);
-        //setDisplayMode(searchResult.mode);
-    }, [ searchResult ]);
-
-    function getResultTitle(): string
     {
         let name = searchResult.code;
 
         if(!name || !name.length) return searchResult.data;
 
-        if(name.startsWith('${')) return name.substr(2, (name.length - 3));
+        if(name.startsWith('${')) return name.slice(2, (name.length - 1));
 
         return ('navigator.searchcode.title.' + name);
     }
 
-    function toggleExtended(): void
+    const toggleDisplayMode = () =>
-    {
-        setIsExtended(prevValue =>
-            {
-                return !prevValue;
-            });
-    }
-
-    function toggleDisplayMode(): void
     {
         setDisplayMode(prevValue =>
             {
@@ -51,23 +42,33 @@ export const NavigatorSearchResultView: FC<NavigatorSearchResultViewProps> = pro
                 return NavigatorSearchResultViewDisplayMode.LIST;
             });
     }
+
+    useEffect(() =>
+    {
+        if(!searchResult) return;
+
+        BatchUpdates(() =>
+        {
+            //setIsExtended(searchResult.closed);
+            setDisplayMode(searchResult.mode);
+        });
+    }, [ searchResult ]);
+
+    const gridHasTwoColumns = (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS);
     
     return (
-        <Column className="bg-white rounded p-1" overflow="hidden">
+        <Column className="bg-white rounded border border-muted" gap={ 0 }>
-            <Flex fullWidth alignItems="center" justifyContent="between" className="p-1">
+            <Flex fullWidth alignItems="center" justifyContent="between" className="px-2 py-1">
-                <Flex alignItems="center" gap={ 1 }>
+                <Flex grow pointer alignItems="center" gap={ 1 } onClick={ event => setIsExtended(prevValue => !prevValue) }>
-                    <FontAwesomeIcon icon={ isExtended ? 'minus' : 'plus' } className="text-secondary" onClick={ toggleExtended } />
+                    <FontAwesomeIcon icon={ isExtended ? 'minus' : 'plus' } className="text-secondary" />
                     <Text>{ LocalizeText(getResultTitle()) }</Text>
                 </Flex>
-                <FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'bars' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'th' : null) } className="text-secondary" onClick={ toggleExtended } />
+                <FontAwesomeIcon icon={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 'bars' : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 'th' : null) } className="text-secondary" onClick={ toggleDisplayMode } />
             </Flex>
-            <Grid columnCount={ ((displayMode === NavigatorSearchResultViewDisplayMode.LIST) ? 1 : (displayMode >= NavigatorSearchResultViewDisplayMode.THUMBNAILS) ? 2 : 1) }>
+            { isExtended &&
-                { isExtended &&
+                <Grid columnCount={ (gridHasTwoColumns ? 2 : 1) } className={ 'navigator-grid' + (gridHasTwoColumns ? ' two-columns' : '') } gap={ 0 }>
-                    searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) =>
+                    { searchResult.rooms.length > 0 && searchResult.rooms.map((room, index) => <NavigatorSearchResultItemView key={ index } roomData={ room } />) }
-                        {
+            </Grid> }
-                            return <NavigatorSearchResultItemView key={ index } roomData={ room } />
-                        }) }
-            </Grid>
         </Column>
         // <div className="nitro-navigator-search-result bg-white rounded mb-2 overflow-hidden">
         //     <div className="d-flex flex-column">