Add "invitations" notification to top of screen

src/assets/css/chat.scss

@@ -115,6 +115,11 @@ $admin-fg: white;
     background-color: $chat-background;
     overflow: hidden;
 
+    .chat-room-invitations {
+        padding: 10px;
+        background-color: #f2f2f2;
+    }
+      
     .chat-content {
         margin: 0;
         padding-top: $chat-standard-padding-s;

src/assets/translations/en.json

@@ -65,6 +65,7 @@
     "reply_video": "Video"
   },
   "room": {
+    "invitations": "You have no invitations | You have 1 invitation | You have {count} invitations",
     "members": "no members | 1 member | {count} members",
     "leave": "Leave",
     "purge_set_room_state": "Setting room state",

src/components/Chat.vue

@@ -1,5 +1,8 @@
 <template>
   <div class="chat-root fill-height d-flex flex-column">
+    <div class="chat-room-invitations clickable" v-if="invitationCount > 0" @click.stop="onInvitationsClick">
+      {{ $tc("room.invitations", invitationCount)}}
+    </div>
     <ChatHeader
       class="chat-header flex-grow-0 flex-shrink-0"
       v-on:header-click="onHeaderClick"
@@ -760,6 +763,9 @@ export default {
     debugging() {
       return (window.location.host || "").startsWith("localhost");
     },
+    invitationCount() {
+      return this.$matrix.invites.length;
+    }
   },
 
   watch: {
@@ -1607,6 +1613,7 @@ export default {
     },
 
     startPrivateChat(e) {
+      this.loading = true;
       this.$matrix
         .getOrCreatePrivateChat(e.event.getSender())
         .then((room) => {
@@ -1626,6 +1633,9 @@ export default {
         })
         .catch((err) => {
           console.error(err);
+        })
+        .finally(() => {
+          this.loading = false;
         });
     },
 
@@ -1797,6 +1807,9 @@ export default {
       }
       this.$refs.roomInfoSheet.open();
     },
+    onInvitationsClick() {
+       this.$navigation.push({ name: "Home" }, -1);
+    }
   },
 };
 </script>