feat(messaging): hide new message bar on esc or sent message

src/components/common/messaging/MessageBox.tsx

@@ -192,6 +192,7 @@ export default observer(({ channel }: Props) => {
         if (uploadState.type === "attached") return sendFile(content);
         if (content.length === 0) return;
 
+        internalEmit("NewMessages", "hide");
         stopTyping();
         setMessage();
         setReplies([]);

src/components/common/messaging/bars/NewMessages.tsx

@@ -6,6 +6,7 @@ import { decodeTime } from "ulid";
 
 import { useEffect, useState } from "preact/hooks";
 
+import { internalSubscribe } from "../../../../lib/eventEmitter";
 import { getRenderer } from "../../../../lib/renderer/Singleton";
 
 import { dayjs } from "../../../../context/Locale";
@@ -15,7 +16,17 @@ import { Bar } from "./JumpToBottom";
 export default observer(
     ({ channel, last_id }: { channel: Channel; last_id?: string }) => {
         const [hidden, setHidden] = useState(false);
+        const hide = () => setHidden(true);
+
         useEffect(() => setHidden(false), [last_id]);
+        useEffect(() => internalSubscribe("NewMessages", "hide", hide), []);
+        useEffect(() => {
+            const onKeyDown = (e: KeyboardEvent) =>
+                e.key === "Escape" && hide();
+
+            document.addEventListener("keydown", onKeyDown);
+            return () => document.removeEventListener("keydown", onKeyDown);
+        }, []);
 
         const renderer = getRenderer(channel);
         const history = useHistory();

src/lib/eventEmitter.ts

@@ -29,3 +29,4 @@ export function internalEmit(ns: string, event: string, ...args: unknown[]) {
 // - ReplyBar/add
 // - Modal/close
 // - PWA/update
+// - NewMessages/hide