refactor(cmdline): change getList to support commands for configKeys (@fehmer)

frontend/src/ts/commandline/commandline.ts

@@ -20,6 +20,7 @@ import {
 } from "../elements/input-validation";
 import { isInputElementFocused } from "../input/input-element";
 import { qs } from "../utils/dom";
+import { ConfigKey } from "@monkeytype/schemas/configs";
 
 type CommandlineMode = "search" | "input";
 type InputModeParams = {
@@ -70,7 +71,10 @@ function addCommandlineBackground(): void {
 }
 
 type ShowSettings = {
-  subgroupOverride?: CommandsSubgroup | string;
+  subgroupOverride?:
+    | CommandsSubgroup
+    | CommandlineLists.ListsObjectKeys
+    | ConfigKey;
   commandOverride?: string;
   singleListOverride?: boolean;
 };
@@ -102,7 +106,7 @@ export function show(
           if (exists) {
             Loader.show();
             subgroupOverride = await CommandlineLists.getList(
-              settings.subgroupOverride as CommandlineLists.ListsObjectKeys,
+              settings.subgroupOverride,
             );
             Loader.hide();
           } else {

frontend/src/ts/commandline/lists.ts

@@ -32,6 +32,7 @@ import { Command, CommandsSubgroup } from "./types";
 import { buildCommandForConfigKey } from "./util";
 import { CommandlineConfigMetadataObject } from "./commandline-metadata";
 import { isAuthAvailable, isAuthenticated, signOut } from "../firebase";
+import { ConfigKey } from "@monkeytype/schemas/configs";
 
 const challengesPromise = JSONData.getChallengeList();
 challengesPromise
@@ -44,23 +45,6 @@ challengesPromise
     );
   });
 
-const languageCommand = buildCommandForConfigKey("language");
-const difficultyCommand = buildCommandForConfigKey("difficulty");
-const blindModeCommand = buildCommandForConfigKey("blindMode");
-const oppositeShiftModeCommand = buildCommandForConfigKey("oppositeShiftMode");
-const stopOnErrorCommand = buildCommandForConfigKey("stopOnError");
-const confidenceModeCommand = buildCommandForConfigKey("confidenceMode");
-const lazyModeCommand = buildCommandForConfigKey("lazyMode");
-const layoutCommand = buildCommandForConfigKey("layout");
-const showAverageCommand = buildCommandForConfigKey("showAverage");
-const showPbCommand = buildCommandForConfigKey("showPb");
-const keymapLayoutCommand = buildCommandForConfigKey("keymapLayout");
-const customThemeCommand = buildCommandForConfigKey("customTheme");
-const adsCommand = buildCommandForConfigKey("ads");
-const minSpeedCommand = buildCommandForConfigKey("minWpm");
-const minAccCommand = buildCommandForConfigKey("minAcc");
-const paceCaretCommand = buildCommandForConfigKey("paceCaret");
-
 export const commands: CommandsSubgroup = {
   title: "",
   list: [
@@ -68,13 +52,15 @@ export const commands: CommandsSubgroup = {
     ...ResultScreenCommands,
 
     //test screen
-    buildCommandForConfigKey("punctuation"),
-    buildCommandForConfigKey("numbers"),
-    buildCommandForConfigKey("mode"),
-    buildCommandForConfigKey("time"),
-    buildCommandForConfigKey("words"),
-    buildCommandForConfigKey("quoteLength"),
-    languageCommand,
+    ...buildCommands(
+      "punctuation",
+      "numbers",
+      "mode",
+      "time",
+      "words",
+      "quoteLength",
+      "language",
+    ),
     {
       id: "changeCustomModeText",
       display: "Change custom text",
@@ -111,14 +97,14 @@ export const commands: CommandsSubgroup = {
 
     //behavior
     ...buildCommands(
-      difficultyCommand,
+      "difficulty",
       "quickRestart",
       "repeatQuotes",
-      blindModeCommand,
+      "blindMode",
       "alwaysShowWordsHistory",
       "singleListCommandLine",
-      minSpeedCommand,
-      minAccCommand,
+      "minWpm",
+      "minAcc",
       ...MinBurstCommands,
       "britishEnglish",
       ...FunboxCommands,
@@ -130,15 +116,15 @@ export const commands: CommandsSubgroup = {
     ...buildCommands(
       "freedomMode",
       "strictSpace",
-      oppositeShiftModeCommand,
-      stopOnErrorCommand,
-      confidenceModeCommand,
+      "oppositeShiftMode",
+      "stopOnError",
+      "confidenceMode",
       "quickEnd",
       "indicateTypos",
       "compositionDisplay",
       "hideExtraLetters",
-      lazyModeCommand,
-      layoutCommand,
+      "lazyMode",
+      "layout",
       "codeUnindentOnBackspace",
     ),
 
@@ -154,7 +140,7 @@ export const commands: CommandsSubgroup = {
     ...buildCommands(
       "smoothCaret",
       "caretStyle",
-      paceCaretCommand,
+      "paceCaret",
       "repeatedPace",
       "paceCaretStyle",
     ),
@@ -184,14 +170,14 @@ export const commands: CommandsSubgroup = {
       "keymapStyle",
       "keymapLegendStyle",
       "keymapSize",
-      keymapLayoutCommand,
+      "keymapLayout",
       "keymapShowTopRow",
     ),
 
     //theme
     ...buildCommands(
       ...ThemesCommands,
-      customThemeCommand,
+      "customTheme",
 
       ...CustomThemesListCommands,
       "flipTestColors",
@@ -218,14 +204,14 @@ export const commands: CommandsSubgroup = {
       "showKeyTips",
       "showOutOfFocusWarning",
       "capsLockWarning",
-      showAverageCommand,
-      showPbCommand,
+      "showAverage",
+      "showPb",
       "monkeyPowerLevel",
       "monkey",
     ),
 
     //danger zone
-    adsCommand,
+    ...buildCommands("ads"),
 
     //other
     ...LoadChallengeCommands,
@@ -381,41 +367,39 @@ export const commands: CommandsSubgroup = {
   ],
 };
 
+function findCommandById(key: string): Command | undefined {
+  const id = "change" + key.charAt(0).toUpperCase() + key.slice(1);
+  return commands.list.find((it) => it.id === id);
+}
+
 const lists = {
-  keymapLayouts: keymapLayoutCommand.subgroup,
-  enableAds: adsCommand.subgroup,
-  customThemesList: customThemeCommand.subgroup,
   themes: ThemesCommands[0]?.subgroup,
   loadChallenge: LoadChallengeCommands[0]?.subgroup,
-  languages: languageCommand.subgroup,
-  difficulty: difficultyCommand.subgroup,
-  lazyMode: lazyModeCommand.subgroup,
-  paceCaretMode: paceCaretCommand.subgroup,
-  showAverage: showAverageCommand.subgroup,
-  showPb: showPbCommand.subgroup,
-  minWpm: minSpeedCommand.subgroup,
-  minAcc: minAccCommand.subgroup,
   minBurst: MinBurstCommands[0]?.subgroup,
   funbox: FunboxCommands[0]?.subgroup,
-  confidenceMode: confidenceModeCommand.subgroup,
-  stopOnError: stopOnErrorCommand.subgroup,
-  layouts: layoutCommand.subgroup,
-  oppositeShiftMode: oppositeShiftModeCommand.subgroup,
   tags: TagsCommands[0]?.subgroup,
   resultSaving: ResultSavingCommands[0]?.subgroup,
-  blindMode: blindModeCommand.subgroup,
 };
 
 export function doesListExist(listName: string): boolean {
+  if (findCommandById(listName)) {
+    return true;
+  }
+
   return lists[listName as ListsObjectKeys] !== undefined;
 }
 
 export async function getList(
-  listName: ListsObjectKeys,
+  listName: ListsObjectKeys | ConfigKey,
 ): Promise<CommandsSubgroup> {
   await Promise.allSettled([challengesPromise]);
 
-  const list = lists[listName];
+  const commandList = findCommandById(listName);
+  if (commandList !== undefined && commandList.subgroup !== undefined) {
+    return commandList.subgroup;
+  }
+
+  const list = lists[listName as ListsObjectKeys];
   if (!list) {
     Notifications.add(`List not found: ${listName}`, -1);
     throw new Error(`List ${listName} not found`);

frontend/src/ts/elements/modes-notice.ts

@@ -106,7 +106,7 @@ export async function update(): Promise<void> {
 
   if (Config.mode !== "zen" && !usingPolyglot) {
     testModesNotice.appendHtml(
-      `<button class="textButton" commands="languages"><i class="fas fa-globe-americas"></i>${getLanguageDisplayString(
+      `<button class="textButton" commands="language"><i class="fas fa-globe-americas"></i>${getLanguageDisplayString(
         Config.language,
         Config.mode === "quote",
       )}</button>`,
@@ -158,7 +158,7 @@ export async function update(): Promise<void> {
     });
 
     testModesNotice.appendHtml(
-      `<button class="textButton" commands="paceCaretMode"><i class="fas fa-tachometer-alt"></i>${
+      `<button class="textButton" commands="paceCaret"><i class="fas fa-tachometer-alt"></i>${
         Config.paceCaret === "average"
           ? "average"
           : Config.paceCaret === "pb"
@@ -278,7 +278,7 @@ export async function update(): Promise<void> {
 
   if (Config.layout !== "default") {
     testModesNotice.appendHtml(
-      `<button class="textButton" commands="layouts"><i class="fas fa-keyboard"></i>emulating ${Config.layout.replace(
+      `<button class="textButton" commands="layout"><i class="fas fa-keyboard"></i>emulating ${Config.layout.replace(
         /_/g,
         " ",
       )}</button>`,

frontend/src/ts/event-handlers/footer.ts

@@ -65,7 +65,7 @@ document
       }
       setConfig("customTheme", true);
     } else {
-      const subgroup = Config.customTheme ? "customThemesList" : "themes";
+      const subgroup = Config.customTheme ? "customTheme" : "themes";
       Commandline.show({
         subgroupOverride: subgroup,
       });

frontend/src/ts/event-handlers/keymap.ts

@@ -2,6 +2,6 @@ import * as Commandline from "../commandline/commandline";
 
 $("#keymap").on("click", ".r5 .layoutIndicator", async () => {
   Commandline.show({
-    subgroupOverride: "keymapLayouts",
+    subgroupOverride: "keymapLayout",
   });
 });

frontend/src/ts/event-handlers/test.ts

@@ -15,11 +15,13 @@ import * as PractiseWordsModal from "../modals/practise-words";
 import { navigate } from "../controllers/route-controller";
 import { getMode2 } from "../utils/misc";
 import * as ShareTestSettingsPopup from "../modals/share-test-settings";
+import { ConfigKey } from "@monkeytype/schemas/configs";
+import { ListsObjectKeys } from "../commandline/lists";
 
 $(".pageTest").on("click", "#testModesNotice .textButton", async (event) => {
   const attr = $(event.currentTarget).attr("commands");
   if (attr === undefined) return;
-  Commandline.show({ subgroupOverride: attr });
+  Commandline.show({ subgroupOverride: attr as ConfigKey | ListsObjectKeys });
 });
 
 $(".pageTest").on("click", "#testModesNotice .textButton", async (event) => {

frontend/src/ts/modals/support.ts

@@ -10,7 +10,7 @@ const modal = new AnimatedModal({
   setup: async (modalEl): Promise<void> => {
     modalEl.querySelector("button.ads")?.addEventListener("click", async () => {
       Commandline.show(
-        { subgroupOverride: "enableAds" },
+        { subgroupOverride: "ads" },
         {
           modalChain: modal,
         },