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;