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();
- }}>
+
)}