Limit number of attachments in post editor

src/App.vue

@@ -115,6 +115,10 @@ button {
   &:hover {
     color: $link-hover-color;
   }
+
+  &[disabled] {
+    cursor: initial;
+  }
 }
 
 .btn {
@@ -139,7 +143,6 @@ button {
     background-color: $btn-disabled-background-color !important;
     box-shadow: none;
     color: $btn-disabled-text-color !important;
-    cursor: initial;
   }
 }
 

src/components/PostEditor.vue

@@ -37,6 +37,7 @@
           type="button"
           class="icon"
           title="Attach image"
+          :disabled="!canAttachFile()"
           @click="selectAttachment()"
         >
           <img :src="require('@/assets/feather/paperclip.svg')">
@@ -122,6 +123,7 @@ import { renderMarkdownLite } from "@/utils/markdown"
 import { fileToDataUrl, dataUrlToBase64 } from "@/utils/upload"
 
 const visibilityMap = Object.entries(VISIBILITY_MAP)
+const ATTACHMENTS_MAX_NUM = 10
 
 const { currentUser, ensureAuthToken } = $(useCurrentUser())
 const { instance, getActorAddress } = $(useInstanceInfo())
@@ -173,6 +175,10 @@ onMounted(() => {
   }
 })
 
+function canAttachFile(): boolean {
+  return attachments.length < ATTACHMENTS_MAX_NUM
+}
+
 function selectAttachment() {
   if (attachmentUploadInputRef) {
     attachmentUploadInputRef.click()

src/styles/_mixins.scss

@@ -79,6 +79,12 @@
     }
   }
 
+  button.icon[disabled] {
+    img {
+      filter: $secondary-text-colorizer;
+    }
+  }
+
   .icon-small img {
     $icon-size-small: $icon-size * 0.8;