ReplyEditor: added only UI

src/material/BottomSheet.tsx

@@ -13,9 +13,12 @@ import {
 } from "solid-js";
 import styles from "./BottomSheet.module.css";
 import { useHeroSignal } from "../platform/anim";
+import { makeEventListener } from "@solid-primitives/event-listener";
 
 export type BottomSheetProps = {
   open?: boolean;
+  bottomUp?: boolean;
+  onClose?(reason: "backdrop"): void;
 };
 
 export const HERO = Symbol("BottomSheet Hero Symbol");
@@ -123,8 +126,28 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   });
 
+  onMount(() => {
+    makeEventListener(element, "click", (event) => {
+      const rect = element.getBoundingClientRect();
+      const isInDialog =
+        rect.top <= event.clientY &&
+        event.clientY <= rect.top + rect.height &&
+        rect.left <= event.clientX &&
+        event.clientX <= rect.left + rect.width;
+      if (!isInDialog) {
+        props.onClose?.("backdrop");
+      }
+    });
+  });
+
   return (
-    <dialog class={styles.bottomSheet} ref={element!}>
+    <dialog
+      classList={{
+        [styles.bottomSheet]: true,
+        [styles.bottom]: props.bottomUp,
+      }}
+      ref={element!}
+    >
       {ochildren() ?? cache()}
     </dialog>
   );