TootComposer: add toolbar & adjust layout

src/platform/SizedTextarea.css

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

src/platform/SizedTextarea.tsx

@@ -0,0 +1,63 @@
+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,7 +33,6 @@ 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)
@@ -65,8 +64,6 @@ const TimelinePanel: Component<{
             style={{
               "--scaffold-topbar-height": "0px",
             }}
-            isTyping={typing()}
-            onTypingChange={setTyping}
             client={props.client}
             onSent={() => refetchTimeline("prev")}
           />

src/timelines/TootBottomSheet.tsx

@@ -46,7 +46,6 @@ const TootBottomSheet: Component = (props) => {
   }>();
   const navigate = useNavigate();
   const time = createTimeSource();
-  const [isInTyping, setInTyping] = createSignal(false);
   const acctText = () => decodeURIComponent(params.acct);
   const session = useSessionForAcctStr(acctText);
 
@@ -70,12 +69,6 @@ const TootBottomSheet: Component = (props) => {
     return tootId;
   });
 
-  createEffect(() => {
-    if (location.state?.tootReply) {
-      setInTyping(true);
-    }
-  });
-
   const [tootContextErrorUncaught, { refetch: refetchContext }] =
     createResource(
       () => [session().client, params.id] as const,
@@ -282,8 +275,6 @@ 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

@@ -0,0 +1,45 @@
+.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

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