From ed8fea5de204f8f1b67897456226ce3cec3eef0b Mon Sep 17 00:00:00 2001
From: N-Pex <npexdev@gmail.com>
Date: Mon, 11 Apr 2022 12:50:49 +0200
Subject: [PATCH] Add "start private chat" option to room member list

Issue #279.
---
 src/assets/css/chat.scss    |  8 ++++++++
 src/components/RoomInfo.vue | 26 ++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)

diff --git a/src/assets/css/chat.scss b/src/assets/css/chat.scss
index f8dde87..91b087e 100644
--- a/src/assets/css/chat.scss
+++ b/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;
diff --git a/src/components/RoomInfo.vue b/src/components/RoomInfo.vue
index a08ed39..3732bcc 100644
--- a/src/components/RoomInfo.vue
+++ b/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>