note creator button and reply adjustments

package.json

@@ -28,6 +28,7 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.5.0",
     "react-scripts": "5.0.1",
+    "react-textarea-autosize": "^8.4.0",
     "react-twitter-embed": "^4.0.4",
     "typescript": "^4.9.4",
     "uuid": "^9.0.0"

src/element/NoteCreator.css

@@ -4,8 +4,13 @@
     border-radius: 10px;
 }
 
+.note-reply {
+    margin: 10px;
+}
+
 .note-creator textarea {
     outline: none;
+    resize: none;
     min-height: 40px;
     border-radius: 10px 10px 0 0;
     max-width: -webkit-fill-available;
@@ -15,11 +20,6 @@
     min-width: -webkit-fill-available;
     min-width: -moz-available;
     min-width: fill-available;
-    transition: min-height .5s;
-}
-
-.note-creator .textarea--focused {
-    min-height: 120px;
 }
 
 .note-creator .actions {
@@ -43,4 +43,7 @@
 .note-creator .btn {
     border-radius: 20px;
     font-weight: bold;
+    background-color: var(--gray-secondary);
+    color: var(--gray-superlight);
+    border-color: var(--gray-superlight);
 }

src/element/NoteCreator.js

@@ -15,6 +15,7 @@ export function NoteCreator(props) {
     const replyTo = props.replyTo;
     const onSend = props.onSend;
     const show = props.show || false;
+    const autoFocus = props.autoFocus || false;
     const publisher = useEventPublisher();
     const [note, setNote] = useState("");
     const [error, setError] = useState("");
@@ -49,8 +50,8 @@ export function NoteCreator(props) {
 
     function onChange(ev) {
         const { value } = ev.target
+        setNote(value)
         if (value) {
-          setNote(value)
           setActive(true)
         } else {
           setActive(false)
@@ -60,22 +61,28 @@ export function NoteCreator(props) {
     if (!show) return false;
     return (
         <>
-            {replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
+            <div
-            <div className="flex note-creator">
+              key={replyTo ? `note-reply-${replyTo.Id}` : `note-creator`}
+              className={`flex note-creator ${replyTo ? 'note-reply' : ''}`}
+              >
                 <div className="flex f-col mr10 f-grow">
                     <Textarea
+                      autoFocus={autoFocus}
                       className={`textarea ${active ? "textarea--focused" : ""}`}
                       users={users}
                       onChange={onChange}
+                      onBlur={() => setActive(false)}
                       onFocus={() => setActive(true)}
                     />
-                    <div className="actions flex f-row">
+                    {active && note && (
-                        <div className="attachment flex f-row">
+                      <div className="actions flex f-row">
-                            {error.length > 0 ? <b className="error">{error}</b> : null}
+                          <div className="attachment flex f-row">
-                            <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
+                              {error.length > 0 ? <b className="error">{error}</b> : null}
-                        </div>
+                              <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
-                        <div className="btn" onClick={() => sendNote()}>Send</div>
+                          </div>
-                    </div>
+                          <div disabled={note} className="btn" onClick={() => sendNote()}>Send</div>
+                      </div>
+                    )}
                 </div>
             </div>
         </>

src/element/NoteFooter.js

@@ -104,8 +104,13 @@ export default function NoteFooter(props) {
                     )
                 })}
             </div>
-            <NoteCreator replyTo={ev} onSend={(e) => setReply(false)} show={reply} />
+            <NoteCreator
+              autoFocus={true}
+              replyTo={ev}
+              onSend={(e) => setReply(false)}
+              show={reply}
+            />
             <LNURLTip svc={author?.lud16 || author?.lud06} onClose={(e) => setTip(false)} show={tip} />
         </>
     )
-}
+}

src/element/NoteReaction.js

@@ -63,7 +63,7 @@ export default function NoteReaction(props) {
     const root = extractRoot();
     const opt = {
         showHeader: ev?.Kind === EventKind.Repost,
-        showFooter: false,
+        showFooter: ev?.Kind === EventKind.Repost,
     };
     return (
         <div className="reaction">

src/element/Textarea.tsx

@@ -2,6 +2,7 @@ import { useSelector } from "react-redux";
 import { useLiveQuery } from "dexie-react-hooks";
 
 import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
+import TextareaAutosize from "react-textarea-autosize";
 
 // @ts-expect-error
 import Nip05 from "./Nip05";
@@ -61,6 +62,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
           loadingComponent={() => <span>Loading....</span>}
           placeholder="Say something!"
           onChange={onChange}
+          textAreaComponent={TextareaAutosize}
           trigger={{
              "@": {
                afterWhitespace: true,

src/index.css

@@ -199,6 +199,7 @@ span.pill {
   padding: 2px 10px;
   border-radius: 10px;
   user-select: none;
+  color: var(--font-color);
   margin: 2px 5px;
 }
 

yarn.lock

@@ -1024,7 +1024,7 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
   integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
@@ -8048,6 +8048,15 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-textarea-autosize@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz#4d0244d6a50caa897806b8c44abc0540a69bfc8c"
+  integrity sha512-YrTFaEHLgJsi8sJVYHBzYn+mkP3prGkmP2DKb/tm0t7CLJY5t1Rxix8070LAKb0wby7bl/lf2EeHkuMihMZMwQ==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    use-composed-ref "^1.3.0"
+    use-latest "^1.2.1"
+
 react-twitter-embed@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
@@ -9335,6 +9344,23 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-composed-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
+  integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
+
+use-isomorphic-layout-effect@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
+use-latest@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2"
+  integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==
+  dependencies:
+    use-isomorphic-layout-effect "^1.1.1"
+
 use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"