ReplyEditor: added only UI

src/material/BottomSheet.module.css

@@ -1,5 +1,7 @@
 .bottomSheet {
-  composes: surface from "material.module.css";
+  composes: surface from "./material.module.css";
+  composes: cardGutSkip from "./cards.module.css";
+  composes: cardNoPad from "./cards.module.css";
   border: none;
   position: absolute;
   left: 50%;
@@ -47,4 +49,10 @@
       opacity: 0;
     }
   }
+
+  &.bottom {
+    top: unset;
+    transform: translateX(-50%);
+    bottom: 0;
+  }
 }

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>
   );

src/material/Scaffold.tsx

@@ -12,6 +12,7 @@ import { css } from "solid-styled";
 interface ScaffoldProps {
   topbar?: JSX.Element;
   fab?: JSX.Element;
+  bottom?: JSX.Element;
 }
 
 const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
@@ -36,6 +37,16 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
       right: 40px;
       z-index: var(--tutu-zidx-nav, auto);
     }
+
+    .bottom-dock {
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: var(--tutu-zidx-nav, auto);
+      padding-bottom: var(--safe-area-inset-bottom, 0);
+
+    }
   `;
   return (
     <>
@@ -48,6 +59,9 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
         <div class="fab-dock">{props.fab}</div>
       </Show>
       <div class="scaffold-content">{props.children}</div>
+      <Show when={props.bottom}>
+        <div class="bottom-dock">{props.bottom}</div>
+      </Show>
     </>
   );
 };