TootBottomSheet: fix the skipped animation

src/material/BottomSheet.module.css

@@ -44,10 +44,16 @@
   &.animated {
     position: absolute;
     transform: none;
+    overflow: hidden;
+    will-change: width, height, top, left;
 
     &::backdrop {
       opacity: 0;
     }
+
+    & * {
+      overflow: hidden;
+    }
   }
 
   &.bottom {

src/material/BottomSheet.tsx

@@ -55,7 +55,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   createEffect(() => {
     if (props.open) {
       if (!element.open && !pending()) {
-        animatedOpen();
+        requestAnimationFrame(animatedOpen);
         setCache(ochildren());
       }
     } else {
@@ -66,15 +66,16 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   });
 
+  const onClose = () => {
+    element.close();
+    setHero();
+  };
+
   const animatedClose = () => {
     const endRect = hero();
     if (endRect) {
       const startRect = element.getBoundingClientRect();
       const animation = animateHero(startRect, endRect, element, true);
-      const onClose = () => {
-        element.close();
-        setHero();
-      };
       animation.addEventListener("finish", onClose);
       animation.addEventListener("cancel", onClose);
     } else {
@@ -126,9 +127,10 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   });
 
-  onMount(() => {
-    makeEventListener(element, "click", (event) => {
-      const rect = element.getBoundingClientRect();
+  const onDialogClick = (
+    event: MouseEvent & { currentTarget: HTMLDialogElement },
+  ) => {
+    const rect = event.currentTarget.getBoundingClientRect();
     const isInDialog =
       rect.top <= event.clientY &&
       event.clientY <= rect.top + rect.height &&
@@ -137,8 +139,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     if (!isInDialog) {
       props.onClose?.("backdrop");
     }
-    });
-  });
+  };
 
   return (
     <dialog
@@ -146,6 +147,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
         [styles.bottomSheet]: true,
         [styles.bottom]: props.bottomUp,
       }}
+      onClick={onDialogClick}
       ref={element!}
     >
       {ochildren() ?? cache()}

src/timelines/ChooseTootLang.tsx

@@ -22,7 +22,7 @@ import { Title } from "../material/typography";
 
 type ChooseTootLangProps = {
   code: string;
-  onCodeChange: (ncode?: string) => void;
+  onCodeChange: (ncode: string) => void;
   onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
 };
 

src/timelines/ReplyEditor.tsx

@@ -1,8 +1,12 @@
 import {
   batch,
+  createEffect,
+  createRenderEffect,
   createSignal,
   createUniqueId,
+  lazy,
   onMount,
+  Show,
   type Component,
   type Setter,
 } from "solid-js";
@@ -156,6 +160,25 @@ const TootVisibilityPickerDialog: Component<{
   );
 };
 
+const TootLanguagePickerDialog: Component<{
+  open?: boolean;
+  onClose: () => void;
+  code: string;
+  onCodeChange: (nval: string) => void;
+}> = (props) => {
+  return (
+    <BottomSheet open={props.open} onClose={props.onClose}>
+      <Show when={props.open}>
+        <ChooseTootLang
+          code={props.code}
+          onCodeChange={props.onCodeChange}
+          onClose={props.onClose}
+        />
+      </Show>
+    </BottomSheet>
+  );
+};
+
 const ReplyEditor: Component<{
   profile: Account;
   replyToDisplayName: string;
@@ -163,15 +186,19 @@ const ReplyEditor: Component<{
   onTypingChange: (value: boolean) => void;
 }> = (props) => {
   let inputRef: HTMLTextAreaElement;
-  const buttonId = createUniqueId();
-  const menuId = createUniqueId();
 
   const typing = () => props.isTyping;
   const setTyping = (v: boolean) => props.onTypingChange(v);
   const [visibility, setVisibility] = createSignal<TootVisibility>("public");
   const [permPicker, setPermPicker] = createSignal(false);
-  const [language, setLanguage] = createSignal(useLanguage()().split("-")[0]);
+  const [language, setLanguage] = createSignal("en");
   const [langPickerOpen, setLangPickerOpen] = createSignal(false);
+  const appLanguage = useLanguage();
+
+  createEffect(() => {
+    const lang = appLanguage().split("-")[0];
+    setLanguage(lang);
+  });
 
   onMount(() => {
     makeEventListener(inputRef, "focus", () => setTyping(true));
@@ -223,6 +250,8 @@ const ReplyEditor: Component<{
           display: "flex",
           "justify-content": "flex-end",
           "margin-top": "8px",
+          gap: "16px",
+          "flex-flow": "row wrap"
         }}
       >
         <Button onClick={[setLangPickerOpen, true]}>
@@ -230,7 +259,7 @@ const ReplyEditor: Component<{
           {iso639_1.getNativeName(language())}
           <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
         </Button>
-        <Button onClick={[setPermPicker, true]} id={buttonId}>
+        <Button onClick={[setPermPicker, true]}>
           <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
           {visibilityText()}
           <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
@@ -244,16 +273,12 @@ const ReplyEditor: Component<{
         onVisibilityChange={setVisibility}
       />
 
-      <BottomSheet
+      <TootLanguagePickerDialog
         open={langPickerOpen()}
         onClose={() => setLangPickerOpen(false)}
-      >
-        <ChooseTootLang
         code={language()}
         onCodeChange={setLanguage}
-          onClose={[setLangPickerOpen, false]}
       />
-      </BottomSheet>
     </div>
   );
 };