feat(chat): new group member sidebar for group chats (#4747)

* feat(sidebar): show group members in group chat

* feat(chat): wip added typing status

* fix: remove dummy text

components/views/chat/UserList.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="user-list hover-scroll">
+    <TypographyText>
+      {{ $t('pages.chat.members', { count: userDetails.length }) }}
+    </TypographyText>
+    <div v-for="user in userDetails" :key="user.did" class="user">
+      <UiUserState :user="user" :conversation-id="conversationId" />
+      <TypographyText class="ellipsis">
+        {{ user.name }}
+      </TypographyText>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { computed, ComputedRef, reactive } from 'vue'
+import iridium from '~/libraries/Iridium/IridiumManager'
+import { conversationHooks } from '~/components/compositions/conversations'
+import { User } from '~/libraries/Iridium/users/types'
+
+export default Vue.extend({
+  setup() {
+    const { conversation, conversationId } = conversationHooks()
+
+    const state = reactive({
+      users: iridium.users,
+    })
+
+    const userDetails: ComputedRef<User[]> = computed(() => {
+      if (!conversation.value) {
+        return []
+      }
+      const arr = conversation.value.participants.map((p) =>
+        state.users.getUser(p),
+      ) as User[]
+      return arr.sort((a, b) => a.name.localeCompare(b.name))
+    })
+
+    return { conversation, conversationId, userDetails }
+  },
+})
+</script>
+
+<style lang="less" scoped>
+.user-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  width: 240px;
+  overflow-y: auto;
+  background: @foreground-gradient;
+  box-shadow: @ui-shadow;
+  user-select: none;
+
+  .user {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+</style>

components/views/navigation/toolbar/Toolbar.less

@@ -34,6 +34,7 @@
       rgba(58, 58, 80, 0.4);
     border-radius: @corner-rounding;
     position: relative;
+    margin-right: 16px;
 
     // temp for uicomingsoon
     > span {

components/views/navigation/toolbar/Toolbar.vue

@@ -50,13 +50,9 @@ export default Vue.extend({
       userDetails,
     } = conversationHooks()
 
-    const subtitleText: ComputedRef<string> = computed(() => {
+    const subtitleText: ComputedRef<string | undefined> = computed(() => {
       if (isGroup.value) {
-        return (
-          conversation?.value?.participants
-            ?.map((did) => iridium.users.getUser(did)?.name)
-            .join(', ') ?? ''
-        )
+        return
       }
       // todo - replace with user status message set in profile settings
       return iridium.users.ephemeral.status[otherDids.value[0]] || 'offline'

locales/en-US.js

@@ -643,6 +643,7 @@ export default {
         no_more: 'No more messages.',
       },
       add_reaction: 'Add reaction',
+      members: 'Members - {count}',
     },
     newMessage: {
       new_message: 'New Message',

pages/chat/Chat.html

@@ -5,7 +5,11 @@
     :max-viewable-users="10"
     :fullscreen-max-viewable-users="20"
   />
-  <Conversation />
-  <Chatbar />
-  <!-- <WalletMini v-if="ui.modals.walletMini" /> -->
+  <div class="outer-wrapper">
+    <div class="inner-wrapper">
+      <Conversation />
+      <Chatbar />
+    </div>
+    <UserList v-if="isGroup" />
+  </div>
 </div>

pages/chat/_id.vue

@@ -1,23 +1,49 @@
 <template src="./Chat.html"></template>
 
 <script lang="ts">
-import Vue from 'vue'
+import Vue, { computed, ComputedRef, reactive } from 'vue'
 import iridium from '~/libraries/Iridium/IridiumManager'
+import { conversationHooks } from '~/components/compositions/conversations'
 
 export default Vue.extend({
   name: 'Chat',
   layout: 'desktop',
-  data() {
-    return {
-      webrtc: iridium.webRTC.state,
-    }
-  },
-  computed: {
-    isActiveCall(): boolean {
-      return iridium.webRTC.isActiveCall(this.$route.params.id)
-    },
+  setup() {
+    const { conversationId, conversation, isGroup } = conversationHooks()
+
+    const state = reactive({
+      webrtc: iridium.webRTC,
+    })
+
+    const isActiveCall: ComputedRef<boolean> = computed(() => {
+      return state.webrtc.isActiveCall(conversationId.value)
+    })
+
+    return { conversation, isGroup, isActiveCall }
   },
 })
 </script>
 
-<style lang="less" src="./Chat.less" scoped></style>
+<style lang="less" scoped>
+.chat {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: flex-end;
+  padding: 16px 0 16px 16px;
+  min-width: 0;
+
+  .outer-wrapper {
+    display: flex;
+    overflow: hidden;
+    flex-grow: 1;
+    gap: 8px;
+
+    .inner-wrapper {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+    }
+  }
+}
+</style>