some terminal related quality improvements (#1449)

Author: bajrangCoder

src/components/terminal/terminal.js

@@ -128,7 +128,7 @@ export default class TerminalComponent {
 		let lastKnownScrollPosition = 0;
 		let isResizing = false;
 		let resizeCount = 0;
-		const RESIZE_DEBOUNCE = 150;
+		const RESIZE_DEBOUNCE = 100;
 		const MAX_RAPID_RESIZES = 3;
 
 		// Store original dimensions for comparison
@@ -170,8 +170,37 @@ export default class TerminalComponent {
 						await this.resizeTerminal(size.cols, size.rows);
 					}
 
-					// Preserve scroll position for content-heavy terminals
-					this.preserveViewportPosition(lastKnownScrollPosition);
+					// Handle keyboard resize cursor positioning
+					const heightRatio = size.rows / originalRows;
+					if (
+						heightRatio < 0.75 &&
+						this.terminal.buffer &&
+						this.terminal.buffer.active
+					) {
+						// Keyboard resize detected - ensure cursor is visible
+						const buffer = this.terminal.buffer.active;
+						const cursorY = buffer.cursorY;
+						const cursorViewportPos = buffer.baseY + cursorY;
+						const viewportTop = buffer.viewportY;
+						const viewportBottom = viewportTop + this.terminal.rows - 1;
+
+						if (
+							cursorViewportPos <= viewportTop + 1 ||
+							cursorViewportPos >= viewportBottom - 1
+						) {
+							const targetScroll = Math.max(
+								0,
+								Math.min(
+									buffer.length - this.terminal.rows,
+									cursorViewportPos - Math.floor(this.terminal.rows * 0.25),
+								),
+							);
+							this.terminal.scrollToLine(targetScroll);
+						}
+					} else {
+						// Regular resize - preserve scroll position
+						this.preserveViewportPosition(lastKnownScrollPosition);
+					}
 
 					// Update stored dimensions
 					originalRows = size.rows;
@@ -437,7 +466,6 @@ export default class TerminalComponent {
       height: 100%;
       position: relative;
       background: ${this.options.theme.background};
-      border-radius: 4px;
       overflow: hidden;
     `;
 
@@ -455,6 +483,9 @@ export default class TerminalComponent {
 
 		this.container = container;
 
+		// Apply terminal background color to container to match theme
+		this.container.style.background = this.options.theme.background;
+
 		try {
 			try {
 				this.terminal.loadAddon(this.webglAddon);
@@ -675,6 +706,32 @@ export default class TerminalComponent {
 	 * Focus terminal
 	 */
 	focus() {
+		// Ensure cursor is visible before focusing to prevent half-visibility
+		if (this.terminal.buffer && this.terminal.buffer.active) {
+			const buffer = this.terminal.buffer.active;
+			const cursorY = buffer.cursorY;
+			const cursorViewportPos = buffer.baseY + cursorY;
+			const viewportTop = buffer.viewportY;
+			const viewportBottom = viewportTop + this.terminal.rows - 1;
+
+			// Check if cursor is fully visible (with margin to prevent half-visibility)
+			const isCursorFullyVisible =
+				cursorViewportPos >= viewportTop + 1 &&
+				cursorViewportPos <= viewportBottom - 2;
+
+			// If cursor is not fully visible, scroll to make it properly visible
+			if (!isCursorFullyVisible && buffer.length > this.terminal.rows) {
+				const targetScroll = Math.max(
+					0,
+					Math.min(
+						buffer.length - this.terminal.rows,
+						cursorViewportPos - Math.floor(this.terminal.rows * 0.25),
+					),
+				);
+				this.terminal.scrollToLine(targetScroll);
+			}
+		}
+
 		this.terminal.focus();
 	}
 

src/components/terminal/terminalTouchSelection.js

@@ -240,6 +240,11 @@ export default class TerminalTouchSelection {
 			return;
 		}
 
+		// Check if touch is near screen edge (likely Android back gesture)
+		if (this.isEdgeGesture(touch)) {
+			return;
+		}
+
 		// Clear any existing tap-hold timeout
 		if (this.tapHoldTimeout) {
 			clearTimeout(this.tapHoldTimeout);
@@ -269,6 +274,21 @@ export default class TerminalTouchSelection {
 		const touch = event.touches[0];
 		const deltaX = Math.abs(touch.clientX - this.touchStartPos.x);
 		const deltaY = Math.abs(touch.clientY - this.touchStartPos.y);
+		const horizontalDelta = touch.clientX - this.touchStartPos.x;
+
+		// Check if this looks like a back gesture (started near edge and moving horizontally inward)
+		if (
+			this.isEdgeGesture(this.initialTouchPos) &&
+			Math.abs(horizontalDelta) > deltaY &&
+			deltaX > this.options.moveThreshold
+		) {
+			// This looks like a back gesture, cancel selection
+			if (this.tapHoldTimeout) {
+				clearTimeout(this.tapHoldTimeout);
+				this.tapHoldTimeout = null;
+			}
+			return;
+		}
 
 		// If significant movement, cancel tap-hold
 		if (
@@ -1141,6 +1161,26 @@ export default class TerminalTouchSelection {
 		return Math.sqrt(dx * dx + dy * dy);
 	}
 
+	/**
+	 * Check if touch is likely an Android back gesture (starts near screen edge)
+	 */
+	isEdgeGesture(touch) {
+		const edgeThreshold = 30; // pixels from screen edge
+		const screenWidth = window.innerWidth;
+
+		// Check if touch starts near left edge (most common for back gesture)
+		if (touch.clientX <= edgeThreshold) {
+			return true;
+		}
+
+		// Check if touch starts near right edge (for RTL languages or right-handed back gesture)
+		if (touch.clientX >= screenWidth - edgeThreshold) {
+			return true;
+		}
+
+		return false;
+	}
+
 	destroy() {
 		// Clear selection
 		this.forceClearSelection();

src/settings/terminalSettings.js

@@ -372,6 +372,11 @@ async function updateActiveTerminals(key, value) {
 				case "theme":
 					tab.terminalComponent.terminal.options.theme =
 						TerminalThemeManager.getTheme(value);
+					// Update container background to match new theme
+					if (tab.terminalComponent.container) {
+						tab.terminalComponent.container.style.background =
+							tab.terminalComponent.terminal.options.theme.background;
+					}
 					break;
 				case "imageSupport":
 					tab.terminalComponent.updateImageSupport(value);