TootComposer: add toolbar & adjust layout

src/timelines/TootComposer.tsx

@@ -1,6 +1,7 @@
 import {
   createEffect,
   createMemo,
+  createRenderEffect,
   createSignal,
   createUniqueId,
   onMount,
@@ -24,6 +25,9 @@ import {
   Switch,
   Divider,
   CircularProgress,
+  Toolbar,
+  MenuItem,
+  ListItemAvatar,
 } from "@suid/material";
 import {
   ArrowDropDown,
@@ -34,6 +38,8 @@ import {
   ListAlt as ListAltIcon,
   Visibility,
   Translate,
+  Close,
+  MoreVert,
 } from "@suid/icons-material";
 import type { Account } from "../accounts/stores";
 import "./TootComposer.css";
@@ -44,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";
 
@@ -211,23 +222,22 @@ 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 setTyping = (v: boolean) => props.onTypingChange(v);
+  const session = useDefaultSession();
+
+  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(() => [
     "What's happening?",
@@ -240,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) {
@@ -258,7 +264,7 @@ const TootComposer: Component<{
   });
 
   const containerStyle = () =>
-    typing() || permPicker()
+    active() || permPicker()
       ? {
           position: "sticky" as const,
           top: "var(--scaffold-topbar-height, 0)",
@@ -281,17 +287,15 @@ const TootComposer: Component<{
     }
   };
 
-  const getOrGenSendKey = () => {
-    if (sendKey === undefined) {
-      sendKey = window.crypto.randomUUID();
-    }
-    return sendKey;
-  };
+  const idempotencyKey = createMemo(() => window.crypto.randomUUID());
 
   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(),
@@ -301,7 +305,7 @@ const TootComposer: Component<{
         {
           requestInit: {
             headers: {
-              ["Idempotency-Key"]: getOrGenSendKey(),
+              ["Idempotency-Key"]: idempotencyKey(),
             },
           },
         },
@@ -319,9 +323,6 @@ const TootComposer: Component<{
       ref={props.ref}
       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 */
@@ -329,6 +330,44 @@ const TootComposer: Component<{
       on:touchmove={cancelEvent}
       on:wheel={cancelEvent}
     >
+      <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
@@ -336,16 +375,18 @@ const TootComposer: Component<{
             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()}
@@ -361,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()}>
-        <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" }} />
+      <Show when={active()}>
+        <div class="options">
+          <Button
+            startIcon={<Translate />}
+            endIcon={<ArrowDropDown />}
+            onClick={[setLangPickerOpen, true]}
+            disabled={sending()}
+          >
+            <span style={{ "vertical-align": "bottom" }}>
+              {iso639_1.getNativeName(language())}
+            </span>
           </Button>
-          <Button onClick={[setPermPicker, true]} disabled={sending()}>
-            <Visibility sx={{ marginTop: "-0.15em", marginRight: "0.25em" }} />
-            {visibilityText()}
-            <ArrowDropDown sx={{ marginTop: "-0.25em" }} />
+          <Button
+            startIcon={<Visibility />}
+            endIcon={<ArrowDropDown />}
+            onClick={[setPermPicker, true]}
+            disabled={sending()}
+          >
+            <span style={{ "vertical-align": "bottom" }}>
+              {visibilityText()}
+            </span>
           </Button>
         </div>