fix wrong colors

* Fix sidebar middle div max-height calculation

* remove logs

* update bottom div padding

src/app/app.less

@@ -1,4 +1,4 @@
-@import "./common/themes/themes.less";
+@import "@/common/themes/themes.less";
 
 @font-face {
     font-family: "Martian Mono";
@@ -19,7 +19,7 @@ body {
     font-weight: 300;
     line-height: 1.5;
     background: @base-background-transparent;
-    color: @base-color;
+    color: var(--base-color);
 }
 
 body.is-dev {
@@ -33,7 +33,7 @@ textarea {
     font-weight: 300;
     line-height: 1.5;
     background: @base-background;
-    color: @base-color;
+    color: var(--base-color);
 }
 
 // typography
@@ -103,7 +103,7 @@ body code {
 }
 
 svg.icon {
-    fill: @base-color;
+    fill: var(--base-color);
     width: 100%;
     height: 100%;
     display: inline-block;

src/app/app.tsx

@@ -20,6 +20,9 @@ import { MainSideBar } from "./sidebar/sidebar";
 import { DisconnectedModal, ClientStopModal } from "./common/modals";
 import { ModalsProvider } from "./common/modals/provider";
 import { ErrorBoundary } from "./common/error/errorboundary";
+
+import "@/common/themes/fonts.less";
+import "@/common/themes/themes.less";
 import "./app.less";
 
 dayjs.extend(localizedFormat);

src/app/appconst.ts

@@ -18,7 +18,8 @@ export const ConfirmKey_HideShellPrompt = "hideshellprompt";
 
 export const NoStrPos = -1;
 
-export const RemotePtyRows = 8; // also in main.tsx
+export const RemotePtyRows = 8;
+export const RemotePtyTotalRows = 25;
 export const RemotePtyCols = 80;
 export const ProdServerEndpoint = "http://127.0.0.1:1619";
 export const ProdServerWsEndpoint = "ws://127.0.0.1:1623";

src/app/bookmarks/bookmarks.less

@@ -14,7 +14,7 @@
         svg {
             width: 1.5em;
             height: 1.5em;
-            fill: @base-color;
+            fill: var(--base-color);
         }
     }
 
@@ -31,7 +31,7 @@
     .icon {
         width: 1em;
         height: 1em;
-        fill: @base-color;
+        fill: var(--base-color);
     }
 
     .bookmarks-list {

src/app/common/elements/tooltip.less

@@ -17,7 +17,7 @@
     i {
         display: inline;
         font-size: 13px;
-        fill: @base-color;
+        fill: var(--base-color);
         padding-top: 0.2em;
     }
 }

src/app/common/modals/viewremoteconndetail.tsx

@@ -370,7 +370,11 @@ class ViewRemoteConnDetailModal extends React.Component<{}, {}> {
                                 ref={this.termRef}
                                 data-remoteid={remote.remoteid}
                                 style={{
-                                    height: textmeasure.termHeightFromRows(appconst.RemotePtyRows, termFontSize),
+                                    height: textmeasure.termHeightFromRows(
+                                        appconst.RemotePtyRows,
+                                        termFontSize,
+                                        appconst.RemotePtyTotalRows
+                                    ),
                                     width: termWidth,
                                 }}
                             ></div>

src/app/common/themes/fonts.less

@@ -0,0 +1,9 @@
+:root {
+    --fixed-font: "Martian Mono", sans-serif;
+    --terminal-font: "JetBrains Mono", sans-serif;
+
+    --text-s1-font: "Martian Mono", sans-serif;
+
+    --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji";
+}

src/app/common/themes/themes.less

@@ -77,3 +77,138 @@
 @markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
     "Apple Color Emoji", "Segoe UI Emoji";
 @markdown-highlight: rgb(35, 35, 35);
+
+:root {
+    --base-color: #eceeec;
+
+    // semantic vars based on  --base-color
+    --line-avatar-color: #eceeec;
+    --line-text-color: #f2f4f2;
+    --line-svg-fill: var(--line-text-color);
+    --line-svg-hover-fill: #eceeec;
+    --line-selected-border-color: rgb(193, 195, 193);
+    --line-separator-color: rgb(126, 126, 126);
+    --line-meta-line1-color: rgb(150, 152, 150);
+
+    --base-background: rgba(21, 23, 21, 1);
+
+    // semantic vars based on  --base-background
+    --line-background: rgba(21, 23, 21, 1);
+
+    --base-background-transparent: rgba(21, 23, 21, 0.7);
+    --base-background-dev: rgba(21, 23, 48, 0.7);
+    --base-border: rgba(241, 246, 243, 0.08);
+    --background-session: rgba(13, 13, 13, 0.85);
+    --background-session-components: rgba(48, 49, 48, 0.6);
+    --background-session-components-solid: rgb(33, 34, 33);
+    --wave-green: rgb(88, 193, 66);
+
+    // semantic vars based on  --wave-green
+    --line-status-success-fill: rgb(88, 193, 66);
+
+    --wave-green-faded: rgba(88, 193, 66, 0.4);
+
+    --cmd-input-border-color: rgba(88, 193, 66, 0.8);
+
+    --disabled-background: rgba(76, 81, 75, 1);
+    --disabled-color: #adadad;
+    --disabled-color-faded: rgba(173, 173, 173, 0.6);
+    --scrollbar-background: rgba(21, 23, 21, 1);
+    --scrollbar-thumb-background: rgb(134, 134, 134);
+    --button-background: rgb(38, 38, 38);
+    --button-disabled-background: rgb(30, 29, 29);
+    --success-green: rgb(38, 97, 26);
+    --error-red: #cc0000;
+
+    // semantic vars based on  --error-red
+    --line-base-error-color: #cc0000;
+
+    // semantic vars based on  --error-red
+    --line-status-error-fill: #cc0000;
+
+    --warning-yellow: #ffa500;
+
+    // semantic vars based on  --warning-yellow
+    --line-status-warning-fill: #ffa500;
+
+    --textarea-background: #2a2a2a;
+
+    --text-primary: #fff;
+    --text-secondary: #c3c8c2;
+    --text-caption: #8b918a;
+
+    --status-connected: #46a758;
+    --status-connecting: #f5d90a;
+    --status-error: #e54d2e;
+    --status-disconnected: #c3c8c2;
+
+    --term-black: #000000;
+    --term-red: #cc0000;
+
+    // semantic vars based on  --term-red
+    --line-load-error-text-color: #cc0000;
+
+    --term-green: #4e9a06;
+
+    // semantic vars based on  --term-green
+    --line-active-border-color: rgb(97, 158, 72);
+
+    --term-yellow: #c4a000;
+
+    // semantic vars based on --term-yellow
+    --line-base-yellow-color: #fce94f;
+
+    // semantic vars based on  --term-yellow
+    --line-sidebar-message-text-color: #c4a000;
+
+    --term-blue: #3465a4;
+    --term-cyan: #06989a;
+    --term-white: #d3d7cf;
+
+    // semantic vars based on  --term-white
+    --line-base-white-color: #d3d7cf;
+
+    --term-bright-red: #ef2929;
+    --term-bright-green: #58c142;
+    --term-bright-yellow: #fce94f;
+
+    --term-bright-blue: #32afff;
+    --term-bright-magenta: #ad7fa8;
+    --term-bright-cyan: #34e2e2;
+    --term-bright-white: #ffffff;
+
+    --button-bg-yellow: #e9be68;
+    --button-bg-red: #d06c68;
+
+    --history-error-red: #d06c68;
+
+    --history-selected-error-red: #f79494;
+
+    --tab-red: #e54d2e;
+    --tab-orange: #ef713b;
+    --tab-yellow: #e0b956;
+    --tab-green: #58c142;
+    --tab-mint: #4bffa9;
+    --tab-cyan: #4bdfff;
+    --tab-blue: #3971ff;
+    --tab-violet: #ba76ff;
+    --tab-pink: #e05677;
+    --tab-white: #ffffff;
+
+    --soft-blue: #729fcf;
+
+    // semantic vars based on  --soft-blue
+    --line-base-soft-blue-color: #729fcf;
+    --line-meta-user-color: #89afd7;
+
+    --active-menu-color: rgb(0, 71, 171);
+
+    --fixed-font: "Martian Mono", sans-serif;
+    --terminal-font: "JetBrains Mono", sans-serif;
+
+    --text-s1-font: "Martian Mono", sans-serif;
+
+    --markdown-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji";
+    --markdown-highlight: rgb(35, 35, 35);
+}

src/app/history/history.less

@@ -6,7 +6,7 @@
     .icon {
         width: 1.3em !important;
         height: 1.3em !important;
-        fill: @base-color;
+        fill: var(--base-color);
     }
 
     .history-checkbox {
@@ -51,7 +51,7 @@
         svg {
             width: 1.5em;
             height: 1.5em;
-            fill: @base-color;
+            fill: var(--base-color);
         }
     }
 
@@ -70,7 +70,7 @@
             font-size: 1em;
             padding: 0.5em 1em;
             background-color: @background-session-components;
-            color: @base-color;
+            color: var(--base-color);
         }
     }
 
@@ -99,7 +99,7 @@
                 .label {
                     display: inline;
                     vertical-align: middle;
-                    color: @base-color;
+                    color: var(--base-color);
                 }
                 .icon {
                     vertical-align: middle;
@@ -163,7 +163,7 @@
 
             .reset-button {
                 margin-left: 1em;
-                color: @base-color;
+                color: var(--base-color);
                 line-height: 1.75em;
             }
         }

src/app/line/linecomps.tsx

@@ -388,7 +388,7 @@ class LineCmd extends React.Component<
         let height = 45 + 24; // height of zero height terminal
         const usedRows = screen.getUsedRows(lineutil.getRendererContext(line), line, cmd, width);
         if (usedRows > 0) {
-            height = 48 + 24 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get());
+            height = 48 + 24 + termHeightFromRows(usedRows, GlobalModel.termFontSize.get(), cmd.getTermMaxRows());
         }
         return height;
     }

src/app/line/lines.less

@@ -1,5 +1,3 @@
-@import "@/common/themes/themes.less";
-
 .line.line-text {
     flex-direction: row;
     padding-top: 5px;
@@ -13,7 +11,7 @@
 }
 
 .line .load-error-text {
-    color: @term-red;
+    color: var(--line-load-error-text-color);
     padding-top: 5px;
 }
 
@@ -36,7 +34,7 @@
     }
 
     .sidebar-message {
-        color: @term-yellow;
+        color: var(--line-sidebar-message-text-color);
     }
 
     .line-header {
@@ -84,11 +82,14 @@
     }
 
     .meta.meta-line1 {
-        margin-left: 2px;
-        color: rgba(@base-color, 0.6) !important;
+        color: var(--line-meta-line1-color) !important;
         font-size: 11px;
     }
 
+    .meta.meta-line2 {
+        margin-left: -2px;
+    }
+
     &.has-rtnstate .terminal-wrapper {
         padding-bottom: 0;
     }
@@ -113,11 +114,6 @@
             overflow-x: hidden;
         }
 
-        .terminal {
-            margin-right: 8px;
-            padding: 0.25rem;
-        }
-
         &.cmd-done .terminal .xterm-cursor {
             display: none;
         }
@@ -134,7 +130,7 @@
         position: relative;
 
         .cmd-rtnstate-label {
-            font-family: @terminal-font;
+            font-family: var(--terminal-font);
             position: relative;
             font-size: 10px;
             z-index: 2;
@@ -142,13 +138,13 @@
             padding: 2px 5px 0px 5px;
             display: inline-block;
             font-size: 10px;
-            color: @term-white;
+            color: var(--line-base-white-color);
             background-color: #151715;
         }
 
         .cmd-rtnstate-diff {
-            font-family: @terminal-font;
-            color: @term-white;
+            font-family: var(--terminal-font);
+            color: var(--line-base-white-color);
             white-space: pre;
             margin-left: 10px;
             padding-left: 10px;
@@ -183,16 +179,16 @@
     overflow: hidden;
     flex-shrink: 0;
     position: relative;
-    background: @base-background;
+    background: var(--line-background);
     border: 1px solid transparent;
 
     &.selected {
-        border: 1px solid rgba(@base-color, 0.8) !important;
+        border: 1px solid var(--line-selected-border-color) !important;
         box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
     }
 
     &.active {
-        border: 1px solid rgba(@wave-green, 0.8) !important;
+        border: 1px solid var(--line-active-border-color) !important;
         box-shadow: 0px 0px 0.5px 0px rgba(255, 255, 255, 0.5) inset, 0px 0.5px 0px 0px rgba(255, 255, 255, 0.2) inset;
     }
 
@@ -204,7 +200,7 @@
     &.line-simple {
         font-size: 11px;
         line-height: 1.2;
-        color: rgba(@base-color, 0.6);
+        color: var(--line-text-color);
 
         .simple-line-header {
             display: flex;
@@ -234,19 +230,19 @@
             height: 1em;
             margin: 0 0.5em;
             vertical-align: text-top;
-            fill: @base-color;
+            fill: var(--line-avatar-color);
         }
 
         .success {
-            fill: @wave-green;
+            fill: var(--line-status-success-fill);
         }
 
         .fail {
-            fill: @error-red;
+            fill: var(--line-status-error-fill);
         }
 
         .warning {
-            fill: @warning-yellow;
+            fill: var(--line-status-warning-fill);
         }
     }
 
@@ -277,7 +273,8 @@
         align-items: center;
         justify-content: center;
         font-weight: bold;
-        color: @term-white;
+        // color: @term-white;
+        color: var(--line-avatar-color);
 
         border-radius: 5px;
         position: relative;
@@ -309,30 +306,30 @@
 
         &.status-error {
             .status-icon {
-                color: @error-red;
+                color: var(--line-base-error-color);
             }
         }
 
         &.status-hangup {
             .status-icon {
-                color: @term-yellow;
+                color: var(--line-base-yellow-color);
             }
         }
 
         &.status-running {
-            background-color: @soft-blue;
+            background-color: var(--line-base-soft-blue-color);
         }
 
         &.status-waiting {
-            background-color: @term-yellow;
+            background-color: var(--line-base-yellow-color);
         }
 
         &.status-detached {
-            background-color: @soft-blue;
+            background-color: var(--line-base-soft-blue-color);
             .status-icon {
                 top: 3px;
                 right: 3px;
-                color: @term-white;
+                color: var(--line-base-soft-blue-color);
             }
         }
     }
@@ -355,7 +352,7 @@
         }
 
         .user {
-            color: lighten(@soft-blue, 10%);
+            color: var(--line-meta-user-color);
             font-weight: bold;
             margin-top: 1px;
             margin-right: 10px;
@@ -374,7 +371,7 @@
             svg {
                 width: 1em;
                 margin-right: 0.5em;
-                fill: rgba(@base-color, 0.6);
+                fill: var(--line-meta-line1-color);
             }
         }
 
@@ -388,9 +385,9 @@
             border-radius: 50%;
             line-height: 1em;
             svg {
-                fill: rgba(@base-color, 0.6);
+                fill: var(--line-meta-line1-color);
                 &:hover {
-                    fill: @base-color;
+                    fill: var(--line-svg-hover-fill);
                 }
             }
         }
@@ -419,7 +416,7 @@
         .cmdtext-overflow {
             flex-shrink: 0;
             padding-right: 2px;
-            color: @term-white;
+            color: var(--line-base-white-color);
             cursor: pointer;
 
             margin-top: 4px;
@@ -437,7 +434,7 @@
         .cmdtext-expanded {
             white-space: pre;
 
-            color: @term-white;
+            color: var(--line-base-white-color);
             padding-bottom: 5px;
         }
     }
@@ -455,7 +452,7 @@
 }
 
 .line.line-invalid {
-    color: @term-white;
+    color: var(--line-base-white-color);
     margin-left: 5px;
 }
 
@@ -466,6 +463,7 @@
     padding: 0 0 10px 0;
     flex-grow: 1;
     position: relative;
+    overflow-x: hidden;
 
     &::-webkit-scrollbar-thumb {
         background-color: transparent !important;
@@ -478,7 +476,7 @@
     &:focus,
     &:focus-within {
         &::-webkit-scrollbar-thumb {
-            background-color: @scrollbar-thumb !important;
+            background-color: var(--scrollbar-thumb-background) !important;
         }
     }
 
@@ -494,7 +492,7 @@
         display: flex;
         align-items: center;
         margin-top: 1em;
-        color: rgba(@base-color, 0.5);
+        color: var(--line-separator-color);
     }
 
     .line-sep::before,
@@ -502,7 +500,7 @@
         content: "";
         height: 1px;
         flex-grow: 1;
-        background-color: rgba(@base-color, 0.5);
+        background-color: var(--line-separator-color);
     }
 
     .line-sep::before {

src/app/magiclayout.ts

@@ -18,8 +18,6 @@ let MagicLayout = {
     ScreenMinContentSize: 100,
     ScreenMaxContentSize: 5000,
 
-    // the 3 is for descenders, which get cut off in the terminal without this
-    TermDescendersHeight: 3,
     TermWidthBuffer: 15,
 
     TabWidth: 154,

src/app/pluginsview/pluginsview.less

@@ -23,7 +23,7 @@
             svg {
                 width: 1.5em;
                 height: 1.5em;
-                fill: @base-color;
+                fill: var(--base-color);
             }
         }
     }

src/app/sidebar/sidebar.less

@@ -119,7 +119,6 @@
     }
 
     .middle {
-        max-height: calc(100vh - 32em);
         padding: 4px 6px 8px 6px;
         border-bottom: 1px solid @base-border;
         .item {
@@ -142,9 +141,10 @@
 
     .bottom {
         position: absolute;
-        bottom: 2em;
+        bottom: 2rem;
         left: 0;
         width: 100%;
+        padding-top: 0.8rem;
     }
 
     .item {
@@ -221,7 +221,7 @@
     }
 
     .menu-label {
-        color: @base-color;
+        color: var(--base-color);
     }
 
     .menu-list {

src/app/sidebar/sidebar.tsx

@@ -64,7 +64,7 @@ interface MainSideBarProps {
 
 @mobxReact.observer
 class MainSideBar extends React.Component<MainSideBarProps, {}> {
-    sidebarRef = React.createRef<HTMLDivElement>();
+    middleHeightSubtractor = mobx.observable.box(404);
 
     handleSessionClick(sessionId: string) {
         GlobalCommandRunner.switchSession(sessionId);
@@ -203,14 +203,37 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
         });
     }
 
+    /**
+     * Calculate the subtractor portion for the middle div's height calculation, which should be `100vh - subtractor`.
+     */
+    setMiddleHeightSubtractor() {
+        const windowHeight = window.innerHeight;
+        const bottomHeight = windowHeight - window.document.getElementById("sidebar-bottom")?.offsetTop;
+        const middleTop = document.getElementById("sidebar-middle")?.offsetTop;
+        const newMiddleHeightSubtractor = bottomHeight + middleTop;
+        if (!Number.isNaN(newMiddleHeightSubtractor)) {
+            mobx.action(() => {
+                this.middleHeightSubtractor.set(newMiddleHeightSubtractor);
+            })();
+        }
+    }
+
+    componentDidMount() {
+        this.setMiddleHeightSubtractor();
+    }
+
+    componentDidUpdate() {
+        this.setMiddleHeightSubtractor();
+    }
+
     render() {
-        let clientData = this.props.clientData;
+        const clientData = this.props.clientData;
         let needsUpdate = false;
         if (!clientData?.clientopts.noreleasecheck && !isBlank(clientData?.releaseinfo?.latestversion)) {
             needsUpdate = compareLoose(appconst.VERSION, clientData.releaseinfo.latestversion) < 0;
         }
-        let mainSidebar = GlobalModel.mainSidebarModel;
-        let isCollapsed = mainSidebar.getCollapsed();
+        const mainSidebar = GlobalModel.mainSidebarModel;
+        const isCollapsed = mainSidebar.getCollapsed();
         return (
             <ResizableSidebar
                 className="main-sidebar"
@@ -271,8 +294,16 @@ class MainSideBar extends React.Component<MainSideBarProps, {}> {
                                     </CenteredIcon>,
                                 ]}
                             />
-                            <div className="middle hideScrollbarUntillHover">{this.getSessions()}</div>
-                            <div className="bottom">
+                            <div
+                                className="middle hideScrollbarUntillHover"
+                                id="sidebar-middle"
+                                style={{
+                                    maxHeight: `calc(100vh - ${this.middleHeightSubtractor.get()}px)`,
+                                }}
+                            >
+                                {this.getSessions()}
+                            </div>
+                            <div className="bottom" id="sidebar-bottom">
                                 <If condition={needsUpdate}>
                                     <SideBarItem
                                         key="update-available"

src/app/workspace/cmdinput/cmdinput.less

@@ -91,7 +91,7 @@
             height: 1em;
             margin: 0 0.5em;
             vertical-align: text-top;
-            fill: @base-color;
+            fill: var(--base-color);
         }
 
         .warning {

src/app/workspace/screen/screenview.tsx

@@ -109,6 +109,7 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
             return <div className="screen-view" ref={this.screenViewRef}></div>;
         }
         let fontSize = GlobalModel.termFontSize.get();
+        let dprStr = sprintf("%0.3f", GlobalModel.devicePixelRatio.get());
         let viewOpts = screen.viewOpts.get();
         let hasSidebar = viewOpts?.sidebar?.open;
         let winWidth = "100%";
@@ -145,7 +146,7 @@ class ScreenView extends React.Component<{ session: Session; screen: Screen }, {
         return (
             <div className="screen-view" data-screenid={screen.screenId} ref={this.screenViewRef}>
                 <ScreenWindowView
-                    key={screen.screenId + ":" + fontSize}
+                    key={screen.screenId + ":" + fontSize + ":" + dprStr}
                     session={session}
                     screen={screen}
                     width={winWidth}

src/electron/emain.ts

@@ -177,6 +177,7 @@ function readAuthKey() {
     return authKeyStr.trim();
 }
 const reloadAcceleratorKey = unamePlatform == "darwin" ? "Option+R" : "Super+R";
+let cmdOrAlt = process.platform === "darwin" ? "Cmd" : "Alt";
 let menuTemplate: Electron.MenuItemConstructorOptions[] = [
     {
         role: "appMenu",
@@ -205,9 +206,41 @@ let menuTemplate: Electron.MenuItemConstructorOptions[] = [
             { role: "reload", accelerator: reloadAcceleratorKey },
             { role: "toggleDevTools" },
             { type: "separator" },
-            { role: "resetZoom" },
-            { role: "zoomIn" },
-            { role: "zoomOut" },
+            {
+                label: "Actual Size",
+                accelerator: cmdOrAlt + "+0",
+                click: () => {
+                    if (MainWindow == null) {
+                        return;
+                    }
+                    MainWindow.webContents.setZoomFactor(1);
+                    MainWindow.webContents.send("zoom-changed");
+                },
+            },
+            {
+                label: "Zoom In",
+                accelerator: cmdOrAlt + "+Plus",
+                click: () => {
+                    if (MainWindow == null) {
+                        return;
+                    }
+                    const zoomFactor = MainWindow.webContents.getZoomFactor();
+                    MainWindow.webContents.setZoomFactor(zoomFactor * 1.1);
+                    MainWindow.webContents.send("zoom-changed");
+                },
+            },
+            {
+                label: "Zoom Out",
+                accelerator: cmdOrAlt + "+-",
+                click: () => {
+                    if (MainWindow == null) {
+                        return;
+                    }
+                    const zoomFactor = MainWindow.webContents.getZoomFactor();
+                    MainWindow.webContents.setZoomFactor(zoomFactor / 1.1);
+                    MainWindow.webContents.send("zoom-changed");
+                },
+            },
             { type: "separator" },
             { role: "togglefullscreen" },
         ],
@@ -375,6 +408,9 @@ function createMainWindow(clientData: ClientDataType | null) {
     win.on("close", () => {
         MainWindow = null;
     });
+    win.webContents.on("zoom-changed", (e) => {
+        win.webContents.send("zoom-changed");
+    });
     win.webContents.setWindowOpenHandler(({ url, frameName }) => {
         if (url.startsWith("https://docs.waveterm.dev/")) {
             console.log("openExternal docs", url);

src/electron/preload.js

@@ -21,6 +21,7 @@ contextBridge.exposeInMainWorld("api", {
     onWCmd: (callback) => ipcRenderer.on("w-cmd", callback),
     onPCmd: (callback) => ipcRenderer.on("p-cmd", callback),
     onRCmd: (callback) => ipcRenderer.on("r-cmd", callback),
+    onZoomChanged: (callback) => ipcRenderer.on("zoom-changed", callback),
     onMetaArrowUp: (callback) => ipcRenderer.on("meta-arrowup", callback),
     onMetaArrowDown: (callback) => ipcRenderer.on("meta-arrowdown", callback),
     onMetaPageUp: (callback) => ipcRenderer.on("meta-pageup", callback),

src/index.ts

@@ -8,6 +8,7 @@ import { sprintf } from "sprintf-js";
 import { App } from "@/app/app";
 import * as DOMPurify from "dompurify";
 import { loadFonts } from "./util/util";
+import * as textmeasure from "./util/textmeasure";
 
 // @ts-ignore
 let VERSION = __WAVETERM_VERSION__;
@@ -20,18 +21,14 @@ document.addEventListener("DOMContentLoaded", () => {
     let reactElem = React.createElement(App, null, null);
     let elem = document.getElementById("app");
     let root = createRoot(elem);
-    let isFontLoaded = document.fonts.check("12px 'JetBrains Mono'");
-    if (isFontLoaded) {
+    document.fonts.ready.then(() => {
         root.render(reactElem);
-    } else {
-        document.fonts.ready.then(() => {
-            root.render(reactElem);
-        });
-    }
+    });
 });
 
 (window as any).mobx = mobx;
 (window as any).sprintf = sprintf;
 (window as any).DOMPurify = DOMPurify;
+(window as any).textmeasure = textmeasure;
 
 console.log("WaveTerm", VERSION, BUILD);