ReplyEditor: promote the blur condition up

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 || ""}
           />