diff --git a/src/lib/defer.ts b/src/lib/defer.ts index 79de63ae..73663ac6 100644 --- a/src/lib/defer.ts +++ b/src/lib/defer.ts @@ -1 +1,11 @@ +/** + * Schedule a task at the end of the Event Loop + * @param cb Callback + */ export const defer = (cb: () => void) => setTimeout(cb, 0); + +/** + * Schedule a task at the end of the second Event Loop + * @param cb Callback + */ +export const chainedDefer = (cb: () => void) => defer(() => defer(cb)); diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index c8cc235d..2127b4bb 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/src/pages/channels/actions/HeaderActions.tsx @@ -10,6 +10,7 @@ import { import { observer } from "mobx-react-lite"; import { useHistory } from "react-router-dom"; +import { chainedDefer, defer } from "../../../lib/defer"; import { internalEmit } from "../../../lib/eventEmitter"; import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice"; import { voiceState, VoiceStatus } from "../../../lib/vortex/VoiceState"; @@ -29,7 +30,8 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) { const { openScreen } = useIntermediate(); const history = useHistory(); - function openRightSidebar() { + function slideOpen() { + if (!isTouchscreenDevice) return; const panels = document.querySelector("#app > div > div > div"); panels?.scrollTo({ behavior: "smooth", @@ -37,12 +39,25 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) { }); } - function openSidebar() { - if (isTouchscreenDevice) { - openRightSidebar(); - } else { + function openSearch() { + if ( + !isTouchscreenDevice && + !layout.getSectionState(SIDEBAR_MEMBERS, true) + ) { layout.toggleSectionState(SIDEBAR_MEMBERS, true); } + + slideOpen(); + chainedDefer(() => internalEmit("RightSidebar", "open", "search")); + } + + function openMembers() { + if (!isTouchscreenDevice) { + layout.toggleSectionState(SIDEBAR_MEMBERS, true); + } + + slideOpen(); + chainedDefer(() => internalEmit("RightSidebar", "open", undefined)); } return ( @@ -74,21 +89,13 @@ export default function HeaderActions({ channel }: ChannelHeaderProps) { )} {channel.channel_type !== "VoiceChannel" && ( - { - internalEmit("RightSidebar", "open", "search"); - openRightSidebar(); - }}> + )} {(channel.channel_type === "Group" || channel.channel_type === "TextChannel") && ( - { - internalEmit("RightSidebar", "open", undefined); - openRightSidebar(); - }}> + )}