feat: add command to change app and editor theme from command palette (#1197)

* fix: Palette not opening when called from existing palette

The palette wasn't opening when triggered from an already open palette.

* feat: Add command to change editor and app theme via command palette

- Added functionality to change editor and app themes directly from the command palette.
- Improved user experience for keyboard-centric users by allowing theme changes without visiting the theme settings.
- Included visual indication for the currently selected theme

Author: bajrangCoder

src/ace/commands.js

@@ -325,6 +325,22 @@ const commands = [
 		},
 		readOnly: true,
 	},
+	{
+		name: "changeAppTheme",
+		description: "Change App Theme",
+		exec() {
+			acode.exec("change-app-theme");
+		},
+		readOnly: true,
+	},
+	{
+		name: "changeEditorTheme",
+		description: "Change Editor Theme",
+		exec() {
+			acode.exec("change-editor-theme");
+		},
+		readOnly: true,
+	},
 ];
 
 export function setCommands(editor) {

src/components/palette/index.js

@@ -45,9 +45,18 @@ This shows that using keyboardHideStart event is faster than not using it.
  * @param {()=>string} onsSelectCb Callback to call when a hint is selected
  * @param {string} placeholder Placeholder for input
  * @param {function} onremove Callback to call when palette is removed
+ * @param {function} onHighlight Callback to call when hint is highlighted
  * @returns {void}
  */
-export default function palette(getList, onsSelectCb, placeholder, onremove) {
+export default function palette(
+	getList,
+	onsSelectCb,
+	placeholder,
+	onremove,
+	onHighlight,
+) {
+	let isRemoving = false;
+
 	/**@type {HTMLInputElement} */
 	const $input = (
 		<input
@@ -63,16 +72,16 @@ export default function palette(getList, onsSelectCb, placeholder, onremove) {
 	const $palette = <div id="palette">{$input}</div>;
 
 	// Create a palette with input and hints
-	inputhints($input, generateHints, onSelect);
+	inputhints($input, generateHints, onSelect, onHighlight);
 
 	// Removes the darkened color from status bar and navigation bar
 	restoreTheme(true);
 
 	// Remove palette when input is blurred
-	$input.addEventListener("blur", remove);
+	$input.addEventListener("blur", handleBlur);
 	// Don't wait for input to blur when keyboard hides, remove is
 	// as soon as keyboard starts to hide
-	keyboardHandler.on("keyboardHideStart", remove);
+	keyboardHandler.on("keyboardHideStart", handleKeyboardHide);
 
 	// Add to DOM
 	app.append($palette, $mask);
@@ -91,8 +100,23 @@ export default function palette(getList, onsSelectCb, placeholder, onremove) {
 	 * @param {string} value
 	 */
 	function onSelect(value) {
-		onsSelectCb(value);
+		isRemoving = true;
 		remove();
+		setTimeout(() => {
+			onsSelectCb(value);
+		}, 0);
+	}
+
+	function handleBlur() {
+		if (!isRemoving) {
+			remove();
+		}
+	}
+
+	function handleKeyboardHide() {
+		if (!isRemoving) {
+			remove();
+		}
 	}
 
 	/**
@@ -119,9 +143,12 @@ export default function palette(getList, onsSelectCb, placeholder, onremove) {
 	 * Removes the palette
 	 */
 	function remove() {
+		if (isRemoving) return;
+		isRemoving = true;
+
 		actionStack.remove("palette");
-		keyboardHandler.off("keyboardHideStart", remove);
-		$input.removeEventListener("blur", remove);
+		keyboardHandler.off("keyboardHideStart", handleKeyboardHide);
+		$input.removeEventListener("blur", handleBlur);
 
 		restoreTheme();
 		$palette.remove();
@@ -133,12 +160,8 @@ export default function palette(getList, onsSelectCb, placeholder, onremove) {
 		}
 
 		const { activeFile, editor } = editorManager;
-		if (activeFile.wasFocused) {
+		if (activeFile?.wasFocused) {
 			editor.focus();
 		}
-
-		remove = () => {
-			window.log("warn", "Palette already removed.");
-		};
 	}
 }

src/lib/commands.js

@@ -11,6 +11,7 @@ import plugins from "pages/plugins";
 import Problems from "pages/problems/problems";
 import changeEncoding from "palettes/changeEncoding";
 import changeMode from "palettes/changeMode";
+import changeTheme from "palettes/changeTheme";
 import commandPalette from "palettes/commandPalette";
 import findFile from "palettes/findFile";
 import browser from "plugins/browser";
@@ -281,6 +282,12 @@ export default {
 	syntax() {
 		changeMode();
 	},
+	"change-app-theme"() {
+		changeTheme("app");
+	},
+	"change-editor-theme"() {
+		changeTheme("editor");
+	},
 	"toggle-fullscreen"() {
 		app.classList.toggle("fullscreen-mode");
 		this["resize-editor"]();

src/palettes/changeTheme/index.js

@@ -0,0 +1,81 @@
+import "./style.scss";
+import palette from "components/palette";
+import appSettings from "lib/settings";
+import themes from "theme/list";
+
+export default function changeTheme(type = "editor") {
+	palette(
+		() => generateHints(type),
+		(value) => onselect(value),
+		strings[type === "editor" ? "editor theme" : "app theme"],
+		undefined,
+		(value) => onselect(value),
+	);
+}
+
+function generateHints(type) {
+	if (type === "editor") {
+		const themeList = ace.require("ace/ext/themelist");
+		const currentTheme = appSettings.value.editorTheme;
+		const themePrefix = "ace/theme/";
+
+		return themeList.themes.map((theme) => {
+			const isCurrent =
+				theme.theme ===
+				(currentTheme.startsWith(themePrefix)
+					? currentTheme
+					: themePrefix + currentTheme);
+
+			return {
+				value: JSON.stringify({ type: "editor", theme: theme.theme }),
+				text: `<div class="theme-item">
+										<span>${theme.caption}</span>
+										${isCurrent ? '<span class="current">current</span>' : ""}
+								</div>`,
+			};
+		});
+	}
+
+	// App themes
+	const currentTheme = appSettings.value.appTheme;
+	const availableThemes = themes
+		.list()
+		.filter((theme) => !(theme.version === "paid" && IS_FREE_VERSION));
+
+	return availableThemes.map((theme) => {
+		const isCurrent = theme.id === currentTheme;
+
+		return {
+			value: JSON.stringify({
+				type: "app",
+				theme: theme.id,
+			}),
+			text: `<div class="theme-item">
+								<span>${theme.name}</span>
+								${isCurrent ? '<span class="current">current</span>' : ""}
+						</div>`,
+		};
+	});
+}
+
+function onselect(value) {
+	if (!value) return;
+
+	const selection = JSON.parse(value);
+
+	if (selection.type === "editor") {
+		editorManager.editor.setTheme(selection.theme);
+		appSettings.update(
+			{
+				editorTheme: selection.theme,
+			},
+			false,
+		);
+	} else {
+		if (selection.theme === "custom") {
+			CustomTheme();
+			return;
+		}
+		themes.apply(selection.theme, true);
+	}
+}

src/palettes/changeTheme/style.scss

@@ -0,0 +1,20 @@
+.theme-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px;
+  width: 100%;
+
+  span {
+    font-size: 1rem;
+  }
+
+  .current {
+    color: var(--error-text-color);
+    background-color: var(--primary-color);
+    border-radius: 5px;
+    padding: 2px 6px;
+    font-size: 0.8rem;
+    margin-left: 8px;
+  }
+}