feat: add editor and UI zoom commands (#2058)

Author: bajrangCoder

src/cm/commandRegistry.js

@@ -503,17 +503,31 @@ function registerCoreCommands() {
 			return true;
 		},
 	});
+	addCommand({
+		name: "increaseUiZoom",
+		description: "Increase UI zoom",
+		readOnly: true,
+		requiresView: false,
+		run: () => adjustUiZoom(10),
+	});
+	addCommand({
+		name: "decreaseUiZoom",
+		description: "Decrease UI zoom",
+		readOnly: true,
+		requiresView: false,
+		run: () => adjustUiZoom(-10),
+	});
 	addCommand({
 		name: "increaseFontSize",
-		description: "Increase font size",
-		readOnly: false,
+		description: "Increase editor font size",
+		readOnly: true,
 		requiresView: false,
 		run: () => adjustFontSize(1),
 	});
 	addCommand({
 		name: "decreaseFontSize",
-		description: "Decrease font size",
-		readOnly: false,
+		description: "Decrease editor font size",
+		readOnly: true,
 		requiresView: false,
 		run: () => adjustFontSize(-1),
 	});
@@ -1307,12 +1321,20 @@ async function openInAppBrowserCommand() {
 function adjustFontSize(delta) {
 	const current = settings?.value?.fontSize || "12px";
 	const numeric = Number.parseInt(current, 10) || 12;
-	const next = Math.max(1, numeric + delta);
+	const next = Math.min(72, Math.max(6, numeric + delta));
 	settings.value.fontSize = `${next}px`;
 	settings.update(false);
 	return true;
 }
 
+function adjustUiZoom(delta) {
+	const current = Number(settings?.value?.uiZoom) || 100;
+	const next = Math.min(160, Math.max(70, current + delta));
+	settings.value.uiZoom = next;
+	settings.update(false);
+	return true;
+}
+
 function parseKeyString(keyString) {
 	if (!keyString) return [];
 	return String(keyString)
@@ -1356,10 +1378,12 @@ function buildResolvedKeyBindingsSnapshot() {
 
 function toCodeMirrorKey(combo) {
 	if (!combo) return null;
-	const parts = combo
-		.split("-")
-		.map((part) => part.trim())
-		.filter(Boolean);
+	const parts = combo.endsWith("-")
+		? [...combo.slice(0, -1).split("-").filter(Boolean), "-"]
+		: combo
+				.split("-")
+				.map((part) => part.trim())
+				.filter(Boolean);
 	const modifiers = [];
 	let key = null;
 

src/components/terminal/terminal.js

@@ -12,6 +12,7 @@ import { WebLinksAddon } from "@xterm/addon-web-links";
 import { WebglAddon } from "@xterm/addon-webgl";
 import { Terminal as Xterm } from "@xterm/xterm";
 import {
+	executeCommand,
 	getResolvedKeyBindings,
 	getResolvedKeyBindingsVersion,
 } from "cm/commandRegistry";
@@ -347,7 +348,7 @@ export default class TerminalComponent {
 
 		const parsedBindings = [];
 
-		Object.values(getResolvedKeyBindings()).forEach((binding) => {
+		Object.entries(getResolvedKeyBindings()).forEach(([name, binding]) => {
 			if (!binding.key) return;
 
 			// Skip editor-only keybindings in terminal
@@ -357,8 +358,11 @@ export default class TerminalComponent {
 			const keys = binding.key.split("|");
 
 			keys.forEach((keyCombo) => {
-				const parts = keyCombo.split("-");
+				const parts = keyCombo.endsWith("-")
+					? [...keyCombo.slice(0, -1).split("-").filter(Boolean), "-"]
+					: keyCombo.split("-");
 				const parsed = {
+					name,
 					ctrl: false,
 					shift: false,
 					alt: false,
@@ -414,62 +418,54 @@ export default class TerminalComponent {
 				return false;
 			}
 
-			// Check for Ctrl+= or Ctrl++ (increase font size)
-			if (event.ctrlKey && (event.key === "+" || event.key === "=")) {
+			// Keep terminal font zoom local. Shift variants are handled by app keybindings below.
+			if (
+				event.ctrlKey &&
+				!event.shiftKey &&
+				!event.altKey &&
+				!event.metaKey &&
+				(event.key === "+" || event.key === "=")
+			) {
 				event.preventDefault();
 				this.increaseFontSize();
 				return false;
 			}
 
-			// Check for Ctrl+- (decrease font size)
-			if (event.ctrlKey && event.key === "-") {
+			if (
+				event.ctrlKey &&
+				!event.shiftKey &&
+				!event.altKey &&
+				!event.metaKey &&
+				event.key === "-"
+			) {
 				event.preventDefault();
 				this.decreaseFontSize();
 				return false;
 			}
 
-			// Only intercept specific app-wide keybindings, let terminal handle the rest
 			if (event.ctrlKey || event.altKey || event.metaKey) {
-				// Skip modifier-only keys
 				if (["Control", "Alt", "Meta", "Shift"].includes(event.key)) {
 					return true;
 				}
 
-				// Get parsed app keybindings
 				const appKeybindings = this.parseAppKeybindings();
-
-				// Check if this is an app-specific keybinding
-				const isAppKeybinding = appKeybindings.some(
+				const eventKey = event.key === "_" ? "-" : event.key.toLowerCase();
+				const binding = appKeybindings.find(
 					(binding) =>
 						binding.ctrl === event.ctrlKey &&
 						binding.shift === event.shiftKey &&
 						binding.alt === event.altKey &&
 						binding.meta === event.metaKey &&
-						binding.key === event.key.toLowerCase(),
+						binding.key === eventKey,
 				);
 
-				if (isAppKeybinding) {
-					const appEvent = new KeyboardEvent("keydown", {
-						key: event.key,
-						ctrlKey: event.ctrlKey,
-						shiftKey: event.shiftKey,
-						altKey: event.altKey,
-						metaKey: event.metaKey,
-						bubbles: true,
-						cancelable: true,
-					});
-
-					// Dispatch to document so it gets picked up by the app's keyboard handler
-					document.dispatchEvent(appEvent);
-
-					// Return false to prevent terminal from processing this key
+				if (binding && executeCommand(binding.name)) {
 					return false;
 				}
-
-				// For all other modifier combinations, let the terminal handle them
-				return true;
 			}
 
+			if (event.ctrlKey || event.altKey || event.metaKey) return true;
+
 			// Return true to allow normal processing for other keys
 			return true;
 		});

src/lang/ar-ye.json

@@ -723,5 +723,7 @@
 	"close tabs to left": "Close Left",
 	"close other tabs": "Close Others",
 	"auto close tags": "Auto close tags",
-	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files.",
+	"ui zoom": "UI zoom",
+	"settings-info-app-ui-zoom": "Scale text across the Acode interface."
 }

src/lang/be-by.json

@@ -725,5 +725,7 @@
 	"close tabs to left": "Close Left",
 	"close other tabs": "Close Others",
 	"auto close tags": "Auto close tags",
-	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files.",
+	"ui zoom": "UI zoom",
+	"settings-info-app-ui-zoom": "Scale text across the Acode interface."
 }

src/lang/bn-bd.json

@@ -724,5 +724,7 @@
 	"close tabs to left": "Close Left",
 	"close other tabs": "Close Others",
 	"auto close tags": "Auto close tags",
-	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files.",
+	"ui zoom": "UI zoom",
+	"settings-info-app-ui-zoom": "Scale text across the Acode interface."
 }

src/lang/cs-cz.json

@@ -724,5 +724,7 @@
 	"close tabs to left": "Close Left",
 	"close other tabs": "Close Others",
 	"auto close tags": "Auto close tags",
-	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files.",
+	"ui zoom": "UI zoom",
+	"settings-info-app-ui-zoom": "Scale text across the Acode interface."
 }

src/lang/de-de.json

@@ -724,5 +724,7 @@
 	"close tabs to left": "Close Left",
 	"close other tabs": "Close Others",
 	"auto close tags": "Auto close tags",
-	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files.",
+	"ui zoom": "UI zoom",
+	"settings-info-app-ui-zoom": "Scale text across the Acode interface."
 }

src/lang/en-us.json

@@ -88,6 +88,7 @@
 	"tab size": "Tab size",
 	"text wrap": "Text wrap / Word wrap",
 	"theme": "Theme",
+	"ui zoom": "UI zoom",
 	"unable to delete file": "unable to delete file",
 	"unable to open file": "Sorry, unable to open file",
 	"unable to open folder": "Sorry, unable to open folder",
@@ -650,6 +651,7 @@
 	"settings-info-app-side-buttons": "Show extra action buttons beside the editor.",
 	"settings-info-app-sponsor-sidebar": "Show the sponsor entry in the sidebar.",
 	"settings-info-app-touch-move-threshold": "Minimum movement before a touch drag is detected.",
+	"settings-info-app-ui-zoom": "Scale text across the Acode interface.",
 	"settings-info-app-vibrate-on-tap": "Enable haptic feedback for taps and controls.",
 	"settings-info-editor-autosave": "Save changes automatically after a delay.",
 	"settings-info-editor-color-preview": "Preview color values inline in the editor.",

src/lang/es-sv.json

@@ -724,5 +724,7 @@
 	"close tabs to left": "Close Left",
 	"close other tabs": "Close Others",
 	"auto close tags": "Auto close tags",
-	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files.",
+	"ui zoom": "UI zoom",
+	"settings-info-app-ui-zoom": "Scale text across the Acode interface."
 }

src/lang/fr-fr.json

@@ -724,5 +724,7 @@
 	"close tabs to left": "Close Left",
 	"close other tabs": "Close Others",
 	"auto close tags": "Auto close tags",
-	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files."
+	"settings-info-editor-auto-close-tags": "Automatically insert closing tags in HTML, XML, Vue, Angular, and PHP template files.",
+	"ui zoom": "UI zoom",
+	"settings-info-app-ui-zoom": "Scale text across the Acode interface."
 }