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>
 

src/timelines/TootBottomSheet.tsx

@@ -3,17 +3,13 @@ import {
   createEffect,
   createRenderEffect,
   createResource,
+  createSignal,
   For,
   Show,
   type Component,
 } from "solid-js";
 import Scaffold from "../material/Scaffold";
-import {
-  AppBar,
-  CircularProgress,
-  IconButton,
-  Toolbar,
-} from "@suid/material";
+import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
 import { Title } from "../material/typography";
 import {
   ArrowBack as BackIcon,
@@ -41,14 +37,13 @@ function getCache(acct: string, id: string) {
   }
 }
 
-
-
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
   const location = useLocation<{ tootBottomSheetPushedCount?: number }>();
   const navigate = useNavigate();
   const allSession = useSessions();
   const time = createTimeSource();
+  const [isInTyping, setInTyping] = createSignal(false);
   const acctText = () => decodeURIComponent(params.acct);
   const session = () => {
     const [inputUsername, inputSite] = acctText().split("@", 2);
@@ -164,6 +159,10 @@ const TootBottomSheet: Component = (props) => {
   };
 
   const switchContext = (status: mastodon.v1.Status) => {
+    if (isInTyping()) {
+      setInTyping(false);
+      return;
+    }
     setCache(params.acct, status);
     navigate(`/${params.acct}/${status.id}`, {
       state: {
@@ -240,6 +239,8 @@ const TootBottomSheet: Component = (props) => {
 
         <Show when={profile()}>
           <ReplyEditor
+            isTyping={isInTyping()}
+            onTypingChange={setInTyping}
             profile={profile()!}
             replyToDisplayName={toot()?.account?.displayName || ""}
           />