Add button for removing attachment from post form

src/assets/feather/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

src/components/PostEditor.vue

@@ -16,9 +16,18 @@
         required
         :placeholder="inReplyTo ? 'Your reply' : 'What\'s on your mind?'"
       ></textarea>
-      <div v-if="attachment" class="attachment">
+      <div v-if="attachment" class="attachments">
+        <div class="attachment">
+          <button
+            class="remove-attachment"
+            title="Remove attachment"
+            @click.prevent="removeAttachment()"
+          >
+            <img :src="require('@/assets/feather/x.svg')">
+          </button>
           <img :src="attachment.url">
         </div>
+      </div>
       <div class="toolbar">
         <button
           type="button"
@@ -42,7 +51,7 @@
           <button
             type="button"
             class="icon"
-            title="Post visibility"
+            title="Change visibility"
             @click="toggleVisibilityMenu()"
           >
             <visibility-icon :visibility="visibility"></visibility-icon>
@@ -179,6 +188,10 @@ async function onAttachmentUpload(event: Event) {
   )
 }
 
+function removeAttachment() {
+  attachment = null
+}
+
 function toggleVisibilityMenu() {
   visibilityMenuVisible = !visibilityMenuVisible
 }
@@ -269,10 +282,28 @@ textarea {
   width: 100%;
 }
 
-.attachment {
+.attachments {
   padding: calc($block-inner-padding / 1.5) $block-inner-padding;
+}
+
+.attachment {
+  position: relative;
+
+  .remove-attachment {
+    background-color: $btn-background-color;
+    display: flex;
+    position: absolute;
+    right: 0;
+    top: 0;
 
     img {
+      filter: $btn-text-colorizer;
+      height: $icon-size;
+      width: $icon-size;
+    }
+  }
+
+  > img {
     width: 100%;
   }
 }