🆕 Disconnection handler, when you got disconnected you automatic go back to the room

src/App.tsx

@@ -4,6 +4,7 @@ import { GetUIVersion } from './api';
 import { Base } from './common';
 import { LoadingView } from './components/loading/LoadingView';
 import { MainView } from './components/MainView';
+import { ReconnectView } from './components/reconnect/ReconnectView';
 import { useMessageEvent } from './hooks';
 
 NitroVersion.UI_VERSION = GetUIVersion();
@@ -93,6 +94,7 @@ export const App: FC<{}> = props =>
             { !isReady &&
                 <LoadingView /> }
             { isReady && <MainView /> }
+            <ReconnectView />
             <Base id="draggable-windows-container" />
         </Base>
     );

src/components/MainView.tsx

@@ -1,4 +1,4 @@
-import { AddLinkEventTracker, GetCommunication, HabboWebTools, ILinkEventTracker, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
+import { AddLinkEventTracker, GetCommunication, GetRoomSessionManager, HabboWebTools, ILinkEventTracker, RemoveLinkEventTracker, RoomSessionEvent } from '@nitrots/nitro-renderer';
 import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useEffect, useState } from 'react';
 import { useNitroEvent } from '../hooks';
@@ -41,6 +41,8 @@ export const MainView: FC<{}> = props =>
     {
         setIsReady(true);
 
+        GetRoomSessionManager().tryRestoreSession();
+
         GetCommunication().connection.ready();
     }, []);
 

src/components/reconnect/ReconnectView.tsx

@@ -0,0 +1,108 @@
+import { NitroEventType, ReconnectEvent } from '@nitrots/nitro-renderer';
+import { FC, useCallback, useState } from 'react';
+import { Base, Column, Text } from '../../common';
+import { useNitroEvent } from '../../hooks';
+
+export const ReconnectView: FC<{}> = props =>
+{
+    const [ isReconnecting, setIsReconnecting ] = useState(false);
+    const [ attempt, setAttempt ] = useState(0);
+    const [ maxAttempts, setMaxAttempts ] = useState(0);
+    const [ hasFailed, setHasFailed ] = useState(false);
+
+    const onReconnecting = useCallback((event: ReconnectEvent) =>
+    {
+        setIsReconnecting(true);
+        setHasFailed(false);
+        setAttempt(event.attempt);
+        setMaxAttempts(event.maxAttempts);
+    }, []);
+
+    const onReconnected = useCallback(() =>
+    {
+        setIsReconnecting(false);
+        setHasFailed(false);
+        setAttempt(0);
+    }, []);
+
+    const onReconnectFailed = useCallback(() =>
+    {
+        setIsReconnecting(false);
+        setHasFailed(true);
+    }, []);
+
+    useNitroEvent<ReconnectEvent>(NitroEventType.SOCKET_RECONNECTING, onReconnecting);
+    useNitroEvent(NitroEventType.SOCKET_RECONNECTED, onReconnected);
+    useNitroEvent(NitroEventType.SOCKET_RECONNECT_FAILED, onReconnectFailed);
+
+    const handleReload = useCallback(() =>
+    {
+        window.location.reload();
+    }, []);
+
+    const handleGoHome = useCallback(() =>
+    {
+        sessionStorage.removeItem('nitro_last_room');
+        sessionStorage.removeItem('nitro_last_room_password');
+        window.location.reload();
+    }, []);
+
+    if(!isReconnecting && !hasFailed) return null;
+
+    return (
+        <Column
+            fullHeight
+            position="fixed"
+            className="fixed inset-0 z-[9999] flex items-center justify-center bg-black/70 backdrop-blur-sm"
+        >
+            <Column alignItems="center" gap={ 3 } className="p-6 rounded-xl bg-[#1a1a2e]/90 border border-white/10 shadow-2xl max-w-[400px]">
+                { isReconnecting && (
+                    <>
+                        <Base className="w-[48px] h-[48px] border-4 border-white/20 border-t-[#4dabf7] rounded-full animate-spin" />
+                        <Text fontSizeCustom={ 18 } variant="white" className="text-center font-semibold">
+                            Connection lost
+                        </Text>
+                        <Text fontSizeCustom={ 14 } variant="white" className="text-center opacity-70">
+                            Reconnecting to server... (attempt { attempt }/{ maxAttempts })
+                        </Text>
+                        <Base className="w-full h-[4px] rounded-full bg-white/10 overflow-hidden mt-1">
+                            <Base
+                                className="h-full bg-[#4dabf7] rounded-full transition-all duration-300"
+                                style={ { width: `${ (attempt / maxAttempts) * 100 }%` } }
+                            />
+                        </Base>
+                        <Text fontSizeCustom={ 12 } variant="white" className="text-center opacity-50">
+                            Please wait, your session will be restored automatically
+                        </Text>
+                    </>
+                ) }
+
+                { hasFailed && (
+                    <>
+                        <Text fontSizeCustom={ 36 } className="text-center text-red-500">&#9888;</Text>
+                        <Text fontSizeCustom={ 18 } variant="white" className="text-center font-semibold">
+                            Connection failed
+                        </Text>
+                        <Text fontSizeCustom={ 14 } variant="white" className="text-center opacity-70">
+                            Unable to reconnect to the server after multiple attempts.
+                        </Text>
+                        <Base className="mt-2 flex gap-3">
+                            <Base
+                                className="px-6 py-2 rounded-lg bg-[#4dabf7] text-white font-semibold cursor-pointer hover:bg-[#339af0] transition-colors"
+                                onClick={ handleReload }
+                            >
+                                Reload Page
+                            </Base>
+                            <Base
+                                className="px-6 py-2 rounded-lg bg-white/10 text-white font-semibold cursor-pointer hover:bg-white/20 transition-colors"
+                                onClick={ handleGoHome }
+                            >
+                                Go to Home
+                            </Base>
+                        </Base>
+                    </>
+                ) }
+            </Column>
+        </Column>
+    );
+};

src/hooks/navigator/useNavigator.ts

@@ -1,4 +1,4 @@
-import { CanCreateRoomEventEvent, CantConnectMessageParser, CreateLinkEvent, DoorbellMessageEvent, FavouriteChangedEvent, FavouritesEvent, FlatAccessDeniedMessageEvent, FlatCreatedEvent, FollowFriendMessageComposer, GenericErrorEvent, GetGuestRoomMessageComposer, GetGuestRoomResultEvent, GetSessionDataManager, GetUserEventCatsMessageComposer, GetUserFlatCatsMessageComposer, HabboWebTools, LegacyExternalInterface, NavigatorCategoryDataParser, NavigatorEventCategoryDataParser, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorOpenRoomCreatorEvent, NavigatorSavedSearch, NavigatorSearchesEvent, NavigatorSearchEvent, NavigatorSearchResultSet, NavigatorTopLevelContext, RoomDataParser, RoomDoorbellAcceptedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomScoreEvent, RoomSettingsUpdatedEvent, SecurityLevel, UserEventCatsEvent, UserFlatCatsEvent, UserInfoEvent, UserPermissionsEvent } from '@nitrots/nitro-renderer';
+import { CanCreateRoomEventEvent, CantConnectMessageParser, CreateLinkEvent, DoorbellMessageEvent, FavouriteChangedEvent, FavouritesEvent, FlatAccessDeniedMessageEvent, FlatCreatedEvent, FollowFriendMessageComposer, GenericErrorEvent, GetGuestRoomMessageComposer, GetGuestRoomResultEvent, GetRoomSessionManager, GetSessionDataManager, GetUserEventCatsMessageComposer, GetUserFlatCatsMessageComposer, HabboWebTools, LegacyExternalInterface, NavigatorCategoryDataParser, NavigatorEventCategoryDataParser, NavigatorHomeRoomEvent, NavigatorMetadataEvent, NavigatorOpenRoomCreatorEvent, NavigatorSavedSearch, NavigatorSearchesEvent, NavigatorSearchEvent, NavigatorSearchResultSet, NavigatorTopLevelContext, RoomDataParser, RoomDoorbellAcceptedEvent, RoomEnterErrorEvent, RoomEntryInfoMessageEvent, RoomForwardEvent, RoomScoreEvent, RoomSettingsUpdatedEvent, SecurityLevel, UserEventCatsEvent, UserFlatCatsEvent, UserInfoEvent, UserPermissionsEvent } from '@nitrots/nitro-renderer';
 import { useState } from 'react';
 import { useBetween } from 'use-between';
 import { CreateRoomSession, DoorStateType, GetConfigurationValue, INavigatorData, LocalizeText, NotificationAlertType, SendMessageComposer, TryVisitRoom, VisitDesktop } from '../../api';
@@ -397,6 +397,8 @@ const useNavigatorState = () =>
             return;
         }
 
+        if(GetRoomSessionManager().viewerSession) return;
+
         let forwardType = -1;
         let forwardId = -1;