From 7c0d9efe9165ea07cf1ff7ff5404b6a8d35af148 Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Wed, 18 Mar 2026 16:51:51 -0500
Subject: [PATCH] Update Confirm component to support allowHtml prompt option

---
 client/components/app/Appbar.vue              |  1 +
 client/components/modals/item/tabs/Tools.vue  |  1 +
 client/components/prompt/Confirm.vue          | 22 ++++++++++++++++++-
 client/pages/config/index.vue                 |  2 +-
 .../config/item-metadata-utils/genres.vue     |  4 ++--
 .../pages/config/item-metadata-utils/tags.vue |  4 ++--
 6 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/client/components/app/Appbar.vue b/client/components/app/Appbar.vue
index f74134041..428ae6ebf 100644
--- a/client/components/app/Appbar.vue
+++ b/client/components/app/Appbar.vue
@@ -196,6 +196,7 @@ export default {
     requestBatchQuickEmbed() {
       const payload = {
         message: this.$strings.MessageConfirmQuickEmbed,
+        allowHtml: true,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios
diff --git a/client/components/modals/item/tabs/Tools.vue b/client/components/modals/item/tabs/Tools.vue
index d96550887..8e40ca3c0 100644
--- a/client/components/modals/item/tabs/Tools.vue
+++ b/client/components/modals/item/tabs/Tools.vue
@@ -107,6 +107,7 @@ export default {
     quickEmbed() {
       const payload = {
         message: this.$strings.MessageConfirmQuickEmbed,
+        allowHtml: true,
         callback: (confirmed) => {
           if (confirmed) {
             this.$axios
diff --git a/client/components/prompt/Confirm.vue b/client/components/prompt/Confirm.vue
index 361765e2d..d0828c7d1 100644
--- a/client/components/prompt/Confirm.vue
+++ b/client/components/prompt/Confirm.vue
@@ -3,7 +3,8 @@
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-linear-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
     <div ref="content" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickedOutside">
       <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300">
-        <p id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1" v-html="message" />
+        <p v-if="allowHtmlMessage" id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1" v-html="sanitizedMessage" />
+        <p v-else id="confirm-prompt-message" class="text-lg mb-6 mt-2 px-1">{{ message }}</p>
 
         <ui-checkbox v-if="checkboxLabel" v-model="checkboxValue" checkbox-bg="bg" :label="checkboxLabel" label-class="pl-2 text-base" class="mb-6 px-1" />
 
@@ -52,6 +53,17 @@ export default {
     message() {
       return this.confirmPromptOptions.message || ''
     },
+    allowHtmlMessage() {
+      return !!this.confirmPromptOptions.allowHtml
+    },
+    sanitizedMessage() {
+      if (!this.allowHtmlMessage) return this.message
+
+      return this.escapeHtml(this.message)
+        .replace(/&lt;br\s*\/?&gt;/gi, '<br>')
+        .replace(/&lt;code&gt;/gi, '<code>')
+        .replace(/&lt;\/code&gt;/gi, '</code>')
+    },
     callback() {
       return this.confirmPromptOptions.callback
     },
@@ -103,6 +115,14 @@ export default {
       if (this.callback) this.callback(true, this.checkboxValue)
       this.show = false
     },
+    escapeHtml(value) {
+      return String(value)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+    },
     setShow() {
       this.checkboxValue = this.checkboxDefaultValue
       this.$eventBus.$emit('showing-prompt', true)
diff --git a/client/pages/config/index.vue b/client/pages/config/index.vue
index b8cf3cff2..7fb84d468 100644
--- a/client/pages/config/index.vue
+++ b/client/pages/config/index.vue
@@ -390,8 +390,8 @@ export default {
     },
     purgeItemsCache() {
       const payload = {
-        // message: `This will delete the entire folder at <code>/metadata/cache/items</code>.<br />Are you sure you want to purge items cache?`,
         message: this.$strings.MessageConfirmPurgeItemsCache,
+        allowHtml: true,
         callback: (confirmed) => {
           if (confirmed) {
             this.sendPurgeItemsCache()
diff --git a/client/pages/config/item-metadata-utils/genres.vue b/client/pages/config/item-metadata-utils/genres.vue
index 87e14bbd8..8abe34eef 100644
--- a/client/pages/config/item-metadata-utils/genres.vue
+++ b/client/pages/config/item-metadata-utils/genres.vue
@@ -90,9 +90,9 @@ export default {
 
       let message = this.$getString('MessageConfirmRenameGenre', [this.editingGenre, this.newGenreName])
       if (genreNameExists) {
-        message += `<br><span class="text-sm">${this.$strings.MessageConfirmRenameGenreMergeNote}</span>`
+        message += ` ${this.$strings.MessageConfirmRenameGenreMergeNote}`
       } else if (genreNameExistsOfDifferentCase) {
-        message += `<br><span class="text-warning text-sm">${this.$getString('MessageConfirmRenameGenreWarning', [genreNameExistsOfDifferentCase])}</span>`
+        message += ` ${this.$getString('MessageConfirmRenameGenreWarning', [genreNameExistsOfDifferentCase])}`
       }
 
       const payload = {
diff --git a/client/pages/config/item-metadata-utils/tags.vue b/client/pages/config/item-metadata-utils/tags.vue
index 2fe5c0f1a..4dfc39424 100644
--- a/client/pages/config/item-metadata-utils/tags.vue
+++ b/client/pages/config/item-metadata-utils/tags.vue
@@ -86,9 +86,9 @@ export default {
 
       let message = this.$getString('MessageConfirmRenameTag', [this.editingTag, this.newTagName])
       if (tagNameExists) {
-        message += `<br><span class="text-sm">${this.$strings.MessageConfirmRenameTagMergeNote}</span>`
+        message += ` ${this.$strings.MessageConfirmRenameTagMergeNote}`
       } else if (tagNameExistsOfDifferentCase) {
-        message += `<br><span class="text-warning text-sm">${this.$getString('MessageConfirmRenameTagWarning', [tagNameExistsOfDifferentCase])}</span>`
+        message += ` ${this.$getString('MessageConfirmRenameTagWarning', [tagNameExistsOfDifferentCase])}`
       }
 
       const payload = {