Mass Deleter: Show blog name in confirm modal

src/content_scripts/modals.css

@@ -142,3 +142,27 @@
 #xkit-modal .buttons :is(a, button, input).blue {
   background-color: rgb(var(--blue));
 }
+
+.xkit-modal-tag,
+.xkit-modal-blog {
+  display: inline-block;
+
+  font-size: 1rem;
+  line-height: 1.5;
+}
+
+.xkit-modal-tag {
+  padding: 0 0.5em;
+  border-radius: 1em;
+  margin: 0.25rem 0;
+
+  background-color: rgb(var(--deprecated-accent));
+  color: rgb(var(--navy));
+}
+
+.xkit-modal-blog {
+  font-weight: 700;
+}
+
+.xkit-modal-tag::before { content: '#'; }
+.xkit-modal-blog::before { content: '@'; }

src/features/mass_deleter.js

@@ -1,6 +1,6 @@
 import { dom } from '../utils/dom.js';
 import { megaEdit } from '../utils/mega_editor.js';
-import { modalCancelButton, modalCompleteButton, showErrorModal, showModal } from '../utils/modals.js';
+import { createBlogSpan, modalCancelButton, modalCompleteButton, showErrorModal, showModal } from '../utils/modals.js';
 import { addSidebarItem, removeSidebarItem } from '../utils/sidebar.js';
 import { apiFetch } from '../utils/tumblr_helpers.js';
 
@@ -56,7 +56,7 @@ const confirmDeleteDrafts = event => {
 
   showModal({
     title: 'Delete drafts?',
-    message: ['Every draft on this blog dated before ', beforeElement, ' will be deleted.'],
+    message: ['Every draft on ', createBlogSpan(blogName), ' dated before ', beforeElement, ' will be deleted.'],
     buttons: [
       modalCancelButton,
       dom(
@@ -146,19 +146,23 @@ const showNoDraftsError = () => showModal({
   buttons: [modalCompleteButton]
 });
 
-const showClearQueuePrompt = () => showModal({
-  title: 'Clear your queue?',
-  message: [
-    'All posts in this blog\'s queue will be deleted.\n',
-    'Scheduled posts will not be affected.'
-  ],
-  buttons: [
-    modalCancelButton,
-    dom('button', { class: 'red' }, { click: () => clearQueue().catch(showErrorModal) }, ['Clear it!'])
-  ]
-});
+const showClearQueuePrompt = () => {
+  const blogName = location.pathname.split('/')[2];
+
+  showModal({
+    title: 'Clear your queue?',
+    message: [
+      'All posts in ', createBlogSpan(blogName), '\'s queue will be deleted.\n',
+      'Scheduled posts will not be affected.'
+    ],
+    buttons: [
+      modalCancelButton,
+      dom('button', { class: 'red' }, { click: () => clearQueue({ blogName }).catch(showErrorModal) }, ['Clear it!'])
+    ]
+  });
+};
 
-const clearQueue = async function () {
+const clearQueue = async function ({ blogName }) {
   const foundPostsElement = dom('span', null, null, ['Gathering queued posts...']);
   const deleteCountElement = dom('span');
 
@@ -174,7 +178,6 @@ const clearQueue = async function () {
   });
 
   const queuedPosts = [];
-  const blogName = location.pathname.split('/')[2];
   let resource = `/v2/blog/${blogName}/posts/queue?limit=50`;
 
   while (resource) {

src/features/mass_privater.js

@@ -1,15 +1,13 @@
 import { dom } from '../utils/dom.js';
 import { megaEdit } from '../utils/mega_editor.js';
-import { showModal, modalCancelButton, modalCompleteButton, hideModal, showErrorModal } from '../utils/modals.js';
+import { showModal, modalCancelButton, modalCompleteButton, hideModal, showErrorModal, createTagSpan, createBlogSpan } from '../utils/modals.js';
 import { addSidebarItem, removeSidebarItem } from '../utils/sidebar.js';
 import { apiFetch } from '../utils/tumblr_helpers.js';
 import { userBlogs } from '../utils/user.js';
 
 const getPostsFormId = 'xkit-mass-privater-get-posts';
 
 const createBlogOption = ({ name, title, uuid }) => dom('option', { value: uuid, title }, null, [name]);
-const createTagSpan = tag => dom('span', { class: 'mass-privater-tag' }, null, [tag]);
-const createBlogSpan = name => dom('span', { class: 'mass-privater-blog' }, null, [name]);
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 const dateTimeFormat = new Intl.DateTimeFormat(document.documentElement.lang, {
@@ -280,4 +278,3 @@ const sidebarOptions = {
 
 export const main = async () => addSidebarItem(sidebarOptions);
 export const clean = async () => removeSidebarItem(sidebarOptions.id);
-export const stylesheet = true;

src/features/tag_replacer.js

@@ -1,15 +1,13 @@
 import { dom } from '../utils/dom.js';
 import { megaEdit } from '../utils/mega_editor.js';
-import { showModal, modalCancelButton, modalCompleteButton, showErrorModal } from '../utils/modals.js';
+import { showModal, modalCancelButton, modalCompleteButton, showErrorModal, createTagSpan, createBlogSpan } from '../utils/modals.js';
 import { addSidebarItem, removeSidebarItem } from '../utils/sidebar.js';
 import { apiFetch } from '../utils/tumblr_helpers.js';
 import { userBlogs } from '../utils/user.js';
 
 const getPostsFormId = 'xkit-tag-replacer-get-posts';
 
 const createBlogOption = ({ name, title, uuid }) => dom('option', { value: uuid, title }, null, [name]);
-const createTagSpan = tag => dom('span', { class: 'tag-replacer-tag' }, null, [tag]);
-const createBlogSpan = name => dom('span', { class: 'tag-replacer-blog' }, null, [name]);
 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
 
 const showInitialPrompt = async () => {
@@ -207,4 +205,3 @@ const sidebarOptions = {
 
 export const main = async () => addSidebarItem(sidebarOptions);
 export const clean = async () => removeSidebarItem(sidebarOptions.id);
-export const stylesheet = true;

src/utils/modals.js

@@ -59,3 +59,6 @@ export const showErrorModal = exception => {
     buttons: [modalCompleteButton]
   });
 };
+
+export const createTagSpan = tag => dom('span', { class: 'xkit-modal-tag' }, null, [tag]);
+export const createBlogSpan = name => dom('span', { class: 'xkit-modal-blog' }, null, [name]);