From 3f6149aaf7428fb6698005ad9acc7f339819788f Mon Sep 17 00:00:00 2001
From: arabcoders <admin@arabcoders.org>
Date: Sat, 18 Apr 2026 20:18:41 +0300
Subject: [PATCH] refactor: use plain text for multi-line messages ni confirm
 dialog

---
 ui/app/components/Dialog.vue       | 10 +------
 ui/app/composables/useDialog.ts    |  4 ---
 ui/app/pages/browser/[...slug].vue | 23 +++++----------
 ui/app/pages/conditions.vue        | 11 +++----
 ui/app/pages/dl_fields.vue         | 11 +++----
 ui/app/pages/notifications.vue     | 11 +++----
 ui/app/pages/presets.vue           | 11 +++----
 ui/app/pages/task_definitions.vue  | 11 +++----
 ui/app/pages/tasks.vue             | 47 ++++++++++++------------------
 9 files changed, 57 insertions(+), 82 deletions(-)

diff --git a/ui/app/components/Dialog.vue b/ui/app/components/Dialog.vue
index 577acc03..fa657d2b 100644
--- a/ui/app/components/Dialog.vue
+++ b/ui/app/components/Dialog.vue
@@ -9,7 +9,7 @@
     @after:enter="focusInput"
   >
     <template #body>
-      <p v-if="state.current?.opts.message">
+      <p v-if="state.current?.opts.message" class="whitespace-pre-line wrap-break-word">
         {{ state.current?.opts.message }}
       </p>
 
@@ -23,14 +23,6 @@
         />
       </UFormField>
 
-      <div
-        v-else-if="
-          'confirm' === state.current?.type && (state.current?.opts as ConfirmOptions)?.rawHTML
-        "
-        class="max-h-[40vh] overflow-auto text-sm text-default"
-        v-html="(state.current?.opts as ConfirmOptions)?.rawHTML"
-      />
-
       <div
         v-if="
           'confirm' === state.current?.type &&
diff --git a/ui/app/composables/useDialog.ts b/ui/app/composables/useDialog.ts
index 2d4a3e7a..dedb4e8b 100644
--- a/ui/app/composables/useDialog.ts
+++ b/ui/app/composables/useDialog.ts
@@ -52,10 +52,6 @@ export type ConfirmOptions = BaseOptions & {
    * Text for the confirm button
    */
   cancelText?: string;
-  /**
-   * Raw HTML content to include in the dialog message.
-   */
-  rawHTML?: string;
   /**
    * Optional checkbox-style options to return with the confirmation result.
    */
diff --git a/ui/app/pages/browser/[...slug].vue b/ui/app/pages/browser/[...slug].vue
index 04d82aba..2d55ec97 100644
--- a/ui/app/pages/browser/[...slug].vue
+++ b/ui/app/pages/browser/[...slug].vue
@@ -934,15 +934,6 @@ const itemTypeLabel = (item: FileItem): string => {
   return item.type === 'file' ? 'File' : ucFirst(item.type);
 };
 
-const escapeHtml = (value: string): string => {
-  return value
-    .replaceAll('&', '&amp;')
-    .replaceAll('<', '&lt;')
-    .replaceAll('>', '&gt;')
-    .replaceAll('"', '&quot;')
-    .replaceAll("'", '&#39;');
-};
-
 const toggleFilter = async (): Promise<void> => {
   show_filter.value = !show_filter.value;
 
@@ -1060,8 +1051,9 @@ const handleDeleteSelected = async (): Promise<void> => {
     return;
   }
 
-  const rawHTML =
-    '<ul>' +
+  const message =
+    'Delete the following items?' +
+    '\n\n' +
     selectedElms.value
       .map((selectedPath) => {
         const item = items.value.find((entry) => entry.path === selectedPath);
@@ -1069,15 +1061,14 @@ const handleDeleteSelected = async (): Promise<void> => {
           return '';
         }
 
-        return `<li><strong>${escapeHtml(itemTypeLabel(item))}:</strong> ${escapeHtml(item.name)}</li>`;
+        return `${itemTypeLabel(item)}: ${item.name}`;
       })
-      .join('') +
-    '</ul>';
+      .filter(Boolean)
+      .join('\n');
 
   const { status } = await dialog.confirmDialog({
     title: 'Delete Confirmation',
-    message: 'Delete the following items?',
-    rawHTML,
+    message,
     confirmText: 'Delete',
     cancelText: 'Cancel',
     confirmColor: 'error',
diff --git a/ui/app/pages/conditions.vue b/ui/app/pages/conditions.vue
index bc8738f5..da7aadff 100644
--- a/ui/app/pages/conditions.vue
+++ b/ui/app/pages/conditions.vue
@@ -709,15 +709,16 @@ const deleteSelected = async (): Promise<void> => {
 
   const { status } = await confirmDialog({
     title: 'Delete Selected Conditions',
-    rawHTML:
-      `Delete <strong class="text-red-500">${selectedIds.value.length}</strong> condition/s?<ul>` +
+    message:
+      `Delete ${selectedIds.value.length} condition/s?` +
+      '\n\n' +
       selectedIds.value
         .map((id) => {
           const item = filteredItems.value.find((cond) => cond.id === id);
-          return item ? `<li>${item.id}: ${item.name}</li>` : '';
+          return item ? `${item.id}: ${item.name}` : '';
         })
-        .join('') +
-      '</ul>',
+        .filter(Boolean)
+        .join('\n'),
     confirmText: 'Delete',
     confirmColor: 'error',
   });
diff --git a/ui/app/pages/dl_fields.vue b/ui/app/pages/dl_fields.vue
index afa15e3e..7c18f82a 100644
--- a/ui/app/pages/dl_fields.vue
+++ b/ui/app/pages/dl_fields.vue
@@ -618,15 +618,16 @@ const deleteSelected = async (): Promise<void> => {
 
   const { status } = await confirmDialog({
     title: 'Delete Selected Fields',
-    rawHTML:
-      `Delete <strong class="text-red-500">${selectedIds.value.length}</strong> field/s?<ul>` +
+    message:
+      `Delete ${selectedIds.value.length} field/s?` +
+      '\n\n' +
       selectedIds.value
         .map((id) => {
           const item = filteredItems.value.find((field) => field.id === id);
-          return item ? `<li>${item.id}: ${item.name}</li>` : '';
+          return item ? `${item.id}: ${item.name}` : '';
         })
-        .join('') +
-      '</ul>',
+        .filter(Boolean)
+        .join('\n'),
     confirmText: 'Delete',
     confirmColor: 'error',
   });
diff --git a/ui/app/pages/notifications.vue b/ui/app/pages/notifications.vue
index f2d5c4a8..10d165f9 100644
--- a/ui/app/pages/notifications.vue
+++ b/ui/app/pages/notifications.vue
@@ -767,15 +767,16 @@ const deleteSelected = async (): Promise<void> => {
 
   const { status } = await confirmDialog({
     title: 'Delete Selected Notifications',
-    rawHTML:
-      `Delete <strong class="text-red-500">${selectedIds.value.length}</strong> notification target/s?<ul>` +
+    message:
+      `Delete ${selectedIds.value.length} notification target/s?` +
+      '\n\n' +
       selectedIds.value
         .map((id) => {
           const item = filteredTargets.value.find((target) => target.id === id);
-          return item ? `<li>${item.id}: ${item.name}</li>` : '';
+          return item ? `${item.id}: ${item.name}` : '';
         })
-        .join('') +
-      '</ul>',
+        .filter(Boolean)
+        .join('\n'),
     confirmText: 'Delete',
     confirmColor: 'error',
   });
diff --git a/ui/app/pages/presets.vue b/ui/app/pages/presets.vue
index 3de9e76e..a1cf9012 100644
--- a/ui/app/pages/presets.vue
+++ b/ui/app/pages/presets.vue
@@ -585,15 +585,16 @@ const deleteSelected = async (): Promise<void> => {
 
   const { status } = await confirmDialog({
     title: 'Delete Selected Presets',
-    rawHTML:
-      `Delete <strong class="text-red-500">${selectedIds.value.length}</strong> preset/s?<ul>` +
+    message:
+      `Delete ${selectedIds.value.length} preset/s?` +
+      '\n\n' +
       selectedIds.value
         .map((id) => {
           const item = filteredPresets.value.find((preset) => preset.id === id);
-          return item ? `<li>${item.id}: ${prettyName(item.name)}</li>` : '';
+          return item ? `${item.id}: ${prettyName(item.name)}` : '';
         })
-        .join('') +
-      '</ul>',
+        .filter(Boolean)
+        .join('\n'),
     confirmText: 'Delete',
     confirmColor: 'error',
   });
diff --git a/ui/app/pages/task_definitions.vue b/ui/app/pages/task_definitions.vue
index 9c5419b9..98506614 100644
--- a/ui/app/pages/task_definitions.vue
+++ b/ui/app/pages/task_definitions.vue
@@ -793,15 +793,16 @@ const deleteSelected = async (): Promise<void> => {
 
   const { status } = await confirmDialog({
     title: 'Delete Selected Task Definitions',
-    rawHTML:
-      `Delete <strong class="text-red-500">${selectedIds.value.length}</strong> task definition/s?<ul>` +
+    message:
+      `Delete ${selectedIds.value.length} task definition/s?` +
+      '\n\n' +
       selectedIds.value
         .map((id) => {
           const item = filteredDefinitions.value.find((definition) => definition.id === id);
-          return item ? `<li>${item.id}: ${item.name || '(Unnamed definition)'}</li>` : '';
+          return item ? `${item.id}: ${item.name || '(Unnamed definition)'}` : '';
         })
-        .join('') +
-      '</ul>',
+        .filter(Boolean)
+        .join('\n'),
     confirmText: 'Delete',
     confirmColor: 'error',
   });
diff --git a/ui/app/pages/tasks.vue b/ui/app/pages/tasks.vue
index d9959b21..989c7fa1 100644
--- a/ui/app/pages/tasks.vue
+++ b/ui/app/pages/tasks.vue
@@ -1000,15 +1000,16 @@ const deleteSelected = async () => {
 
   const { status } = await confirmDialog({
     title: 'Delete Selected Tasks',
-    rawHTML:
-      `Delete <strong class="text-red-500">${selectedElms.value.length}</strong> task/s?<ul>` +
+    message:
+      `Delete ${selectedElms.value.length} task/s?` +
+      '\n\n' +
       selectedElms.value
         .map((id) => {
           const item = tasks.value.find((task) => task.id === id);
-          return item ? `<li>${item.id}: ${item.name}</li>` : '';
+          return item ? `${item.id}: ${item.name}` : '';
         })
-        .join('') +
-      '</ul>',
+        .filter(Boolean)
+        .join('\n'),
     confirmText: 'Delete',
     confirmColor: 'error',
   });
@@ -1151,15 +1152,16 @@ const runSelected = async () => {
   }
 
   const { status } = await confirmDialog({
-    rawHTML:
-      'Run the following tasks?<ul>' +
+    message:
+      'Run the following tasks?' +
+      '\n\n' +
       selectedElms.value
         .map((id) => {
           const item = tasks.value.find((task) => task.id === id);
-          return item ? `<li>${item.name}</li>` : '';
+          return item ? item.name : '';
         })
-        .join('') +
-      '</ul>',
+        .filter(Boolean)
+        .join('\n'),
   });
 
   if (true !== status) {
@@ -1346,24 +1348,13 @@ const generateMeta = async (item: Task) => {
 
   try {
     const { status } = await confirmDialog({
-      rawHTML: `
-      <p>
-        Generate '${item.name}' metadata? you will be notified when it is done.
-      </p>
-      <p>
-        <b>This action will generate:</b>
-        <ul>
-          <li><strong>tvshow.nfo</strong> - for media center compatibility</li>
-          <li><strong>title [id].info.json</strong> - yt-dlp metadata file</li>
-          <li>
-          <strong>Thumbnails</strong>: poster.jpg, fanart.jpg, thumb.jpg, banner.jpg, icon.jpg, landscape.jpg
-          <u>if they are available</u>.
-          </li>
-        </ul>
-      </p>
-      <p class="text-red-500">
-          <span>Warning</span>: This will overwrite existing metadata files if they exist.
-      </p>`,
+      message:
+        `Generate '${item.name}' metadata? You will be notified when it is done.` +
+        '\n\nThis action will generate:' +
+        '\n- tvshow.nfo - for media center compatibility' +
+        '\n- title [id].info.json - yt-dlp metadata file' +
+        '\n- Thumbnails: poster.jpg, fanart.jpg, thumb.jpg, banner.jpg, icon.jpg, landscape.jpg if they are available.' +
+        '\n\nWarning: This will overwrite existing metadata files if they exist.',
     });
 
     if (true !== status) {