duckietm/Nitro-V3
1
0
Fork 0
mirror of https://github.com/duckietm/Nitro-V3.git synced 2026-06-19 23:16:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(toolbar): keep friends + find-friends when the friend bar is collapsed

Browse Source 
When the right collapse button is active, keep the friends-list icon and show a
compact find-friends (magnifier) button, hiding mentions, the messenger icon
and the full friend bar.
This commit is contained in:
simoleo89
2026-06-14 21:40:28 +02:00
parent 45866c17d3
commit 962d8a2d42
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/toolbar/ToolbarView.tsx
+9 -4
View File
@@ -1,7 +1,7 @@
import { CreateLinkEvent, Dispose, DropBounce, EaseOut, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait, YouTubeRoomSettingsEvent } from '@nitrots/nitro-renderer'; import { CreateLinkEvent, Dispose, DropBounce, EaseOut, FindNewFriendsMessageComposer, JumpBy, Motions, NitroToolbarAnimateIconEvent, PerkAllowancesMessageEvent, PerkEnum, Queue, Wait, YouTubeRoomSettingsEvent } from '@nitrots/nitro-renderer';
import { AnimatePresence, motion, Variants } from 'framer-motion'; import { AnimatePresence, motion, Variants } from 'framer-motion';
import { FC, useEffect, useMemo, useState } from 'react'; import { FC, useEffect, useMemo, useState } from 'react';
import { GetConfigurationValue, isHousekeepingEnabled, MessengerIconState, OpenMessengerChat, setYoutubeRoomEnabled, VisitDesktop } from '../../api'; import { GetConfigurationValue, isHousekeepingEnabled, MessengerIconState, OpenMessengerChat, SendMessageComposer, setYoutubeRoomEnabled, VisitDesktop } from '../../api';
import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common'; import { Flex, LayoutAvatarImageView, LayoutItemCountView } from '../../common';
import { useAchievements, useFriends, useHasPermission, useInventoryUnseenTracker, useMentionsSnapshot, useMessageEvent, useMessenger, useModTools, useNitroEvent, useSessionInfo, useSoundboard, useWiredTools } from '../../hooks'; import { useAchievements, useFriends, useHasPermission, useInventoryUnseenTracker, useMentionsSnapshot, useMessageEvent, useMessenger, useModTools, useNitroEvent, useSessionInfo, useSoundboard, useWiredTools } from '../../hooks';
import { ToolbarItemView } from './ToolbarItemView'; import { ToolbarItemView } from './ToolbarItemView';
@@ -310,7 +310,6 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
variants={ rightNavVariants } variants={ rightNavVariants }
transition={ NAV_TRANSITION } transition={ NAV_TRANSITION }
className={ `tb-nav-clip fixed bottom-0 z-40 h-[52px] max-w-[calc(50vw-242px)] items-center pr-3 ${ desktopFlexClasses } ${ isInRoom ? 'right-0' : 'right-3' }` }> className={ `tb-nav-clip fixed bottom-0 z-40 h-[52px] max-w-[calc(50vw-242px)] items-center pr-3 ${ desktopFlexClasses } ${ isInRoom ? 'right-0' : 'right-3' }` }>
{ !rightCollapsed &&
<motion.div <motion.div
variants={ containerVariants } variants={ containerVariants }
className="tb-open-shell flex h-[52px] max-w-full items-center gap-3 overflow-visible bg-transparent px-[8px] pt-[10px] pb-[2px]"> className="tb-open-shell flex h-[52px] max-w-full items-center gap-3 overflow-visible bg-transparent px-[8px] pt-[10px] pb-[2px]">
@@ -319,6 +318,11 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
{ (requests.length > 0) && { (requests.length > 0) &&
<LayoutItemCountView count={ requests.length } className="absolute -right-2 -top-1" /> } <LayoutItemCountView count={ requests.length } className="absolute -right-2 -top-1" /> }
</motion.div> </motion.div>
{ rightCollapsed &&
<motion.div variants={ itemVariants }>
<ToolbarItemView icon="friendsearch" onClick={ () => SendMessageComposer(new FindNewFriendsMessageComposer()) } className="tb-icon" />
</motion.div> }
{ !rightCollapsed && (<>
{ mentionsEnabled && { mentionsEnabled &&
<motion.div variants={ itemVariants } className="relative"> <motion.div variants={ itemVariants } className="relative">
<ToolbarItemView icon="mentions" onClick={ () => CreateLinkEvent('mentions/toggle') } className="tb-icon" /> <ToolbarItemView icon="mentions" onClick={ () => CreateLinkEvent('mentions/toggle') } className="tb-icon" />
@@ -331,7 +335,8 @@ export const ToolbarView: FC<{ isInRoom: boolean }> = props =>
</motion.div> } </motion.div> }
<div className={ `mx-1 h-5 w-[1px] bg-white/20 ${ desktopBlockClasses }` } /> <div className={ `mx-1 h-5 w-[1px] bg-white/20 ${ desktopBlockClasses }` } />
<div className={ `h-full shrink-0 ${ desktopBlockClasses }` } id="toolbar-friend-bar-container-desktop" /> <div className={ `h-full shrink-0 ${ desktopBlockClasses }` } id="toolbar-friend-bar-container-desktop" />
</motion.div> } </>) }
</motion.div>
<button <button
type="button" type="button"
onClick={ () => setRightCollapsed(value => !value) } onClick={ () => setRightCollapsed(value => !value) }