ReplyEditor: promote the blur condition up

src/timelines/ReplyEditor.tsx

@@ -1,4 +1,5 @@
 import {
+  batch,
   createSignal,
   createUniqueId,
   onMount,
@@ -57,14 +58,12 @@ const TootVisibilityPickerDialog: Component<{
 
   const discoverable = () => {
     return props.visibility === "public";
-  }
-
-  const setDiscoverable = (setter: (v: boolean) => boolean) => {
-    const nval = setter(discoverable())
-    props.onVisibilityChange(nval ? "public" : "unlisted"); // trigger change
   };
 
-
+  const setDiscoverable = (setter: (v: boolean) => boolean) => {
+    const nval = setter(discoverable());
+    props.onVisibilityChange(nval ? "public" : "unlisted"); // trigger change
+  };
 
   return (
     <BottomSheet open={props.open} onClose={props.onClose} bottomUp>
@@ -83,7 +82,7 @@ const TootVisibilityPickerDialog: Component<{
           </div>
         }
       >
-        <List>
+        <List dense>
           <ListItemButton onClick={[setKind, "public"]}>
             <ListItemIcon>
               <PublicIcon />
@@ -155,27 +154,29 @@ const TootVisibilityPickerDialog: Component<{
 const ReplyEditor: Component<{
   profile: Account;
   replyToDisplayName: string;
+  isTyping?: boolean
+  onTypingChange: (value: boolean) => void
 }> = (props) => {
   let inputRef: HTMLTextAreaElement;
   const buttonId = createUniqueId();
   const menuId = createUniqueId();
 
-  const [typing, setTyping] = createSignal(false);
+  const typing = () => props.isTyping
+  const setTyping = (v: boolean) => props.onTypingChange(v)
   const [visibility, setVisibility] = createSignal<TootVisibility>("public");
   const [permPicker, setPermPicker] = createSignal(false);
 
   onMount(() => {
     makeEventListener(inputRef, "focus", () => setTyping(true));
-    makeEventListener(inputRef, "blur", () => setTyping(false));
   });
 
   const containerStyle = () =>
-    typing()
+    typing() || permPicker()
       ? {
           position: "sticky" as const,
           top: "var(--scaffold-topbar-height, 0)",
           bottom: "var(--safe-area-inset-bottom, 0)",
-          "z-index": 1,
+          "z-index": 2,
         }
       : undefined;
 
@@ -196,7 +197,7 @@ const ReplyEditor: Component<{
     <div
       class={tootComposers.composer}
       style={containerStyle()}
-      onClick={() => setTyping(true)}
+      onClick={(e) => inputRef.focus()}
     >
       <div class={tootComposers.replyInput}>
         <Avatar src={props.profile.inf?.avatar} />
@@ -219,7 +220,7 @@ const ReplyEditor: Component<{
       >
         <Button onClick={[setPermPicker, true]} id={buttonId}>
           {visibilityText()}
-          <ArrowDropDown />
+          <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
         </Button>
       </div>