Empty Command List Redesign

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "cmdr",
 	"name": "Commander",
-	"version": "0.0.5",
+	"version": "0.0.6",
 	"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.5",
+	"version": "0.0.6",
 	"description": "Customize your workspace by adding commands /everywhere/.",
 	"main": "main.js",
 	"scripts": {

src/main.ts

@@ -71,6 +71,7 @@ export default class CommanderPlugin extends Plugin {
 
 	public async saveSettings(): Promise<void> {
 		const data = Object.assign({}, this.settings);
+		// @ts-expect-error: We are assigning the base64 Version of the stringified macro object to the macros attribute
 		data.macros = data.macros.map((obj: Macro) => window.btoa(JSON.stringify(obj)));
 		await this.saveData(data);
 	}

src/manager/menuManager.ts

@@ -26,6 +26,7 @@ abstract class Base extends CommandManager {
 	protected addRemovableCommand(this: (item: MenuItem) => void, command: Command, cmdPair: CommandIconPair, plugin: CommanderPlugin, menu: Menu, commandList: CommandIconPair[]): (item: MenuItem) => void {
 		return (item: MenuItem) => {
 			item.dom.addClass("cmdr");
+			item.setSection("cmdr");
 
 			item.dom.style.display = "flex";
 			const optionEl = createDiv({
@@ -35,7 +36,7 @@ abstract class Base extends CommandManager {
 				event.preventDefault();
 				event.stopImmediatePropagation();
 
-				new Menu(app)
+				new Menu()
 					.addItem(item => {
 						item
 							.setTitle("Change Icon")
@@ -126,6 +127,7 @@ abstract class Base extends CommandManager {
 				item
 					.setTitle("Add command")
 					.setIcon("plus-circle")
+					.setSection("cmdr")
 					.onClick(async () => {
 						try {
 							const pair = await chooseNewCommand(plugin);

src/manager/pageHeaderManager.ts

@@ -54,7 +54,7 @@ export default class PageHeaderManager extends CommandManager {
 		});
 		buttonIcon.addEventListener("contextmenu", (event) => {
 			event.stopImmediatePropagation();
-			new Menu(app)
+			new Menu()
 				.addItem(item => {
 					item
 						.setTitle("Add Command")

src/manager/ribbonManager.ts

@@ -111,7 +111,7 @@ export default class RibbonManager extends CommandManager {
 		});
 		newAction.addEventListener("contextmenu", (event) => {
 			event.stopImmediatePropagation();
-			new Menu(app)
+			new Menu()
 				.addItem(item => {
 					item
 						.setTitle("Add Command")

src/manager/statusBarManager.ts

@@ -35,7 +35,7 @@ export default class StatusBarManager extends CommandManager {
 					return;
 				}
 
-				new Menu(app)
+				new Menu()
 					.addItem(item => {
 						item
 							.setTitle("Add Command")
@@ -112,7 +112,7 @@ export default class StatusBarManager extends CommandManager {
 		});
 		btn.addEventListener("contextmenu", (event) => {
 			event.stopImmediatePropagation();
-			new Menu(app)
+			new Menu()
 				.addItem(item => {
 					item
 						.setTitle("Add Command")

src/manager/titleBarManager.ts

@@ -89,7 +89,7 @@ export default class TitleBarManager extends CommandManager {
 		});
 		btn.addEventListener("contextmenu", (event) => {
 			event.stopImmediatePropagation();
-			new Menu(app)
+			new Menu()
 				.addItem(item => {
 					item
 						.setTitle("Add Command")

src/styles.scss

@@ -41,12 +41,18 @@
 	display: flex;
 	place-items: center;
 	flex-flow: column;
-	margin: 3rem 0px;
+	margin: 2.5rem 0 1.25rem 0;
+
 	place-content: center;
 
 	svg {
 		width: 100%;
 	}
+
+	h3 {
+		margin: 8px 0px;
+		font-weight: 900;
+	}
 }
 
 .cmdr-add-new-wrapper {
@@ -54,6 +60,10 @@
 	margin-top: 12px;
 	display: flex;
 	justify-content: center;
+
+	button {
+		margin: 0;
+	}
 }
 
 .cmdr-adder {
@@ -140,7 +150,7 @@
 			}
 
 			&.cmdr-tab-active {
-				font-weight: bold;
+				font-weight: 900;
 				transform: none;
 			}
 		}

src/ui/components/ChangeableText.tsx

@@ -1,8 +1,9 @@
-import { h } from "preact";
+import { Fragment, h } from "preact";
 import { useState } from "preact/hooks";
 
 interface Props {
 	value: string;
+	// eslint-disable-next-line no-unused-vars
 	handleChange: (e: Event) => void;
 }
 
@@ -10,7 +11,7 @@ export default function ChangeableText({ value, handleChange }: Props): h.JSX.El
 	const [showInputEle, setShowInput] = useState(false);
 
 	return (
-		<span>
+		<Fragment>
 			{
 				showInputEle ? (
 					<input
@@ -29,6 +30,6 @@ export default function ChangeableText({ value, handleChange }: Props): h.JSX.El
 					</span>
 				)
 			}
-		</span>
+		</Fragment>
 	);
 }

src/ui/components/commandViewerComponent.tsx

@@ -5,8 +5,6 @@ import logo from "src/assets/commander-logo.svg";
 import CommandManager from "src/manager/_commandManager";
 import { chooseNewCommand } from "src/util";
 import { arrayMoveMutable } from "array-move";
-import { useEffect, useRef } from "preact/hooks";
-import { setIcon } from "obsidian";
 import ChooseIconModal from "../chooseIconModal";
 import ConfirmDeleteModal from "../confirmDeleteModal";
 
@@ -18,14 +16,6 @@ interface CommandViewerProps {
 	plugin: CommanderPlugin
 }
 export default function CommandViewer({ manager, plugin }: CommandViewerProps): h.JSX.Element {
-
-	const addIcon = useRef<HTMLDivElement>(null);
-
-	useEffect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-		setIcon(addIcon.current!, "plus-circle");
-	});
-
 	return (
 		<Fragment>
 			<ManagerContext.Provider value={manager}>
@@ -57,7 +47,8 @@ export default function CommandViewer({ manager, plugin }: CommandViewerProps):
 					{/* This isn't really dangerous,
 					as the svg is inserted at build time and no other data can be passed to it */}
 					<div class="cmdr-icon-wrapper" dangerouslySetInnerHTML={{ __html: logo }} />
-					<p>No Commands added yet!</p>
+					<h3>No commands here!</h3>
+					<span>Would you like to add one now?</span>
 				</div>}
 
 				<div className="cmdr-add-new-wrapper">
@@ -68,9 +59,8 @@ export default function CommandViewer({ manager, plugin }: CommandViewerProps):
 							await manager.addCommand(pair);
 							this.forceUpdate();
 						}}
-						aria-label="Add new"
 					>
-						<div ref={addIcon} />
+						Add command
 					</button>
 				</div>
 			</ManagerContext.Provider>