Messages: add "mark all as read" option

src/nostr/store/MessageStore.js

@@ -13,10 +13,7 @@ export const useMessageStore = defineStore('message', {
     getConversations(state) {
       return pubkey => {
         const conversations = []
-        const counterparties = new Set()
-        Object.keys(state.byRecipient[pubkey] || {}).forEach(pubkey => counterparties.add(pubkey))
-        Object.keys(state.bySender[pubkey] || {}).forEach(pubkey => counterparties.add(pubkey))
-        for (const counterparty of counterparties) {
+        for (const counterparty of this.getCounterparties(pubkey)) {
           const messages = this.getMessages(pubkey, counterparty)
           const latestMessage = messages.reduce((a, b) => a.createdAt > b.createdAt ? a : b, {createdAt: 0})
           const lastRead = useMessageStatusStore().getLastRead(pubkey, counterparty)
@@ -44,6 +41,14 @@ export const useMessageStore = defineStore('message', {
           : []
         )
     },
+    getCounterparties(state) {
+      return pubkey => {
+        const counterparties = new Set()
+        Object.keys(state.byRecipient[pubkey] || {}).forEach(pubkey => counterparties.add(pubkey))
+        Object.keys(state.bySender[pubkey] || {}).forEach(pubkey => counterparties.add(pubkey))
+        return Array.from(counterparties)
+      }
+    },
     getNumUnread() {
       // TODO improve performance
       return pubkey => this.getConversations(pubkey).reduce((sum, conv) => sum + conv.numUnread, 0)
@@ -54,7 +59,7 @@ export const useMessageStore = defineStore('message', {
       const message = Message.from(event)
       if (!message) return false
 
-      if (this.messages[message.id]) return
+      if (this.messages[message.id]) return this.messages[message.id]
       this.messages[message.id] = message
 
       if (!this.bySender[message.author]) {
@@ -83,6 +88,12 @@ export const useMessageStore = defineStore('message', {
     markAsRead(pubkey, counterparty) {
       return useMessageStatusStore().markAsRead(pubkey, counterparty)
     },
+    markAllAsRead(pubkey) {
+      const store = useMessageStatusStore()
+      for (const counterparty of this.getCounterparties(pubkey)) {
+        store.markAsRead(pubkey, counterparty)
+      }
+    },
   }
 })
 

src/pages/messages/Conversation.vue

@@ -9,12 +9,18 @@
       v-for="message in conversation"
       :key="message.id"
       :sent="message.author === app.myPubkey"
+      :bg-color="message.author === app.myPubkey ? 'grey-2' : 'pink-2'"
       :stamp="formatMessageDate(message.createdAt)"
     >
       <EncryptedMessage :message="message" />
     </q-chat-message>
     <p v-if="!conversation?.length" class="placeholder">
-      This is the beginning of your message history with <UserName :pubkey="counterparty" clickable />.
+      <template v-if="counterparty !== app.myPubkey">
+        This is the beginning of your message history with <UserName :pubkey="counterparty" clickable />.
+      </template>
+      <template v-else>
+        Keep private notes by sending messages to yourself.
+      </template>
     </p>
   </div>
 

src/pages/messages/Messages.vue

@@ -1,5 +1,14 @@
 <template>
-  <PageHeader back-button />
+  <PageHeader back-button>
+    <template #addon>
+      <q-btn icon="more_vert" size="md" round>
+        <q-menu anchor="bottom right" self="top right" :offset="[0, 6]" class="options-popup">
+          <a @click="markAllAsRead" v-close-popup>Mark all as read</a>
+        </q-menu>
+      </q-btn>
+    </template>
+  </PageHeader>
+
   <div class="messages">
     <ConversationItem v-for="conversation in conversations" :key="conversation.pubkey" :conversation="conversation" />
     <p v-if="!conversations?.length">To send a message, click on the <BaseIcon icon="messages" /> icon in the recipient's profile.</p>
@@ -34,6 +43,11 @@ export default {
       return this.messages.getConversations(this.app.myPubkey)
     },
   },
+  methods: {
+    markAllAsRead() {
+      this.messages.markAllAsRead(this.app.myPubkey)
+    },
+  }
 }
 </script>
 
@@ -56,3 +70,20 @@ p {
   }
 }
 </style>
+<style lang="scss">
+@import "assets/theme/colors.scss";
+
+.options-popup {
+  background-color: $color-bg;
+  box-shadow: $shadow-white;
+  border-radius: .5rem;
+  a {
+    display: block;
+    padding: .5rem 1rem;
+    transition: 120ms ease;
+    &:hover {
+      background-color: rgba($color: $color-dark-gray, $alpha: 0.1);
+    }
+  }
+}
+</style>