tweak styles

src/element/NoteCreator.css

@@ -16,6 +16,11 @@
     min-width: -webkit-fill-available;
     min-width: -moz-available;
     min-width: fill-available;
+    transition: min-height .5s;
+}
+
+.note-creator .textarea--focused {
+    min-height: 150px;
 }
 
 .note-creator .actions {

src/element/NoteCreator.js

@@ -29,6 +29,7 @@ export function NoteCreator(props) {
         if (typeof onSend === "function") {
             onSend();
         }
+        setActive(false)
     }
 
     async function attachFile() {
@@ -50,16 +51,21 @@ export function NoteCreator(props) {
     return (
         <>
             {replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
-            <div className="flex note-creator" onClick={() => setActive(true)}>
+            <div className="flex note-creator">
                 <div className="flex f-col mr10 f-grow">
-                    <Textarea className="textarea" users={users} onChange={(ev) => setNote(ev.target.value)} />
-                    {active ? <div className="actions flex f-row">
+                    <Textarea
+                      className={`textarea ${active ? "textarea--focused" : ""}`}
+                      users={users}
+                      onChange={(ev) => setNote(ev.target.value)}
+                      onFocus={() => setActive(true)}
+                    />
+                    <div className="actions flex f-row">
                         <div className="attachment flex f-row">
                             {error.length > 0 ? <b className="error">{error}</b> : null}
                             <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
                         </div>
                         <div className="btn" onClick={() => sendNote()}>Send</div>
-                    </div> : null}
+                    </div>
                 </div>
             </div>
         </>

src/element/Textarea.css

@@ -1,79 +1,30 @@
 .rta {
-  position: relative;
-  font-size: 18px;
-  width: 100%;
-  height: 100%;
-  min-width: 100%;
-  min-width: -webkit-fill-available;
-  min-width: -moz-available;
-  min-width: fill-available;
-}
-.rta__loader.rta__loader--empty-suggestion-data {
-  border-radius: 3px;
-  padding: 5px;
-}
-.rta--loading .rta__loader.rta__loader--suggestion-data {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.rta--loading .rta__loader.rta__loader--suggestion-data > * {
-  position: relative;
-  top: 50%;
-}
-.rta__textarea {
-  width: 100%;
-  height: 100%;
-  font-size: 1em;
-}
-.rta__autocomplete {
-  position: absolute;
-  display: block;
-  margin-top: 1em;
-  border: 1px solid var(--gray-tertiary);
-}
-.rta__autocomplete--top {
-  margin-top: 0;
-  margin-bottom: 1em;
-}
-.rta__list {
-  margin: 0;
-  padding: 0;
-  border-radius: 3px;
-  list-style: none;
-  max-height: 120px;
-  overflow: scroll;
+  overflow: visible;
 }
+
 .rta__entity {
-  background: var(--gray-secondary);
-  color: var(--font-color);
-  width: 100%;
-  text-align: left;
-  outline: none;
-  min-width: 300px;
-}
-.rta__entity:hover {
-  cursor: pointer;
-}
-.rta__item:not(:last-child) {
-  border-bottom: 1px solid var(--gray);
-}
-.rta__entity > * {
-  padding: 4px;
+  background: var(--gray);
+  padding: 4px 8px;
 }
+
 .rta__entity--selected {
   color: var(--font-color);
-  text-decoration: none;
-  background: var(--gray-tertiary);
+  background: var(--gray-secondary);
+}
+
+.rta__list {
+  border: 1px solid var(--gray-tertiary);
+}
+
+.rta__item:not(:last-child) {
+  border-bottom: 1px solid var(--gray-tertiary);
 }
 
 .user-item {
   display: flex;
   flex-direction: row;
   align-items: center;
-  font-size: 14px;
+  font-size: 16px;
 }
 
 .user-item .picture {
@@ -94,3 +45,7 @@
   flex-direction: column;
   align-items: flex-start;
 }
+
+.nip05 {
+  font-size: 12px;
+}

src/element/Textarea.js

@@ -3,24 +3,26 @@ import { Component } from "react";
 import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
 
 import Nip05, { useIsVerified } from "./Nip05";
+import "@webscopeio/react-textarea-autocomplete/style.css";
 import "./Textarea.css";
 import Nostrich from "../nostrich.jpg";
 
 function searchUsers(query, users) {
-  return Object.values(users).filter(({ name, display_name }) => {
-    return name.toLowerCase().includes(query.toLowerCase()) || display_name?.includes(query.toLowerCase())
-  })
+  const q = query.toLowerCase()
+  return Object.values(users).filter(({ name, display_name, about }) => {
+    return name.toLowerCase().includes(q) || display_name?.includes(q) || about?.includes(q)
+  }).slice(0, 3)
 }
 
-const UserItem = ({ pubkey, display_name, picture, nip05 }) => {
+const UserItem = ({ pubkey, display_name, picture, nip05, ...rest }) => {
   const { isVerified, couldNotVerify, name, domain } = useIsVerified(nip05, pubkey)
   return (
-    <div className="user-item">
+    <div key={pubkey} className="user-item">
       <div className="user-picture">
         {picture && <img src={picture ? picture : Nostrich} className="picture" />}
       </div>
       <div className="user-details">
-        <strong>{display_name ? display_name : name !== '_' ? name : domain}</strong>
+        <strong>{display_name || rest.name}</strong>
         <Nip05 name={name} domain={domain} isVerified={isVerified} couldNotVerify={couldNotVerify} />
       </div>
     </div>
@@ -41,6 +43,7 @@ export default class Textarea extends Component {
           onChange={onChange}
           trigger={{
              "@": {
+               afterWhitespace: true,
                dataProvider: token => searchUsers(token, users),
                component: ({ entity }) => <UserItem {...entity} />,
                output: (item, trigger) => `@${item.pubkey}`