"Private chat" header for direct chats

Also, auto-create account and room when joining a DM chat link.

src/components/Chat.vue

@@ -1,10 +1,15 @@
 <template>
   <div class="chat-root fill-height d-flex flex-column">
-    <ChatHeader class="chat-header flex-grow-0 flex-shrink-0"
+    <ChatHeaderPrivate class="chat-header flex-grow-0 flex-shrink-0"
       v-on:header-click="onHeaderClick"
       v-on:view-room-details="viewRoomDetails"
       v-on:notify="onNotificationDialog"
-      v-if="!useFileModeNonAdmin" />
+      v-if="!useFileModeNonAdmin && $matrix.isDirectRoom(room)" />
+      <ChatHeader class="chat-header flex-grow-0 flex-shrink-0"
+      v-on:header-click="onHeaderClick"
+      v-on:view-room-details="viewRoomDetails"
+      v-on:notify="onNotificationDialog"
+      v-else-if="!useFileModeNonAdmin" />
     <AudioLayout ref="chatContainer" class="auto-audio-player-root" v-if="useVoiceMode" :room="room"
       :events="events" :autoplay="!showRecorder"
       :timelineSet="timelineSet"
@@ -53,6 +58,7 @@
       <resize-observer ref="chatContainerResizer" @notify="handleChatContainerResize" />
 
       <CreatedRoomWelcomeHeader v-if="showCreatedRoomWelcomeHeader" v-on:close="closeCreateRoomWelcomeHeader" />
+      <DirectChatWelcomeHeader v-if="showDirectChatWelcomeHeader" v-on:close="closeDirectChatWelcomeHeader" />
 
       <div v-for="(event, index) in filteredEvents" :key="event.getId()" :eventId="event.getId()">
         <!-- DAY Marker, shown for every new day in the timeline -->
@@ -358,9 +364,11 @@ import util, { ROOM_TYPE_VOICE_MODE, ROOM_TYPE_FILE_MODE } from "../plugins/util
 import MessageOperations from "./messages/MessageOperations.vue";
 import AvatarOperations from "./messages/AvatarOperations.vue";
 import ChatHeader from "./ChatHeader";
+import ChatHeaderPrivate from "./ChatHeaderPrivate.vue";
 import VoiceRecorder from "./VoiceRecorder";
 import RoomInfoBottomSheet from "./RoomInfoBottomSheet";
 import CreatedRoomWelcomeHeader from "./CreatedRoomWelcomeHeader";
+import DirectChatWelcomeHeader from "./DirectChatWelcomeHeader";
 import NoHistoryRoomWelcomeHeader from "./NoHistoryRoomWelcomeHeader.vue";
 import MessageOperationsBottomSheet from "./MessageOperationsBottomSheet";
 import StickerPickerBottomSheet from "./StickerPickerBottomSheet";
@@ -374,6 +382,7 @@ import FileDropLayout from "./file_mode/FileDropLayout";
 import { requestNotificationAndServiceWorker, windowNotificationPermission, notificationCount } from "../plugins/notificationAndServiceWorker.js"
 import logoMixin from "./logoMixin";
 import roomTypeMixin from "./roomTypeMixin";
+import roomMembersMixin from "./roomMembersMixin";
 
 const sizeOf = require("image-size");
 const dataUriToBuffer = require("data-uri-to-buffer");
@@ -409,13 +418,15 @@ ScrollPosition.prototype.prepareFor = function (direction) {
 
 export default {
   name: "Chat",
-  mixins: [chatMixin, logoMixin, roomTypeMixin, sendAttachmentsMixin],
+  mixins: [chatMixin, logoMixin, roomTypeMixin, sendAttachmentsMixin, roomMembersMixin],
   components: {
     ChatHeader,
+    ChatHeaderPrivate,
     MessageOperations,
     VoiceRecorder,
     RoomInfoBottomSheet,
     CreatedRoomWelcomeHeader,
+    DirectChatWelcomeHeader,
     NoHistoryRoomWelcomeHeader,
     MessageOperationsBottomSheet,
     StickerPickerBottomSheet,
@@ -480,7 +491,10 @@ export default {
       lastRR: null,
 
       /** If we just created this room, show a small welcome header with info */
-      showCreatedRoomWelcomeHeader: false,
+      hideCreatedRoomWelcomeHeader: false,
+
+      /** For direct chats, show a small welcome header with info about the other party */
+      hideDirectChatWelcomeHeader: false,
 
       /** An array of recent emojis. Used in the "message operations" popup. */
       recentEmojis: [],
@@ -703,6 +717,27 @@ export default {
         }
       }
       return this.events;
+    },
+
+    roomCreatedByUsRecently() {
+      const createEvent = this.room && this.room.currentState.getStateEvents("m.room.create", "");
+      if (createEvent) {
+        const creatorId = createEvent.getContent().creator;
+        return (creatorId == this.$matrix.currentUserId && createEvent.getLocalAge() < 5 * 60000 /* 5 minutes */);
+      }
+      return false;
+    },
+
+    isDirectRoom() {
+      return this.room.getJoinRule() == "invite" && this.joinedAndInvitedMembers.length == 2;
+    },
+
+    showCreatedRoomWelcomeHeader() {
+      return !this.hideCreatedRoomWelcomeHeader && this.roomCreatedByUsRecently && !this.isDirectRoom;
+    },
+
+    showDirectChatWelcomeHeader() {
+      return !this.hideDirectChatWelcomeHeader && this.roomCreatedByUsRecently && this.isDirectRoom;
     }
   },
 
@@ -739,7 +774,8 @@ export default {
         this.timelineWindow = null;
         this.typingMembers = [];
         this.initialLoadDone = false;
-        this.showCreatedRoomWelcomeHeader = false;
+        this.hideDirectChatWelcomeHeader = false;
+        this.hideCreatedRoomWelcomeHeader = false;
 
         // Stop RR timer
         this.stopRRTimer();
@@ -833,16 +869,6 @@ export default {
       this.notificationDialog = false;
     },
     onRoomJoined(initialEventId) {
-      // Was this room just created (by you)? Show a small info header in
-      // that case!
-      const createEvent = this.room.currentState.getStateEvents("m.room.create", "");
-      if (createEvent) {
-        const creatorId = createEvent.getContent().creator;
-        if (creatorId == this.$matrix.currentUserId && createEvent.getLocalAge() < 5 * 60000 /* 5 minutes */) {
-          this.showCreatedRoomWelcomeHeader = true;
-        }
-      }
-
       // Listen to events
       this.$matrix.on("Room.timeline", this.onEvent);
       this.$matrix.on("RoomMember.typing", this.onUserTyping);
@@ -887,7 +913,7 @@ export default {
               self.initialLoadDone = true;
               if (initialEventId && !this.showCreatedRoomWelcomeHeader) {
                 self.scrollToEvent(initialEventId);
-              } else if (this.showCreatedRoomWelcomeHeader) {
+              } else if (this.showCreatedRoomWelcomeHeader || this.showDirectChatWelcomeHeader) {
                 self.onScroll();
               }
               self.restartRRTimer();
@@ -1266,7 +1292,7 @@ export default {
         this.timelineWindow
           .paginate(EventTimeline.BACKWARDS, 10, true)
           .then((success) => {
-            if (success) {
+            if (success && this.scrollPosition) {
               this.scrollPosition.prepareFor("up");
               this.events = this.timelineWindow.getEvents();
               this.$nextTick(() => {
@@ -1294,7 +1320,7 @@ export default {
           .then((success) => {
             if (success) {
               this.events = this.timelineWindow.getEvents();
-              if (!this.useVoiceMode) {
+              if (!this.useVoiceMode && this.scrollPosition) {
                 this.scrollPosition.prepareFor("down");
                 this.$nextTick(() => {
                   // restore scroll position!
@@ -1639,7 +1665,17 @@ export default {
     },
 
     closeCreateRoomWelcomeHeader() {
-      this.showCreatedRoomWelcomeHeader = false;
+      this.hideCreatedRoomWelcomeHeader = false;
+      this.$nextTick(() => {
+        // We change the layout when removing the welcome header, so call
+        // onScroll here to handle updates (e.g. remove the "scroll to last" if we now
+        // can see all messages).
+        this.onScroll();
+      });
+    },
+
+    closeDirectChatWelcomeHeader() {
+      this.hideDirectChatWelcomeHeader = true;
       this.$nextTick(() => {
         // We change the layout when removing the welcome header, so call
         // onScroll here to handle updates (e.g. remove the "scroll to last" if we now