From c16ea1e8e8fdfdb703e63a33285c0e0e84cef4b3 Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Fri, 3 Mar 2023 10:35:00 -0600
Subject: [PATCH] Show note image rather than append url to note. Add close
 button for previews

---
 src/partials/Preview.svelte       | 14 +++++++++++++-
 src/views/notes/NoteCreate.svelte | 16 +++++++++-------
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/partials/Preview.svelte b/src/partials/Preview.svelte
index 0fff642c..dc435ecb 100644
--- a/src/partials/Preview.svelte
+++ b/src/partials/Preview.svelte
@@ -5,9 +5,15 @@
   import user from 'src/agent/user'
 
   export let url
+  export let onClose = null
 
   let preview
 
+  const close = () => {
+    onClose?.()
+    preview = null
+  }
+
   onMount(async () => {
     if (url.match('\.(jpg|jpeg|png|gif)')) {
       preview = {image: url}
@@ -40,7 +46,7 @@
   <Anchor
     external
     href={url}
-    class="rounded border border-solid border-medium flex flex-col bg-medium overflow-hidden">
+    class="relative rounded border border-solid border-medium flex flex-col bg-medium overflow-hidden">
     {#if preview.image}
     <img alt="Link preview" src={preview.image} class="object-center max-h-96 object-contain" />
     {/if}
@@ -54,6 +60,12 @@
       <small>{preview.description}</small>
     </div>
     {/if}
+    <div
+      on:click|preventDefault={close}
+      class="w-6 h-6 rounded-full bg-white border border-solid border-medium shadow absolute
+             top-0 right-0 m-1 text-black flex justify-center items-center opacity-50">
+      <i class="fa fa-times" />
+    </div>
   </Anchor>
 </div>
 {/if}
diff --git a/src/views/notes/NoteCreate.svelte b/src/views/notes/NoteCreate.svelte
index b57cfdcc..b50b3531 100644
--- a/src/views/notes/NoteCreate.svelte
+++ b/src/views/notes/NoteCreate.svelte
@@ -9,6 +9,7 @@
   import Button from "src/partials/Button.svelte"
   import Compose from "src/partials/Compose.svelte"
   import ImageInput from "src/partials/ImageInput.svelte"
+  import Preview from "src/partials/Preview.svelte"
   import Input from "src/partials/Input.svelte"
   import RelayCardSimple from "src/views/relays/RelayCardSimple.svelte"
   import Content from "src/partials/Content.svelte"
@@ -40,14 +41,12 @@
     )
   }
 
-  $: {
-    if (image) {
-      input.type('\n' + image)
-    }
-  }
-
   const onSubmit = async () => {
-    const {content, mentions, topics} = input.parse()
+    let {content, mentions, topics} = input.parse()
+
+    if (image) {
+      content += '\n' + image
+    }
 
     if (content) {
       const thunk = cmd.createNote(content, mentions, topics)
@@ -107,6 +106,9 @@
           <Compose bind:this={input} {onSubmit} />
         </div>
       </div>
+      {#if image}
+      <Preview url={image} onClose={() => { image = null }} />
+      {/if}
       <div class="flex gap-2">
         <Button type="submit" class="text-center flex-grow">Send</Button>
         <ImageInput bind:value={image} icon="image" hideInput />