🆙 Small updates

src/components/room/widgets/room-tools/RoomToolsWidgetView.tsx

@@ -6,7 +6,6 @@ import { GetConfigurationValue, LocalizeText, SendMessageComposer, SetLocalStora
 import { Text } from '../../../../common';
 import { useMessageEvent, useNavigator, useRoom } from '../../../../hooks';
 import { getRegisteredPlugins, INitroPlugin, subscribePlugins } from '../../../plugins/NitroPluginApi';
-import { FaChevronLeft, FaChevronRight } from 'react-icons/fa';
 
 export const RoomToolsWidgetView: FC<{}> = props => {
     const [areBubblesMuted, setAreBubblesMuted] = useState(false);
@@ -16,7 +15,6 @@ export const RoomToolsWidgetView: FC<{}> = props => {
     const [roomTags, setRoomTags] = useState<string[]>(null);
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const [isOpenHistory, setIsOpenHistory] = useState<boolean>(false);
-    const [isCollapsed, setIsCollapsed] = useState<boolean>(false);
     const [roomHistory, setRoomHistory] = useState<{ roomId: number, roomName: string }[]>([]);
     const [plugins, setPlugins] = useState<INitroPlugin[]>([]);
     const { navigatorData = null } = useNavigator();
@@ -81,11 +79,10 @@ export const RoomToolsWidgetView: FC<{}> = props => {
 
     const onChangeRoomHistory = (roomId: number, roomName: string) => {
         let newStorage = JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]');
+        if (newStorage.some((room: { roomId: number }) => room.roomId === roomId)) return;
 
-        newStorage = newStorage.filter((room: { roomId: number }) => room.roomId !== roomId);
+        if (newStorage.length >= 10) newStorage.shift();
-        newStorage = [ ...newStorage, { roomId, roomName } ];
+        newStorage = [...newStorage, { roomId, roomName }];
-
-        if (newStorage.length > 10) newStorage = newStorage.slice(-10);
 
         setRoomHistory(newStorage);
         SetLocalStorage('nitro.room.history', newStorage);
@@ -102,55 +99,48 @@ export const RoomToolsWidgetView: FC<{}> = props => {
     });
 
     useEffect(() => {
-        if(roomName || roomOwner || (roomTags && roomTags.length)) setIsOpen(true);
+        setIsOpen(true);
+        const timeout = setTimeout(() => setIsOpen(false), 5000);
+        return () => clearTimeout(timeout);
     }, [roomName, roomOwner, roomTags]);
 
-    useEffect(() => {
-        if(!isCollapsed && (roomName || roomOwner || (roomTags && roomTags.length))) setIsOpen(true);
-    }, [ isCollapsed, roomName, roomOwner, roomTags ]);
-
     useEffect(() => {
         setRoomHistory(JSON.parse(window.localStorage.getItem('nitro.room.history') || '[]'));
     }, []);
 
-    return (
+    useEffect(() => {
-        <div className="nitro-room-tools-container">
+        const handleTabClose = () => {
-            <div className="nitro-room-tools-rail">
+            window.localStorage.removeItem('nitro.room.history');
-                <button type="button" className={ `nitro-room-tools-toggle ${ isCollapsed ? 'is-collapsed' : 'is-open' }` } onClick={ () => setIsCollapsed(value => !value) } title={ isCollapsed ? 'Apri strumenti stanza' : 'Chiudi strumenti stanza' }>
+        };
-                    { isCollapsed ? <FaChevronRight className="text-[11px]" /> : <FaChevronLeft className="text-[11px]" /> }
+        window.addEventListener('beforeunload', handleTabClose);
-                </button>
+        return () => window.removeEventListener('beforeunload', handleTabClose);
-                <AnimatePresence initial={ false }>
+    }, []);
-                { !isCollapsed &&
-                    <motion.div
-                        initial={ { opacity: 0, x: -10, scale: 0.96 } }
-                        animate={ { opacity: 1, x: 0, scale: 1 } }
-                        exit={ { opacity: 0, x: -10, scale: 0.96 } }
-                        transition={ { duration: 0.26, ease: [ 0.16, 1, 0.3, 1 ] } }
-                        className="flex flex-col items-center justify-center p-2 nitro-room-tools">
-  					<div className="cursor-pointer nitro-icon icon-cog" title={LocalizeText('room.settings.button.text')} onClick={() => handleToolClick('settings')} />
-                        <div className={classNames('cursor-pointer', 'nitro-icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more'))} title={LocalizeText('room.zoom.button.text')} onClick={() => handleToolClick('zoom')} />
-                        <div className="cursor-pointer nitro-icon icon-chat-history" title={LocalizeText('room.chathistory.button.text')} onClick={() => handleToolClick('chat_history')} />
-  					<div className={classNames('cursor-pointer', 'nitro-icon', (areBubblesMuted ? 'icon-chat-disablebubble' : 'icon-chat-enablebubble'))} title={areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')} onClick={() => handleToolClick('hiddenbubbles')} />
 
-                        {navigatorData.canRate && (
+    return (
-                            <div className="cursor-pointer nitro-icon icon-like-room" title={LocalizeText('room.like.button.text')} onClick={() => handleToolClick('like_room')} />
+        <div className="flex space-x-2 nitro-room-tools-container">
-                        )}
+            <div className="flex flex-col items-center justify-center p-2 nitro-room-tools">
-                        <div className="cursor-pointer nitro-icon icon-room-link" title={LocalizeText('navigator.embed.caption')} onClick={() => handleToolClick('toggle_room_link')} />
+				<div className="cursor-pointer nitro-icon icon-cog" title={LocalizeText('room.settings.button.text')} onClick={() => handleToolClick('settings')} />
-                        <div className="cursor-pointer nitro-icon icon-room-history-enabled" title={LocalizeText('room.history.button.tooltip')} onClick={() => handleToolClick('room_history')} />
+                <div className={classNames('cursor-pointer', 'nitro-icon', (!isZoomedIn && 'icon-zoom-less'), (isZoomedIn && 'icon-zoom-more'))} title={LocalizeText('room.zoom.button.text')} onClick={() => handleToolClick('zoom')} />
-                        {plugins.map(plugin => (
+                <div className="cursor-pointer nitro-icon icon-chat-history" title={LocalizeText('room.chathistory.button.text')} onClick={() => handleToolClick('chat_history')} />
-                            <div
+				<div className={classNames('cursor-pointer', 'nitro-icon', (areBubblesMuted ? 'icon-chat-disablebubble' : 'icon-chat-enablebubble'))} title={areBubblesMuted ? LocalizeText('room.unmute.button.text') : LocalizeText('room.mute.button.text')} onClick={() => handleToolClick('hiddenbubbles')} />
-                                key={plugin.name}
+
-                                className={`cursor-pointer nitro-icon ${plugin.icon || 'icon-cog'}`}
+                {navigatorData.canRate && (
-                                title={plugin.label}
+                    <div className="cursor-pointer nitro-icon icon-like-room" title={LocalizeText('room.like.button.text')} onClick={() => handleToolClick('like_room')} />
-                                onClick={() => plugin.onOpen()}
+                )}
-                            />
+                <div className="cursor-pointer nitro-icon icon-room-link" title={LocalizeText('navigator.embed.caption')} onClick={() => handleToolClick('toggle_room_link')} />
-                        ))}
+                <div className="cursor-pointer nitro-icon icon-room-history-enabled" title={LocalizeText('room.history.button.tooltip')} onClick={() => handleToolClick('room_history')} />
-                    </motion.div> }
+                {plugins.map(plugin => (
-                </AnimatePresence>
+                    <div
+                        key={plugin.name}
+                        className={`cursor-pointer nitro-icon ${plugin.icon || 'icon-cog'}`}
+                        title={plugin.label}
+                        onClick={() => plugin.onOpen()}
+                    />
+                ))}
             </div>
-            <div className="flex flex-col justify-center nitro-room-tools-side-container">
+            <div className="flex flex-col justify-center">
                 <AnimatePresence>
-                    {(!isCollapsed && (isOpen || !!roomName || !!roomOwner || !!(roomTags && roomTags.length))) && (
+                    {isOpen && (
                         <motion.div initial={{ x: -100 }} animate={{ x: 0 }} exit={{ x: -100 }} transition={{ duration: 0.3 }}>
                             <div className="flex flex-col items-center justify-center">
                                 <div className="flex flex-col px-3 py-2 rounded nitro-room-tools-info">
@@ -171,7 +161,7 @@ export const RoomToolsWidgetView: FC<{}> = props => {
                             </div>
                         </motion.div>
                     )}
-                    {(!isCollapsed && isOpenHistory) && (
+                    {isOpenHistory && (
                         <motion.div initial={{ x: -100 }} animate={{ x: 0 }} exit={{ x: -100 }} transition={{ duration: 0.3 }} className="nitro-room-tools-history">
                             <div className="flex flex-col px-3 py-2 rounded nitro-room-history">
                                 {roomHistory.map(history => (

src/components/toolbar/ToolbarItemView.tsx

@@ -11,7 +11,7 @@ export const ToolbarItemView = forwardRef<HTMLDivElement, PropsWithChildren<{
         <div
             ref={ ref }
             className={ classNames(
-                'relative h-[32px] w-[32px] shrink-0 cursor-pointer bg-center bg-no-repeat transition-transform duration-200 ease-out hover:-translate-y-[1px] active:translate-y-0',
+                'cursor-pointer relative',
                 `nitro-icon icon-${ icon }`,
                 className
             ) }

src/components/toolbar/ToolbarMeView.tsx

@@ -1,9 +1,8 @@
-import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, RoomObjectCategory } from '@nitrots/nitro-renderer';
+import { CreateLinkEvent, GetRoomEngine, GetSessionDataManager, MouseEventType, RoomObjectCategory } from '@nitrots/nitro-renderer';
 import { Dispatch, FC, PropsWithChildren, SetStateAction, useEffect, useRef } from 'react';
 import { DispatchUiEvent, GetConfigurationValue, GetRoomSession, GetUserProfile, LocalizeText } from '../../api';
-import { LayoutItemCountView } from '../../common';
+import { Flex, LayoutItemCountView } from '../../common';
 import { GuideToolEvent } from '../../events';
-import { ToolbarItemView } from './ToolbarItemView';
 
 export const ToolbarMeView: FC<PropsWithChildren<{
     useGuideTool: boolean;
@@ -11,8 +10,8 @@ export const ToolbarMeView: FC<PropsWithChildren<{
     setMeExpanded: Dispatch<SetStateAction<boolean>>;
 }>> = props =>
 {
-    const { useGuideTool = false, unseenAchievementCount = 0, children = null } = props;
+    const { useGuideTool = false, unseenAchievementCount = 0, setMeExpanded = null, children = null, ...rest } = props;
-    const elementRef = useRef<HTMLDivElement>(null);
+    const elementRef = useRef<HTMLDivElement>();
 
     useEffect(() =>
     {
@@ -23,22 +22,29 @@ export const ToolbarMeView: FC<PropsWithChildren<{
         GetRoomEngine().selectRoomObject(roomSession.roomId, roomSession.ownRoomIndex, RoomObjectCategory.UNIT);
     }, []);
 
+    useEffect(() =>
+    {
+        const onClick = (event: MouseEvent) => setMeExpanded(false);
+
+        document.addEventListener('click', onClick);
+
+        return () => document.removeEventListener(MouseEventType.MOUSE_CLICK, onClick);
+    }, [ setMeExpanded ]);
+
     return (
-        <div className="w-fit max-w-[min(calc(100vw-16px),520px)] rounded-[12px] border border-white/8 bg-[rgba(10,10,12,0.58)] px-[10px] py-[7px] shadow-[0_10px_24px_rgba(0,0,0,0.2)]" ref={ elementRef }>
+        <Flex alignItems="center" className="absolute bottom-[60px] left-[33px] bg-[rgba(20,20,20,.95)] border border-[solid] border-[#101010] [box-shadow:inset_2px_2px_rgba(255,255,255,.1),inset_-2px_-2px_rgba(255,255,255,.1)] rounded-[$border-radius] p-2" gap={ 2 } innerRef={ elementRef }>
-            <div className="flex items-center gap-[8px] overflow-x-auto overflow-y-visible whitespace-nowrap">
+            { (GetConfigurationValue('guides.enabled') && useGuideTool) &&
-                { (GetConfigurationValue('guides.enabled') && useGuideTool) &&
+                <div className="navigation-item relative nitro-icon icon-me-helper-tool cursor-pointer" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } /> }
-                    <ToolbarItemView icon="me-helper-tool" onClick={ event => DispatchUiEvent(new GuideToolEvent(GuideToolEvent.TOGGLE_GUIDE_TOOL)) } title={ LocalizeText('guide.help.button.label') } /> }
+            <div className="navigation-item relative nitro-icon icon-me-achievements cursor-pointer" onClick={ event => CreateLinkEvent('achievements/toggle') }>
-                <ToolbarItemView icon="me-achievements" onClick={ event => CreateLinkEvent('achievements/toggle') } title={ LocalizeText('toolbar.icon.label.achievements') }>
+                { (unseenAchievementCount > 0) &&
-                    { (unseenAchievementCount > 0) &&
+                    <LayoutItemCountView count={ unseenAchievementCount } /> }
-                        <LayoutItemCountView count={ unseenAchievementCount } /> }
-                </ToolbarItemView>
-                <ToolbarItemView icon="me-profile" onClick={ event => GetUserProfile(GetSessionDataManager().userId) } title={ LocalizeText('toolbar.icon.label.memenu') } />
-                <ToolbarItemView icon="me-rooms" onClick={ event => CreateLinkEvent('navigator/search/myworld_view') } title={ LocalizeText('navigator.myworlds') } />
-                <ToolbarItemView icon="me-clothing" onClick={ event => CreateLinkEvent('avatar-editor/toggle') } title={ LocalizeText('widget.memenu.settings.avatar') } />
-                <ToolbarItemView icon="me-settings" onClick={ event => CreateLinkEvent('user-settings/toggle') } title={ LocalizeText('widget.memenu.settings.title') } />
-                <ToolbarItemView icon="me-forums" onClick={ event => CreateLinkEvent('groupforum/toggle') } title={ LocalizeText('toolbar.icon.label.forums') } />
-                { children }
             </div>
-        </div>
+            <div className="navigation-item relative nitro-icon icon-me-profile cursor-pointer" onClick={ event => GetUserProfile(GetSessionDataManager().userId) } />
+            <div className="navigation-item relative nitro-icon icon-me-rooms cursor-pointer" onClick={ event => CreateLinkEvent('navigator/search/myworld_view') } />
+            <div className="navigation-item relative nitro-icon icon-me-clothing cursor-pointer" onClick={ event => CreateLinkEvent('avatar-editor/toggle') } />
+            <div className="navigation-item relative nitro-icon icon-me-settings cursor-pointer" onClick={ event => CreateLinkEvent('user-settings/toggle') } />
+            <div className="navigation-item relative nitro-icon icon-me-forums cursor-pointer" onClick={ event => CreateLinkEvent('groupforum/toggle') } title={ LocalizeText('toolbar.icon.label.forums') } />
+            { children }
+        </Flex>
     );
 };

src/components/toolbar/ToolbarView.tsx

@@ -3,28 +3,15 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { FC, useEffect, useState } from 'react';
 import { GetConfigurationValue, MessengerIconState, OpenMessengerChat, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
 import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
-import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo, useWiredTools } from '../../hooks';
+import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo } from '../../hooks';
 import { ToolbarItemView } from './ToolbarItemView';
 import { ToolbarMeView } from './ToolbarMeView';
 import { YouTubePlayerView } from './YouTubePlayerView';
 
-const containerVariants = {
-    hidden: {},
-    visible: { transition: { staggerChildren: 0.05 } },
-    exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 as const } }
-};
-
-const itemVariants = {
-    hidden: { opacity: 0, y: 10, scale: 0.8 },
-    visible: { opacity: 1, y: 0, scale: 1, transition: { type: 'spring', stiffness: 400, damping: 22 } },
-    exit: { opacity: 0, y: 6, scale: 0.85, transition: { duration: 0.1 } }
-};
-
 export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 {
     const { isInRoom } = props;
     const [ isMeExpanded, setMeExpanded ] = useState(false);
-    const [ isToolbarOpen, setIsToolbarOpen ] = useState(false);
     const [ useGuideTool, setUseGuideTool ] = useState(false);
     const [ youtubeEnabled, setYoutubeEnabled ] = useState(false);
     const { userFigure = null } = useSessionInfo();
@@ -32,10 +19,7 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
     const { getTotalUnseen = 0 } = useAchievements();
     const { requests = [] } = useFriends();
     const { iconState = MessengerIconState.HIDDEN } = useMessenger();
-    const { openMonitor, showToolbarButton } = useWiredTools();
     const isMod = GetSessionDataManager().isModerator;
-    const hasDesktopUnifiedShell = (isInRoom && isToolbarOpen);
-    const showDesktopShell = (isToolbarOpen || !isInRoom);
 
     useMessageEvent<YouTubeRoomSettingsEvent>(YouTubeRoomSettingsEvent, event =>
     {
@@ -78,11 +62,13 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
 
             const targetBounds = target.getBoundingClientRect();
             const imageBounds = image.getBoundingClientRect();
+
             const left = (imageBounds.x - targetBounds.x);
             const top = (imageBounds.y - targetBounds.y);
             const squared = Math.sqrt(((left * left) + (top * top)));
             const wait = (500 - Math.abs(((((1 / squared) * 100) * 500) * 0.5)));
             const height = 20;
+
             const motionName = (`ToolbarBouncing[${ iconName }]`);
 
             if(!Motions.getMotionByTag(motionName))
@@ -153,62 +139,3 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
         </>
     );
 };
-
-const TOOLBAR_STYLES = `
-  .tb-icon {
-    opacity: 1;
-    transition: transform 0.15s ease;
-    cursor: pointer;
-  }
-
-  .tb-icon:hover {
-    transform: translateY(-2px);
-  }
-
-  .tb-icon:active {
-    transform: translateY(0);
-  }
-
-  .tb-toggle {
-    width: 32px;
-    height: 32px;
-    flex-shrink: 0;
-    border-radius: 9px;
-    background: rgba(18, 16, 14, 0.80);
-    backdrop-filter: blur(16px);
-    -webkit-backdrop-filter: blur(16px);
-    border: 1px solid rgba(255, 255, 255, 0.08);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
-    transition: background 0.15s, border-color 0.15s;
-  }
-
-  .tb-toggle:hover {
-    background: rgba(30, 26, 20, 0.88);
-    border-color: rgba(255, 255, 255, 0.13);
-  }
-
-  .tb-bar-scroll {
-    overflow-x: auto;
-    overflow-y: visible;
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    flex-wrap: nowrap;
-  }
-
-  .tb-bar-scroll::-webkit-scrollbar {
-    display: none;
-  }
-
-  .tb-open-shell {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-  }
-
-  .tb-open-shell::-webkit-scrollbar {
-    display: none;
-  }
-`;

src/css/nitrocard/NitroCardView.css

@@ -220,6 +220,7 @@
         font-family: Ubuntu, sans-serif;
         color: #111;
     }
+}
 
 @media (max-width: 991.98px) {
     .content-area {
@@ -247,7 +248,7 @@
     }
 }
 
-@include media-breakpoint-down(lg) {
+@media (max-width: 991.98px) {
     .nitro-card {
         resize: none !important;
         max-width: calc(100vw - 16px) !important;