From b83e10af6abf05deb74532d6d1942cbfe43ba99d Mon Sep 17 00:00:00 2001
From: johnny1093 <46250921+jsmorabito@users.noreply.github.com>
Date: Sat, 11 Jul 2026 09:43:10 -0400
Subject: [PATCH] fix: remove this.forceUpdate() calls that always throw

CommandViewer, MacroViewer, and MobileModifyComponent are all plain
function components (not classes), so `this` inside their handlers
is undefined - this.forceUpdate() has never been able to succeed
since the plugin's first release, it just throws before Preact ever
gets a chance to visually update in place. The actual state mutation
and settings.save() on each of these handlers already happens before
the throwing line, so removing it doesn't change what the UI shows;
it removes a guaranteed, silently-swallowed error on every add/
remove/reorder/rename/recolor action.

Also drops mobileModifyComponent's cmdr-icon-changed listener, whose
only job was calling the broken forceUpdate.

Given this changes real code paths, worth a manual pass: add/remove/
reorder/rename commands and macros from the settings tab, and check
the mobile icon-picker modal, to confirm nothing regresses now that
the throw is gone.
---
 src/ui/components/MacroViewer.tsx            |  2 --
 src/ui/components/commandViewerComponent.tsx |  7 -------
 src/ui/components/mobileModifyComponent.tsx  | 11 +----------
 3 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/src/ui/components/MacroViewer.tsx b/src/ui/components/MacroViewer.tsx
index bf7d265..7bf0ecd 100644
--- a/src/ui/components/MacroViewer.tsx
+++ b/src/ui/components/MacroViewer.tsx
@@ -25,7 +25,6 @@ export default function MacroViewer({
 			);
 
 			plugin.saveSettings();
-			this.forceUpdate();
 			updateMacroCommands(plugin);
 			modal.close();
 		};
@@ -36,7 +35,6 @@ export default function MacroViewer({
 	const handleDelete = (idx: number): void => {
 		macros.splice(idx, 1);
 		plugin.saveSettings();
-		this.forceUpdate();
 		updateMacroCommands(plugin);
 	};
 
diff --git a/src/ui/components/commandViewerComponent.tsx b/src/ui/components/commandViewerComponent.tsx
index 0863792..3c234b6 100644
--- a/src/ui/components/commandViewerComponent.tsx
+++ b/src/ui/components/commandViewerComponent.tsx
@@ -47,7 +47,6 @@ export default function CommandViewer({
 											).didChooseRemove())
 										) {
 											await manager.removeCommand(cmd);
-											this.forceUpdate();
 										}
 									}}
 									handleUp={(): void => {
@@ -57,7 +56,6 @@ export default function CommandViewer({
 											idx - 1
 										);
 										manager.reorder();
-										this.forceUpdate();
 									}}
 									handleDown={(): void => {
 										arrayMoveMutable(
@@ -66,7 +64,6 @@ export default function CommandViewer({
 											idx + 1
 										);
 										manager.reorder();
-										this.forceUpdate();
 									}}
 									handleRename={async (
 										name
@@ -74,7 +71,6 @@ export default function CommandViewer({
 										cmd.name = name;
 										await plugin.saveSettings();
 										manager.reorder();
-										this.forceUpdate();
 									}}
 									handleNewIcon={async (): Promise<void> => {
 										const newIcon =
@@ -85,7 +81,6 @@ export default function CommandViewer({
 											cmd.icon = newIcon;
 											await plugin.saveSettings();
 											manager.reorder();
-											this.forceUpdate();
 										}
 										dispatchEvent(
 											new Event("cmdr-icon-changed")
@@ -110,7 +105,6 @@ export default function CommandViewer({
 											mode || modes[currentIdx + 1];
 										await plugin.saveSettings();
 										manager.reorder();
-										this.forceUpdate();
 									}}
 									handleColorChange={async (
 										color?: string
@@ -147,7 +141,6 @@ export default function CommandViewer({
 							const pair = await chooseNewCommand(plugin);
 							await manager.addCommand(pair);
 							manager.reorder();
-							this.forceUpdate();
 						}}
 					>
 						{t("Add command")}
diff --git a/src/ui/components/mobileModifyComponent.tsx b/src/ui/components/mobileModifyComponent.tsx
index 0d61d2c..68f8e36 100644
--- a/src/ui/components/mobileModifyComponent.tsx
+++ b/src/ui/components/mobileModifyComponent.tsx
@@ -1,5 +1,4 @@
 import { h } from "preact";
-import { useEffect } from "preact/hooks";
 import t from "src/l10n";
 import { ObsidianIcon } from "src/util";
 import MobileModifyModal from "../mobileModifyModal";
@@ -7,20 +6,12 @@ import { ColorPicker } from "./ColorPicker";
 import CommanderPlugin from "src/main";
 
 export default function MobileModifyComponent({
-	plugin,	
+	plugin,
 	modal: controller,
 }: {
 	plugin: CommanderPlugin;
 	modal: MobileModifyModal;
 }): h.JSX.Element {
-	useEffect(() => {
-		const update = (): void => {
-			this.forceUpdate();
-		};
-		addEventListener("cmdr-icon-changed", update);
-		return (): void => removeEventListener("cmdr-icon-changed", update);
-	}, []);
-
 	return (
 		<div className="cmdr-mobile-modify-grid">
 			<div