Adding customStyle property to 'Command' object interface (#3865) jerryzhou196

* added customStyle

* added music for KeyK

* undid accidental changes

* removed unnecessary changes

* added font-family support in commandline interface

* fixed formatting for single-list-command-line mode while viewing font family

* added themes

* fixed activeMouse CSS selector

* Added styling of favourites too

* fixed github action error

* fixed css issue

* colored block within singleline command line

* added custom data property to commands
using custom data to show theme bubbles on theme commands

Co-authored-by: Miodec <jack@monkeytype.com>

frontend/src/styles/commandline.scss

@@ -117,14 +117,14 @@
         }
 
         &.activeMouse {
-          color: var(--bg-color);
-          background: var(--text-color);
+          color: var(--bg-color) !important;
+          background: var(--text-color) !important;
           cursor: pointer;
         }
 
         &.activeKeyboard {
-          color: var(--bg-color);
-          background: var(--text-color);
+          color: var(--bg-color) !important;
+          background: var(--text-color) !important;
         }
 
         // &:hover {
@@ -132,6 +132,21 @@
         //   background: var(--sub-color);
         //   cursor: pointer;
         // }
+
+        &.withThemeBubbles {
+          grid-template-columns: auto 1fr auto;
+          .themeBubbles {
+            display: grid;
+            grid-auto-flow: column;
+            gap: 0.5em;
+            border-radius: 1em;
+            .themeBubble {
+              width: 1em;
+              height: 1em;
+              border-radius: 100%;
+            }
+          }
+        }
       }
     }
   }

frontend/src/ts/commandline/commands.ts

@@ -143,7 +143,7 @@ Misc.getFontsList()
     );
   });
 
-Misc.getThemesList()
+Misc.getSortedThemesList()
   .then((themes) => {
     updateThemesCommands(themes);
   })

frontend/src/ts/commandline/index.ts

@@ -90,7 +90,22 @@ function showFound(): void {
       if (obj.noIcon && !isSingleListCommandLineActive()) {
         iconHTML = "";
       }
-      commandsHTML += `<div class="entry" command="${obj.id}">${iconHTML}<div>${obj.display}</div></div>`;
+      let customStyle = "";
+      if (obj.customStyle) {
+        customStyle = obj.customStyle;
+      }
+
+      if (obj.id.startsWith("changeTheme") && obj.customData) {
+        commandsHTML += `<div class="entry withThemeBubbles" command="${obj.id}" style="${customStyle}">
+        ${iconHTML}<div>${obj.display}</div>
+        <div class="themeBubbles">
+          <div class="themeBubble" style="background: ${obj.customData["bgColor"]}"></div>
+          <div class="themeBubble" style="background: ${obj.customData["mainColor"]}"></div>
+        </div>
+        </div>`;
+      } else {
+        commandsHTML += `<div class="entry" command="${obj.id}" style="${customStyle}">${iconHTML}<div>${obj.display}</div></div>`;
+      }
     }
   });
   $("#commandLine .suggestions").html(commandsHTML);

frontend/src/ts/commandline/lists/font-family.ts

@@ -22,6 +22,7 @@ function update(fonts: MonkeyTypes.FontObject[]): void {
       id: "changeFont" + font.name.replace(/ /g, "_"),
       display: font.display !== undefined ? font.display : font.name,
       configValue: configVal,
+      customStyle: `font-family: ${font.name}`,
       hover: (): void => {
         UpdateConfig.previewFontFamily(font.name);
       },

frontend/src/ts/commandline/lists/themes.ts

@@ -19,37 +19,47 @@ const commands: MonkeyTypes.Command[] = [
 
 function update(themes: MonkeyTypes.Theme[]): void {
   subgroup.list = [];
-  if (Config.favThemes.length > 0) {
-    Config.favThemes.forEach((theme: string) => {
-      subgroup.list.push({
-        id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme),
-        display: theme.replace(/_/g, " "),
-        configValue: theme,
+  const favs: MonkeyTypes.Command[] = [];
+  themes.forEach((theme) => {
+    if ((Config.favThemes as string[]).includes(theme.name)) {
+      favs.push({
+        id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
+        display: theme.name.replace(/_/g, " "),
+        configValue: theme.name,
+        // customStyle: `color:${theme.mainColor};background:${theme.bgColor};`,
+        customData: {
+          mainColor: theme.mainColor,
+          bgColor: theme.bgColor,
+        },
         hover: (): void => {
-          // previewTheme(theme);
-          ThemeController.preview(theme, false);
+          // previewTheme(theme.name);
+          ThemeController.preview(theme.name, false);
         },
         exec: (): void => {
-          UpdateConfig.setTheme(theme);
+          UpdateConfig.setTheme(theme.name);
         },
       });
-    });
-  }
-  themes.forEach((theme) => {
-    if ((Config.favThemes as string[]).includes(theme.name)) return;
-    subgroup.list.push({
-      id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
-      display: theme.name.replace(/_/g, " "),
-      configValue: theme.name,
-      hover: (): void => {
-        // previewTheme(theme.name);
-        ThemeController.preview(theme.name, false);
-      },
-      exec: (): void => {
-        UpdateConfig.setTheme(theme.name);
-      },
-    });
+    } else {
+      subgroup.list.push({
+        id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
+        display: theme.name.replace(/_/g, " "),
+        configValue: theme.name,
+        // customStyle: `color:${theme.mainColor};background:${theme.bgColor}`,
+        customData: {
+          mainColor: theme.mainColor,
+          bgColor: theme.bgColor,
+        },
+        hover: (): void => {
+          // previewTheme(theme.name);
+          ThemeController.preview(theme.name, false);
+        },
+        exec: (): void => {
+          UpdateConfig.setTheme(theme.name);
+        },
+      });
+    }
   });
+  subgroup.list = [...favs, ...subgroup.list];
 }
 
 export default commands;

frontend/src/ts/types/types.d.ts

@@ -733,6 +733,7 @@ declare namespace MonkeyTypes {
     alias?: string;
     input?: boolean;
     visible?: boolean;
+    customStyle?: string;
     defaultValue?: () => string;
     configValue?: string | number | boolean | number[];
     configValueMode?: string;
@@ -740,6 +741,7 @@ declare namespace MonkeyTypes {
     hover?: () => void;
     available?: () => void;
     shouldFocusTestUI?: boolean;
+    customData?: Record<string, string>;
   }
 
   interface CommandsSubgroup {