Merge pull request 'composing toots' (#21) from feat-toot-composer into master

Reviewed-on: https://code.lightstands.xyz///Rubicon/tutu/pulls/21

src/material/BottomSheet.module.css

@@ -1,5 +1,7 @@
 .bottomSheet {
-  composes: surface from "material.module.css";
+  composes: surface from "./material.module.css";
+  composes: cardGutSkip from "./cards.module.css";
+  composes: cardNoPad from "./cards.module.css";
   border: none;
   position: absolute;
   left: 50%;
@@ -42,9 +44,21 @@
   &.animated {
     position: absolute;
     transform: none;
+    overflow: hidden;
+    will-change: width, height, top, left;
 
     &::backdrop {
       opacity: 0;
     }
+
+    & * {
+      overflow: hidden;
+    }
+  }
+
+  &.bottom {
+    top: unset;
+    transform: translateX(-50%);
+    bottom: 0;
   }
 }

src/material/BottomSheet.tsx

@@ -13,9 +13,12 @@ import {
 } from "solid-js";
 import styles from "./BottomSheet.module.css";
 import { useHeroSignal } from "../platform/anim";
+import { makeEventListener } from "@solid-primitives/event-listener";
 
 export type BottomSheetProps = {
   open?: boolean;
+  bottomUp?: boolean;
+  onClose?(reason: "backdrop"): void;
 };
 
 export const HERO = Symbol("BottomSheet Hero Symbol");
@@ -52,7 +55,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   createEffect(() => {
     if (props.open) {
       if (!element.open && !pending()) {
-        animatedOpen();
+        requestAnimationFrame(animatedOpen);
         setCache(ochildren());
       }
     } else {
@@ -63,15 +66,16 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   });
 
+  const onClose = () => {
+    element.close();
+    setHero();
+  };
+
   const animatedClose = () => {
     const endRect = hero();
     if (endRect) {
       const startRect = element.getBoundingClientRect();
       const animation = animateHero(startRect, endRect, element, true);
-      const onClose = () => {
-        element.close();
-        setHero();
-      };
       animation.addEventListener("finish", onClose);
       animation.addEventListener("cancel", onClose);
     } else {
@@ -123,8 +127,29 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
     }
   });
 
+  const onDialogClick = (
+    event: MouseEvent & { currentTarget: HTMLDialogElement },
+  ) => {
+    const rect = event.currentTarget.getBoundingClientRect();
+    const isInDialog =
+      rect.top <= event.clientY &&
+      event.clientY <= rect.top + rect.height &&
+      rect.left <= event.clientX &&
+      event.clientX <= rect.left + rect.width;
+    if (!isInDialog) {
+      props.onClose?.("backdrop");
+    }
+  };
+
   return (
-    <dialog class={styles.bottomSheet} ref={element!}>
+    <dialog
+      classList={{
+        [styles.bottomSheet]: true,
+        [styles.bottom]: props.bottomUp,
+      }}
+      onClick={onDialogClick}
+      ref={element!}
+    >
       {ochildren() ?? cache()}
     </dialog>
   );

src/material/Scaffold.tsx

@@ -12,6 +12,7 @@ import { css } from "solid-styled";
 interface ScaffoldProps {
   topbar?: JSX.Element;
   fab?: JSX.Element;
+  bottom?: JSX.Element;
 }
 
 const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
@@ -36,6 +37,16 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
       right: 40px;
       z-index: var(--tutu-zidx-nav, auto);
     }
+
+    .bottom-dock {
+      position: sticky;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: var(--tutu-zidx-nav, auto);
+      padding-bottom: var(--safe-area-inset-bottom, 0);
+
+    }
   `;
   return (
     <>
@@ -48,6 +59,9 @@ const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
         <div class="fab-dock">{props.fab}</div>
       </Show>
       <div class="scaffold-content">{props.children}</div>
+      <Show when={props.bottom}>
+        <div class="bottom-dock">{props.bottom}</div>
+      </Show>
     </>
   );
 };

src/platform/polyfills.ts

@@ -2,7 +2,21 @@
 //! It recommended to include the module by <script> tag.
 if (!document.body.animate) {
   // @ts-ignore: this file is polyfill, no exposed decls
-  import("web-animations-js").then(() => {
+  import("web-animations-js").then(() => { // all target platforms supported, prepared to remove
     console.warn("web animation polyfill is included");
   });
 }
+
+if (!window.crypto.randomUUID) { // Chrome/Edge 92+
+  // https://stackoverflow.com/a/2117523/2800218
+  // LICENSE: https://creativecommons.org/licenses/by-sa/4.0/legalcode
+  window.crypto.randomUUID =
+    function randomUUID(): `${string}-${string}-${string}-${string}-${string}` {
+      return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) =>
+        (
+          +c ^
+          (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
+        ).toString(16),
+      ) as `${string}-${string}-${string}-${string}-${string}`;
+    };
+}

src/timelines/ChooseTootLang.tsx

@@ -0,0 +1,86 @@
+import {
+  For,
+  onMount,
+  type Component,
+  type JSX,
+} from "solid-js";
+import Scaffold from "../material/Scaffold";
+import {
+  AppBar,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemSecondaryAction,
+  ListItemText,
+  Radio,
+  Toolbar,
+} from "@suid/material";
+import { Close as CloseIcon } from "@suid/icons-material";
+import iso639_1 from "iso-639-1";
+import { createTranslator } from "../platform/i18n";
+import { Title } from "../material/typography";
+
+type ChooseTootLangProps = {
+  code: string;
+  onCodeChange: (ncode: string) => void;
+  onClose?: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+};
+
+const ChooseTootLang: Component<ChooseTootLangProps> = (props) => {
+  let listRef: HTMLUListElement;
+  const [t] = createTranslator(
+    (code) =>
+      import(`./i18n/${code}.json`) as Promise<{
+        default: Record<string, string | undefined>;
+      }>,
+  );
+
+  onMount(() => {
+    const code = props.code;
+    const el = listRef.querySelector(`[data-langcode="${code}"]`);
+    if (el) {
+      el.scrollIntoView({ behavior: "auto" });
+    }
+  });
+
+  return (
+    <Scaffold
+      topbar={
+        <AppBar position="static">
+          <Toolbar
+            variant="dense"
+            sx={{ paddingTop: "var(--safe-area-inset-top, 0px)" }}
+          >
+            <IconButton color="inherit" onClick={props.onClose} disableRipple>
+              <CloseIcon />
+            </IconButton>
+            <Title>{t("Choose Language")}</Title>
+          </Toolbar>
+        </AppBar>
+      }
+    >
+      <List
+        ref={listRef!}
+        sx={{
+          paddingBottom: "var(--safe-area-inset-bottom, 0)",
+        }}
+      >
+        <For each={iso639_1.getAllCodes()}>
+          {(code) => (
+            <ListItemButton
+              data-langcode={code}
+              onClick={() => props.onCodeChange(code)}
+            >
+              <ListItemText>{iso639_1.getNativeName(code)}</ListItemText>
+              <ListItemSecondaryAction>
+                <Radio checked={props.code == code}></Radio>
+              </ListItemSecondaryAction>
+            </ListItemButton>
+          )}
+        </For>
+      </List>
+    </Scaffold>
+  );
+};
+
+export default ChooseTootLang;

src/timelines/Home.tsx

@@ -47,6 +47,7 @@ import { HeroSourceProvider, type HeroSource } from "../platform/anim";
 import { useNavigate } from "@solidjs/router";
 import { useSignedInProfiles } from "../masto/acct";
 import { setCache as setTootBottomSheetCache } from "./TootBottomSheet";
+import TootComposer from "./TootComposer";
 
 const TimelinePanel: Component<{
   client: mastodon.rest.Client;
@@ -57,6 +58,7 @@ const TimelinePanel: Component<{
   openFullScreenToot: (
     toot: mastodon.v1.Status,
     srcElement?: HTMLElement,
+    reply?: boolean,
   ) => void;
 }> = (props) => {
   const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
@@ -72,6 +74,7 @@ const TimelinePanel: Component<{
     { fullRefresh: props.fullRefetch },
   );
   const [expandedThreadId, setExpandedThreadId] = createSignal<string>();
+  const [typing, setTyping] = createSignal(false);
 
   const tlEndObserver = new IntersectionObserver(() => {
     if (untrack(() => props.prefetch) && !snapshot.loading)
@@ -143,6 +146,17 @@ const TimelinePanel: Component<{
           }, 0)
         }
       >
+        <Show when={props.name === "home"}>
+          <TootComposer
+            style={{
+              "--scaffold-topbar-height": "0px",
+            }}
+            isTyping={typing()}
+            onTypingChange={setTyping}
+            client={props.client}
+            onSent={() => refetchTimeline({ direction: "new" })}
+          />
+        </Show>
         <For each={timeline}>
           {(item, index) => {
             let element: HTMLElement | undefined;
@@ -152,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) => {
@@ -314,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();
@@ -325,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/MediaAttachmentGrid.tsx

@@ -64,7 +64,7 @@ const MediaAttachmentGrid: Component<{
     >
       <For each={props.attachments}>
         {(item, index) => {
-          const [loaded, setLoaded] = createSignal(false)
+          const [loaded, setLoaded] = createSignal(false);
           const width = item.meta?.small?.width;
           const height = item.meta?.small?.height;
           const aspectRatio = item.meta?.small?.aspect;
@@ -74,10 +74,13 @@ const MediaAttachmentGrid: Component<{
             width && height && height > maxHeight
               ? maxHeight / (aspectRatio ?? 1)
               : width;
-          const style = () => loaded() ? undefined : {
-            width: realWidth ? `${realWidth}px` : undefined,
-            height: realHeight ? `${realHeight}px` : undefined,
-          };
+          const style = () =>
+            loaded()
+              ? undefined
+              : {
+                  width: realWidth ? `${realWidth}px` : undefined,
+                  height: realHeight ? `${realHeight}px` : undefined,
+                };
           switch (item.type) {
             case "image":
               return (
@@ -100,7 +103,17 @@ const MediaAttachmentGrid: Component<{
                   controls
                 />
               );
-            case "gifv":
+            case "gifv": // Later we can handle the preview
+            return (
+              <video
+                src={item.url || undefined}
+                style={style()}
+                onLoadedMetadata={[setLoaded, true]}
+                autoplay={true}
+                controls
+              />
+            );
+
             case "audio":
             case "unknown":
               return <div></div>;

src/timelines/TootBottomSheet.tsx

@@ -3,17 +3,17 @@ import {
   createEffect,
   createRenderEffect,
   createResource,
+  createSignal,
   For,
   Show,
   type Component,
 } from "solid-js";
 import Scaffold from "../material/Scaffold";
-import { AppBar, Avatar, CircularProgress, IconButton, Toolbar } from "@suid/material";
+import { AppBar, CircularProgress, IconButton, Toolbar } from "@suid/material";
 import { Title } from "../material/typography";
 import {
   ArrowBack as BackIcon,
   Close as CloseIcon,
-  Send,
 } from "@suid/icons-material";
 import { createUnauthorizedClient, useSessions } from "../masto/clients";
 import { resolveCustomEmoji } from "../masto/toot";
@@ -22,6 +22,8 @@ import type { mastodon } from "masto";
 import cards from "../material/cards.module.css";
 import { css } from "solid-styled";
 import { vibrate } from "../platform/hardware";
+import { createTimeSource, TimeSourceProvider } from "../platform/timesrc";
+import TootComposer from "./TootComposer";
 
 let cachedEntry: [string, mastodon.v1.Status] | undefined;
 
@@ -37,9 +39,14 @@ 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();
+  const [isInTyping, setInTyping] = createSignal(false);
   const acctText = () => decodeURIComponent(params.acct);
   const session = () => {
     const [inputUsername, inputSite] = acctText().split("@", 2);
@@ -80,7 +87,13 @@ const TootBottomSheet: Component = (props) => {
     return tootId;
   });
 
-  const [tootContext] = 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();
@@ -155,6 +168,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: {
@@ -163,13 +180,19 @@ const TootBottomSheet: Component = (props) => {
     });
   };
 
-  css`
-    .bottom-dock {
-      position: sticky;
-      bottom: 0;
-      z-index: var(--tutu-zidx-nav);
+  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;
     }
@@ -203,74 +226,76 @@ const TootBottomSheet: Component = (props) => {
         </AppBar>
       }
     >
-      <For each={ancestors()}>
-        {(item) => (
-          <RegularToot
-            id={`toot-${item.id}`}
-            class={cards.card}
-            status={item}
-            actionable={false}
-            onClick={[switchContext, item]}
-          ></RegularToot>
-        )}
-      </For>
+      <TimeSourceProvider value={time}>
+        <For each={ancestors()}>
+          {(item) => (
+            <RegularToot
+              id={`toot-${item.id}`}
+              class={cards.card}
+              status={item}
+              actionable={false}
+              onClick={[switchContext, item]}
+            ></RegularToot>
+          )}
+        </For>
 
-      <article>
-        <Show when={toot()}>
-          <RegularToot
-            id={`toot-${toot()!.id}`}
-            class={cards.card}
-            style={{
-              "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)",
-            }}
-            status={toot()!}
-            actionable={!!actSession()}
-            evaluated={true}
-            onBookmark={onBookmark}
-            onRetoot={onBoost}
-            onFavourite={onFav}
-          ></RegularToot>
+        <article>
+          <Show when={toot()}>
+            <RegularToot
+              id={`toot-${toot()!.id}`}
+              class={cards.card}
+              style={{
+                "scroll-margin-top":
+                  "calc(var(--scaffold-topbar-height) + 20px)",
+              }}
+              status={toot()!}
+              actionable={!!actSession()}
+              evaluated={true}
+              onBookmark={onBookmark}
+              onRetoot={onBoost}
+              onFavourite={onFav}
+            ></RegularToot>
+          </Show>
+        </article>
+
+        <Show when={session()!.account}>
+          <TootComposer
+            isTyping={isInTyping()}
+            onTypingChange={setInTyping}
+            mentions={defaultMentions()}
+            profile={session().account!}
+            replyToDisplayName={toot()?.account?.displayName || ""}
+            client={session().client}
+            onSent={() => refetchContext()}
+            inReplyToId={remoteToot()?.reblog?.id ?? remoteToot()?.id}
+          />
         </Show>
-      </article>
 
-      <Show when={tootContext.loading}>
-        <div
-          style={{
-            display: "flex",
-            "justify-content": "center",
-            "margin-block": "12px",
-          }}
-        >
-          <CircularProgress style="width: 1.5em; height: 1.5em;" />
-        </div>
-      </Show>
-
-      <For each={descendants()}>
-        {(item) => (
-          <RegularToot
-            id={`toot-${item.id}`}
-            class={cards.card}
-            status={item}
-            actionable={false}
-            onClick={[switchContext, item]}
-          ></RegularToot>
-        )}
-      </For>
-
-      <div class="bottom-dock">
-        <Show when={profile()}>
-          <div style="display: flex; gap: 8px; background: var(--tutu-color-surface); padding: 8px 8px calc(var(--safe-area-inset-bottom, 0px) + 8px);">
-            <Avatar src={profile()!.inf?.avatar} />
-            <textarea
-              placeholder={`Reply to ${toot()?.account?.displayName ?? ""}...`}
-              style={{ width: "100%", border: "none" }}
-            ></textarea>
-            <IconButton>
-              <Send />
-            </IconButton>
+        <Show when={tootContext.loading}>
+          <div
+            style={{
+              display: "flex",
+              "justify-content": "center",
+              "margin-block": "12px",
+            }}
+          >
+            <CircularProgress style="width: 1.5em; height: 1.5em;" />
           </div>
         </Show>
-      </div>
+
+        <For each={descendants()}>
+          {(item) => (
+            <RegularToot
+              id={`toot-${item.id}`}
+              class={cards.card}
+              status={item}
+              actionable={false}
+              onClick={[switchContext, item]}
+            ></RegularToot>
+          )}
+        </For>
+      </TimeSourceProvider>
+      <div style={{ height: "var(--safe-area-inset-bottom, 0)" }}></div>
     </Scaffold>
   );
 };

src/timelines/TootComposer.module.css

@@ -0,0 +1,11 @@
+
+.composer {
+  composes: card from "../material/cards.module.css";
+  --card-gut: 8px;
+}
+
+.replyInput {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+}

src/timelines/TootComposer.tsx

@@ -0,0 +1,383 @@
+import {
+  createEffect,
+  createSignal,
+  createUniqueId,
+  onMount,
+  Show,
+  type Component,
+  type JSX,
+  type Ref,
+} from "solid-js";
+import Scaffold from "../material/Scaffold";
+import {
+  Avatar,
+  Button,
+  IconButton,
+  List,
+  ListItemButton,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  ListItemText,
+  Radio,
+  Switch,
+  Divider,
+  CircularProgress,
+} from "@suid/material";
+import {
+  ArrowDropDown,
+  Public as PublicIcon,
+  Send,
+  People as PeopleIcon,
+  ThreeP as ThreePIcon,
+  ListAlt as ListAltIcon,
+  Visibility,
+  Translate,
+} from "@suid/icons-material";
+import type { Account } from "../accounts/stores";
+import tootComposers from "./TootComposer.module.css";
+import { makeEventListener } from "@solid-primitives/event-listener";
+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";
+
+const TootVisibilityPickerDialog: Component<{
+  open?: boolean;
+  onClose: () => void;
+  visibility: TootVisibility;
+  onVisibilityChange: (value: TootVisibility) => void;
+}> = (props) => {
+  type Kind = "public" | "private" | "direct";
+
+  const kind = () =>
+    props.visibility === "public" || props.visibility === "unlisted"
+      ? "public"
+      : props.visibility;
+
+  const setKind = (nv: Kind) => {
+    if (nv == "public") {
+      props.onVisibilityChange(discoverable() ? "public" : "unlisted");
+    } else {
+      props.onVisibilityChange(nv);
+    }
+  };
+
+  const discoverable = () => {
+    return props.visibility === "public";
+  };
+
+  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>
+      <Scaffold
+        bottom={
+          <div
+            style={{
+              "border-top": "1px solid #ddd",
+              background: "var(--tutu-color-surface)",
+              padding: "8px 16px",
+              width: "100%",
+              "text-align": "end",
+            }}
+          >
+            <Button onClick={props.onClose}>Confirm</Button>
+          </div>
+        }
+      >
+        <List dense>
+          <ListItemButton onClick={[setKind, "public"]}>
+            <ListItemIcon>
+              <PublicIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Public"
+              secondary="Everyone can see this toot"
+            ></ListItemText>
+            <ListItemSecondaryAction>
+              <Radio checked={kind() == "public"}></Radio>
+            </ListItemSecondaryAction>
+          </ListItemButton>
+
+          <ListItemButton
+            sx={{ paddingLeft: "40px" }}
+            disabled={kind() !== "public"}
+            onClick={() => setDiscoverable((x) => !x)}
+          >
+            <ListItemIcon>
+              <ListAltIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Discoverable"
+              secondary="The others can discover it on the exploration."
+            ></ListItemText>
+            <ListItemSecondaryAction>
+              <Switch
+                checked={discoverable()}
+                disabled={kind() !== "public"}
+              ></Switch>
+            </ListItemSecondaryAction>
+          </ListItemButton>
+
+          <Divider />
+
+          <ListItemButton onClick={[setKind, "private"]}>
+            <ListItemIcon>
+              <PeopleIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Only Followers"
+              secondary="Visibile for followers only"
+            ></ListItemText>
+            <ListItemSecondaryAction>
+              <Radio checked={kind() == "private"}></Radio>
+            </ListItemSecondaryAction>
+          </ListItemButton>
+
+          <Divider />
+
+          <ListItemButton onClick={[setKind, "direct"]}>
+            <ListItemIcon>
+              <ThreePIcon />
+            </ListItemIcon>
+            <ListItemText
+              primary="Only Mentions"
+              secondary="Visible for mentioned users only"
+            ></ListItemText>
+            <ListItemSecondaryAction>
+              <Radio checked={kind() == "direct"}></Radio>
+            </ListItemSecondaryAction>
+          </ListItemButton>
+        </List>
+      </Scaffold>
+    </BottomSheet>
+  );
+};
+
+const TootLanguagePickerDialog: Component<{
+  open?: boolean;
+  onClose: () => void;
+  code: string;
+  onCodeChange: (nval: string) => void;
+}> = (props) => {
+  return (
+    <BottomSheet open={props.open} onClose={props.onClose}>
+      <Show when={props.open}>
+        <ChooseTootLang
+          code={props.code}
+          onCodeChange={props.onCodeChange}
+          onClose={props.onClose}
+        />
+      </Show>
+    </BottomSheet>
+  );
+};
+
+function randomChoose<T extends any[]>(
+  rn: number,
+  K: T,
+): T extends Array<infer E> ? E : never {
+  const idx = Math.round(rn * K.length);
+  return K[idx];
+}
+
+const TootComposer: Component<{
+  ref?: Ref<HTMLDivElement>;
+  style?: JSX.CSSProperties;
+  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");
+  const [langPickerOpen, setLangPickerOpen] = createSignal(false);
+  const appLanguage = useLanguage();
+
+  createEffect(() => {
+    const lang = appLanguage().split("-")[0];
+    setLanguage(lang);
+  });
+
+  createEffect(() => {
+    if (typing()) {
+      setTimeout(() => inputRef.focus(), 0);
+    }
+  });
+
+  onMount(() => {
+    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()
+      ? {
+          position: "sticky" as const,
+          top: "var(--scaffold-topbar-height, 0)",
+          bottom: "var(--safe-area-inset-bottom, 0)",
+          "z-index": 2,
+          ...props.style,
+        }
+      : undefined;
+
+  const visibilityText = () => {
+    switch (visibility()) {
+      case "public":
+        return "Discoverable";
+      case "unlisted":
+        return "Public";
+      case "private":
+        return "Only Followers";
+      case "direct":
+        return "Only Mentions";
+    }
+  };
+
+  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
+      ref={props.ref}
+      class={tootComposers.composer}
+      style={containerStyle()}
+      onClick={(e) => inputRef.focus()}
+    >
+      <div class={tootComposers.replyInput}>
+        <Show when={props.profile}>
+          <Avatar
+            src={props.profile!.inf?.avatar}
+            sx={{ marginLeft: "-0.25em" }}
+          />
+        </Show>
+        <textarea
+          ref={inputRef!}
+          placeholder={
+            props.replyToDisplayName
+              ? `Reply to ${props.replyToDisplayName}...`
+              : randomChoose(Math.random(), [
+                  "What's happening?",
+                  "What do your think?",
+                ])
+          }
+          style={{ width: "100%", border: "none" }}
+          disabled={sending()}
+        ></textarea>
+        <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()}>
+        <div
+          style={{
+            display: "flex",
+            "justify-content": "flex-end",
+            "margin-top": "8px",
+            gap: "16px",
+            "flex-flow": "row wrap",
+          }}
+        >
+          <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]} disabled={sending()}>
+            <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
+            {visibilityText()}
+            <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
+          </Button>
+        </div>
+
+        <TootVisibilityPickerDialog
+          open={permPicker()}
+          onClose={() => setPermPicker(false)}
+          visibility={visibility()}
+          onVisibilityChange={setVisibility}
+        />
+
+        <TootLanguagePickerDialog
+          open={langPickerOpen()}
+          onClose={() => setLangPickerOpen(false)}
+          code={language()}
+          onCodeChange={setLanguage}
+        />
+      </Show>
+    </div>
+  );
+};
+
+export default TootComposer;

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>
   );

src/timelines/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "Choose Language": "Choose Language"
+}

src/timelines/i18n/zh-Hans.json

@@ -0,0 +1,3 @@
+{
+  "Choose Language": "选择语言"
+}