Use SVG icons for rule controls and remove extra PNGs

README.md

@@ -77,7 +77,8 @@ Sortana is implemented entirely with standard WebExtension scripts—no custom e
    deleting or archiving a message when it matches. Drag rules to
    reorder them, check *Only apply to unread messages* to skip read mail,
    set optional minimum or maximum message age limits, select the accounts or
- folders a rule should apply to, uncheck *Enabled* to temporarily disable a rule, and
+ folders a rule should apply to. Use the
+  slashed-circle/check button to disable or re-enable a rule, and
   check *Stop after match* to halt further processing. Forward and reply actions
    open a compose window using the account that received the message.
 3. Save your settings. New mail will be evaluated automatically using the

options/options.js

@@ -315,26 +315,67 @@ document.addEventListener('DOMContentLoaded', async () => {
 
             const header = document.createElement('div');
             header.className = 'message-header';
-            header.appendChild(critInput);
+
+            const leftWrap = document.createElement('div');
+            leftWrap.style.display = 'flex';
+            leftWrap.style.alignItems = 'center';
+            leftWrap.style.flexGrow = '1';
+
+            const statusSpan = document.createElement('span');
+            statusSpan.className = 'rule-status has-text-weight-semibold mr-2';
+
+            leftWrap.appendChild(statusSpan);
+            leftWrap.appendChild(critInput);
+            header.appendChild(leftWrap);
+
+            const btnWrap = document.createElement('div');
+            btnWrap.style.display = 'flex';
+            btnWrap.style.gap = '0.25em';
+
+            let enabled = rule.enabled !== false;
+
+            const toggleBtn = document.createElement('button');
+            toggleBtn.type = 'button';
+            toggleBtn.className = 'button is-small rule-toggle';
+            const toggleIcon = document.createElement('img');
+            toggleIcon.width = 16;
+            toggleIcon.height = 16;
+            toggleBtn.appendChild(toggleIcon);
 
             const delBtn = document.createElement('button');
-            delBtn.className = 'delete';
+            delBtn.type = 'button';
-            delBtn.setAttribute('aria-label', 'delete');
+            delBtn.className = 'button is-small is-danger is-light rule-delete';
+            const delIcon = document.createElement('img');
+            delIcon.src = browser.runtime.getURL('resources/svg/trash.svg');
+            delIcon.width = 16;
+            delIcon.height = 16;
+            delBtn.appendChild(delIcon);
+
+            function updateToggle() {
+                toggleIcon.src = browser.runtime.getURL(
+                    `resources/svg/${enabled ? 'circleslash' : 'check'}.svg`
+                );
+                statusSpan.textContent = enabled ? '' : '(Disabled)';
+                article.dataset.enabled = String(enabled);
+            }
+
+            toggleBtn.addEventListener('click', () => {
+                enabled = !enabled;
+                markDirty();
+                updateToggle();
+            });
+
             delBtn.addEventListener('click', () => {
                 article.remove();
                 ruleCountEl.textContent = rulesContainer.querySelectorAll('.rule').length;
+                markDirty();
             });
-            header.appendChild(delBtn);
 
-            const enabledLabel = document.createElement('label');
+            btnWrap.appendChild(toggleBtn);
-            enabledLabel.className = 'checkbox ml-2';
+            btnWrap.appendChild(delBtn);
-            const enabledCheck = document.createElement('input');
+            header.appendChild(btnWrap);
-            enabledCheck.type = 'checkbox';
+
-            enabledCheck.className = 'rule-enabled';
+            updateToggle();
-            enabledCheck.checked = rule.enabled !== false;
-            enabledLabel.appendChild(enabledCheck);
-            enabledLabel.append(' Enabled');
-            header.appendChild(enabledLabel);
 
             const actionsContainer = document.createElement('div');
             actionsContainer.className = 'rule-actions mb-2';
@@ -479,7 +520,7 @@ document.addEventListener('DOMContentLoaded', async () => {
             });
             const stopProcessing = ruleEl.querySelector('.stop-processing')?.checked;
             const unreadOnly = ruleEl.querySelector('.unread-only')?.checked;
-            const enabled = ruleEl.querySelector('.rule-enabled')?.checked !== false;
+            const enabled = ruleEl.dataset.enabled !== 'false';
             const minAgeDays = parseFloat(ruleEl.querySelector('.min-age')?.value);
             const maxAgeDays = parseFloat(ruleEl.querySelector('.max-age')?.value);
             const accounts = [...(ruleEl.querySelector('.account-select')?.selectedOptions || [])].map(o => o.value);
@@ -657,7 +698,7 @@ document.addEventListener('DOMContentLoaded', async () => {
             });
             const stopProcessing = ruleEl.querySelector('.stop-processing')?.checked;
             const unreadOnly = ruleEl.querySelector('.unread-only')?.checked;
-            const enabled = ruleEl.querySelector('.rule-enabled')?.checked !== false;
+            const enabled = ruleEl.dataset.enabled !== 'false';
             const minAgeDays = parseFloat(ruleEl.querySelector('.min-age')?.value);
             const maxAgeDays = parseFloat(ruleEl.querySelector('.max-age')?.value);
             const accounts = [...(ruleEl.querySelector('.account-select')?.selectedOptions || [])].map(o => o.value);

resources/svg/circleslash.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" data-attribution="cc0-icons" viewBox="0 0 24 24">
+  <path d="M12 21c4.97 0 9-4.03 9-9S16.97 3 12 3 3 7.03 3 12s4.03 9 9 9Z"/>
+  <path d="M5.5 5.5 18.5 18.5"/>
+</svg>