add support for "Hack" font family (#309)

* testing hack font

* updates to allow font to be variable

* allow setting of font-family.  get initial font family from electron (needed for loading)

* add termfontfamily

* update wave logos for README

* hook up fontfamily setting, remove old dropdown active var

* get app to reload on font change.  reload fonts

* on termfontsize change, bump render version as well

go.work.sum

@@ -1,3 +1,4 @@
+github.com/aws/aws-sdk-go-v2/service/s3 v1.27.11 h1:3/gm/JTX9bX8CpzTgIlrtYpB3EVBDxyg/GY/QdcIEZw=
 github.com/google/go-querystring v1.1.0 h1:AnCroh3fv4ZBgVIf1Iwtovgjaw/GiKJo8M8yD/fhyJ8=
 github.com/kevinburke/ssh_config v1.2.0 h1:x584FjTGwHzMwvHx18PXxbBVzfnxogHaAReU4gf13a4=
 github.com/kevinburke/ssh_config v1.2.0/go.mod h1:CT57kijsi8u/K/BOFA39wgDQJ9CxiF4nAY/ojJ6r6mM=

src/app/app.less

@@ -1,12 +1,5 @@
 @import "./common/themes/themes.less";
 
-@font-face {
-    font-family: "Martian Mono";
-    src: url("./assets/fonts/MartianMono-VariableFont_wdth,wght.ttf") format("truetype");
-    font-weight: normal;
-    font-style: normal;
-}
-
 :root {
     --fa-style-family: "Font Awesome 6 Sharp";
 }
@@ -98,7 +91,7 @@ body a {
 }
 
 body code {
-    font-family: @terminal-font;
+    font-family: var(--termfontfamily);
     background-color: transparent;
 }
 
@@ -312,7 +305,7 @@ a.a-block {
     }
 
     .mono {
-        font-family: @terminal-font;
+        font-family: var(--termfontfamily);
     }
 }
 

src/app/app.tsx

@@ -105,8 +105,15 @@ class App extends React.Component<{}, {}> {
         if (dcWait) {
             setTimeout(() => this.updateDcWait(false), 0);
         }
+        // used to force a full reload of the application
+        let renderVersion = GlobalModel.renderVersion.get();
         return (
-            <div id="main" className={"platform-" + platform} onContextMenu={this.handleContextMenu}>
+            <div
+                key={"version-" + renderVersion}
+                id="main"
+                className={"platform-" + platform}
+                onContextMenu={this.handleContextMenu}
+            >
                 <div ref={this.mainContentRef} className="main-content">
                     <MainSideBar parentRef={this.mainContentRef} clientData={clientData} />
                     <ErrorBoundary>

src/app/clientsettings/clientsettings.less

@@ -26,6 +26,10 @@
         padding: 0 18px 0 30px;
     }
 
+    .wave-dropdown {
+        width: 200px;
+    }
+
     // just marked these as important since we're keeping the
     // settings-field styles below this intact until we figure out what do with them
     .settings-field {

src/app/clientsettings/clientsettings.tsx

@@ -15,9 +15,6 @@ import "./clientsettings.less";
 
 @mobxReact.observer
 class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hoveredItemId: string }> {
-    fontSizeDropdownActive: OV<boolean> = mobx.observable.box(false, {
-        name: "clientSettings-fontSizeDropdownActive",
-    });
     errorMessage: OV<string> = mobx.observable.box(null, { name: "ClientSettings-errorMessage" });
 
     @boundMethod
@@ -30,7 +27,6 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
     @boundMethod
     handleChangeFontSize(fontSize: string): void {
         const newFontSize = Number(fontSize);
-        this.fontSizeDropdownActive.set(false);
         if (GlobalModel.termFontSize.get() == newFontSize) {
             return;
         }
@@ -39,10 +35,12 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
     }
 
     @boundMethod
-    togglefontSizeDropdown(): void {
-        mobx.action(() => {
-            this.fontSizeDropdownActive.set(!this.fontSizeDropdownActive.get());
-        })();
+    handleChangeFontFamily(fontFamily: string): void {
+        if (GlobalModel.getTermFontFamily() == fontFamily) {
+            return;
+        }
+        const prtn = GlobalCommandRunner.setTermFontFamily(fontFamily, false);
+        commandRtnHandler(prtn, this.errorMessage);
     }
 
     @boundMethod
@@ -75,6 +73,13 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
         return availableFontSizes;
     }
 
+    getFontFamilies(): DropdownItem[] {
+        const availableFontFamilies: DropdownItem[] = [];
+        availableFontFamilies.push({ label: "JetBrains Mono", value: "JetBrains Mono" });
+        availableFontFamilies.push({ label: "Hack", value: "Hack" });
+        return availableFontFamilies;
+    }
+
     @boundMethod
     inlineUpdateOpenAIModel(newModel: string): void {
         const prtn = GlobalCommandRunner.setClientOpenAISettings({ model: newModel });
@@ -140,6 +145,7 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
             openAIOpts.maxtokens == null || openAIOpts.maxtokens == 0 ? 1000 : openAIOpts.maxtokens
         );
         const curFontSize = GlobalModel.termFontSize.get();
+        const curFontFamily = GlobalModel.getTermFontFamily();
 
         return (
             <div className={cn("view clientsettings-view")}>
@@ -161,6 +167,17 @@ class ClientSettingsView extends React.Component<{ model: RemotesModel }, { hove
                             />
                         </div>
                     </div>
+                    <div className="settings-field">
+                        <div className="settings-label">Term Font Family</div>
+                        <div className="settings-input">
+                            <Dropdown
+                                className="font-size-dropdown"
+                                options={this.getFontFamilies()}
+                                defaultValue={curFontFamily}
+                                onChange={this.handleChangeFontFamily}
+                            />
+                        </div>
+                    </div>
                     <div className="settings-field">
                         <div className="settings-label">Client ID</div>
                         <div className="settings-input">{cdata.clientid}</div>

src/app/common/elements/markdown.less

@@ -10,14 +10,14 @@
     code {
         background-color: @markdown-highlight;
         color: @term-white;
-        font-family: @terminal-font;
+        font-family: var(--termfontfamily);
         border-radius: 4px;
     }
 
     code.inline {
         padding-top: 0;
         padding-bottom: 0;
-        font-family: @terminal-font;
+        font-family: var(--termfontfamily);
     }
 
     .title {

src/app/common/prompt/prompt.less

@@ -1,7 +1,9 @@
 @import "@/common/themes/themes.less";
 
 .term-prompt {
-    font-weight: 300;
+    font-weight: normal;
+    font-family: var(--termfontfamily);
+
     .icon {
         margin: 0 4px 0 2px;
         vertical-align: middle;

src/app/common/themes/themes.less

@@ -69,7 +69,6 @@
 
 // @font-face declaration lives in app.less
 @fixed-font: "Martian Mono", sans-serif;
-@terminal-font: "JetBrains Mono", sans-serif;
 
 @text-s1-font: "Martian Mono", sans-serif;
 

src/app/line/linecomps.tsx

@@ -492,7 +492,8 @@ class LineCmd extends React.Component<
             maxSize: screen.getMaxContentSize(),
             idealSize: screen.getIdealContentSize(),
             termOpts: cmd.getTermOpts(),
-            termFontSize: GlobalModel.termFontSize.get(),
+            termFontSize: GlobalModel.getTermFontSize(),
+            termFontFamily: GlobalModel.getTermFontFamily(),
         };
     }
 

src/app/line/lines.less

@@ -132,7 +132,7 @@
         position: relative;
 
         .cmd-rtnstate-label {
-            font-family: @terminal-font;
+            font-family: var(--termfontfamily);
             position: relative;
             font-size: 10px;
             z-index: 2;
@@ -145,7 +145,7 @@
         }
 
         .cmd-rtnstate-diff {
-            font-family: @terminal-font;
+            font-family: var(--termfontfamily);
             color: @term-white;
             white-space: pre;
             margin-left: 10px;

src/app/workspace/cmdinput/cmdinput.less

@@ -137,7 +137,8 @@
             overflow-wrap: anywhere;
             border-color: transparent;
             border: none;
-            font-family: @terminal-font;
+            font-family: var(--termfontfamily);
+            font-weight: normal;
             &.display-disabled {
                 background-color: #444;
             }
@@ -229,7 +230,8 @@
             overflow-wrap: anywhere;
             border-color: transparent;
             border: none;
-            font-family: @terminal-font;
+            font-family: var(--termfontfamily);
+            font-weight: normal;
             flex-shrink: 0;
             flex-grow: 1;
             border-radius: 4px;

src/electron/emain.ts

@@ -31,6 +31,7 @@ let oldConsoleLog = console.log;
 let wasActive = true;
 let wasInFg = true;
 let currentGlobalShortcut: string | null = null;
+let initialClientData: ClientDataType = null;
 
 checkPromptMigrate();
 ensureDir(waveHome);
@@ -519,6 +520,11 @@ electron.ipcMain.on("wavesrv-status", (event) => {
     return;
 });
 
+electron.ipcMain.on("get-initial-termfontfamily", (event) => {
+    event.returnValue = initialClientData?.feopts?.termfontfamily;
+    return;
+});
+
 electron.ipcMain.on("restart-server", (event) => {
     if (waveSrvProc != null) {
         waveSrvProc.kill();
@@ -709,6 +715,7 @@ async function createMainWindowWrap() {
     let clientData: ClientDataType | null = null;
     try {
         clientData = await getClientDataPoll(1);
+        initialClientData = clientData;
     } catch (e) {
         console.log("error getting wavesrv clientdata", e.toString());
     }

src/electron/preload.js

@@ -10,6 +10,7 @@ contextBridge.exposeInMainWorld("api", {
         ipcRenderer.send("get-last-logs", numberOfLines);
         ipcRenderer.once("last-logs", (event, data) => callback(data));
     },
+    getInitialTermFontFamily: () => ipcRenderer.sendSync("get-initial-termfontfamily"),
     restartWaveSrv: () => ipcRenderer.sendSync("restart-server"),
     reloadWindow: () => ipcRenderer.sendSync("reload-window"),
     reregisterGlobalShortcut: (shortcut) => ipcRenderer.sendSync("reregister-global-shortcut", shortcut),

src/index.ts

@@ -9,13 +9,18 @@ import { App } from "@/app/app";
 import * as DOMPurify from "dompurify";
 import { loadFonts } from "./util/util";
 import * as textmeasure from "./util/textmeasure";
+import { getApi } from "@/models";
 
 // @ts-ignore
 let VERSION = __WAVETERM_VERSION__;
 // @ts-ignore
 let BUILD = __WAVETERM_BUILD__;
 
-loadFonts();
+let initialFontFamily = getApi().getInitialTermFontFamily();
+if (initialFontFamily == null) {
+    initialFontFamily = "JetBrains Mono";
+}
+loadFonts(initialFontFamily);
 
 document.addEventListener("DOMContentLoaded", () => {
     let reactElem = React.createElement(App, null, null);
@@ -26,6 +31,7 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 });
 
+// put some items on the window for debugging
 (window as any).mobx = mobx;
 (window as any).sprintf = sprintf;
 (window as any).DOMPurify = DOMPurify;

src/models/commandrunner.ts

@@ -353,6 +353,14 @@ class CommandRunner {
         return GlobalModel.submitCommand("client", "set", null, kwargs, interactive);
     }
 
+    setTermFontFamily(fontFamily: string, interactive: boolean): Promise<CommandRtnType> {
+        let kwargs = {
+            nohist: "1",
+            termfontfamily: fontFamily,
+        };
+        return GlobalModel.submitCommand("client", "set", null, kwargs, interactive);
+    }
+
     setClientOpenAISettings(opts: { model?: string; apitoken?: string; maxtokens?: string }): Promise<CommandRtnType> {
         let kwargs = {
             nohist: "1",