feat(quickProfile): improve quickProfile ui/ux (#4975)

components/interactables/QuickProfile/QuickProfile.html

@@ -6,19 +6,13 @@
   v-click-outside="close"
 >
   <div class="top">
-    <!-- todo - remove no-click after implementing regular profile for all users -->
-    <button
-      @click="openProfile"
-      class="open-profile-button"
-      :class="{'no-click' : !isMe}"
-    >
-      <!-- end todo -->
+    <button @click="openProfile" class="open-profile-button">
       <UiUserState :user="user" :size="40" />
     </button>
-    <TypographyText as="h4"> {{ user.name }} </TypographyText>
+    <TypographyText as="h4" class="ellipsis"> {{ user.name }} </TypographyText>
   </div>
   <InteractablesInput
-    v-if="!isMe"
+    v-if="conversationId"
     v-model.trim="text"
     ref="input"
     size="xs"

components/interactables/QuickProfile/QuickProfile.less

@@ -5,6 +5,7 @@
   position: fixed;
   width: 350px;
   padding: 16px;
+  overflow: hidden;
   // background: linear-gradient(
   //   to bottom,
   //   @flair-color 0%,
@@ -22,11 +23,7 @@
     gap: 16px;
 
     .open-profile-button {
-      width: fit-content;
-
-      &.no-click {
-        cursor: default;
-      }
+      cursor: default;
     }
   }
 }

components/interactables/QuickProfile/QuickProfile.vue

@@ -7,6 +7,7 @@ import { User } from '~/libraries/Iridium/users/types'
 import { SettingsRoutes } from '~/store/ui/types'
 import iridium from '~/libraries/Iridium/IridiumManager'
 import { RootState } from '~/types/store/store'
+import { Conversation } from '~/libraries/Iridium/chat/types'
 
 export default Vue.extend({
   components: {
@@ -21,16 +22,19 @@ export default Vue.extend({
     ...mapState({
       quickProfile: (state) => (state as RootState).ui.quickProfile,
     }),
-    isMe(): boolean {
-      return iridium.id === this.user?.did
-    },
     user(): User | undefined {
       return this.quickProfile?.user
     },
     src(): string {
       const hash = this.user?.photoHash
       return hash ? `${this.$Config.ipfs.gateway}${hash}` : ''
     },
+    conversationId(): Conversation['id'] | undefined {
+      if (!this.user) {
+        return
+      }
+      return iridium.chat.directConversationIdFromDid(this.user.did)
+    },
   },
   mounted() {
     const quick = this.$refs.quick as HTMLElement
@@ -51,51 +55,46 @@ export default Vue.extend({
         return
       }
       const quick = this.$refs.quick as HTMLElement
-      const clickX = this.quickProfile.position.x
-      const clickY = this.quickProfile.position.y
-      const widthOverflow = clickX + quick.clientWidth - window.innerWidth
-      const heightOverflow = clickY + quick.clientHeight - window.innerHeight
+      const widthOverflow =
+        this.quickProfile.position.x + quick.clientWidth - window.innerWidth
+      const heightOverflow =
+        this.quickProfile.position.y + quick.clientHeight - window.innerHeight
       if (widthOverflow > -8) {
-        quick.style.left = `${this.quickProfile.position.x - widthOverflow}px`
+        quick.style.left = `${
+          this.quickProfile.position.x - widthOverflow - 16
+        }px`
       }
       if (heightOverflow > -8) {
-        quick.style.top = `${this.quickProfile.position.y - heightOverflow}px`
+        quick.style.top = `${
+          this.quickProfile.position.y - heightOverflow - 16
+        }px`
       }
     },
     sendMessage() {
-      if (!this.user || !this.text.length) {
-        return
-      }
-      const conversationId = iridium.chat.directConversationIdFromDid(
-        this.user.did,
-      )
-      if (!conversationId) {
+      if (!this.user || !this.text.length || !this.conversationId) {
         return
       }
 
-      if (conversationId !== this.$route.params.id) {
+      if (this.conversationId !== this.$route.params.id) {
         this.$router.push(
           this.$device.isMobile
-            ? `/mobile/chat/${conversationId}`
-            : `/chat/${conversationId}`,
+            ? `/mobile/chat/${this.conversationId}`
+            : `/chat/${this.conversationId}`,
         )
       }
 
       iridium.chat.sendMessage({
         at: Date.now(),
         type: 'text',
         body: this.text,
-        conversationId,
+        conversationId: this.conversationId,
         attachments: [],
         payload: {},
       })
       this.close()
     },
     openProfile() {
-      if (!this.user) {
-        return
-      }
-      if (this.isMe) {
+      if (iridium.id === this.user?.did) {
         this.$store.commit('ui/setSettingsRoute', SettingsRoutes.PROFILE)
         this.close()
       } else {

components/views/chat/UserList.vue

@@ -1,15 +1,16 @@
 <template>
   <div class="user-list hover-scroll">
-    <TypographyText size="sm" color="body">
+    <TypographyText size="sm" color="body" class="heading">
       {{
         $t('pages.chat.members', { count: allParticipantsAlphaSorted.length })
       }}
     </TypographyText>
     <div class="list">
-      <div
+      <button
         v-for="user in allParticipantsAlphaSorted"
         :key="user.did"
         class="user"
+        @click="showQuickProfile($event, user)"
       >
         <UiUserState :user="user" :conversation-id="conversationId" />
         <TypographyText
@@ -20,21 +21,32 @@
         >
           {{ user.name }}
         </TypographyText>
-      </div>
+      </button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue'
 import { conversationHooks } from '~/components/compositions/conversations'
+import { User } from '~/libraries/Iridium/users/types'
 
 export default Vue.extend({
   setup() {
     const { conversationId, allParticipantsAlphaSorted } = conversationHooks()
 
     return { conversationId, allParticipantsAlphaSorted }
   },
+  methods: {
+    showQuickProfile(e: MouseEvent, user: User) {
+      setTimeout(() => {
+        this.$store.commit('ui/setQuickProfile', {
+          user,
+          position: { x: e.x, y: e.y },
+        })
+      }, 0)
+    },
+  },
 })
 </script>
 
@@ -44,7 +56,6 @@ export default Vue.extend({
   flex-direction: column;
   flex-shrink: 0;
   gap: 8px;
-  padding: 16px;
   width: 240px;
   margin-right: 16px;
   overflow-y: auto;
@@ -53,16 +64,24 @@ export default Vue.extend({
   user-select: none;
   border-radius: @corner-rounding;
 
+  .heading {
+    padding: 16px 16px 0;
+  }
+
   .list {
     display: flex;
     flex-direction: column;
-    gap: 12px;
   }
 
   .user {
     display: flex;
     gap: 8px;
     align-items: center;
+    padding: 8px 16px;
+
+    &:hover {
+      .background-semitransparent-lighter();
+    }
   }
 }
 </style>

components/views/chat/message/Message.html

@@ -12,11 +12,13 @@
     <!-- todo - add user options context menu -->
     <template v-if="showHeader">
       <div class="avatar">
-        <UiCircle
-          :type="avatarSrc ? 'image' : 'random'"
-          :seed="author.did"
-          :source="avatarSrc"
-        />
+        <button @click="showQuickProfile" tabindex="-1">
+          <UiCircle
+            :type="avatarSrc ? 'image' : 'random'"
+            :seed="author.did"
+            :source="avatarSrc"
+          />
+        </button>
       </div>
       <div class="header">
         <button @click="showQuickProfile">

libraries/Iridium/chat/ChatManager.ts

@@ -360,6 +360,9 @@ export default class ChatManager extends Emitter<ConversationMessage> {
    * significantly faster than Iridium.hash until about 5,000,000 conversation records
    */
   directConversationIdFromDid(friendDid: Friend['did']): string | undefined {
+    if (friendDid === iridium.id) {
+      return
+    }
     return Object.values(this.state.conversations).find(
       (c) => c.type === 'direct' && c.participants.includes(friendDid),
     )?.id