From a770b99e2e84905df7a5f910c84b8386f2928512 Mon Sep 17 00:00:00 2001 From: duckietm Date: Tue, 14 Apr 2026 13:54:15 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=86=99=20Added=20the=20BuildTools=20butto?= =?UTF-8?q?n,=20and=20redesign=20toolbar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../views/friends-bar/FriendsBarView.tsx | 2 +- src/components/toolbar/ToolbarView.tsx | 283 ++++++++++++++---- src/css/toolbar/ToolBar.css | 56 ++++ src/index.tsx | 2 + 4 files changed, 290 insertions(+), 53 deletions(-) create mode 100644 src/css/toolbar/ToolBar.css diff --git a/src/components/friends/views/friends-bar/FriendsBarView.tsx b/src/components/friends/views/friends-bar/FriendsBarView.tsx index 52055d5..62c371e 100644 --- a/src/components/friends/views/friends-bar/FriendsBarView.tsx +++ b/src/components/friends/views/friends-bar/FriendsBarView.tsx @@ -38,7 +38,7 @@ export const FriendBarView: FC<{ onlineFriends: MessengerFriend[]; requestsCount { (requestsCount > 0) &&
- { requestsCount } richieste + { requestsCount } { LocalizeText('friendbar.requests.title') }
} diff --git a/src/components/toolbar/ToolbarView.tsx b/src/components/toolbar/ToolbarView.tsx index 3e7b98d..38758cd 100644 --- a/src/components/toolbar/ToolbarView.tsx +++ b/src/components/toolbar/ToolbarView.tsx @@ -3,15 +3,28 @@ 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 } from '../../hooks'; +import { useAchievements, useFriends, useInventoryUnseenTracker, useMessageEvent, useMessenger, useNitroEvent, useSessionInfo, useWiredTools } 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(); @@ -19,7 +32,10 @@ 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, event => { @@ -62,13 +78,11 @@ 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)) @@ -87,55 +101,220 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props => return ( <> { youtubeEnabled && } - { isMeExpanded && ( - - )} - - - - - { - setMeExpanded(!isMeExpanded); - event.stopPropagation(); - } }> - - { (getTotalUnseen > 0) && - } - - { isInRoom && - VisitDesktop() } /> } - { !isInRoom && - CreateLinkEvent('navigator/goto/home') } /> } - CreateLinkEvent('navigator/toggle') } /> - { GetConfigurationValue('game.center.enabled') && - CreateLinkEvent('games/toggle') } /> } - CreateLinkEvent('catalog/toggle') } /> - CreateLinkEvent('inventory/toggle') }> - { (getFullCount > 0) && - } - - { isInRoom && - CreateLinkEvent('camera/toggle') } /> } - { youtubeEnabled && - } - { isMod && - CreateLinkEvent('mod-tools/toggle') } /> } - { isMod && - CreateLinkEvent('furni-editor/toggle') } /> } - - - - - CreateLinkEvent('friends/toggle') }> - { (requests.length > 0) && - } - - { ((iconState === MessengerIconState.SHOW) || (iconState === MessengerIconState.UNREAD)) && - OpenMessengerChat() } /> } - -
- - + + { isInRoom && +
+ setIsToolbarOpen(value => !value) } + whileTap={ { scale: 0.9 } }> + + + + + +
+ CreateLinkEvent('friends/toggle') } className="tb-icon" /> + { (requests.length > 0) && + } +
+
} + + + { (isToolbarOpen || !isInRoom) && + <> + { showDesktopShell && + } + + + + + { isInRoom + ? VisitDesktop() } className="tb-icon" /> + : CreateLinkEvent('navigator/goto/home') } className="tb-icon" /> } + + + CreateLinkEvent('navigator/toggle') } className="tb-icon" /> + + { GetConfigurationValue('game.center.enabled') && + + CreateLinkEvent('games/toggle') } className="tb-icon" /> + } + + CreateLinkEvent('catalog/toggle/normal') } className="tb-icon" /> + + + CreateLinkEvent('catalog/toggle/builder') } className="tb-icon" /> + + + CreateLinkEvent('inventory/toggle') } className="tb-icon" /> + { (getFullCount > 0) && + } + + + + { isMeExpanded && + + + } + + { setMeExpanded(value => !value); event.stopPropagation(); } }> + + + { (getTotalUnseen > 0) && + } + + { (isInRoom && showToolbarButton) && + + + } + { isInRoom && + + CreateLinkEvent('camera/toggle') } className="tb-icon" /> + } + { youtubeEnabled && + + + } + { isMod && + + CreateLinkEvent('mod-tools/toggle') } className="tb-icon" /> + } + { isMod && + + CreateLinkEvent('furni-editor/toggle') } className="tb-icon" /> + } + + + +