chore: update the xtermjs to v6

- updated the themes with new fields
- added option to turn off the xtermjs scrollabr
- fixed touch related stuff introduced in new version

Author: bajrangCoder

bun.lock

@@ -152,14 +152,14 @@
     "@lezer/highlight": "^1.2.3",
     "@lezer/lr": "^1.4.7",
     "@ungap/custom-elements": "^1.3.0",
-    "@xterm/addon-attach": "^0.11.0",
-    "@xterm/addon-fit": "^0.10.0",
-    "@xterm/addon-image": "^0.8.0",
-    "@xterm/addon-search": "^0.15.0",
-    "@xterm/addon-unicode11": "^0.8.0",
-    "@xterm/addon-web-links": "^0.11.0",
-    "@xterm/addon-webgl": "^0.18.0",
-    "@xterm/xterm": "^5.5.0",
+    "@xterm/addon-attach": "^0.12.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-image": "^0.9.0",
+    "@xterm/addon-search": "^0.16.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/addon-web-links": "^0.12.0",
+    "@xterm/addon-webgl": "^0.19.0",
+    "@xterm/xterm": "^6.0.0",
     "acorn": "^8.16.0",
     "autosize": "^6.0.1",
     "codemirror": "^6.0.2",

package-lock.json

@@ -557,6 +557,10 @@ export default class TerminalComponent {
 		try {
 			// Open first to ensure a stable renderer is attached
 			this.terminal.open(container);
+			this.updateBackgroundColor();
+			this.updateScrollbarVisibility(
+				getTerminalSettings().showScrollbar !== false,
+			);
 
 			// Renderer selection: 'canvas' (default core), 'webgl', or 'auto'
 			if (
@@ -983,6 +987,29 @@ export default class TerminalComponent {
 		}
 		this.options.theme = { ...this.options.theme, ...theme };
 		this.terminal.options.theme = this.options.theme;
+		this.updateBackgroundColor();
+	}
+
+	/** Keep xterm's viewport chrome aligned with the active theme. */
+	updateBackgroundColor() {
+		const background = this.terminal?.options.theme?.background;
+		if (!background) return;
+
+		if (this.container) this.container.style.background = background;
+		if (this.terminal?.element) {
+			this.terminal.element.style.backgroundColor = background;
+		}
+	}
+
+	/**
+	 * Toggle xterm.js 6's custom scrollbar without disabling scroll APIs.
+	 * @param {boolean} visible Whether the scrollbar should be shown
+	 */
+	updateScrollbarVisibility(visible) {
+		this.terminal?.element?.classList.toggle(
+			"terminal-scrollbar-hidden",
+			visible === false,
+		);
 	}
 
 	/**

package.json

@@ -8,6 +8,7 @@ export const DEFAULT_TERMINAL_SETTINGS = {
 	cursorStyle: "block",
 	cursorInactiveStyle: "outline",
 	scrollback: 1000,
+	showScrollbar: true,
 	theme: "dark",
 	tabStopWidth: 4,
 	convertEol: true,

src/components/terminal/terminal.js

@@ -1005,9 +1005,18 @@ class TerminalManager {
 				touch-action: none;
 			}
 
-			.terminal-content .xterm-viewport {
+			.terminal-content .xterm-viewport,
+			.terminal-content .xterm-scrollable-element {
+				background-color: transparent !important;
 				overscroll-behavior: none;
 			}
+
+			.terminal-content
+				.terminal-scrollbar-hidden
+				.xterm-scrollable-element
+				> .scrollbar.vertical {
+				display: none !important;
+			}
 		`;
 	}