Disable buttons that won't do anyhing

src/components/BulkActionBar.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="bulk-action-bar">  
-    <span v-if="!allSelected && emailSelection.emails.size > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
+    <span v-if="!allAreSelected && numberSelected > 0">-</span> <!-- later on this minus sign will be in the checkbox, as it is in gmail -->
-    <input type="checkbox" :checked="allSelected" @click="bulkSelect">
+    <input type="checkbox" :checked="allAreSelected" @click="bulkSelect">
     
-    <button @click="emailSelection.markRead()">
+    <button @click="emailSelection.markRead()" :disabled="Array.from(emailSelection.emails).every(e => e.read)">
       Mark Read
     </button>
-    <button @click="emailSelection.markUnread()">
+    <button @click="emailSelection.markUnread()" :disabled="Array.from(emailSelection.emails).every(e => !e.read)">
       Mark Unread
     </button>
   </div>
@@ -19,17 +19,21 @@
   export default {
     setup({emails}){
       let {emailSelection} = useEmailSelection();
-      let allSelected = computed(() => {
+      let numberSelected = computed(() => {
-        return emails.length == emailSelection.emails.size;
+        return emailSelection.emails.size;
+      }) 
+      let allAreSelected = computed(() => {
+        return emails.length == numberSelected;
       })
+      
       let bulkSelect = function(){
-        if(allSelected.value) {
+        if(allAreSelected.value) {
           emailSelection.clear();
         } else {
           emailSelection.addMultiple(emails)
         }
       }
-      return { emailSelection, allSelected, bulkSelect }
+      return { emailSelection, allAreSelected, bulkSelect, numberSelected }
     },
     props: {
       emails: {