Fix: Remove padding on user profile.

Modals: Allow all modals to be closed by ESC (permitting).
Fix: Handle closing DMs properly. Stop propagation too.

src/components/navigation/items/ButtonItem.tsx

@@ -12,6 +12,7 @@ import { attachContextMenu } from 'preact-context-menu';
 import { Channels, Users } from "revolt.js/dist/api/objects";
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
 import { useIntermediate } from '../../../context/intermediate/Intermediate';
+import { stopPropagation } from '../../../lib/stopPropagation';
 
 interface CommonProps {
     active?: boolean
@@ -70,9 +71,8 @@ export function UserButton({ active, alert, alertCount, user, context, channel }
                 )}
                 {alert && <div className={styles.alert} data-style={alert}>{ alertCount }</div>}
                 { !isTouchscreenDevice && channel &&
-                    <IconButton
-                        className={styles.icon}
-                        onClick={() => openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
+                    <IconButton className={styles.icon}
+                        onClick={e => stopPropagation(e) && openScreen({ id: 'special_prompt', type: 'close_dm', target: channel })}>
                         <X size={24} />
                     </IconButton>
                 }

src/components/navigation/left/HomeSidebar.tsx

@@ -117,8 +117,11 @@ function HomeSidebar(props: Props) {
                 {channelsArr.map(x => {
                     let user;
                     if (x.channel_type === 'DirectMessage') {
+                        if (!x.active) return null;
+
                         let recipient = client.channels.getRecipient(x._id);
                         user = users.find(x => x?._id === recipient);
+
                         if (!user) {
                             console.warn(`Skipped DM ${x._id} because user was missing.`);
                             return null;

src/components/ui/Modal.tsx

@@ -98,6 +98,7 @@ interface Props {
     disallowClosing?: boolean;
     noBackground?: boolean;
     dontModal?: boolean;
+    padding?: boolean;
 
     onClose: () => void;
     actions?: Action[];
@@ -114,7 +115,7 @@ export default function Modal(props: Props) {
             attachment={!!props.actions}
             noBackground={props.noBackground}
             border={props.border}
-            padding={!props.dontModal}>
+            padding={props.padding ?? !props.dontModal}>
             {props.title && <h3>{props.title}</h3>}
             {props.children}
         </ModalContent>
@@ -124,6 +125,19 @@ export default function Modal(props: Props) {
         return content;
     }
 
+    useEffect(() => {
+        if (props.disallowClosing) return;
+
+        function keyDown(e: KeyboardEvent) {
+            if (e.key === "Escape") {
+                props.onClose();
+            }
+        }
+
+        document.body.addEventListener("keydown", keyDown);
+        return () => document.body.removeEventListener("keydown", keyDown);
+    }, [ props.disallowClosing, props.onClose ]);
+
     let confirmationAction = props.actions?.find(action => action.confirmation);
     useEffect(() => {
         if (!confirmationAction) return;