ReplyEditor: supports reply

src/timelines/TootBottomSheet.tsx

@@ -84,7 +84,7 @@ const TootBottomSheet: Component = (props) => {
     return tootId;
   });
 
-  const [tootContext] = createResource(
+  const [tootContext, {refetch: refetchContext}] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
       return await client.v1.statuses.$select(id).context.fetch();
@@ -171,6 +171,18 @@ const TootBottomSheet: Component = (props) => {
     });
   };
 
+  const defaultMentions = () => {
+    const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account
+    if (!tootAcct) {
+      return
+    }
+
+    const others = ancestors().map(x => x.account)
+
+    const values = [tootAcct, ...others].map(x => `@${x.acct}`)
+    return Array.from(new Set(values).keys())
+  }
+
   css`
     .name :global(img) {
       max-height: 1em;
@@ -237,12 +249,16 @@ const TootBottomSheet: Component = (props) => {
           </Show>
         </article>
 
-        <Show when={profile()}>
+        <Show when={session()!.account}>
           <ReplyEditor
             isTyping={isInTyping()}
             onTypingChange={setInTyping}
-            profile={profile()!}
+            mentions={defaultMentions()}
+            profile={session().account!}
             replyToDisplayName={toot()?.account?.displayName || ""}
+            client={session().client}
+            onSent={() => refetchContext()}
+            inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
           />
         </Show>