use static font files, checkpoint on focus-indicator for lines

src/main.tsx

@@ -359,6 +359,7 @@ class LineCmd extends React.Component<{sw : ScreenWindow, line : LineType, width
         let lineNumStr = (line.linenumtemp ? "~" : "") + String(line.linenum);
         return (
             <div className={cn("line", "line-cmd", {"focus": isFocused})} id={"line-" + getLineId(line)} ref={this.lineRef} style={{position: "relative"}} data-lineid={line.lineid} data-windowid={line.windowid} data-cmdid={line.cmdid}>
+                <div className="focus-indicator"/>
                 <div className="line-header">
                     <div className={cn("avatar", "num-"+lineNumStr.length, "status-" + status, {"ephemeral": line.ephemeral})} onClick={this.doRefresh}>
                         {lineNumStr}

src/model.ts

@@ -17,7 +17,7 @@ const MinTermCols = 10;
 const MaxTermCols = 1024;
 
 function widthToCols(width : number) : number {
-    let cols = Math.trunc((width - 25) / DefaultCellWidth) - 1;
+    let cols = Math.trunc((width - 32) / DefaultCellWidth) - 1;
     cols = boundInt(cols, MinTermCols, MaxTermCols);
     return cols;
 }

src/sh2.less

@@ -30,6 +30,33 @@
 
 @soft-blue: #729fcf;
 
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 200;
+  src: local(''),
+       url('../static/fonts/jetbrains-mono-v13-latin-200.woff2') format('woff2'),
+       url('../static/fonts/jetbrains-mono-v13-latin-200.woff') format('woff');
+}
+/* jetbrains-mono-regular - latin */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: local(''),
+       url('../static/fonts/jetbrains-mono-v13-latin-regular.woff2') format('woff2'),
+       url('../static/fonts/jetbrains-mono-v13-latin-regular.woff') format('woff');
+}
+/* jetbrains-mono-700 - latin */
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 700;
+  src: local(''),
+       url('../static/fonts/jetbrains-mono-v13-latin-700.woff2') format('woff2'),
+       url('../static/fonts/jetbrains-mono-v13-latin-700.woff') format('woff');
+}
+
 .mono-font(@size: inherit, @weight: inherit) {
     font-family: 'JetBrains Mono', monospace;
     font-size: @size;
@@ -449,8 +476,8 @@ html, body, #main {
 }
 
 .line {
-    padding: 10px 5px 5px 5px;
     margin: 0px 5px 5px 5px;
+    padding: 10px 5px 5px 12px;
     display: flex;
     line-height: 1.25;
     border-top: 1px solid #777;
@@ -460,10 +487,31 @@ html, body, #main {
 
     &:nth-child(2) {
         margin: 0px 5px 5px 5px;
-        padding: 0px 5px 5px 5px;
+        padding: 0px 5px 5px 12px;
         border-top: none;
     }
 
+    .focus-indicator {
+        position: absolute;
+        display: none;
+        width: 5px;
+        border-radius: 3px;
+        height: calc(100% - 20px);
+        top: 10px;
+        left: 0;
+        z-index: 10;
+
+        &.selected {
+            display: block;
+            background-color: #666;
+        }
+
+        &.active, &.active.selected {
+            display: block;
+            background-color: @tab-blue;
+        }
+    }
+
     .avatar {
         height: 38px;
         width: 38px;
@@ -743,7 +791,7 @@ body .xterm .xterm-viewport {
             top: 5px;
             left: 20px;
             background-color: black;
-            .mono-font(12px, 600);
+            .mono-font(12px, 700);
             color: @soft-blue;
             padding-bottom: 4px;
             display: flex;
@@ -829,7 +877,7 @@ body .xterm .xterm-viewport {
         }
 
         .info-title {
-            .mono-font(14px, 600);
+            .mono-font(14px, 700);
             color: @soft-blue;
             padding-bottom: 2px;
         }
@@ -858,7 +906,7 @@ body .xterm .xterm-viewport {
         }
 
         .info-error {
-            .mono-font(14px, 600);
+            .mono-font(14px, 700);
             color: @term-red;
             padding-bottom: 2px;
         }
@@ -975,7 +1023,7 @@ input[type=checkbox] {
 }
 
 .text-button {
-    .mono-font(12px, 600);
+    .mono-font(12px, 700);
     color: @term-white;
     cursor: pointer;
     background-color: #171717;
@@ -1204,7 +1252,7 @@ input[type=checkbox] {
 }
 
 .monofont-bold {
-    .mono-font(inherit, 600);
+    .mono-font(inherit, 700);
 }
 
 .sc-modal {

static/index.html

@@ -2,13 +2,10 @@
 <html>
   <head>
     <base href="../">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <script src="dist/sh2-dev.js"></script>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.2/css/bulma.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-switch@2.0.4/dist/css/bulma-switch.min.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
-    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;400;600&display=swap" rel="stylesheet">
     <link rel="stylesheet" href="static/xterm.css" />
     <link rel="stylesheet" href="dist/sh2.css" />
   </head>