feat: show unread count

static/components/direct-messages/direct-messages.html

@@ -2,9 +2,12 @@
   <q-card>
     <q-card-section>
       <div class="row">
-        <div class="col-6">
+        <div class="col-2">
           <h6 class="text-subtitle1 q-my-none">Messages</h6>
         </div>
+        <div class="col-4">
+          <q-badge v-if="unreadMessages" color="green"><span v-text="unreadMessages"></span>&nbsp; new</q-badge>
+        </div>
         <div class="col-6">
           <q-btn
             v-if="activePublicKey"

static/components/direct-messages/direct-messages.js

@@ -16,6 +16,7 @@ async function directMessages(path) {
     data: function () {
       return {
         customers: [],
+        unreadMessages: 0,
         activePublicKey: null,
         messages: [],
         newMessage: ''
@@ -59,6 +60,7 @@ async function directMessages(path) {
             this.inkey
           )
           this.customers = data
+          this.unreadMessages = data.filter(c => c.unread_messages).length
         } catch (error) {
           LNbits.utils.notifyApiError(error)
         }
@@ -86,6 +88,7 @@ async function directMessages(path) {
       },
       selectActiveCustomer: async function () {
         await this.getDirectMessages(this.activePublicKey)
+        await this.getCustomers()
       },
       focusOnChatBox: function (index) {
         setTimeout(() => {