fix(font): 0xProto not working in screenshot (@byseif21) (#6817)

### Description
starting with number seem to cuzes issue, did some hacking idk

---------

Co-authored-by: Christian Fehmer <cfe@sexy-developer.com>

docs/FONTS.md

@@ -16,7 +16,7 @@ First, you will have to make a personal copy of the Monkeytype repository, also
 Once you have forked the repository you can now add your font. Place the font file in  `./frontend/static/webfonts` e.g.  `My-Font.woff2`.
 
 > [!NOTE]
-> Your font needs to be in the `.woff2` format. Your filename cannot include spaces.
+> Your font needs to be in the `.woff2` format. Your filename cannot include spaces or start with a number.
 
 Open `./packages/schemas/src/fonts.ts` and add the new font at the _end_ of the `KnownFontNameSchema` list like this:
 
@@ -29,7 +29,7 @@ const KnownFontNameSchema = z.enum(
     "My_Font",
 ```
 
-Call it whatever you want but make sure you replace spaces with underscores.
+Call it whatever you want but make sure you replace spaces with underscores and the font does not start with a number. 
 
 Then, go to `./frontend/src/ts/constants/fonts.ts` and add the following code to the _end_ of the `Fonts` object near to the very end of the file:
 

frontend/src/ts/commandline/commandline-metadata.ts

@@ -586,7 +586,11 @@ export const commandlineConfigMetadata: CommandlineConfigMetadataObject = {
   },
   fontFamily: {
     subgroup: {
-      options: typedKeys(Fonts).sort(),
+      options: typedKeys(Fonts).sort((a, b) =>
+        (Fonts[a]?.display ?? a.replace(/_/g, " ")).localeCompare(
+          Fonts[b]?.display ?? b.replace(/_/g, " ")
+        )
+      ),
       display: (name) =>
         Fonts[name as KnownFontName]?.display ?? name.replaceAll(/_/g, " "),
       customData: (name) => {

frontend/src/ts/constants/fonts.ts

@@ -133,7 +133,8 @@ export const Fonts: Record<KnownFontName, FontConfig> = {
   Iosevka: {
     fileName: "Iosevka-Regular.woff2",
   },
-  "0xProto": {
+  Proto: {
+    display: "0xProto",
     fileName: "0xProto-Regular.woff2",
   },
 };

frontend/src/ts/pages/settings.ts

@@ -580,7 +580,11 @@ async function fillSettingsPage(): Promise<void> {
   if (fontsEl.innerHTML === "") {
     let fontsElHTML = "";
 
-    for (const name of Misc.typedKeys(Fonts).sort()) {
+    for (const name of Misc.typedKeys(Fonts).sort((a, b) =>
+      (Fonts[a].display ?? a.replace(/_/g, " ")).localeCompare(
+        Fonts[b].display ?? b.replace(/_/g, " ")
+      )
+    )) {
       const font = Fonts[name];
       let fontFamily = name.replace(/_/g, " ");
 

packages/schemas/src/fonts.ts

@@ -41,7 +41,7 @@ const KnownFontNameSchema = z.enum(
     "Kanit",
     "Geist_Mono",
     "Iosevka",
-    "0xProto",
+    "Proto",
   ],
   {
     errorMap: customEnumErrorHandler("Must be a known font family"),