ReplyEditor: supports reply

src/timelines/ReplyEditor.tsx

@@ -1,6 +1,7 @@
 import {
   createEffect,
   createSignal,
+  createUniqueId,
   onMount,
   Show,
   type Component,
@@ -18,6 +19,7 @@ import {
   Radio,
   Switch,
   Divider,
+  CircularProgress,
 } from "@suid/material";
 import {
   ArrowDropDown,
@@ -36,6 +38,7 @@ import BottomSheet from "../material/BottomSheet";
 import { useLanguage } from "../platform/i18n";
 import iso639_1 from "iso-639-1";
 import ChooseTootLang from "./ChooseTootLang";
+import type { mastodon } from "masto";
 
 type TootVisibility = "public" | "unlisted" | "private" | "direct";
 
@@ -177,13 +180,19 @@ const TootLanguagePickerDialog: Component<{
 const ReplyEditor: Component<{
   profile: Account;
   replyToDisplayName: string;
+  mentions?: readonly string[];
   isTyping?: boolean;
   onTypingChange: (value: boolean) => void;
+  client?: mastodon.rest.Client;
+  inReplyToId?: string;
+  onSent?: (status: mastodon.v1.Status) => void;
 }> = (props) => {
   let inputRef: HTMLTextAreaElement;
+  let sendKey: string | undefined;
 
   const typing = () => props.isTyping;
   const setTyping = (v: boolean) => props.onTypingChange(v);
+  const [sending, setSending] = createSignal(false);
   const [visibility, setVisibility] = createSignal<TootVisibility>("public");
   const [permPicker, setPermPicker] = createSignal(false);
   const [language, setLanguage] = createSignal("en");
@@ -199,6 +208,14 @@ const ReplyEditor: Component<{
     makeEventListener(inputRef, "focus", () => setTyping(true));
   });
 
+  createEffect(() => {
+    if (inputRef.value !== "") return;
+    if (props.mentions) {
+      const prepText = props.mentions.join(" ") + " ";
+      inputRef.value = prepText;
+    }
+  });
+
   const containerStyle = () =>
     typing() || permPicker()
       ? {
@@ -222,6 +239,39 @@ const ReplyEditor: Component<{
     }
   };
 
+  const getOrGenSendKey = () => {
+    if (sendKey === undefined) {
+      sendKey = window.crypto.randomUUID();
+    }
+    return sendKey;
+  };
+
+  const send = async () => {
+    setSending(true);
+    try {
+      const status = await props.client!.v1.statuses.create(
+        {
+          status: inputRef.value,
+          language: language(),
+          visibility: visibility(),
+          inReplyToId: props.inReplyToId,
+        },
+        {
+          requestInit: {
+            headers: {
+              ["Idempotency-Key"]: getOrGenSendKey(),
+            },
+          },
+        },
+      );
+
+      props.onSent?.(status);
+      inputRef.value = "";
+    } finally {
+      setSending(false);
+    }
+  };
+
   return (
     <div
       class={tootComposers.composer}
@@ -237,10 +287,28 @@ const ReplyEditor: Component<{
           ref={inputRef!}
           placeholder={`Reply to ${props.replyToDisplayName}...`}
           style={{ width: "100%", border: "none" }}
+          disabled={sending()}
         ></textarea>
-        <IconButton sx={{ marginRight: "-0.5em" }}>
-          <Send />
-        </IconButton>
+        <Show when={props.client}>
+          <Show
+            when={!sending()}
+            fallback={
+              <div style={{ padding: "8px" }}>
+                <CircularProgress
+                  sx={{
+                    marginRight: "-0.5em",
+                    width: "1.5rem",
+                    height: "1.5rem",
+                  }}
+                />
+              </div>
+            }
+          >
+            <IconButton sx={{ marginRight: "-0.5em" }} onClick={send}>
+              <Send />
+            </IconButton>
+          </Show>
+        </Show>
       </div>
 
       <Show when={typing()}>
@@ -253,12 +321,12 @@ const ReplyEditor: Component<{
             "flex-flow": "row wrap",
           }}
         >
-          <Button onClick={[setLangPickerOpen, true]}>
+          <Button onClick={[setLangPickerOpen, true]} disabled={sending()}>
             <Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
             {iso639_1.getNativeName(language())}
             <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
           </Button>
-          <Button onClick={[setPermPicker, true]}>
+          <Button onClick={[setPermPicker, true]} disabled={sending()}>
             <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
             {visibilityText()}
             <ArrowDropDown sx={{ marginTop: "-0.25em" }} />