From c2991b8e26548043498f35d1bb9a2b6481210178 Mon Sep 17 00:00:00 2001
From: Kieran <kieran@harkin.me>
Date: Sat, 21 Oct 2023 22:26:04 +0100
Subject: [PATCH] fix: note creator mobile

---
 packages/app/src/Element/AsyncIcon.tsx        |  3 +--
 packages/app/src/Element/Chat/DmWindow.tsx    |  2 +-
 .../app/src/Element/Chat/WriteMessage.tsx     | 26 +++++--------------
 .../app/src/Element/Event/NoteCreator.css     |  1 +
 .../app/src/Element/Event/NoteCreator.tsx     |  8 +++---
 packages/app/src/index.css                    | 14 ++++++----
 6 files changed, 23 insertions(+), 31 deletions(-)

diff --git a/packages/app/src/Element/AsyncIcon.tsx b/packages/app/src/Element/AsyncIcon.tsx
index 4dab80185..503e0ca22 100644
--- a/packages/app/src/Element/AsyncIcon.tsx
+++ b/packages/app/src/Element/AsyncIcon.tsx
@@ -1,7 +1,6 @@
 import Icon from "Icons/Icon";
 import useLoading from "Hooks/useLoading";
 import Spinner from "Icons/Spinner";
-import classNames from "classnames";
 
 export type AsyncIconProps = React.HTMLProps<HTMLDivElement> & {
   iconName: string;
@@ -17,7 +16,7 @@ export function AsyncIcon(props: AsyncIconProps) {
   delete mergedProps["iconSize"];
   delete mergedProps["loading"];
   return (
-    <div {...mergedProps} onClick={handle} className={classNames("button-icon-sm", props.className)}>
+    <div {...mergedProps} onClick={handle} className={props.className}>
       {loading ? <Spinner /> : <Icon name={props.iconName} size={props.iconSize} />}
       {props.children}
     </div>
diff --git a/packages/app/src/Element/Chat/DmWindow.tsx b/packages/app/src/Element/Chat/DmWindow.tsx
index e0103e760..5a46c1ae5 100644
--- a/packages/app/src/Element/Chat/DmWindow.tsx
+++ b/packages/app/src/Element/Chat/DmWindow.tsx
@@ -34,7 +34,7 @@ export default function DmWindow({ id }: { id: string }) {
       <div>
         <div className="flex flex-col">{chat && <DmChatSelected chat={chat} />}</div>
       </div>
-      <div>
+      <div className="flex g8">
         <WriteMessage chat={chat} />
       </div>
     </div>
diff --git a/packages/app/src/Element/Chat/WriteMessage.tsx b/packages/app/src/Element/Chat/WriteMessage.tsx
index 20930a1d6..0d6a34aa4 100644
--- a/packages/app/src/Element/Chat/WriteMessage.tsx
+++ b/packages/app/src/Element/Chat/WriteMessage.tsx
@@ -1,17 +1,14 @@
+import { useState } from "react";
 import { NostrEvent, NostrLink, NostrPrefix } from "@snort/system";
 import useEventPublisher from "Hooks/useEventPublisher";
-import Icon from "Icons/Icon";
-import Spinner from "Icons/Spinner";
-import { useState } from "react";
 import useFileUpload from "Upload";
 import { openFile } from "SnortUtils";
 import Textarea from "../Textarea";
 import { Chat } from "chat";
+import { AsyncIcon } from "Element/AsyncIcon";
 
 export default function WriteMessage({ chat }: { chat: Chat }) {
   const [msg, setMsg] = useState("");
-  const [sending, setSending] = useState(false);
-  const [uploading, setUploading] = useState(false);
   const [otherEvents, setOtherEvents] = useState<Array<NostrEvent>>([]);
   const [error, setError] = useState("");
   const { publisher, system } = useEventPublisher();
@@ -31,7 +28,6 @@ export default function WriteMessage({ chat }: { chat: Chat }) {
   }
 
   async function uploadFile(file: File | Blob) {
-    setUploading(true);
     try {
       if (file) {
         const rx = await uploader.upload(file, file.name);
@@ -51,25 +47,19 @@ export default function WriteMessage({ chat }: { chat: Chat }) {
       if (e instanceof Error) {
         setError(e.message);
       }
-    } finally {
-      setUploading(false);
     }
   }
 
   async function sendMessage() {
     if (msg && publisher && chat) {
-      setSending(true);
       const ev = await chat.createMessage(msg, publisher);
       await chat.sendMessage(ev, system);
       setMsg("");
-      setSending(false);
     }
   }
 
   function onChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
-    if (!sending) {
-      setMsg(e.target.value);
-    }
+    setMsg(e.target.value);
   }
 
   async function onEnter(e: React.KeyboardEvent<HTMLTextAreaElement>) {
@@ -82,10 +72,8 @@ export default function WriteMessage({ chat }: { chat: Chat }) {
 
   return (
     <>
-      <button className="circle flex items-center" onClick={() => attachFile()}>
-        {uploading ? <Spinner width={20} /> : <Icon name="attachment" size={20} />}
-      </button>
-      <div className="w-max">
+      <AsyncIcon className="circle flex items-center button" iconName="attachment" onClick={() => attachFile()} />
+      <div className="grow">
         <Textarea
           autoFocus={true}
           placeholder=""
@@ -99,9 +87,7 @@ export default function WriteMessage({ chat }: { chat: Chat }) {
         />
         {error && <b className="error">{error}</b>}
       </div>
-      <button className="circle flex items-center" onClick={() => sendMessage()}>
-        {sending ? <Spinner width={20} /> : <Icon name="arrow-right" size={20} />}
-      </button>
+      <AsyncIcon className="circle flex items-center button" iconName="arrow-right" onClick={() => sendMessage()} />
     </>
   );
 }
diff --git a/packages/app/src/Element/Event/NoteCreator.css b/packages/app/src/Element/Event/NoteCreator.css
index 7b1402942..bfb980225 100644
--- a/packages/app/src/Element/Event/NoteCreator.css
+++ b/packages/app/src/Element/Event/NoteCreator.css
@@ -16,6 +16,7 @@
 .note-creator-modal .note.card {
   padding: 0;
   border: none;
+  min-height: unset;
 }
 
 .note-creator-modal .note.card.note-quote {
diff --git a/packages/app/src/Element/Event/NoteCreator.tsx b/packages/app/src/Element/Event/NoteCreator.tsx
index f5c3d764c..986895a63 100644
--- a/packages/app/src/Element/Event/NoteCreator.tsx
+++ b/packages/app/src/Element/Event/NoteCreator.tsx
@@ -465,7 +465,9 @@ export function NoteCreator() {
             onClick={() => note.update(v => (v.advanced = !v.advanced))}
             className={classNames("note-creator-icon", { active: note.advanced })}
           />
-          <FormattedMessage defaultMessage="Preview" />
+          <span className="sm:inline hidden">
+            <FormattedMessage defaultMessage="Preview" />
+          </span>
           <ToggleSwitch
             onClick={() => loadPreview()}
             size={40}
@@ -546,10 +548,10 @@ export function NoteCreator() {
         )}
         {note.preview && getPreviewNote()}
         {!note.preview && (
-          <div onPaste={handlePaste} className={`note-creator${note.pollOptions ? " poll" : ""}`}>
+          <div onPaste={handlePaste} className={classNames("note-creator", { poll: Boolean(note.pollOptions) })}>
             <Textarea
               autoFocus
-              className={`textarea ${note.active ? "textarea--focused" : ""}`}
+              className={classNames("textarea", { "textarea--focused": note.active })}
               onChange={c => onChange(c)}
               value={note.note}
               onFocus={() => note.update(v => (v.active = true))}
diff --git a/packages/app/src/index.css b/packages/app/src/index.css
index bf939a046..3d2ca9536 100644
--- a/packages/app/src/index.css
+++ b/packages/app/src/index.css
@@ -241,10 +241,7 @@ small {
   line-height: 22px; /* 157.143% */
 }
 
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
+.button {
   position: relative;
   cursor: pointer;
   padding: 10px 16px;
@@ -257,6 +254,13 @@ button,
   outline: none;
 }
 
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  @apply button;
+}
+
 .btn,
 input,
 select {
@@ -809,7 +813,7 @@ button.tall {
   }
 }
 
-.rta__textarea {
+.note-creator-modal .rta__textarea {
   /* Fix width calculation to account for 32px padding on input */
   width: calc(100% - 32px) !important;
   font-size: 15px !important;