Add "invitations" notification to top of screen

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>