From 6e47089cc8d02471ef0f3512244e6687e5a09400 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 6 Jan 2023 13:45:06 +0100
Subject: [PATCH 1/2] fix: add missing key prop to link

---
 src/Text.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Text.js b/src/Text.js
index 7b868732..60be40f6 100644
--- a/src/Text.js
+++ b/src/Text.js
@@ -29,7 +29,7 @@ export function extractLinks(fragments) {
                                 }
                             }
                         } else {
-                            return <a href={url}>{url.toString()}</a>
+                            return <a key={url} href={url}>{url.toString()}</a>
                         }
                     } catch (e) {
                         console.warn(`Not a valid url: ${a}`);

From 225bf04349708a54cbd258ad19dc6752cdbe89c4 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Fri, 6 Jan 2023 13:45:30 +0100
Subject: [PATCH 2/2] feat: note creator improvements

---
 src/element/NoteCreator.css | 26 +++++++++++++++++++++++---
 src/element/NoteCreator.js  | 30 ++++++++++++++++++------------
 2 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/element/NoteCreator.css b/src/element/NoteCreator.css
index eb3e6297..7006ab4c 100644
--- a/src/element/NoteCreator.css
+++ b/src/element/NoteCreator.css
@@ -1,8 +1,12 @@
 .note-creator {
     margin-bottom: 10px;
+    background-color: #333;
+    border-radius: 10px;
 }
 
 .note-creator textarea {
+    resize: none;
+    outline: none;
     min-height: 40px;
     max-height: 300px;
     border-radius: 10px 10px 0 0;
@@ -11,8 +15,24 @@
 }
 
 .note-creator .actions {
+    width: 100%;
+    justify-content: flex-end;
+    margin-bottom: 5px;
+}
+
+.note-creator .attachment {
     cursor: pointer;
     padding: 5px 10px;
-    border-radius: 0 0 10px 10px;
-    background-color: #222;
-}
\ No newline at end of file
+    border-radius: 10px;
+}
+
+.note-creator .attachment .error {
+    font-weight: normal;
+    margin-right: 5px;
+    font-size: 14px;
+}
+
+.note-creator .btn {
+    border-radius: 20px;
+    font-weight: bold;
+}
diff --git a/src/element/NoteCreator.js b/src/element/NoteCreator.js
index 36e55d80..f2b97d02 100644
--- a/src/element/NoteCreator.js
+++ b/src/element/NoteCreator.js
@@ -28,28 +28,34 @@ export function NoteCreator(props) {
     }
 
     async function attachFile() {
-        let file = await openFile();
-        let rsp = await VoidUpload(file);
-        let ext = file.name.match(FileExtensionRegex)[1];
+        try {
+          let file = await openFile();
+          let rsp = await VoidUpload(file);
+          let ext = file.name.match(FileExtensionRegex)[1];
 
-        // extension tricks note parser to embed the content
-        let url = rsp.metadata.url ?? `https://void.cat/d/${rsp.id}.${ext}`;
+          // extension tricks note parser to embed the content
+          let url = rsp.metadata.url ?? `https://void.cat/d/${rsp.id}.${ext}`;
 
-        setNote(n => `${n}\n${url}`);
+          setNote(n => `${n}\n${url}`);
+        } catch (error) {
+          setError(error?.message)
+        }
     }
 
     return (
         <>
             {replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
             <div className="flex note-creator">
-                <div className="flex f-col mr10 f-grow">
-                    <textarea placeholder="Say something!" value={note} onChange={(e) => setNote(e.target.value)} />
-                    <div className="actions">
-                        <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()}/>
-                        {error.length > 0 ? <b className="error">{error}</b> : null}
+                <div className="textarea flex f-col mr10 f-grow">
+                    <textarea className="textarea" placeholder="Say something!" value={note} onChange={(e) => setNote(e.target.value)} />
+                    <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>
                 </div>
-                <div className="btn" onClick={() => sendNote()}>Send</div>
             </div>
         </>
     );