src/material/BottomSheet.module.css

@@ -1,7 +1,5 @@
 .bottomSheet {
-  composes: surface from "./material.module.css";
-  composes: cardGutSkip from "./cards.module.css";
-  composes: cardNoPad from "./cards.module.css";
+  composes: surface from "material.module.css";
   border: none;
   position: absolute;
   left: 50%;
@@ -44,21 +42,9 @@
   &.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,12 +13,9 @@ 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");
@@ -55,7 +52,7 @@ const BottomSheet: ParentComponent<BottomSheetProps> = (props) => {
   createEffect(() => {
     if (props.open) {
       if (!element.open && !pending()) {
-        requestAnimationFrame(animatedOpen);
+        animatedOpen();
         setCache(ochildren());
       }
     } else {
@@ -66,16 +63,15 @@ 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 {
@@ -127,29 +123,8 @@ 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
-      classList={{
-        [styles.bottomSheet]: true,
-        [styles.bottom]: props.bottomUp,
-      }}
-      onClick={onDialogClick}
-      ref={element!}
-    >
+    <dialog class={styles.bottomSheet} ref={element!}>
       {ochildren() ?? cache()}
     </dialog>
   );

src/material/Scaffold.tsx

@@ -12,7 +12,6 @@ import { css } from "solid-styled";
 interface ScaffoldProps {
   topbar?: JSX.Element;
   fab?: JSX.Element;
-  bottom?: JSX.Element;
 }
 
 const Scaffold: ParentComponent<ScaffoldProps> = (props) => {
@@ -37,16 +36,6 @@ 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 (
     <>
@@ -59,9 +48,6 @@ 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,21 +2,7 @@
 //! 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(() => { // all target platforms supported, prepared to remove
+  import("web-animations-js").then(() => {
     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

@@ -1,86 +0,0 @@
-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,7 +47,6 @@ 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;
@@ -58,7 +57,6 @@ const TimelinePanel: Component<{
   openFullScreenToot: (
     toot: mastodon.v1.Status,
     srcElement?: HTMLElement,
-    reply?: boolean,
   ) => void;
 }> = (props) => {
   const [scrollLinked, setScrollLinked] = createSignal<HTMLElement>();
@@ -74,7 +72,6 @@ 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)
@@ -146,17 +143,6 @@ 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;
@@ -166,9 +152,6 @@ 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) => {
@@ -331,7 +314,6 @@ const Home: ParentComponent = (props) => {
   const openFullScreenToot = (
     toot: mastodon.v1.Status,
     srcElement?: HTMLElement,
-    reply?: boolean,
   ) => {
     const p = profiles()[0];
     const inf = p.account.inf ?? profile();
@@ -343,13 +325,7 @@ 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}`, {
-      state: reply
-        ? {
-            tootReply: true,
-          }
-        : undefined,
-    });
+    navigate(`/${encodeURIComponent(acct)}/${toot.id}`);
   };
 
   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,13 +74,10 @@ 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 (
@@ -103,17 +100,7 @@ const MediaAttachmentGrid: Component<{
                   controls
                 />
               );
-            case "gifv": // Later we can handle the preview
-            return (
-              <video
-                src={item.url || undefined}
-                style={style()}
-                onLoadedMetadata={[setLoaded, true]}
-                autoplay={true}
-                controls
-              />
-            );
-
+            case "gifv":
             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, CircularProgress, IconButton, Toolbar } from "@suid/material";
+import { AppBar, Avatar, 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,8 +22,6 @@ 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;
 
@@ -39,14 +37,9 @@ function getCache(acct: string, id: string) {
 
 const TootBottomSheet: Component = (props) => {
   const params = useParams<{ acct: string; id: string }>();
-  const location = useLocation<{
-    tootBottomSheetPushedCount?: number;
-    tootReply?: boolean;
-  }>();
+  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);
@@ -87,13 +80,7 @@ const TootBottomSheet: Component = (props) => {
     return tootId;
   });
 
-  createEffect(() => {
-    if (location.state?.tootReply) {
-      setInTyping(true);
-    }
-  });
-
-  const [tootContext, { refetch: refetchContext }] = createResource(
+  const [tootContext] = createResource(
     () => [session().client, params.id] as const,
     async ([client, id]) => {
       return await client.v1.statuses.$select(id).context.fetch();
@@ -168,10 +155,6 @@ 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: {
@@ -180,19 +163,13 @@ const TootBottomSheet: Component = (props) => {
     });
   };
 
-  const defaultMentions = () => {
-    const tootAcct = remoteToot()?.reblog?.account ?? remoteToot()?.account;
-    if (!tootAcct) {
-      return;
+  css`
+    .bottom-dock {
+      position: sticky;
+      bottom: 0;
+      z-index: var(--tutu-zidx-nav);
     }
 
-    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;
     }
@@ -226,76 +203,74 @@ const TootBottomSheet: Component = (props) => {
         </AppBar>
       }
     >
-      <TimeSourceProvider value={time}>
-        <For each={ancestors()}>
-          {(item) => (
-            <RegularToot
-              id={`toot-${item.id}`}
-              class={cards.card}
-              status={item}
-              actionable={false}
-              onClick={[switchContext, item]}
-            ></RegularToot>
-          )}
-        </For>
+      <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>
-          </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>
-
-        <Show when={tootContext.loading}>
-          <div
+      <article>
+        <Show when={toot()}>
+          <RegularToot
+            id={`toot-${toot()!.id}`}
+            class={cards.card}
             style={{
-              display: "flex",
-              "justify-content": "center",
-              "margin-block": "12px",
+              "scroll-margin-top": "calc(var(--scaffold-topbar-height) + 20px)",
             }}
-          >
-            <CircularProgress style="width: 1.5em; height: 1.5em;" />
+            status={toot()!}
+            actionable={!!actSession()}
+            evaluated={true}
+            onBookmark={onBookmark}
+            onRetoot={onBoost}
+            onFavourite={onFav}
+          ></RegularToot>
+        </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>
           </div>
         </Show>
-
-        <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>
+      </div>
     </Scaffold>
   );
 };

src/timelines/TootComposer.module.css

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

src/timelines/TootComposer.tsx

@@ -1,383 +0,0 @@
-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,7 +14,6 @@ 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;
 };
 
@@ -39,10 +38,6 @@ const TootThread: Component<TootThreadProps> = (props) => {
     props.onBookmark?.(props.client, status);
   };
 
-  const reply = (status: mastodon.v1.Status) => {
-    props.onReply?.(props.client, status)
-  }
-
   css`
     article {
       transition:
@@ -93,7 +88,6 @@ 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

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

src/timelines/i18n/zh-Hans.json

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