Mark read and unread

src/components/InboxScreen.vue

@@ -1,7 +1,9 @@
 <template>
   <h1>VMail Inbox</h1>
   
-  <p>Number selected: {{emailSelection.ids.size}}</p>
+  <p>Number selected: {{emailSelection.emails.size}}</p>
+  <button @click="emailSelection.markRead()">Mark Selected Read</button>
+  <button @click="emailSelection.markUnread()">Mark Selected Unread</button>
 
   <MailTable :emails="emails" />
 </template>

src/components/MailTable.vue

@@ -4,7 +4,7 @@
       <tr v-for="email in emails" :key="email.id" :class="[email.read ? 'read' : '']">
         <td>
           <input type="checkbox" 
-                  :checked="emailSelection.ids.has(email)"
+                  :checked="emailSelection.emails.has(email)"
                   @click="emailSelection.toggle(email)" />
         </td>
         <td>{{email.from}}</td>

src/composition/useEmailSelection.js

@@ -5,12 +5,22 @@ export const useEmailSelection = function(){
 
   let emailSelection = reactive({
     emails: emails,
-    toggle: function(id) {
+    toggle(id) {
       if(this.emails.has(id)) {
         this.emails.delete(id)
       } else {
         this.emails.add(id);
       }
+    },
+    markRead(){
+      this.emails.forEach(email => {
+        email.read = true
+      })
+    },
+    markUnread(){
+      this.emails.forEach(email => {
+        email.read = false
+      })
     }
   })