DONT USE IT

src/events/mod-tools/ModToolsEvent.ts

@@ -5,4 +5,6 @@ export class ModToolsEvent extends NitroEvent
     public static SHOW_MOD_TOOLS: string = 'MTE_SHOW_MOD_TOOLS';
     public static HIDE_MOD_TOOLS: string = 'MTE_HIDE_MOD_TOOLS';
     public static TOGGLE_MOD_TOOLS: string = 'MTE_TOGGLE_MOD_TOOLS';
+    public static SELECT_USER: string = 'MTE_SELECT_USER';
+    public static OPEN_ROOM_INFO: string = 'MTE_OPEN_ROOM_INFO';
 }

src/events/mod-tools/ModToolsOpenRoomInfoEvent.ts

@@ -0,0 +1,18 @@
+import { ModToolsEvent } from './ModToolsEvent';
+
+export class ModToolsOpenRoomInfoEvent extends ModToolsEvent
+{
+    private _roomId: number;
+
+    constructor(roomId: number)
+    {
+        super(ModToolsEvent.OPEN_ROOM_INFO);
+
+        this._roomId = roomId;
+    }
+
+    public get roomId(): number
+    {
+        return this._roomId;
+    }
+}

src/events/mod-tools/ModToolsSelectUserEvent.ts

@@ -0,0 +1,25 @@
+import { ModToolsEvent } from './ModToolsEvent';
+
+export class ModToolsSelectUserEvent extends ModToolsEvent
+{
+    private _webID: number;
+    private _name: string;
+
+    constructor(webID: number, name: string)
+    {
+        super(ModToolsEvent.SELECT_USER);
+
+        this._webID = webID;
+        this._name = name;
+    }
+
+    public get webID(): number
+    {
+        return this._webID;
+    }
+
+    public get name(): string
+    {
+        return this._name;
+    }
+}

src/layout/card/simple-header/NitroCardSimpleHeaderView.scss

@@ -5,4 +5,6 @@
 .bg-tertiary-split {
     border: 2px solid darken($quaternary,4);
     box-shadow:0 0 0 2px $white;
+    margin-left: 24px;
+    margin-right: 24px;
 }

src/layout/card/simple-header/NitroCardSimpleHeaderView.tsx

@@ -7,11 +7,9 @@ export const NitroCardSimpleHeaderView: FC<NitroCardSimpleHeaderViewProps> = pro
 
     return (
         <div className="d-flex container-fluid align-items-center bg-light pb-1">
-            <div className="col-1"/>
             <div className="d-flex bg-tertiary-split flex-grow-1 justify-content-center align-items-center border-top-0 rounded-bottom px-2 py-1 drag-handler">
                 <div className="h5 m-0 text-white text-shadow">{ headerText }</div>
             </div>
-            <div className="col-1"/>
             <div className="nitro-card-close-parent">
                 <div className="nitro-card-close" onClick={ onCloseClick }>
                     <i className="fas fa-times"/>

src/views/Styles.scss

@@ -20,3 +20,4 @@
 @import './room-host/RoomHostView';
 @import './room-previewer/RoomPreviewerView';
 @import './toolbar/ToolbarView';
+@import './mod-tools/ModToolsView';

src/views/main/MainView.tsx

@@ -8,6 +8,7 @@ import { CatalogView } from '../catalog/CatalogView';
 import { FriendListView } from '../friend-list/FriendListView';
 import { HotelView } from '../hotel-view/HotelView';
 import { InventoryView } from '../inventory/InventoryView';
+import { ModToolsView } from '../mod-tools/ModToolsView';
 import { NavigatorView } from '../navigator/NavigatorView';
 import { RightSideView } from '../right-side/RightSideView';
 import { RoomHostView } from '../room-host/RoomHostView';
@@ -45,6 +46,7 @@ export function MainView(props: MainViewProps): JSX.Element
     return (
         <div className="nitro-main">
             { landingViewVisible && <HotelView /> }
+            <ModToolsView />
             <RoomHostView />
             <TransitionAnimation className="nitro-toolbar-container" type={ TransitionAnimationTypes.FADE_UP } inProp={ isReady } timeout={ 300 }>
                 <ToolbarView isInRoom={ !landingViewVisible } />

src/views/mod-tools/ModToolsView.scss

@@ -0,0 +1,6 @@
+.nitro-mod-tools {
+    width: 200px;
+}
+
+@import './views/chatlog/ModToolsChatlogView';
+@import './views/room/ModToolsRoomView';

src/views/mod-tools/ModToolsView.tsx

@@ -1,18 +1,28 @@
+import { RoomEngineEvent } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useReducer, useState } from 'react';
 import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
-import { useUiEvent } from '../../hooks/events/ui/ui-event';
-import { NitroCardContentView, NitroCardTabsView, NitroCardView } from '../../layout';
+import { ModToolsOpenRoomInfoEvent } from '../../events/mod-tools/ModToolsOpenRoomInfoEvent';
+import { ModToolsSelectUserEvent } from '../../events/mod-tools/ModToolsSelectUserEvent';
+import { useRoomEngineEvent } from '../../hooks/events';
+import { dispatchUiEvent, useUiEvent } from '../../hooks/events/ui/ui-event';
+import { NitroCardContentView, NitroCardView } from '../../layout';
 import { NitroCardSimpleHeaderView } from '../../layout/card/simple-header';
-import { LocalizeText } from '../../utils/LocalizeText';
 import { ModToolsContextProvider } from './context/ModToolsContext';
 import { ModToolsViewProps } from './ModToolsView.types';
-import { initialModTools, ModToolsReducer } from './reducers/ModToolsReducer';
+import { initialModTools, ModToolsActions, ModToolsReducer } from './reducers/ModToolsReducer';
+import { ModToolsRoomView } from './views/room/ModToolsRoomView';
+import { ModToolsTicketsView } from './views/tickets/ModToolsTicketsView';
+import { ModToolsUserView } from './views/user/ModToolsUserView';
 
 export const ModToolsView: FC<ModToolsViewProps> = props =>
 {
     const [ isVisible, setIsVisible ] = useState(false);
     const [ modToolsState, dispatchModToolsState ] = useReducer(ModToolsReducer, initialModTools);
-    
+    const { currentRoomId = null, selectedUser = null, openRooms = null, openChatlogs = null } = modToolsState;
+
+    const [ isUserVisible, setIsUserVisible ] = useState(false);
+    const [ isTicketsVisible, setIsTicketsVisible ] = useState(false);
+
     const onModToolsEvent = useCallback((event: ModToolsEvent) =>
     {
         switch(event.type)
@@ -26,12 +36,123 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
             case ModToolsEvent.TOGGLE_MOD_TOOLS:
                 setIsVisible(value => !value);
                 return;
+            case ModToolsEvent.SELECT_USER: {
+                const castedEvent = (event as ModToolsSelectUserEvent);
+                
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_SELECTED_USER,
+                    payload: {
+                        selectedUser: {
+                            webID: castedEvent.webID,
+                            name: castedEvent.name
+                        }
+                    }
+                });
+                return;
+            }
+            case ModToolsEvent.OPEN_ROOM_INFO: {
+                const castedEvent = (event as ModToolsOpenRoomInfoEvent);
+                
+                if(openRooms && openRooms.includes(castedEvent.roomId)) return;
+                
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_ROOMS,
+                    payload: {
+                        openRooms: [...openRooms, castedEvent.roomId]
+                    }
+                });
+                return;
+            }
         }
-    }, []);
+    }, [ dispatchModToolsState, setIsVisible, openRooms ]);
 
     useUiEvent(ModToolsEvent.SHOW_MOD_TOOLS, onModToolsEvent);
     useUiEvent(ModToolsEvent.HIDE_MOD_TOOLS, onModToolsEvent);
     useUiEvent(ModToolsEvent.TOGGLE_MOD_TOOLS, onModToolsEvent);
+    useUiEvent(ModToolsEvent.SELECT_USER, onModToolsEvent);
+    useUiEvent(ModToolsEvent.OPEN_ROOM_INFO, onModToolsEvent);
+
+    const onRoomEngineEvent = useCallback((event: RoomEngineEvent) =>
+    {
+        switch(event.type)
+        {
+            case RoomEngineEvent.INITIALIZED:
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_CURRENT_ROOM_ID,
+                    payload: {
+                        currentRoomId: event.roomId
+                    }
+                });
+                return;
+            case RoomEngineEvent.DISPOSED:
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_CURRENT_ROOM_ID,
+                    payload: {
+                        currentRoomId: null
+                    }
+                });
+                return;
+        }
+    }, [ dispatchModToolsState ]);
+
+    useRoomEngineEvent(RoomEngineEvent.INITIALIZED, onRoomEngineEvent);
+    useRoomEngineEvent(RoomEngineEvent.DISPOSED, onRoomEngineEvent);
+
+    const handleClick = useCallback((action: string, value?: string) =>
+    {
+        if(!action) return;
+
+        switch(action)
+        {
+            case 'toggle_room': {
+                if(!openRooms)
+                {
+                    dispatchUiEvent(new ModToolsOpenRoomInfoEvent(currentRoomId));
+                    return;
+                }
+
+                const itemIndex = openRooms.indexOf(currentRoomId);
+
+                if(itemIndex > -1)
+                {
+                    handleClick('close_room', currentRoomId.toString());
+                }
+                else
+                {
+                    dispatchUiEvent(new ModToolsOpenRoomInfoEvent(currentRoomId));
+                }
+                return;
+            }
+            case 'close_room': {
+                const itemIndex = openRooms.indexOf(Number(value));
+
+                const clone = Array.from(openRooms);
+                clone.splice(itemIndex, 1);
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_ROOMS,
+                    payload: {
+                        openRooms: clone
+                    }
+                });                
+                return;
+            }
+            case 'close_chatlog': {
+                const itemIndex = openChatlogs.indexOf(Number(value));
+
+                const clone = Array.from(openChatlogs);
+                clone.splice(itemIndex, 1);
+
+                dispatchModToolsState({
+                    type: ModToolsActions.SET_OPEN_CHATLOGS,
+                    payload: {
+                        openChatlogs: clone
+                    }
+                });                
+                return;
+            }
+        }
+    }, [ dispatchModToolsState, openRooms, openChatlogs, currentRoomId ]);
 
     useEffect(() =>
     {
@@ -42,18 +163,21 @@ export const ModToolsView: FC<ModToolsViewProps> = props =>
         <ModToolsContextProvider value={ { modToolsState, dispatchModToolsState } }>
             { isVisible &&
                 <NitroCardView className="nitro-mod-tools">
-                    <NitroCardSimpleHeaderView headerText={ LocalizeText('ModTools.title') } onCloseClick={ event => setIsVisible(false) } />
-                    <NitroCardTabsView>
-                    </NitroCardTabsView>
-                    <NitroCardContentView>
-                        <div className="row h-100">
-                            <div className="col-3">
-                            </div>
-                            <div className="col">
-                            </div>
-                        </div>
+                    <NitroCardSimpleHeaderView headerText={ "Mod Tools" } onCloseClick={ event => setIsVisible(false) } />
+                    <NitroCardContentView className="text-black">
+                        <button className="btn btn-primary w-100 mb-2" onClick={ () => handleClick('toggle_room') } disabled={ !currentRoomId }><i className="fas fa-home"></i> Room Tool</button>
+                        <button className="btn btn-primary w-100 mb-2" onClick={ () => {} } disabled={ !currentRoomId }><i className="fas fa-comments"></i> Chatlog Tool</button>
+                        <button className="btn btn-primary w-100 mb-2" onClick={ () => setIsUserVisible(value => !value) } disabled={ !selectedUser }><i className="fas fa-user"></i> User: { selectedUser ? selectedUser.name : '' }</button>
+                        <button className="btn btn-primary w-100" onClick={ () => setIsTicketsVisible(value => !value) }><i className="fas fa-exclamation-circle"></i> Report Tool</button>
                     </NitroCardContentView>
                 </NitroCardView> }
+            { openRooms && openRooms.map(roomId =>
+                {
+                    return <ModToolsRoomView key={ roomId } roomId={ roomId } onCloseClick={ () => handleClick('close_room', roomId.toString()) } />;
+                }) }
+            
+            { isUserVisible && <ModToolsUserView /> }
+            { isTicketsVisible && <ModToolsTicketsView /> }
         </ModToolsContextProvider>
     );
 }

src/views/mod-tools/reducers/ModToolsReducer.tsx

@@ -2,28 +2,61 @@ import { Reducer } from 'react';
 
 export interface IModToolsState
 {
-
+    selectedUser: {webID: number, name: string};
+    currentRoomId: number;
+    openRooms: number[];
+    openChatlogs: number[];
 }
 
 export interface IModToolsAction
 {
     type: string;
     payload: {
+        selectedUser?: {webID: number, name: string};
+        currentRoomId?: number;
+        openRooms?: number[];
+        openChatlogs?: number[];
     }
 }
 
 export class ModToolsActions
 {
-
+    public static SET_SELECTED_USER: string = 'MTA_SET_SELECTED_USER';
+    public static SET_CURRENT_ROOM_ID: string = 'MTA_SET_CURRENT_ROOM_ID';
+    public static SET_OPEN_ROOMS: string = 'MTA_SET_OPEN_ROOMS';
+    public static SET_OPEN_CHATLOGS: string = 'MTA_SET_OPEN_CHATLOGS';
+    public static RESET_STATE: string = 'MTA_RESET_STATE';
 }
 
 export const initialModTools: IModToolsState = {
-}
+    selectedUser: null,
+    currentRoomId: null,
+    openRooms: null,
+    openChatlogs: null
+};
 
 export const ModToolsReducer: Reducer<IModToolsState, IModToolsAction> = (state, action) =>
 {
     switch(action.type)
     {
+        case ModToolsActions.SET_SELECTED_USER: {
+            const selectedUser = (action.payload.selectedUser || state.selectedUser || null);
+
+            return { ...state, selectedUser };
+        }
+        case ModToolsActions.SET_CURRENT_ROOM_ID: {
+            const currentRoomId = (action.payload.currentRoomId || state.currentRoomId || null);
+
+            return { ...state, currentRoomId };
+        }
+        case ModToolsActions.SET_OPEN_ROOMS: {
+            const openRooms = (action.payload.openRooms || state.openRooms || null);
+
+            return { ...state, openRooms };
+        }
+        case ModToolsActions.RESET_STATE: {
+            return { ...initialModTools };
+        }
         default:
             return state;
     }

src/views/mod-tools/views/chatlog/ModToolsChatlogView.scss

@@ -0,0 +1,26 @@
+.nitro-mod-tools-chatlog {
+    width: 480px;
+    
+    .chatlog-messages {
+        height: 300px;
+        max-height: 300px;
+
+        .table {
+            color: $black;
+    
+            > :not(caption) > * > * {
+                box-shadow: none;
+                border-bottom: 1px solid rgba(0, 0, 0, .2);
+            }
+    
+            &.table-striped > tbody > tr:nth-of-type(odd) {
+                color: $black;
+                background: rgba(0, 0, 0, .05);
+            }
+    
+            td {
+                padding: 0px 5px;
+            }
+        }
+    }
+}

src/views/mod-tools/views/chatlog/ModToolsChatlogView.tsx

@@ -0,0 +1,85 @@
+import { ModtoolRequestRoomChatlogComposer, ModtoolRoomChatlogEvent, ModtoolRoomChatlogLine } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { TryVisitRoom } from '../../../../api/navigator/TryVisitRoom';
+import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
+import { NitroCardContentView, NitroCardView } from '../../../../layout';
+import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
+import { ModToolsChatlogViewProps } from './ModToolsChatlogView.types';
+
+export const ModToolsChatlogView: FC<ModToolsChatlogViewProps> = props =>
+{
+    const { roomId = null, onCloseClick = null } = props;
+
+    const [ roomName, setRoomName ] = useState(null);
+    const [ messages, setMessages ] = useState<ModtoolRoomChatlogLine[]>(null);
+    const [ loadedRoomId, setLoadedRoomId ] = useState(null);
+
+    const [ messagesRequested, setMessagesRequested ] = useState(false);
+
+    useEffect(() =>
+    {
+        if(messagesRequested) return;
+
+        SendMessageHook(new ModtoolRequestRoomChatlogComposer(roomId));
+        setMessagesRequested(true);
+    }, [ roomId, messagesRequested, setMessagesRequested ]);
+
+    const onModtoolRoomChatlogEvent = useCallback((event: ModtoolRoomChatlogEvent) =>
+    {
+        const parser = event.getParser();
+
+        setRoomName(parser.name);
+        setMessages(parser.chatlogs);
+        setLoadedRoomId(parser.id);
+    }, [ setRoomName, setMessages ]);
+
+    CreateMessageHook(ModtoolRoomChatlogEvent, onModtoolRoomChatlogEvent);
+
+    const handleClick = useCallback((action: string, value?: string) =>
+    {
+        if(!action) return;
+
+        switch(action)
+        {
+            case 'close':
+                onCloseClick();
+                return;
+            case 'visit_room':
+                TryVisitRoom(loadedRoomId);
+                return;
+        }
+    }, [ onCloseClick, loadedRoomId ]);
+
+    return (
+        <NitroCardView className="nitro-mod-tools-chatlog">
+            <NitroCardSimpleHeaderView headerText={ 'Room Chatlog' + (roomName ? ': ' + roomName : '') } onCloseClick={ event => handleClick('close') } />
+            <NitroCardContentView className="text-black h-100">
+                <div className="w-100 d-flex justify-content-end">
+                    <button className="btn btn-sm btn-primary me-2" onClick={ event => handleClick('visit_room') }>Visit Room</button>
+                    <button className="btn btn-sm btn-primary">Room Tools</button>
+                </div>
+                <div className="chatlog-messages overflow-auto">
+                    { messages && <table className="table table-striped">
+                        <thead>
+                            <tr>
+                                <th className="text-center">Time</th>
+                                <th className="text-center">User</th>
+                                <th>Message</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            { messages.map((message, index) =>
+                                {
+                                    return <tr key={ index }>
+                                        <td className="text-center">{ message.timestamp }</td>
+                                        <td className="text-center"><a href="#" className="fw-bold">{ message.userName }</a></td>
+                                        <td className="word-break">{ message.message }</td>
+                                    </tr>;
+                                }) }
+                        </tbody>
+                    </table> }
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/mod-tools/views/chatlog/ModToolsChatlogView.types.ts

@@ -0,0 +1,5 @@
+export interface ModToolsChatlogViewProps
+{
+    roomId: number;
+    onCloseClick: () => void;
+}

src/views/mod-tools/views/room/ModToolsRoomView.scss

@@ -0,0 +1,3 @@
+.nitro-mod-tools-room {
+    width: 240px;
+}

src/views/mod-tools/views/room/ModToolsRoomView.tsx

@@ -0,0 +1,105 @@
+import { ModtoolRequestRoomInfoComposer, ModtoolRoomInfoEvent } from 'nitro-renderer';
+import { FC, useCallback, useEffect, useState } from 'react';
+import { CreateMessageHook, SendMessageHook } from '../../../../hooks/messages';
+import { NitroCardContentView, NitroCardView } from '../../../../layout';
+import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
+import { ModToolsRoomViewProps } from './ModToolsRoomView.types';
+
+export const ModToolsRoomView: FC<ModToolsRoomViewProps> = props =>
+{
+    const { roomId = null, onCloseClick = null } = props;
+
+    const [ infoRequested, setInfoRequested ] = useState(false);
+    const [ loadedRoomId, setLoadedRoomId ] = useState(null);
+
+    const [ name, setName ] = useState(null);
+    const [ ownerId, setOwnerId ] = useState(null);
+    const [ ownerName, setOwnerName ] = useState(null);
+    const [ ownerInRoom, setOwnerInRoom ] = useState(false);
+    const [ usersInRoom, setUsersInRoom ] = useState(0);
+
+    useEffect(() =>
+    {
+        if(infoRequested) return;
+        
+        SendMessageHook(new ModtoolRequestRoomInfoComposer(roomId));
+        setInfoRequested(true);
+    }, [ roomId, infoRequested, setInfoRequested ]);
+
+    const onModtoolRoomInfoEvent = useCallback((event: ModtoolRoomInfoEvent) =>
+    {
+        const parser = event.getParser();
+
+        setLoadedRoomId(parser.id);
+        setName(parser.name);
+        setOwnerId(parser.ownerId);
+        setOwnerName(parser.ownerName);
+        setOwnerInRoom(parser.ownerInRoom);
+        setUsersInRoom(parser.playerAmount);
+    }, [ setLoadedRoomId, setName, setOwnerId, setOwnerName, setOwnerInRoom, setUsersInRoom ]);
+
+    CreateMessageHook(ModtoolRoomInfoEvent, onModtoolRoomInfoEvent);
+
+    const handleClick = useCallback((action: string, value?: string) =>
+    {
+        if(!action) return;
+
+        switch(action)
+        {
+            case 'close':
+                onCloseClick();
+                return;
+        }
+    }, [ onCloseClick ]);
+
+    return (
+        <NitroCardView className="nitro-mod-tools-room">
+            <NitroCardSimpleHeaderView headerText={ 'Room Info' + (name ? ': ' + name : '') } onCloseClick={ event => handleClick('close') } />
+            <NitroCardContentView className="text-black">
+                <div className="d-flex justify-content-between align-items-center mb-1">
+                    <div>
+                        <b>Room Owner:</b> <a href="#" className="fw-bold">{ ownerName }</a>
+                    </div>
+                    <button className="btn btn-sm btn-primary">Visit Room</button>
+                </div>
+                <div className="d-flex justify-content-between align-items-center mb-1">
+                    <div>
+                        <b>Users in room:</b> { usersInRoom }
+                    </div>
+                    <button className="btn btn-sm btn-primary">Chatlog</button>
+                </div>
+                <div className="d-flex justify-content-between align-items-center mb-2">
+                    <div>
+                        <b>Owner in room:</b> { ownerInRoom ? 'Yes' : 'No' }
+                    </div>
+                    <button className="btn btn-sm btn-primary">Edit in HK</button>
+                </div>
+                <div className="bg-muted rounded py-1 px-2 mb-2">
+                    <div className="form-check">
+                        <input className="form-check-input" type="checkbox" id="kickUsers" />
+                        <label className="form-check-label" htmlFor="kickUsers">
+                            Kick users out of the room
+                        </label>
+                    </div>
+                    <div className="form-check">
+                        <input className="form-check-input" type="checkbox" id="lockRoom" />
+                        <label className="form-check-label" htmlFor="lockRoom">
+                            Change room lock to doorbell
+                        </label>
+                    </div>
+                    <div className="form-check">
+                        <input className="form-check-input" type="checkbox" id="lockRoom" />
+                        <label className="form-check-label" htmlFor="lockRoom">
+                            Change room name to "Inappro- priate to Hotel Management"
+                        </label>
+                    </div>
+                </div>
+                <textarea className="form-control mb-2" placeholder="Type a mandatory message to the users in this text box..."></textarea>
+                <div className="d-flex justify-content-between">
+                    <button className="btn btn-danger w-100 me-2">Send Caution</button>
+                    <button className="btn btn-success w-100">Send Alert only</button>
+                </div>
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/mod-tools/views/room/ModToolsRoomView.types.ts

@@ -0,0 +1,5 @@
+export interface ModToolsRoomViewProps
+{
+    roomId: number;
+    onCloseClick: () => void;
+}

src/views/mod-tools/views/tickets/ModToolsTicketsView.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { NitroCardContentView, NitroCardView } from '../../../../layout';
+import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
+import { ModToolsTicketsViewProps } from './ModToolsTicketsView.types';
+
+export const ModToolsTicketsView: FC<ModToolsTicketsViewProps> = props =>
+{
+    return (
+        <NitroCardView className="nitro-mod-tools-tickets">
+            <NitroCardSimpleHeaderView headerText={ "Tickets" } onCloseClick={ event => {} } />
+            <NitroCardContentView className="text-black">
+               
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/mod-tools/views/tickets/ModToolsTicketsView.types.ts

@@ -0,0 +1,2 @@
+export interface ModToolsTicketsViewProps
+{}

src/views/mod-tools/views/user/ModToolsUserView.tsx

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { NitroCardContentView, NitroCardView } from '../../../../layout';
+import { NitroCardSimpleHeaderView } from '../../../../layout/card/simple-header';
+import { ModToolsUserViewProps } from './ModToolsUserView.types';
+
+export const ModToolsUserView: FC<ModToolsUserViewProps> = props =>
+{
+    return (
+        <NitroCardView className="nitro-mod-tools-user">
+            <NitroCardSimpleHeaderView headerText={ "User Info" } onCloseClick={ event => {} } />
+            <NitroCardContentView className="text-black">
+               
+            </NitroCardContentView>
+        </NitroCardView>
+    );
+}

src/views/mod-tools/views/user/ModToolsUserView.types.ts

@@ -0,0 +1,2 @@
+export interface ModToolsUserViewProps
+{}

src/views/room/RoomView.tsx

@@ -1,4 +1,4 @@
-import { EventDispatcher, Nitro, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomVariableEnum, Vector3d } from 'nitro-renderer';
+import { EventDispatcher, Nitro, RoomEngineEvent, RoomEngineObjectEvent, RoomGeometry, RoomId, RoomObjectCategory, RoomObjectOperationType, RoomObjectType, RoomVariableEnum, Vector3d } from 'nitro-renderer';
 import { FC, useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { CanManipulateFurniture, IsFurnitureSelectionDisabled, ProcessRoomObjectOperation } from '../../api';
@@ -6,7 +6,8 @@ import { DispatchMouseEvent } from '../../api/nitro/room/DispatchMouseEvent';
 import { WindowResizeEvent } from '../../api/nitro/room/DispatchResizeEvent';
 import { DispatchTouchEvent } from '../../api/nitro/room/DispatchTouchEvent';
 import { GetRoomEngine } from '../../api/nitro/room/GetRoomEngine';
-import { useRoomEngineEvent } from '../../hooks/events';
+import { ModToolsSelectUserEvent } from '../../events/mod-tools/ModToolsSelectUserEvent';
+import { dispatchUiEvent, useRoomEngineEvent } from '../../hooks/events';
 import { RoomContextProvider } from './context/RoomContext';
 import { RoomWidgetRoomEngineUpdateEvent, RoomWidgetRoomObjectUpdateEvent } from './events';
 import { IRoomWidgetHandlerManager, RoomWidgetHandlerManager, RoomWidgetInfostandHandler } from './handlers';
@@ -123,6 +124,16 @@ export const RoomView: FC<RoomViewProps> = props =>
         {
             case RoomEngineObjectEvent.SELECTED:
                 if(!IsFurnitureSelectionDisabled(event)) updateEvent = new RoomWidgetRoomObjectUpdateEvent(RoomWidgetRoomObjectUpdateEvent.OBJECT_SELECTED, objectId, category, event.roomId);
+                
+                if(category === RoomObjectCategory.UNIT)
+                {
+                    const user = roomSession.userDataManager.getUserDataByIndex(objectId);
+
+                    if(user && user.type === RoomObjectType.USER)
+                    {
+                        dispatchUiEvent(new ModToolsSelectUserEvent(user.webID, user.name));
+                    }
+                }
                 break;
             case RoomEngineObjectEvent.DESELECTED:
                 updateEvent = new RoomWidgetRoomObjectUpdateEvent(RoomWidgetRoomObjectUpdateEvent.OBJECT_DESELECTED, objectId, category, event.roomId);

src/views/toolbar/ToolbarView.tsx

@@ -2,6 +2,7 @@ import { UserInfoEvent } from 'nitro-renderer/src/nitro/communication/messages/i
 import { UserInfoDataParser } from 'nitro-renderer/src/nitro/communication/messages/parser/user/data/UserInfoDataParser';
 import { FC, useCallback, useState } from 'react';
 import { AvatarEditorEvent, CatalogEvent, FriendListEvent, InventoryEvent, NavigatorEvent, RoomWidgetCameraEvent } from '../../events';
+import { ModToolsEvent } from '../../events/mod-tools/ModToolsEvent';
 import { dispatchUiEvent } from '../../hooks/events/ui/ui-event';
 import { CreateMessageHook } from '../../hooks/messages/message-event';
 import { TransitionAnimation } from '../../layout/transitions/TransitionAnimation';
@@ -51,6 +52,9 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                 dispatchUiEvent(new AvatarEditorEvent(AvatarEditorEvent.TOGGLE_EDITOR));
                 setMeExpanded(false);
                 return;
+            case ToolbarViewItems.MOD_TOOLS_ITEM:
+                dispatchUiEvent(new ModToolsEvent(ModToolsEvent.TOGGLE_MOD_TOOLS));
+                return;
         }
     }, []);
 
@@ -108,6 +112,9 @@ export const ToolbarView: FC<ToolbarViewProps> = props =>
                          <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.CAMERA_ITEM) }>
                          <i className="icon icon-camera"></i>
                     </div>) }
+                    <div className="navigation-item" onClick={ event => handleToolbarItemClick(ToolbarViewItems.MOD_TOOLS_ITEM) }>
+                        <i className="icon icon-modtools"></i>
+                    </div>
                 </div>
                 <div id="toolbar-chat-input-container" className="d-flex align-items-center" />
             </div>

src/views/toolbar/ToolbarView.types.ts

@@ -11,4 +11,5 @@ export class ToolbarViewItems
     public static FRIEND_LIST_ITEM: string  = 'TVI_FRIEND_LIST_ITEM';
     public static CLOTHING_ITEM: string     = 'TVI_CLOTHING_ITEM';
     public static CAMERA_ITEM: string       = 'TVI_CAMERA_ITEM';
+    public static MOD_TOOLS_ITEM: string    = 'TVI_MOD_TOOLS_ITEM';
 }