From 00d61b02bd25d3851741734164d1e5deb6021c76 Mon Sep 17 00:00:00 2001
From: Acho Arnold Ewin <arnold@ndolestudio.com>
Date: Tue, 6 Oct 2026 23:34:09 +0300
Subject: [PATCH 1/2] fix(web): support nested WhatsApp formatting and format
 thread previews

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

Copilot-Session: 3362f283-a915-49b9-ae89-d16e3c7ecb2a
---
 web/app/components/MessageThread.vue | 23 ++++++++++++++++++++++-
 web/app/utils/whatsapp-format.ts     |  4 +++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/web/app/components/MessageThread.vue b/web/app/components/MessageThread.vue
index 93c77324d..53bd401b0 100644
--- a/web/app/components/MessageThread.vue
+++ b/web/app/components/MessageThread.vue
@@ -8,6 +8,10 @@ import {
   mdiAccount,
 } from '@mdi/js'
 import type { EntitiesMessageThread } from '~~/shared/types/api'
+import {
+  isUrlNotificationToken,
+  formatWhatsappText,
+} from '~/utils/whatsapp-format'
 
 const threadsStore = useThreadsStore()
 const phonesStore = usePhonesStore()
@@ -45,6 +49,19 @@ function onInstallApp() {
   })
 }
 
+function isWhatsappFormatted(thread: EntitiesMessageThread): boolean {
+  const phone = phonesStore.phones.find((x) => x.phone_number === thread.owner)
+  return isUrlNotificationToken(phone?.fcm_token)
+}
+
+function threadPreviewHtml(thread: EntitiesMessageThread): string {
+  // Links are unwrapped because the preview sits inside a router link.
+  return formatWhatsappText(thread.last_message_content ?? '').replace(
+    /<a [^>]*>(.*?)<\/a>/g,
+    '$1',
+  )
+}
+
 function threadContactName(thread: EntitiesMessageThread): string {
   return thread.contact_details?.name?.trim() ?? ''
 }
@@ -160,7 +177,11 @@ function threadAvatarInitial(thread: EntitiesMessageThread): string {
           }"
           style="max-width: 250px"
         >
-          {{ thread.last_message_content }}
+          <span
+            v-if="isWhatsappFormatted(thread)"
+            v-html="threadPreviewHtml(thread)"
+          />
+          <template v-else>{{ thread.last_message_content }}</template>
         </v-list-item-subtitle>
         <template #append>
           <div class="d-flex flex-column align-end">
diff --git a/web/app/utils/whatsapp-format.ts b/web/app/utils/whatsapp-format.ts
index c1e4e9e46..202a12355 100644
--- a/web/app/utils/whatsapp-format.ts
+++ b/web/app/utils/whatsapp-format.ts
@@ -23,7 +23,9 @@ function escapeHtml(text: string): string {
 // Character class (as a regex source string) that is treated as a valid
 // boundary around a formatting marker: whitespace, common punctuation, or
 // the start/end of the string.
-const BOUNDARY_CHARS = String.raw`\s.,!?;:'"()\[\]{}-`
+// Other formatting markers and generated tags (<>) also count so that nested
+// formatting such as `_*text*_` works.
+const BOUNDARY_CHARS = String.raw`\s.,!?;:'"()\[\]{}<>*_~-`
 
 function withBoundaries(pattern: string): RegExp {
   return new RegExp(

From b4527e8a572eb0d12ca1b75ad5ee2f25a94808ca Mon Sep 17 00:00:00 2001
From: Acho Arnold Ewin <arnold@ndolestudio.com>
Date: Tue, 6 Oct 2026 23:35:20 +0300
Subject: [PATCH 2/2] chore(web): silence vue/no-v-html for sanitized thread
 preview

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

Copilot-Session: 3362f283-a915-49b9-ae89-d16e3c7ecb2a
---
 web/app/components/MessageThread.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/web/app/components/MessageThread.vue b/web/app/components/MessageThread.vue
index 53bd401b0..2a699408a 100644
--- a/web/app/components/MessageThread.vue
+++ b/web/app/components/MessageThread.vue
@@ -177,10 +177,12 @@ function threadAvatarInitial(thread: EntitiesMessageThread): string {
           }"
           style="max-width: 250px"
         >
+          <!-- eslint-disable vue/no-v-html -->
           <span
             v-if="isWhatsappFormatted(thread)"
             v-html="threadPreviewHtml(thread)"
           />
+          <!-- eslint-enable vue/no-v-html -->
           <template v-else>{{ thread.last_message_content }}</template>
         </v-list-item-subtitle>
         <template #append>