feat: shot font name using the same font

Author: aradzie

packages/keybr-textinput-ui/lib/TypingSettings.tsx

@@ -181,7 +181,7 @@ function FontProp(): ReactNode {
         <OptionList
           options={Font.ALL.map((item) => ({
             value: item.id,
-            name: item.name,
+            name: <span style={item.cssProperties}>{item.name}</span>,
           }))}
           value={settings.get(textDisplayProps.font).id}
           onSelect={(id) => {

packages/keybr-widget/lib/components/optionlist/OptionList.tsx

@@ -225,9 +225,7 @@ export class OptionList
           className={styles.placeholder}
           onClick={this.handlePlaceholderClick}
         >
-          <span className={styles.placeholderName} title={selectedOption.name}>
-            {selectedOption.name}
-          </span>
+          <span className={styles.placeholderName}>{selectedOption.name}</span>
           <span className={styles.placeholderArrow}>
             {open ? "\u25BC" : "\u25BA"}
           </span>
@@ -244,7 +242,6 @@ export class OptionList
                   option === selectedOption && styles.item_selected,
                   index === highlightedIndex && styles.item_highlighted,
                 )}
-                title={option.name}
                 onMouseOver={this.handleItemMouseOver(option)}
                 onClick={this.handleItemClick(option)}
               >

packages/keybr-widget/lib/components/optionlist/OptionList.types.ts

@@ -1,9 +1,10 @@
+import { type ReactNode } from "react";
 import { type FocusProps } from "../props.ts";
 import { type ClassName } from "../types.ts";
 
 export type OptionListOption = {
   readonly value: string;
-  readonly name: string;
+  readonly name: ReactNode;
 };
 
 export type OptionListProps = {