Add "start private chat" option to room member list

Issue #279.

src/assets/css/chat.scss

@@ -828,6 +828,14 @@ $admin-fg: white;
         border-radius: 20px;
     }
 
+    .member .user-name {
+        margin-left: 6px;
+    }
+
+    .member .start-private-chat {
+        margin-left: 38px;
+    }
+
     .member::after {
         content: " ";
         display: block;

src/components/RoomInfo.vue

@@ -142,6 +142,7 @@
               member.name.substring(0, 1).toUpperCase()
             }}</span>
           </v-avatar>
+          <span class="user-name">
           {{
             member.userId == $matrix.currentUserId
               ? $t("room_info.user_you", {
@@ -151,6 +152,8 @@
                   user: member.user ? member.user.displayName : member.name,
                 })
           }}
+          </span>
+          <div v-if="member.userId != $matrix.currentUserId && !$matrix.isDirectRoomWith(room, member.userId) && expandedMembers.includes(member)" class="start-private-chat clickable" @click="startPrivateChat(member.userId)">Start private chat</div>
           <DeviceList
             v-if="expandedMembers.includes(member)"
             :member="member"
@@ -205,6 +208,7 @@ import DeviceList from "../components/DeviceList";
 import QRCode from "qrcode";
 import roomInfoMixin from "./roomInfoMixin";
 import QRCodePopup from './QRCodePopup.vue';
+import util from "../plugins/utils";
 
 export default {
   name: "RoomInfo",
@@ -438,6 +442,28 @@ export default {
           this.updateQRCode();
         });
     },
+    startPrivateChat(userId) {
+      this.$matrix
+        .getOrCreatePrivateChat(userId)
+        .then((room) => {
+          this.$nextTick(() => {
+            this.$navigation.push(
+              {
+                name: "Chat",
+                params: {
+                  roomId: util.sanitizeRoomId(
+                    room.getCanonicalAlias() || room.roomId
+                  ),
+                },
+              },
+              -1
+            );
+          });
+        })
+        .catch((err) => {
+          console.error(err);
+        });
+    },
   },
 };
 </script>