lint: move inline styles to CSS classes

Replaces direct element.style.* assignments with addClass/removeClass
against new dedicated classes in styles.scss:
- menuManager: .cmdr-menu-item for the constant display:flex, and an
  .is-visible modifier on .cmdr-menu-more-options replacing the
  display none/block toggle (same show-on-hover behavior).
- confirmDeleteModal: .cmdr-confirm-delete-modal for the modal's
  z-index.
- chooseCustomNameModal: .cmdr-hide-suggestions and
  .cmdr-name-input-wrapper-parent for the two constant display
  overrides.
- util.tsx's confetti canvas: all seven style properties were static
  (never computed), so they become one .cmdr-confetti-canvas class;
  also switched activeDocument.createElement("canvas") to
  activeDocument.createEl("canvas", { cls }) since it needed a class
  anyway, resolving the prefer-create-el warning on the same line.

Same visual result, just class-driven instead of inline. Worth a
manual check: right-click a command in a context menu (hover reveal
of the "more options" gear), delete a command with confirmation
enabled, use the custom-name modal when adding a command, and trigger
the feedback/donate button confetti in the About tab.

src/manager/commands/menuManager.ts

@@ -40,14 +40,13 @@ abstract class Base extends CommandManagerBase {
 		commandList: CommandIconPair[]
 	): (_item: MenuItem) => void {
 		return (item: MenuItem) => {
-			item.dom.addClass("cmdr");
+			item.dom.addClass("cmdr", "cmdr-menu-item");
 			item.dom.style.color =
 				cmdPair.color === "#000000" || cmdPair.color === undefined
 					? "inherit"
 					: cmdPair.color;
 			item.setSection("cmdr");
 
-			item.dom.style.display = "flex";
 			const optionEl = createDiv({
 				cls: "cmdr-menu-more-options",
 			});
@@ -117,10 +116,10 @@ abstract class Base extends CommandManagerBase {
 
 			let isRemovable = false;
 			const setNormal = (): void => {
-				optionEl.style.display = "none";
+				optionEl.removeClass("is-visible");
 			};
 			const setRemovable = (): void => {
-				optionEl.style.display = "block";
+				optionEl.addClass("is-visible");
 			};
 			const removeMenu = async (): Promise<void> => {
 				item.dom.addClass("cmdr-removing");

src/styles/styles.scss

@@ -45,6 +45,10 @@
 	margin-bottom: -18px;
 }
 
+.cmdr-menu-item {
+	display: flex;
+}
+
 .cmdr-menu-more-options {
 	color: var(--text-muted);
 	position: absolute;
@@ -52,11 +56,37 @@
 	padding-top: 2px;
 	transform: scale(0.9);
 	transition: all 150ms ease;
+	display: none;
+	&.is-visible {
+		display: block;
+	}
 	&:hover {
 		color: var(--text-primary);
 	}
 }
 
+.cmdr-confirm-delete-modal {
+	z-index: 99;
+}
+
+.cmdr-hide-suggestions {
+	display: none;
+}
+
+.cmdr-name-input-wrapper-parent {
+	display: block;
+}
+
+.cmdr-confetti-canvas {
+	position: fixed;
+	width: 100vw;
+	height: 100vh;
+	top: 0;
+	left: 0;
+	pointer-events: none;
+	z-index: 100;
+}
+
 .cmdr-mobile .cmdr-credits {
 	place-content: center;
 }

src/ui/chooseCustomNameModal.ts

@@ -9,7 +9,7 @@ export default class ChooseCustomNameModal extends SuggestModal<string> {
 	) {
 		super(plugin.app);
 		this.setPlaceholder(t("Use a custom name"));
-		this.resultContainerEl.style.display = "none";
+		this.resultContainerEl.addClass("cmdr-hide-suggestions");
 
 		this.setInstructions([
 			{
@@ -34,7 +34,7 @@ export default class ChooseCustomNameModal extends SuggestModal<string> {
 		const wrapper = createDiv({ cls: "cmdr-name-input-wrapper" });
 		this.inputEl.parentNode?.insertBefore(wrapper, this.inputEl);
 		wrapper.appendChild(this.inputEl);
-		wrapper.parentElement!.style.display = "block";
+		wrapper.parentElement!.addClass("cmdr-name-input-wrapper-parent");
 
 		const btn = createEl("button", { text: t("Save"), cls: "mod-cta" });
 		btn.onclick = (e): void => this.selectSuggestion(this.inputEl.value, e);

src/ui/confirmDeleteModal.ts

@@ -13,7 +13,7 @@ export default class ConfirmDeleteModal extends Modal {
 
 	public async onOpen(): Promise<void> {
 		this.titleEl.innerText = t("Remove Command");
-		this.containerEl.style.zIndex = "99";
+		this.containerEl.addClass("cmdr-confirm-delete-modal");
 		render(h(confirmDeleteComponent, { modal: this }), this.contentEl);
 	}
 

src/util.tsx

@@ -97,17 +97,10 @@ export function updateHiderStylesheet(settings: CommanderSettings): void {
 }
 
 export async function showConfetti({ target }: MouseEvent): Promise<void> {
-	const myCanvas = activeDocument.createElement("canvas");
+	const myCanvas = activeDocument.createEl("canvas", {
+		cls: "cmdr-confetti-canvas",
+	});
 	activeDocument.body.appendChild(myCanvas);
-	myCanvas.style.position = "fixed";
-	myCanvas.style.width = "100vw";
-	myCanvas.style.height = "100vh";
-	myCanvas.style.top = "0px";
-	myCanvas.style.left = "0px";
-	//@ts-ignore
-	myCanvas.style["pointer-events"] = "none";
-	//@ts-ignore
-	myCanvas.style["z-index"] = "100";
 
 	const myConfetti = confetti.create(myCanvas, {
 		resize: true,