feat(web): display contact names on threads

Preserve contact details across mark-read updates.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: AchoArnold

web/app/components/MessageThread.vue

@@ -7,12 +7,13 @@ import {
   mdiAlert,
   mdiAccount,
 } from '@mdi/js'
-import { formatPhoneNumber, startsWithLetter } from '~/utils/filters'
+import type { EntitiesMessageThread } from '~~/shared/types/api'
 
 const threadsStore = useThreadsStore()
 const phonesStore = usePhonesStore()
 const appStore = useAppStore()
 const notificationsStore = useNotificationsStore()
+const { formatPhoneNumber, startsWithLetter } = useFilters()
 
 function threadDate(date: string): string {
   return new Date(date).toLocaleString(undefined, {
@@ -27,6 +28,21 @@ function onInstallApp() {
     message: 'Downloading the httpSMS Android App',
   })
 }
+
+function threadContactName(thread: EntitiesMessageThread): string {
+  return thread.contact_details?.name?.trim() ?? ''
+}
+
+function threadContactTitle(thread: EntitiesMessageThread): string {
+  return threadContactName(thread) || formatPhoneNumber(thread.contact)
+}
+
+function threadAvatarInitial(thread: EntitiesMessageThread): string {
+  const contactName = threadContactName(thread)
+  if (contactName) return contactName.substring(0, 1)
+
+  return startsWithLetter(thread.contact) ? thread.contact.substring(0, 1) : ''
+}
 </script>
 
 <template>
@@ -104,16 +120,16 @@ function onInstallApp() {
             size="40"
             :badge="thread.is_read ? false : { color: 'primary', dotSize: 12 }"
           >
-            <v-icon v-if="!startsWithLetter(thread.contact)" color="white">{{
+            <v-icon v-if="!threadAvatarInitial(thread)" color="white">{{
               mdiAccount
             }}</v-icon>
             <span v-else class="text-white text-headline-small">{{
-              thread.contact.substring(0, 1)
+              threadAvatarInitial(thread)
             }}</span>
           </v-avatar>
         </template>
         <v-list-item-title :class="{ 'font-weight-bold': !thread.is_read }">{{
-          formatPhoneNumber(thread.contact)
+          threadContactTitle(thread)
         }}</v-list-item-title>
         <v-list-item-subtitle
           class="text-truncate mt-1"

web/app/components/MessageThreadHeader.vue

@@ -14,9 +14,9 @@ import {
   mdiDotsVertical,
   mdiMagnify,
   mdiCommentTextMultipleOutline,
+  mdiAccountMultiple,
   mdiCircle,
 } from '@mdi/js'
-import { formatPhoneNumber, phoneCountry, humanizeTime } from '~/utils/filters'
 import type { EntitiesPhone } from '~~/shared/types/api'
 
 const router = useRouter()
@@ -28,6 +28,7 @@ const threadsStore = useThreadsStore()
 const appStore = useAppStore()
 const notificationsStore = useNotificationsStore()
 const redirectPreferenceStore = useRedirectPreferenceStore()
+const { formatPhoneNumber, phoneCountry, humanizeTime } = useFilters()
 
 const selectedMenuItem = ref(-1)
 
@@ -180,6 +181,10 @@ async function logout() {
           <template #prepend><v-icon :icon="mdiMagnify" /></template>
           <v-list-item-title>Search Messages</v-list-item-title>
         </v-list-item>
+        <v-list-item :to="{ name: 'contacts' }">
+          <template #prepend><v-icon :icon="mdiAccountMultiple" /></template>
+          <v-list-item-title>Contacts</v-list-item-title>
+        </v-list-item>
         <v-list-item :to="{ name: 'settings' }">
           <template #prepend><v-icon :icon="mdiAccountCog" /></template>
           <v-list-item-title>Settings</v-list-item-title>

web/app/composables/useFilters.ts

@@ -7,6 +7,7 @@ import {
   formatBillingPeriod,
   formatBillingPeriodDateOrdinal,
   humanizeTime,
+  startsWithLetter,
 } from '../utils/filters'
 import { capitalize } from '../utils/capitalize'
 
@@ -20,6 +21,7 @@ export function useFilters() {
     formatBillingPeriod,
     formatBillingPeriodDateOrdinal,
     humanizeTime,
+    startsWithLetter,
     capitalize,
   }
 }

web/app/pages/threads/[id]/index.vue

@@ -19,7 +19,6 @@ import Pusher from 'pusher-js'
 import type { Channel } from 'pusher-js'
 import { isValidPhoneNumber } from 'libphonenumber-js'
 import type { EntitiesMessage } from '~~/shared/types/api'
-import { startsWithLetter } from '~/utils/filters'
 
 definePageMeta({
   middleware: ['auth'],
@@ -33,7 +32,7 @@ const route = useRoute()
 const router = useRouter()
 const config = useRuntimeConfig()
 const { lgAndUp, mdAndDown, mdAndUp } = useDisplay()
-const { formatPhoneNumber } = useFilters()
+const { formatPhoneNumber, startsWithLetter } = useFilters()
 const notificationsStore = useNotificationsStore()
 const authStore = useAuthStore()
 const phonesStore = usePhonesStore()
@@ -104,6 +103,14 @@ function formatAttachmentName(url: string): string {
   return url
 }
 
+function currentThreadContactTitle(): string {
+  const thread = threadsStore.currentThread
+  if (!thread) return ''
+  return (
+    thread.contact_details?.name?.trim() || formatPhoneNumber(thread.contact)
+  )
+}
+
 function scrollToElement() {
   const el = messageBody.value
   if (el) {
@@ -268,7 +275,7 @@ onBeforeUnmount(() => {
           <VIcon :icon="mdiArrowLeft" />
         </VBtn>
         <VToolbarTitle v-if="threadsStore.currentThread">
-          {{ formatPhoneNumber(threadsStore.currentThread.contact) }}
+          {{ currentThreadContactTitle() }}
         </VToolbarTitle>
         <VMenu>
           <template #activator="{ props }">

web/app/stores/threads.ts

@@ -28,7 +28,19 @@ export const useThreadsStore = defineStore('threads', () => {
     const index = threads.value.findIndex(
       (thread) => thread.id === updatedThread.id,
     )
-    if (index !== -1) threads.value[index] = updatedThread
+    if (index !== -1) {
+      const existingThread = threads.value[index]
+      threads.value[index] = {
+        ...updatedThread,
+        // Mark-read PUT responses are not contact-enriched; keep the resolved
+        // contact so display names do not disappear after the thread updates.
+        contact_details:
+          updatedThread.contact_details ??
+          (updatedThread.contact === existingThread.contact
+            ? existingThread.contact_details
+            : undefined),
+      }
+    }
   }
 
   async function loadThreads() {
@@ -45,6 +57,7 @@ export const useThreadsStore = defineStore('threads', () => {
           owner: phonesStore.owner ?? phonesStore.phones[0]?.phone_number,
           limit: 100,
           is_archived: archivedThreads.value,
+          contacts: true,
         },
       },
     )