From f70942a932397d50501e4bec95d12687e9604319 Mon Sep 17 00:00:00 2001
From: Roman <ixrock@gmail.com>
Date: Wed, 25 May 2022 16:50:37 +0300
Subject: [PATCH] display terminal's custom font preview with font-name in the
 select-box + live-preload for current `fontSize`, fix lint

Signed-off-by: Roman <ixrock@gmail.com>
---
 .../components/+preferences/terminal.tsx      | 25 ++++++++++++++++---
 src/renderer/components/select/select.tsx     |  2 +-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/+preferences/terminal.tsx b/src/renderer/components/+preferences/terminal.tsx
index e12c702764..7e13737b1e 100644
--- a/src/renderer/components/+preferences/terminal.tsx
+++ b/src/renderer/components/+preferences/terminal.tsx
@@ -4,18 +4,20 @@
  */
 
 import React from "react";
+import { action } from "mobx";
 import { observer } from "mobx-react";
 import type { UserStore } from "../../../common/user-store";
 import { SubTitle } from "../layout/sub-title";
 import { Input, InputValidators } from "../input";
 import { Switch } from "../switch";
-import { Select } from "../select";
+import { Select, type SelectOption } from "../select";
 import type { ThemeStore } from "../../themes/store";
 import { Preferences } from "./preferences";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import userStoreInjectable from "../../../common/user-store/user-store.injectable";
 import themeStoreInjectable from "../../themes/store.injectable";
 import defaultShellInjectable from "./default-shell.injectable";
+import logger from "../../../common/logger";
 
 interface Dependencies {
   userStore: UserStore;
@@ -41,10 +43,24 @@ const NonInjectedTerminal = observer((
   ];
 
   // fonts must be declared in `fonts.scss` and at `template.html` (if early-preloading required)
-  const supportedCustomFonts = [
+  const supportedCustomFonts: SelectOption<string>[] = [
     "RobotoMono", "Anonymous Pro", "IBM Plex Mono", "JetBrains Mono", "Red Hat Mono",
     "Source Code Pro", "Space Mono", "Ubuntu Mono",
-  ];
+  ].map(customFont => {
+    const { fontFamily, fontSize } = userStore.terminalConfig;
+
+    return {
+      label: <span style={{ fontFamily: customFont, fontSize }}>{customFont}</span>,
+      value: customFont,
+      isSelected: fontFamily === customFont,
+    };
+  });
+
+  const onFontFamilyChange = action(({ value: fontFamily }: SelectOption<string>) => {
+    logger.info(`setting terminal font to ${fontFamily}`);
+
+    userStore.terminalConfig.fontFamily = fontFamily; // save to external storage
+  });
 
   return (
     <Preferences data-testid="terminal-preferences-page">
@@ -97,9 +113,10 @@ const NonInjectedTerminal = observer((
           <SubTitle title="Font family" />
           <Select
             themeName="lens"
+            controlShouldRenderValue
             value={userStore.terminalConfig.fontFamily}
             options={supportedCustomFonts}
-            onChange={opt => userStore.terminalConfig.fontFamily = opt?.value ?? supportedCustomFonts[0]}
+            onChange={onFontFamilyChange as any}
           />
         </section>
       </section>
diff --git a/src/renderer/components/select/select.tsx b/src/renderer/components/select/select.tsx
index 62513645d9..cd599e6683 100644
--- a/src/renderer/components/select/select.tsx
+++ b/src/renderer/components/select/select.tsx
@@ -22,7 +22,7 @@ const { Menu } = components;
 
 export interface SelectOption<Value> {
   value: Value;
-  label: string;
+  label: React.ReactNode;
   isDisabled?: boolean;
   isSelected?: boolean;
 }