terminal/Terminal: work around xterm cursor style issue

Since updating to Blueprintjs 5.x we can get aliasing artifacts on the
cursor due to bad rendering of box-shadow. This overrides it with
border instead.

xtermjs/xterm.js#4580

src/terminal/Terminal.tsx

@@ -244,7 +244,7 @@ const Terminal: React.FunctionComponent = () => {
             </audio>
             <div className="pb-terminal-bell-overlay" ref={bellOverlayRef} />
             <ResizeSensor targetRef={terminalRef} onResize={(): void => fitAddon.fit()}>
-                <div ref={terminalRef} className="h-100 pb-focus-managed" />
+                <div ref={terminalRef} className="h-100" />
             </ResizeSensor>
         </ContextMenu>
     );

src/terminal/terminal.scss

@@ -1,5 +1,5 @@
 // SPDX-License-Identifier: MIT
-// Copyright (c) 2022 The Pybricks Authors
+// Copyright (c) 2022-2023 The Pybricks Authors
 
 @use '@blueprintjs/core/lib/scss/variables' as bp;
 
@@ -17,3 +17,25 @@
         transition: linear 100ms;
     }
 }
+
+// HACK: work around https://github.com/xtermjs/xterm.js/issues/4580
+.xterm-dom-renderer-owner-1 .xterm-rows .xterm-cursor.xterm-cursor-underline {
+    animation: pb-terminal-cursor 1s step-end infinite !important;
+    box-shadow: none !important;
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    border-bottom: 1px;
+    border-style: solid;
+    border-color: black;
+
+    .#{bp.$ns}-dark & {
+        border-color: white;
+    }
+}
+
+@keyframes pb-terminal-cursor {
+    50% {
+        border-style: hidden;
+    }
+}