TootBottomSheet: fix the skipped animation

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>
+        code={language()}
+        onCodeChange={setLanguage}
+      />
     </div>
   );
 };