From eaf24746b39c42acc4a4ddf1add1f36bd33bd019 Mon Sep 17 00:00:00 2001
From: Gary Ritchie <gary.t.ritchie@gmail.com>
Date: Wed, 22 Apr 2026 20:17:33 -0600
Subject: [PATCH] Move delete button to the select/deselect row (#50)

* Move "Delete selected" button to select/deselect row

Addresses #48: the warning-red delete button next to the lighter-red
"Update properties" CTA drew the eye toward delete and made update
look inactive. Move delete to the Select all / Deselect all row,
left-justified, with the same styling as the sibling buttons.

* Let selection row span full modal width

The "Delete selected" button was only pushed left within the right
half of the row. Hide the empty .setting-item-info on this row so the
control area spans the modal, letting margin-right: auto put Delete at
the left edge while Select all / Deselect all stay on the right.
---
 src/bulk-edit-modal.ts | 24 ++++++++++--------------
 styles.css             |  8 ++++++++
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/src/bulk-edit-modal.ts b/src/bulk-edit-modal.ts
index 71b2feb..3320bb9 100644
--- a/src/bulk-edit-modal.ts
+++ b/src/bulk-edit-modal.ts
@@ -182,7 +182,14 @@ export class BulkEditModal extends Modal {
 			});
 		}
 
-		new Setting(contentEl)
+		const selectionRow = new Setting(contentEl)
+			.addButton(btn => {
+				btn.setButtonText("Delete selected").onClick(() => {
+					void this.doDelete();
+				});
+				this.deleteBtn = btn.buttonEl;
+				this.deleteBtn.addClass("bulk-properties-delete-btn");
+			})
 			.addButton(btn => {
 				btn.setButtonText("Select all").onClick(() => {
 					void this.bulkSetSelection(true);
@@ -195,6 +202,7 @@ export class BulkEditModal extends Modal {
 				});
 				this.deselectAllBtn = btn.buttonEl;
 			});
+		selectionRow.settingEl.addClass("bulk-properties-selection-row");
 
 		const editableProperties = settings.properties.filter(p => p.name !== settings.selectionProperty);
 		const hasEditableProperties = editableProperties.length > 0;
@@ -249,20 +257,8 @@ export class BulkEditModal extends Modal {
 							updateToggleAriaChecked(toggle, value);
 						});
 				});
-		}
 
-		const footer = new Setting(contentEl)
-			.addButton(btn => {
-				btn
-					.setButtonText("Delete selected notes")
-					.setWarning()
-					.onClick(() => {
-						void this.doDelete();
-					});
-				this.deleteBtn = btn.buttonEl;
-			});
-		if (hasEditableProperties) {
-			footer.addButton(btn => {
+			new Setting(contentEl).addButton(btn => {
 				btn
 					.setButtonText("Update properties")
 					.setCta()
diff --git a/styles.css b/styles.css
index aa3ba7d..a213128 100644
--- a/styles.css
+++ b/styles.css
@@ -43,6 +43,14 @@
 	margin-left: var(--size-4-2);
 }
 
+.bulk-properties-selection-row .setting-item-info {
+	display: none;
+}
+
+.bulk-properties-delete-btn {
+	margin-right: auto;
+}
+
 .bulk-properties-value-container {
 	padding-bottom: var(--size-4-3);
 }