feat(desktop): Change Terminal's Cursor to Bar and Stop Blinking when not focused (#7402)

1 files changed, 16 insertions, 0 deletions

diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx
index 0faca0a23..770202f26 100644
--- a/packages/app/src/components/terminal.tsx
+++ b/packages/app/src/components/terminal.tsx
@@ -45,6 +45,8 @@ export const Terminal = (props: TerminalProps) => {
   let serializeAddon: SerializeAddon
   let fitAddon: FitAddon
   let handleResize: () => void
+  let handleTextareaFocus: () => void
+  let handleTextareaBlur: () => void
   let reconnect: number | undefined
   let disposed = false
 
@@ -105,6 +107,7 @@ export const Terminal = (props: TerminalProps) => {
 
     const t = new mod.Terminal({
       cursorBlink: true,
+      cursorStyle: "bar",
       fontSize: 14,
       fontFamily: "IBM Plex Mono, monospace",
       allowTransparency: true,
@@ -170,6 +173,17 @@ export const Terminal = (props: TerminalProps) => {
 
     t.open(container)
     container.addEventListener("pointerdown", handlePointerDown)
+
+    handleTextareaFocus = () => {
+      t.options.cursorBlink = true
+    }
+    handleTextareaBlur = () => {
+      t.options.cursorBlink = false
+    }
+
+    t.textarea?.addEventListener("focus", handleTextareaFocus)
+    t.textarea?.addEventListener("blur", handleTextareaBlur)
+
     focusTerminal()
 
     if (local.pty.buffer) {
@@ -242,6 +256,8 @@ export const Terminal = (props: TerminalProps) => {
       window.removeEventListener("resize", handleResize)
     }
     container.removeEventListener("pointerdown", handlePointerDown)
+    term?.textarea?.removeEventListener("focus", handleTextareaFocus)
+    term?.textarea?.removeEventListener("blur", handleTextareaBlur)
 
     const t = term
     if (serializeAddon && props.onCleanup && t) {