feat: inline delete prompt in remove dialog (#7000)

Co-authored-by: Yat Ho <lagoho7@gmail.com>

web/src/action-manager.js

@@ -31,7 +31,10 @@ export class ActionManager extends EventTarget {
         enabled: false,
         text: 'Ask tracker for more peers',
       },
-      'remove-selected-torrents': { enabled: false, text: 'Remove from list…' },
+      'remove-selected-torrents': {
+        enabled: false,
+        text: 'Remove selected torrents',
+      },
       'resume-selected-torrents': {
         enabled: false,
         shortcut: 'R',
@@ -79,10 +82,6 @@ export class ActionManager extends EventTarget {
       'start-all-torrents': { enabled: false, text: 'Start all' },
       'toggle-compact-rows': { enabled: true, text: 'Compact rows' },
       'toggle-contrast': { enabled: true, text: 'High contrast UI' },
-      'trash-selected-torrents': {
-        enabled: false,
-        text: 'Trash data and remove from list…',
-      },
       'verify-selected-torrents': {
         enabled: false,
         shortcut: 'V',
@@ -199,7 +198,6 @@ export class ActionManager extends EventTarget {
       'show-inspector',
       'show-labels-dialog',
       'show-move-dialog',
-      'trash-selected-torrents',
       'verify-selected-torrents',
     ]);
 

web/src/context-menu.js

@@ -169,7 +169,6 @@ export class ContextMenu extends EventTarget {
       ),
       new_separator(),
       new_item('remove-selected-torrents', true),
-      new_item('trash-selected-torrents', true),
       new_separator(),
       new_item('verify-selected-torrents'),
       new_item('show-move-dialog'),

web/src/remove-dialog.js

@@ -9,8 +9,9 @@ export class RemoveDialog extends EventTarget {
   constructor(options) {
     super();
 
-    // options: remote, torrents, trash
+    // options: remote, torrents
     this.options = options;
+    this.options.trash = false;
     this.elements = RemoveDialog._create(options);
     this.elements.dismiss.addEventListener('click', () => this._onDismiss());
     this.elements.confirm.addEventListener('click', () => this._onConfirm());
@@ -43,38 +44,50 @@ export class RemoveDialog extends EventTarget {
   }
 
   static _create(options) {
-    const { trash } = options;
-    const { heading, message } = RemoveDialog._createMessage(options);
-
+    const { torrents } = options;
     const elements = createDialogContainer('remove-dialog');
-    elements.heading.textContent = heading;
-    elements.message.textContent = message;
-    elements.confirm.textContent = trash ? 'Trash' : 'Remove';
-    return elements;
-  }
+    const { confirm, heading, message, workarea } = elements;
 
-  static _createMessage(options) {
-    let heading = null;
-    let message = null;
-    const { torrents, trash } = options;
-    const [torrent] = torrents;
-    if (trash && torrents.length === 1) {
-      heading = `Remove ${torrent.getName()} and delete data?`;
-      message =
+    heading.textContent =
+      torrents.length === 1
+        ? `Remove ${torrents[0].getName()}?`
+        : `Remove ${torrents.length} transfers?`;
+
+    const check = document.createElement('input');
+    check.id = 'delete-local-data-check';
+    check.type = 'checkbox';
+    check.checked = false;
+    message.append(check);
+
+    const label = document.createElement('label');
+    label.id = 'delete-local-data-label';
+    label.setAttribute('for', check.id);
+    label.textContent = 'Delete downloaded data';
+    message.append(label);
+
+    const body = document.createElement('div');
+    const rewrite = (checked) => {
+      if (checked && torrents.length === 1) {
+        body.textContent =
           'All data downloaded for this torrent will be deleted. Are you sure you want to remove it?';
-    } else if (trash) {
-      heading = `Remove ${torrents.length} transfers and delete data?`;
-      message =
+      } else if (checked) {
+        body.textContent =
           'All data downloaded for these torrents will be deleted. Are you sure you want to remove them?';
       } else if (torrents.length === 1) {
-      heading = `Remove ${torrent.getName()}?`;
-      message =
+        body.textContent =
           'Once removed, continuing the transfer will require the torrent file. Are you sure you want to remove it?';
       } else {
-      heading = `Remove ${torrents.length} transfers?`;
-      message =
+        body.textContent =
           'Once removed, continuing the transfers will require the torrent files. Are you sure you want to remove them?';
       }
-    return { heading, message };
+      confirm.textContent = checked ? 'Delete' : 'Remove';
+    };
+    rewrite(check.checked);
+    check.addEventListener('click', () => {
+      options.trash = check.checked;
+      rewrite(check.checked);
+    });
+    workarea.append(body);
+    return elements;
   }
 }

web/src/transmission.js

@@ -145,7 +145,7 @@ export class Transmission extends EventTarget {
           this._reannounceTorrents(this.getSelectedTorrents());
           break;
         case 'remove-selected-torrents':
-          this._removeSelectedTorrents(false);
+          this._removeSelectedTorrents();
           break;
         case 'resume-selected-torrents':
           this._startSelectedTorrents(false);
@@ -209,9 +209,6 @@ export class Transmission extends EventTarget {
               ? Prefs.DisplayFull
               : Prefs.DisplayCompact;
           break;
-        case 'trash-selected-torrents':
-          this._removeSelectedTorrents(true);
-          break;
         case 'verify-selected-torrents':
           this._verifyTorrents(this.getSelectedTorrents());
           break;
@@ -928,12 +925,10 @@ TODO: fix this when notifications get fixed
     }
   }
 
-  _removeSelectedTorrents(trash) {
+  _removeSelectedTorrents() {
     const torrents = this.getSelectedTorrents();
     if (torrents.length > 0) {
-      this.setCurrentPopup(
-        new RemoveDialog({ remote: this.remote, torrents, trash }),
-      );
+      this.setCurrentPopup(new RemoveDialog({ remote: this.remote, torrents }));
     }
   }