Handle removed commands in the settings

locale/de.json

@@ -62,5 +62,6 @@
 	"Donate": "Spenden",
 	"Share feedback, issues, and ideas with our feedback form.": "Teile Feedback, Probleme und Ideen mit unserem Feedback Formular!",
 	"Consider donating to support development.": "Spende um die Entwicklung zu unterstützen.",
-	"Save": "Speichern"
+	"Save": "Speichern",
+	"This Command is not available on this device.": "Dieser Befehl ist auf diesem Gerät nicht verfügbar."
 }

locale/en.json

@@ -62,5 +62,6 @@
 	"Donate": "Donate",
 	"Share feedback, issues, and ideas with our feedback form.": "Share feedback, issues, and ideas with our feedback form.",
 	"Consider donating to support development.": "Consider donating to support development.",
-	"Save": "Save"
+	"Save": "Save",
+	"This Command is not available on this device.": "This Command is not available on this device."
 }

manifest.json

@@ -1,8 +1,8 @@
 {
 	"id": "cmdr",
 	"name": "Commander",
-	"version": "0.0.17",
-	"minAppVersion": "0.12.0",
+	"version": "0.0.18",
+	"minAppVersion": "0.15.0",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"author": "jsmorabito & phibr0",
 	"authorUrl": "https://github.com/phibr0",

package.json

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

src/manager/commands/menuManager.ts

@@ -147,16 +147,14 @@ export class EditorMenuCommandManager extends Base {
 
 	public applyEditorMenuCommands(plugin: CommanderPlugin) {
 		return async (menu: Menu, editor: Editor, view: MarkdownView): Promise<void> => {
-			this.addCommandAddButton(plugin, menu, plugin.settings.editorMenu);
+			//this.addCommandAddButton(plugin, menu, plugin.settings.editorMenu);
 
 			for (const cmdPair of plugin.settings.editorMenu) {
 				const command = getCommandFromId(cmdPair.id);
 
 				//Command has been removed
-				if (command === null) {
-					plugin.settings.editorMenu.remove(cmdPair);
-					await plugin.saveSettings();
-					return;
+				if (!command) {
+					continue;
 				}
 				//Use the check callbacks accordingly
 				if ((command.checkCallback && !command.checkCallback(true))
@@ -182,9 +180,7 @@ export class FileMenuCommandManager extends Base {
 
 				//Command has been removed
 				if (!command) {
-					plugin.settings.editorMenu.remove(cmdPair);
-					await plugin.saveSettings();
-					return;
+					continue;
 				}
 
 				//Check for all checkedCallbacks

src/manager/commands/pageHeaderManager.ts

@@ -137,6 +137,9 @@ export default class PageHeaderManager extends CommandManagerBase {
 	private addButtonsToLeaf(leaf: WorkspaceLeaf): void {
 		const viewActions =
 			leaf.containerEl.getElementsByClassName('view-actions')[0];
+
+		if (!viewActions) return;
+
 		for (const pair of this.pairs) {
 			if (!viewActions.getElementsByClassName(
 				`view-action cmdr-page-header ${pair.id}`

src/styles.scss

@@ -38,7 +38,7 @@
 
 .cmdr-menu-more-options {
 	position: absolute;
-	right: 10px;
+	right: 0;
 	padding-top: 2px;
 }
 
@@ -205,7 +205,7 @@
 .cmdr-setting-header {
 	margin-bottom: 24px;
 	overflow-y: hidden;
-	overflow-x: overlay;
+	overflow-x: auto;
 
 	.cmdr-setting-tab-group {
 		display: flex;
@@ -345,3 +345,7 @@
 		margin: 0;
 	}
 }
+
+.cmdr-icon.clickable-icon.mod-warning {
+	cursor: default;
+}

src/ui/components/commandComponent.tsx

@@ -1,4 +1,4 @@
-import { Platform } from "obsidian";
+import { Notice, Platform } from "obsidian";
 import { Fragment, h } from "preact";
 import t from "src/l10n";
 import { CommandIconPair } from "src/types";
@@ -30,7 +30,50 @@ export default function CommandComponent({
 	const cmd = getCommandFromId(pair.id);
 	if (!cmd) {
 		// !TODO
-		return <Fragment>Command removed (todo)</Fragment>;
+		return <Fragment>
+			{Platform.isDesktop && <div className="setting-item mod-toggle">
+				<ObsidianIcon icon="alert-triangle" size={20} className="cmdr-icon clickable-icon mod-warning" />
+				<div className="setting-item-info">
+					<div className="setting-item-name">
+						{pair.name}
+					</div>
+					<div className="setting-item-description">
+						{t("This Command is not available on this device.")}
+					</div>
+				</div>
+				<div className="setting-item-control">
+					<button
+						className="mod-warning"
+						style="display: flex"
+						onClick={handleRemove}
+						aria-label={t("Delete")}
+					>
+						<ObsidianIcon icon="lucide-trash" />
+					</button>
+				</div>
+			</div>}
+			{Platform.isMobile && <div className="mobile-option-setting-item" onClick={(): void => { new Notice(t("This Command is not available on this device.")); }}>
+				<span
+					className="mobile-option-setting-item-remove-icon"
+					onClick={handleRemove}
+				>
+					<ObsidianIcon
+						icon="minus-with-circle"
+						size={22}
+						style={{ color: "var(--text-error)" }}
+					/>
+				</span>
+				<span className="mobile-option-setting-item-option-icon mod-warning">
+					<ObsidianIcon
+						icon={"alert-triangle"}
+						size={22}
+					/>
+				</span>
+				<span className="mobile-option-setting-item-name">
+					{pair.name}
+				</span>
+			</div>}
+		</Fragment>;
 	}
 	const owningPluginID = cmd.id.split(":").first();
 	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion