feat(frontend): add compact anonymous conversation labels

frontend/app/javascript/dashboard/components/widgets/conversation/ConversationCard.vue

@@ -1,6 +1,9 @@
 <script setup>
 import { computed, ref, watch } from 'vue';
-import { getLastMessage } from 'dashboard/helper/conversationHelper';
+import {
+  getConversationContactDisplayName,
+  getLastMessage,
+} from 'dashboard/helper/conversationHelper';
 import Avatar from 'next/avatar/Avatar.vue';
 import MessagePreview from './MessagePreview.vue';
 import InboxName from '../InboxName.vue';
@@ -34,6 +37,10 @@ const emit = defineEmits([
 
 const hovered = ref(false);
 
+const currentContactName = computed(() =>
+  getConversationContactDisplayName(props.currentContact, props.chat.id)
+);
+
 const unreadCount = computed(() => props.chat.unread_count);
 const hasUnread = computed(() => unreadCount.value > 0);
 const lastMessageInChat = computed(() => getLastMessage(props.chat));
@@ -174,7 +181,7 @@ watch(
           class="conversation--user text-sm my-0 min-w-0 flex-1 capitalize text-ellipsis overflow-hidden whitespace-nowrap text-n-slate-12"
           :class="hasUnread ? 'font-semibold' : 'font-medium'"
         >
-          {{ currentContact.name }}
+          {{ currentContactName }}
         </h4>
         <TimeAgo
           :last-activity-timestamp="chat.timestamp"

frontend/app/javascript/dashboard/components/widgets/conversation/ConversationHeader.vue

@@ -10,6 +10,7 @@ import Avatar from 'next/avatar/Avatar.vue';
 import SLACardLabel from './components/SLACardLabel.vue';
 import wootConstants from 'dashboard/constants/globals';
 import { conversationListPageURL } from 'dashboard/helper/URLHelper';
+import { getConversationContactDisplayName } from 'dashboard/helper/conversationHelper';
 import { snoozedReopenTime } from 'dashboard/helper/snoozeHelpers';
 import { useInbox } from 'dashboard/composables/useInbox';
 import { useI18n } from 'vue-i18n';
@@ -71,6 +72,10 @@ const currentContact = computed(() =>
   store.getters['contacts/getContact'](props.chat?.meta?.sender?.id)
 );
 
+const currentContactName = computed(() =>
+  getConversationContactDisplayName(currentContact.value, props.chat?.id)
+);
+
 const isSnoozed = computed(
   () => currentChat.value.status === wootConstants.STATUS_TYPE.SNOOZED
 );
@@ -132,7 +137,7 @@ const copyConversationId = async () => {
           <span
             class="text-sm font-medium truncate leading-tight text-n-slate-12"
           >
-            {{ currentContact.name }}
+            {{ currentContactName }}
           </span>
           <fluent-icon
             v-if="!isHMACVerified"