src/platform/SizedTextarea.css

@@ -1,5 +0,0 @@
-.SizedTextarea {
-  overflow-y: hidden;
-  width: 100%;
-  resize: vertical;
-}

src/platform/SizedTextarea.tsx

@@ -1,63 +0,0 @@
-import { splitProps, type Component, type JSX } from "solid-js";
-import "./SizedTextarea.css";
-
-function isBoundEventHandler<T, E extends Event>(
-  handler: JSX.EventHandlerUnion<T, E>,
-): handler is JSX.BoundEventHandler<T, E> {
-  return Array.isArray(handler);
-}
-
-function callEventHandlerUnion<T extends EventTarget, E extends Event>(
-  handler: JSX.EventHandlerUnion<T, E>,
-  event: E & { currentTarget: T; target: Element },
-) {
-  if (isBoundEventHandler(handler)) {
-    const fn = handler[0],
-      value = handler[1];
-    fn(value, event);
-  } else {
-    (handler as (e: typeof event) => void).bind(event.target)(event);
-  }
-}
-
-function onTextareaRefreshHeight<
-  E extends Event & {
-    currentTarget: HTMLTextAreaElement;
-    target: HTMLTextAreaElement;
-  },
->(
-  ocallback: JSX.EventHandlerUnion<HTMLTextAreaElement, E> | undefined,
-  event: E,
-) {
-  const element = event.currentTarget;
-  element.style.removeProperty("height");
-  element.style.height = `${element.scrollHeight + 2}px`;
-
-  if (ocallback) {
-    callEventHandlerUnion(ocallback, event);
-  }
-}
-
-/**
- * The <textarea /> automatically vertically sized as the content.
- *
- * Note: listens the "focus" and "input" event using `addEventListener()`
- * may not work - use the event listening syntax on the component instead.
- * If you find it work, tell Rubicon to remove this note.
- */
-const SizedTextarea: Component<JSX.HTMLElementTags["textarea"]> = (oprops) => {
-  const [props, rest] = splitProps(oprops, ["onInput", "onFocus", "class"]);
-
-  return (
-    <textarea
-      onInput={(event) =>
-        onTextareaRefreshHeight<typeof event>(props.onInput, event)
-      }
-      onFocus={[onTextareaRefreshHeight, props.onFocus]}
-      class={`SizedTextarea ${props.class || ""}`}
-      {...rest}
-    ></textarea>
-  );
-};
-
-export default SizedTextarea;

src/timelines/TimelinePanel.tsx

@@ -33,6 +33,7 @@ const TimelinePanel: Component<{
     () => props.client.v1.timelines[props.name],
     () => ({ limit: 20 }),
   );
+  const [typing, setTyping] = createSignal(false);
 
   const tlEndObserver = new IntersectionObserver(() => {
     if (untrack(() => props.prefetch) && !snapshot.loading)
@@ -64,6 +65,8 @@ const TimelinePanel: Component<{
             style={{
               "--scaffold-topbar-height": "0px",
             }}
+            isTyping={typing()}
+            onTypingChange={setTyping}
             client={props.client}
             onSent={() => refetchTimeline("prev")}
           />

src/timelines/TootBottomSheet.tsx

@@ -46,6 +46,7 @@ const TootBottomSheet: Component = (props) => {
   }>();
   const navigate = useNavigate();
   const time = createTimeSource();
+  const [isInTyping, setInTyping] = createSignal(false);
   const acctText = () => decodeURIComponent(params.acct);
   const session = useSessionForAcctStr(acctText);
 
@@ -69,6 +70,12 @@ const TootBottomSheet: Component = (props) => {
     return tootId;
   });
 
+  createEffect(() => {
+    if (location.state?.tootReply) {
+      setInTyping(true);
+    }
+  });
+
   const [tootContextErrorUncaught, { refetch: refetchContext }] =
     createResource(
       () => [session().client, params.id] as const,
@@ -275,6 +282,8 @@ const TootBottomSheet: Component = (props) => {
 
         <Show when={session()!.account}>
           <TootComposer
+            isTyping={isInTyping()}
+            onTypingChange={setInTyping}
             mentions={defaultMentions()}
             profile={session().account!}
             replyToDisplayName={toot()?.account?.displayName || ""}

src/timelines/TootComposer.css

@@ -1,45 +0,0 @@
-.TootComposer {
-  --card-gut: 8px;
-  contain: content;
-
-  > .MuiToolbar-root {
-    justify-content: space-between;
-
-    > :first-child {
-      margin-left: -0.5em;
-    }
-
-    > :last-child {
-      margin-right: -0.5em;
-    }
-  }
-
-  .reply-input {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-  }
-
-  .options {
-    display: flex;
-    justify-content: flex-end;
-    gap: 16px;
-    flex-flow: row wrap;
-    padding-top: 16px;
-    padding-bottom: 8px;
-    margin-left: -0.5em;
-    margin-right: -0.5em;
-
-    animation: TootComposerFadeIn 110ms var(--tutu-anim-curve-sharp) both;
-  }
-}
-
-@keyframes TootComposerFadeIn {
-  0% {
-    opacity: 0.5;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

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

@@ -1,12 +1,10 @@
 import {
   createEffect,
   createMemo,
-  createRenderEffect,
   createSignal,
   createUniqueId,
   onMount,
   Show,
-  type Accessor,
   type Component,
   type JSX,
   type Ref,
@@ -25,9 +23,6 @@ import {
   Switch,
   Divider,
   CircularProgress,
-  Toolbar,
-  MenuItem,
-  ListItemAvatar,
 } from "@suid/material";
 import {
   ArrowDropDown,
@@ -38,11 +33,9 @@ import {
   ListAlt as ListAltIcon,
   Visibility,
   Translate,
-  Close,
-  MoreVert,
 } from "@suid/icons-material";
 import type { Account } from "../accounts/stores";
-import "./TootComposer.css";
+import tootComposers from "./TootComposer.module.css";
 import { makeEventListener } from "@solid-primitives/event-listener";
 import BottomSheet from "../material/BottomSheet";
 import { useLanguage } from "../platform/i18n";
@@ -50,11 +43,6 @@ import iso639_1 from "iso-639-1";
 import ChooseTootLang from "./ChooseTootLang";
 import type { mastodon } from "masto";
 import cardStyles from "../material/cards.module.css";
-import { Title } from "../material/typography";
-import Menu, { createManagedMenuState } from "../material/Menu";
-import { useDefaultSession } from "../masto/clients";
-import { resolveCustomEmoji } from "../masto/toot";
-import SizedTextarea from "../platform/SizedTextarea";
 
 type TootVisibility = "public" | "unlisted" | "private" | "direct";
 
@@ -208,10 +196,6 @@ function randomChoose<T extends any[]>(
   return K[idx];
 }
 
-function useRandomChoice<T>(choices: () => T[]): Accessor<T> {
-  return createMemo(() => randomChoose(Math.random(), choices()));
-}
-
 function cancelEvent(event: Event) {
   event.stopPropagation();
 }
@@ -222,27 +206,27 @@ const TootComposer: 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 session = useDefaultSession();
+  const typing = () => props.isTyping;
-
+  const setTyping = (v: boolean) => props.onTypingChange(v);
-  const [active, setActive] = createSignal(false);
   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();
-  const [openMenu, menuState] = createManagedMenuState();
 
-  const randomPlaceholder = useRandomChoice(() => [
+  const randomPlaceholder = createMemo(() =>
-    "What's happening?",
+    randomChoose(Math.random(), ["What's happening?", "What do your think?"]),
-    "What do you think?",
+  );
-  ]);
 
   createEffect(() => {
     const lang = appLanguage().split("-")[0];
@@ -250,11 +234,15 @@ const TootComposer: Component<{
   });
 
   createEffect(() => {
-    if (active()) {
+    if (typing()) {
       setTimeout(() => inputRef.focus(), 0);
     }
   });
 
+  onMount(() => {
+    makeEventListener(inputRef, "focus", () => setTyping(true));
+  });
+
   createEffect(() => {
     if (inputRef.value !== "") return;
     if (props.mentions) {
@@ -264,7 +252,7 @@ const TootComposer: Component<{
   });
 
   const containerStyle = () =>
-    active() || permPicker()
+    typing() || permPicker()
       ? {
           position: "sticky" as const,
           top: "var(--scaffold-topbar-height, 0)",
@@ -287,15 +275,17 @@ const TootComposer: Component<{
     }
   };
 
-  const idempotencyKey = createMemo(() => window.crypto.randomUUID());
+  const getOrGenSendKey = () => {
+    if (sendKey === undefined) {
+      sendKey = window.crypto.randomUUID();
+    }
+    return sendKey;
+  };
 
   const send = async () => {
-    const client = session()?.client;
-    if (!client) return;
-
     setSending(true);
     try {
-      const status = await client.v1.statuses.create(
+      const status = await props.client!.v1.statuses.create(
         {
           status: inputRef.value,
           language: language(),
@@ -305,7 +295,7 @@ const TootComposer: Component<{
         {
           requestInit: {
             headers: {
-              ["Idempotency-Key"]: idempotencyKey(),
+              ["Idempotency-Key"]: getOrGenSendKey(),
             },
           },
         },
@@ -321,8 +311,11 @@ const TootComposer: Component<{
   return (
     <div
       ref={props.ref}
-      class={/* @once */ `TootComposer ${cardStyles.card}`}
+      class={tootComposers.composer}
       style={containerStyle()}
+      onClick={() => {
+        inputRef.focus();
+      }}
       on:touchend={
         cancelEvent
         /* on: is required to register the event handler on the exact element */
@@ -330,63 +323,23 @@ const TootComposer: Component<{
       on:touchmove={cancelEvent}
       on:wheel={cancelEvent}
     >
-      <Show when={active()}>
+      <div class={tootComposers.replyInput}>
-        <Toolbar class={cardStyles.cardNoPad}>
-          <IconButton
-            onClick={[setActive, false]}
-            aria-label="Close the composer"
-          >
-            <Close />
-          </IconButton>
-          <IconButton
-            onClick={(e) => openMenu(e.currentTarget.getBoundingClientRect())}
-          >
-            <MoreVert />
-          </IconButton>
-        </Toolbar>
-        <div class={cardStyles.cardNoPad}>
-          <Menu {...menuState}>
-            <MenuItem>
-              <ListItemAvatar>
-                <Avatar src={session()?.account.inf?.avatar}></Avatar>
-              </ListItemAvatar>
-              <ListItemText secondary={"Default account"}>
-                <span
-                  ref={(e) => {
-                    createRenderEffect(() => {
-                      const inf = session()?.account.inf;
-                      return (e.innerHTML = resolveCustomEmoji(
-                        inf?.displayName || "",
-                        inf?.emojis ?? [],
-                      ));
-                    });
-                  }}
-                ></span>
-              </ListItemText>
-            </MenuItem>
-          </Menu>
-        </div>
-      </Show>
-
-      <div class="reply-input">
         <Show when={props.profile}>
           <Avatar
             src={props.profile!.inf?.avatar}
             sx={{ marginLeft: "-0.25em" }}
           />
         </Show>
-        <SizedTextarea
+        <textarea
           ref={inputRef!}
           placeholder={
             props.replyToDisplayName
               ? `Reply to ${props.replyToDisplayName}...`
               : randomPlaceholder()
           }
-          onFocus={[setActive, true]}
           style={{ width: "100%", border: "none" }}
           disabled={sending()}
-          autocomplete="off"
+        ></textarea>
-        ></SizedTextarea>
         <Show when={props.client}>
           <Show
             when={!sending()}
@@ -402,38 +355,32 @@ const TootComposer: Component<{
               </div>
             }
           >
-            <IconButton
+            <IconButton sx={{ marginRight: "-0.5em" }} onClick={send}>
-              sx={{ marginRight: "-0.5em" }}
-              onClick={send}
-              aria-label="Send"
-            >
               <Send />
             </IconButton>
           </Show>
         </Show>
       </div>
 
-      <Show when={active()}>
+      <Show when={typing()}>
-        <div class="options">
+        <div
-          <Button
+          style={{
-            startIcon={<Translate />}
+            display: "flex",
-            endIcon={<ArrowDropDown />}
+            "justify-content": "flex-end",
-            onClick={[setLangPickerOpen, true]}
+            "margin-top": "8px",
-            disabled={sending()}
+            gap: "16px",
+            "flex-flow": "row wrap",
+          }}
         >
-            <span style={{ "vertical-align": "bottom" }}>
+          <Button onClick={[setLangPickerOpen, true]} disabled={sending()}>
+            <Translate sx={{ marginTop: "-0.25em", marginRight: "0.25em" }} />
             {iso639_1.getNativeName(language())}
-            </span>
+            <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
           </Button>
-          <Button
+          <Button onClick={[setPermPicker, true]} disabled={sending()}>
-            startIcon={<Visibility />}
+            <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
-            endIcon={<ArrowDropDown />}
-            onClick={[setPermPicker, true]}
-            disabled={sending()}
-          >
-            <span style={{ "vertical-align": "bottom" }}>
             {visibilityText()}
-            </span>
+            <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
           </Button>
         </div>