From 4b170d75f52f9a811e8c798150a769b7ce96015b Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Wed, 1 Feb 2023 23:14:30 +0100
Subject: [PATCH] Reply view improvements

---
 src/Element/NoteCreator.css | 71 +++++++++++++++++++++++++++++++++----
 src/Element/NoteCreator.tsx | 36 ++++++++++++++-----
 src/Element/Textarea.tsx    |  2 +-
 src/Icons/Attachment.tsx    | 11 ++++++
 4 files changed, 104 insertions(+), 16 deletions(-)
 create mode 100644 src/Icons/Attachment.tsx

diff --git a/src/Element/NoteCreator.css b/src/Element/NoteCreator.css
index e23ef17d..47d9ea30 100644
--- a/src/Element/NoteCreator.css
+++ b/src/Element/NoteCreator.css
@@ -1,9 +1,10 @@
 .note-creator {
     margin-bottom: 10px;
     background-color: var(--note-bg);
-    border: 1px solid var(--gray);
+    border: none;
     border-radius: 10px;
     padding: 6px;
+    position: relative;
 }
 
 .note-reply {
@@ -15,10 +16,25 @@
     resize: none;
     background-color: var(--note-bg);
     border-radius: 10px 10px 0 0;
+    min-height: 120px;
     max-width: stretch;
     min-width: stretch;
 }
 
+.note-creator textarea::placeholder {
+  color: var(--font-secondary-color);
+  font-size: var(--font-size);
+  line-height: 24px;
+}
+
+@media (min-width: 520px) {
+  .note-creator textarea { min-height: 210px; }
+}
+
+@media (min-width: 720px) {
+  .note-creator textarea { min-height: 321px; }
+}
+
 .note-creator-actions {
     width: 100%;
     display: flex;
@@ -29,18 +45,45 @@
 }
 
 .note-creator .attachment {
-    cursor: pointer;
-    margin-left: auto;
+  cursor: pointer;
+  position: absolute;
+  right: 16px;
+  bottom: 12px;
+  width: 48px;
+  height: 36px;
+  background: var(--gray-dark);
+  color: white;
+  border-radius: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.note-creator .attachment:hover {
+  background: var(--font-color);
+  color: var(--gray-dark);
+}
+
+.light .note-creator .attachment {
+  background: var(--gray-light);
+}
+
+.light .note-creator .attachment:hover {
+  background: var(--gray-dark);
+  color: white;
 }
 
 .note-creator-actions button:not(:last-child) {
     margin-right: 4px;
 }
 
-.note-creator .attachment .error {
-    font-weight: normal;
-    margin-right: 5px;
-    font-size: 14px;
+.note-creator .error {
+    position: absolute;
+    left: 16px;
+    bottom: 12px;
+    font-color: var(--error);
+    margin-right: 12px;
+    font-size: 16px;
 }
 
 .note-creator .btn {
@@ -77,6 +120,10 @@
   }
 }
 
+.note-creator-modal .modal-body {
+  background: var(--modal-bg-color);
+}
+
 @media (max-width: 720px) {
   .note-creator-modal {
     align-items: flex-start;
@@ -85,3 +132,13 @@
     margin-top: 20vh;
   }
 }
+
+.note-preview {
+  word-break: break-all;
+}
+
+.note-preview-body {
+  text-overflow: ellipsis;
+  padding: 4px 4px 0 56px;
+  font-size: 14px;
+}
diff --git a/src/Element/NoteCreator.tsx b/src/Element/NoteCreator.tsx
index cefe2548..98f0a2bc 100644
--- a/src/Element/NoteCreator.tsx
+++ b/src/Element/NoteCreator.tsx
@@ -1,17 +1,33 @@
-import { useState } from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPaperclip } from "@fortawesome/free-solid-svg-icons";
-
 import "./NoteCreator.css";
 
+import { useState } from "react";
+
+import Attachment from "Icons/Attachment";
 import Plus from "Icons/Plus";
 import useEventPublisher from "Feed/EventPublisher";
 import { openFile } from "Util";
 import Textarea from "Element/Textarea";
 import Modal from "Element/Modal";
+import ProfileImage from "Element/ProfileImage";
 import { default as NEvent } from "Nostr/Event";
 import useFileUpload from "Upload";
 
+interface NotePreviewProps {
+  note: NEvent
+}
+
+function NotePreview({ note }: NotePreviewProps) {
+  return (
+    <div className="note-preview">
+      <ProfileImage pubkey={note.PubKey} />
+      <div className="note-preview-body">
+        {note.Content.slice(0, 136)}
+        {note.Content.length > 140 && '...'}
+      </div>
+    </div>
+  )
+}
+
 export interface NoteCreatorProps {
     show: boolean
     setShow: (s: boolean) => void
@@ -27,6 +43,7 @@ export function NoteCreator(props: NoteCreatorProps) {
     const [error, setError] = useState<string>();
     const [active, setActive] = useState<boolean>(false);
     const uploader = useFileUpload();
+    const hasErrors = (error?.length ?? 0) > 0
 
     async function sendNote() {
         if (note) {
@@ -88,6 +105,9 @@ export function NoteCreator(props: NoteCreatorProps) {
             className="note-creator-modal"
             onClose={() => setShow(false)}
           >
+            {replyTo &&  (
+              <NotePreview note={replyTo} />
+            )}
             <div className={`flex note-creator ${replyTo ? 'note-reply' : ''}`}>
                 <div className="flex f-col mr10 f-grow">
                     <Textarea
@@ -97,11 +117,11 @@ export function NoteCreator(props: NoteCreatorProps) {
                         value={note}
                         onFocus={() => setActive(true)}
                     />
-                <div className="attachment">
-                    {(error?.length ?? 0) > 0 ? <b className="error">{error}</b> : null}
-                    <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
-                </div>
+                <button type="button" className="attachment" onClick={(e) => attachFile()}>
+                  <Attachment />
+                </button>
                 </div>
+                {hasErrors && <span className="error">{error}</span>}
             </div>
             <div className="note-creator-actions">
                 <button className="secondary" type="button" onClick={cancel}>
diff --git a/src/Element/Textarea.tsx b/src/Element/Textarea.tsx
index c71a92fc..fc4103ff 100644
--- a/src/Element/Textarea.tsx
+++ b/src/Element/Textarea.tsx
@@ -61,7 +61,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
     <ReactTextareaAutocomplete
       {...rest}
       loadingComponent={() => <span>Loading....</span>}
-      placeholder="Say something!"
+      placeholder="What's on your mind?"
       onChange={onChange}
       textAreaComponent={TextareaAutosize}
       trigger={{
diff --git a/src/Icons/Attachment.tsx b/src/Icons/Attachment.tsx
new file mode 100644
index 00000000..c6c104cf
--- /dev/null
+++ b/src/Icons/Attachment.tsx
@@ -0,0 +1,11 @@
+import IconProps from './IconProps'
+
+const Attachment = (props: IconProps) => {
+  return (
+    <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M19.1525 9.89945L10.1369 18.9151C8.08662 20.9653 4.7625 20.9653 2.71225 18.9151C0.661997 16.8648 0.661998 13.5407 2.71225 11.4904L11.7279 2.47483C13.0947 1.108 15.3108 1.108 16.6776 2.47483C18.0444 3.84167 18.0444 6.05775 16.6776 7.42458L8.01555 16.0866C7.33213 16.7701 6.22409 16.7701 5.54068 16.0866C4.85726 15.4032 4.85726 14.2952 5.54068 13.6118L13.1421 6.01037" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+    </svg>
+  )
+}
+
+export default Attachment
-- 
2.45.2