src/timelines/Home.tsx

@@ -58,6 +58,7 @@ const TimelinePanel: Component<{
   openFullScreenToot: (
     toot: mastodon.v1.Status,
     srcElement?: HTMLElement,
+    reply?: boolean,
   ) => void;
 }> = (props) => {
   const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
@@ -153,7 +154,7 @@ const TimelinePanel: Component<{
             isTyping={typing()}
             onTypingChange={setTyping}
             client={props.client}
-            onSent={() => refetchTimeline({direction: "new"})}
+            onSent={() => refetchTimeline({ direction: "new" })}
           />
         </Show>
         <For each={timeline}>
@@ -165,6 +166,9 @@ const TimelinePanel: Component<{
                 status={item}
                 onBoost={(...args) => onBoost(index(), ...args)}
                 onBookmark={(...args) => onBookmark(index(), ...args)}
+                onReply={(client, status) =>
+                  props.openFullScreenToot(status, element, true)
+                }
                 client={props.client}
                 expanded={item.id === expandedThreadId() ? 1 : 0}
                 onExpandChange={(x) => {
@@ -327,6 +331,7 @@ const Home: ParentComponent = (props) => {
   const openFullScreenToot = (
     toot: mastodon.v1.Status,
     srcElement?: HTMLElement,
+    reply?: boolean,
   ) => {
     const p = profiles()[0];
     const inf = p.account.inf ?? profile();
@@ -338,7 +343,13 @@ const Home: ParentComponent = (props) => {
     setHeroSrc((x) => Object.assign({}, x, { [BOTTOM_SHEET_HERO]: rect }));
     const acct = `${inf.username}@${p.account.site}`;
     setTootBottomSheetCache(acct, toot);
-    navigate(`/${encodeURIComponent(acct)}/${toot.id}`);
+    navigate(`/${encodeURIComponent(acct)}/${toot.id}`, {
+      state: reply
+        ? {
+            tootReply: true,
+          }
+        : undefined,
+    });
   };
 
   css`

src/timelines/TootBottomSheet.tsx

@@ -39,7 +39,10 @@ function getCache(acct: string, id: string) {
 
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
-  const location = useLocation<{ tootBottomSheetPushedCount?: number }>();
+  const location = useLocation<{
+    tootBottomSheetPushedCount?: number;
+    tootReply?: boolean;
+  }>();
   const navigate = useNavigate();
   const allSession = useSessions();
   const time = createTimeSource();
@@ -84,7 +87,13 @@ const TootBottomSheet: Component = (props) => {
     return tootId;
   });
 
-  const [tootContext, {refetch: refetchContext}] = createResource(
+  createEffect(() => {
+    if (location.state?.tootReply) {
+      setInTyping(true);
+    }
+  });
+
+  const [tootContext, { refetch: refetchContext }] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
       return await client.v1.statuses.$select(id).context.fetch();
@@ -172,16 +181,16 @@ const TootBottomSheet: Component = (props) => {
   };
 
   const defaultMentions = () => {
-    const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account
+    const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account;
     if (!tootAcct) {
-      return
+      return;
     }
 
-    const others = ancestors().map(x => x.account)
+    const others = ancestors().map((x) => x.account);
 
-    const values = [tootAcct, ...others].map(x => `@${x.acct}`)
-    return Array.from(new Set(values).keys())
-  }
+    const values = [tootAcct, ...others].map((x) => `@${x.acct}`);
+    return Array.from(new Set(values).keys());
+  };
 
   css`
     .name :global(img) {
@@ -286,7 +295,7 @@ const TootBottomSheet: Component = (props) => {
           )}
         </For>
       </TimeSourceProvider>
-      <div style={{height: "var(--safe-area-inset-bottom, 0)"}}></div>
+      <div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
     </Scaffold>
   );
 };

src/timelines/TootComposer.tsx

@@ -198,7 +198,6 @@ const TootComposer: Component<{
   client?: mastodon.rest.Client;
   inReplyToId?: string;
   onSent?: (status: mastodon.v1.Status) => void;
-  inputProps?: JSX.TextareaHTMLAttributes<HTMLTextAreaElement>;
 }> = (props) => {
   let inputRef: HTMLTextAreaElement;
   let sendKey: string | undefined;
@@ -217,6 +216,12 @@ const TootComposer: Component<{
     setLanguage(lang);
   });
 
+  createEffect(() => {
+    if (typing()) {
+      setTimeout(() => inputRef.focus(), 0);
+    }
+  });
+
   onMount(() => {
     makeEventListener(inputRef, "focus", () => setTyping(true));
   });
@@ -312,7 +317,6 @@ const TootComposer: Component<{
           }
           style={{ width: "100%", border: "none" }}
           disabled={sending()}
-          {...props.inputProps}
         ></textarea>
         <Show when={props.client}>
           <Show

src/timelines/TootThread.tsx

@@ -14,6 +14,7 @@ type TootThreadProps = {
 
   onBoost?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
   onBookmark?(client: mastodon.rest.Client, status: mastodon.v1.Status): void;
+  onReply?(client: mastodon.rest.Client, status: mastodon.v1.Status): void
   onExpandChange?(level: 0 | 1 | 2): void;
 };
 
@@ -38,6 +39,10 @@ const TootThread: Component<TootThreadProps> = (props) => {
     props.onBookmark?.(props.client, status);
   };
 
+  const reply = (status: mastodon.v1.Status) => {
+    props.onReply?.(props.client, status)
+  }
+
   css`
     article {
       transition:
@@ -88,6 +93,7 @@ const TootThread: Component<TootThreadProps> = (props) => {
         actionable={expanded() > 0}
         onBookmark={(s) => bookmark(s)}
         onRetoot={(s) => boost(s)}
+        onReply={s => reply(s)}
       />
     </article>
   );