Show confirmation modal when deleting from settings

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "cmdr",
 	"name": "Commander",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"minAppVersion": "0.12.0",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"author": "jsmorabito & phibr0",

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cmdr",
-	"version": "0.0.4",
+	"version": "0.0.5",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"main": "main.js",
 	"scripts": {

src/styles.scss

@@ -47,10 +47,6 @@
 	svg {
 		width: 100%;
 	}
-
-	> .cmdr-icon-wrapper {
-		width: 196px;
-	}
 }
 
 .cmdr-add-new-wrapper {

src/ui/components/commandViewerComponent.tsx

@@ -8,6 +8,7 @@ import { arrayMoveMutable } from "array-move";
 import { useEffect, useRef } from "preact/hooks";
 import { setIcon } from "obsidian";
 import ChooseIconModal from "../chooseIconModal";
+import ConfirmDeleteModal from "../confirmDeleteModal";
 
 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 export const ManagerContext = createContext<CommandManager>(null!);
@@ -32,7 +33,11 @@ export default function CommandViewer({ manager, plugin }: CommandViewerProps):
 					return <CommandComponent
 						key={cmd.id}
 						pair={cmd}
-						handleRemove={async (): Promise<void> => { await manager.removeCommand(cmd); this.forceUpdate(); }}
+						handleRemove={async (): Promise<void> => {
+							if (!plugin.settings.confirmDeletion || await new ConfirmDeleteModal(plugin).didChooseRemove()) {
+								await manager.removeCommand(cmd); this.forceUpdate();
+							}
+						}}
 						handleUp={(): void => { arrayMoveMutable(manager.pairs, idx, idx - 1); manager.reorder(); this.forceUpdate(); }}
 						handleDown={(): void => { arrayMoveMutable(manager.pairs, idx, idx + 1); manager.reorder(); this.forceUpdate(); }}
 						handleRename={async (name): Promise<void> => { cmd.name = name; await plugin.saveSettings(); manager.reorder(); this.forceUpdate(); }}