refactor(commandline): rework some parts of the code

extract icon getting code to a function
cleanup code that builds command html
update the placeholder of the input according to the active command group
fix some icon alignment
update some strings

frontend/src/ts/commandline/commandline.ts

@@ -140,7 +140,7 @@ export function show(
       activeCommand = null;
       Focus.set(false);
       CommandlineLists.setStackToDefault();
-      updateInput();
+      await updateInput();
       await filterSubgroup();
       await showCommands();
       await updateActiveCommand();
@@ -157,7 +157,7 @@ export function show(
             value: showInputCommand.defaultValue?.() ?? "",
             icon: showInputCommand.icon ?? "fa-chevron-right",
           };
-          updateInput(inputModeParams.value as string);
+          void updateInput(inputModeParams.value as string);
           hideCommands();
         }
       }, 1);
@@ -198,7 +198,7 @@ async function goBackOrHide(): Promise<void> {
       value: null,
       icon: null,
     };
-    updateInput("");
+    await updateInput("");
     await filterSubgroup();
     await showCommands();
     await updateActiveCommand();
@@ -208,7 +208,7 @@ async function goBackOrHide(): Promise<void> {
   if (CommandlineLists.getStackLength() > 1) {
     CommandlineLists.popFromStack();
     activeIndex = 0;
-    updateInput("");
+    await updateInput("");
     await filterSubgroup();
     await showCommands();
     await updateActiveCommand();
@@ -362,6 +362,33 @@ async function getList(): Promise<Command[]> {
   return (await getSubgroup()).list;
 }
 
+function getCommandIconsHtml(command: Command & { isActive: boolean }): {
+  iconHtml: string;
+  configIconHtml: string;
+} {
+  let iconHtml = `<i class="fas fa-fw fa-chevron-right"></i>`;
+  if (command.icon !== undefined && command.icon !== "") {
+    const faIcon = command.icon.startsWith("fa-");
+    const faType = command.iconType ?? "solid";
+    const faTypeClass = faType === "solid" ? "fas" : "far";
+    if (!faIcon) {
+      iconHtml = `<div class="textIcon">${command.icon}</div>`;
+    } else {
+      iconHtml = `<i class="${faTypeClass} fa-fw ${command.icon}"></i>`;
+    }
+  }
+
+  let configIconHtml = `<i class="fas fa-fw"></i>`;
+  if (command.isActive) {
+    configIconHtml = `<i class="fas fa-fw fa-check"></i>`;
+  }
+
+  return {
+    iconHtml,
+    configIconHtml,
+  };
+}
+
 async function showCommands(): Promise<void> {
   const element = document.querySelector("#commandLine .suggestions");
   if (element === null) {
@@ -417,38 +444,32 @@ async function showCommands(): Promise<void> {
 
   for (const command of list) {
     if (command.found !== true) continue;
-    let icon = command.icon ?? "fa-chevron-right";
-    const faIcon = icon.startsWith("fa-");
-    const iconType = command.iconType ?? "solid";
-    const iconTypeClass = iconType === "solid" ? "fas" : "far";
-    if (!faIcon) {
-      icon = `<div class="textIcon">${icon}</div>`;
-    } else {
-      icon = `<i class="${iconTypeClass} fa-fw ${icon}"></i>`;
-    }
-    let configIcon = "";
-    if (command.isActive) {
-      firstActive = firstActive ?? index;
-      configIcon = `<i class="fas fa-fw fa-check"></i>`;
-    } else {
-      configIcon = `<i class="fas fa-fw"></i>`;
-    }
-
-    const iconHTML = `<div class="icon">${
-      usingSingleList || configIcon === "" ? icon : configIcon
-    }</div>`;
     let customStyle = "";
     if (command.customStyle !== undefined && command.customStyle !== "") {
       customStyle = command.customStyle;
     }
 
+    const { iconHtml, configIconHtml } = getCommandIconsHtml(command);
+
     let display = command.display;
     if (usingSingleList) {
       display = (command.singleListDisplay ?? "") || command.display;
-      display = display.replace(
-        `<i class="fas fa-fw fa-chevron-right chevronIcon"></i>`,
-        `<i class="fas fa-fw fa-chevron-right chevronIcon"></i>` + configIcon
-      );
+      if (command.configValue !== undefined) {
+        display = display.replace(
+          `<i class="fas fa-fw fa-chevron-right chevronIcon"></i>`,
+          `<i class="fas fa-fw fa-chevron-right chevronIcon"></i>` +
+            configIconHtml
+        );
+      }
+    }
+
+    let finalIconHtml = iconHtml;
+    if (
+      !usingSingleList &&
+      command.subgroup === undefined &&
+      command.configValue !== undefined
+    ) {
+      finalIconHtml = configIconHtml;
     }
 
     if (command.customData !== undefined) {
@@ -456,7 +477,7 @@ async function showCommands(): Promise<void> {
         html += `<div class="command changeThemeCommand" data-command-id="${
           command.id
         }" data-index="${index}" style="${customStyle}">
-      ${iconHTML}<div>${display}</div>
+      <div class="icon">${finalIconHtml}</div><div>${display}</div>
       <div class="themeFavIcon ${
         command.customData["isFavorite"] === true ? "" : "hidden"
       }">
@@ -488,10 +509,10 @@ async function showCommands(): Promise<void> {
           fontFamily += " Preview";
         }
 
-        html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="font-family: ${fontFamily}">${iconHTML}<div>${display}</div></div>`;
+        html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="font-family: ${fontFamily}"><div class="icon">${finalIconHtml}</div><div>${display}</div></div>`;
       }
     } else {
-      html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="${customStyle}">${iconHTML}<div>${display}</div></div>`;
+      html += `<div class="command" data-command-id="${command.id}" data-index="${index}" style="${customStyle}"><div class="icon">${finalIconHtml}</div><div>${display}</div></div>`;
     }
     index++;
   }
@@ -564,11 +585,11 @@ async function runActiveCommand(): Promise<void> {
       value: command.defaultValue?.() ?? "",
       icon: command.icon ?? "fa-chevron-right",
     };
-    updateInput(inputModeParams.value as string);
+    await updateInput(inputModeParams.value as string);
     hideCommands();
   } else if (command.subgroup) {
     CommandlineLists.pushToStack(command.subgroup);
-    updateInput("");
+    await updateInput("");
     await filterSubgroup();
     await showCommands();
     await updateActiveCommand();
@@ -609,7 +630,7 @@ function keepActiveCommandInView(): void {
   lastActiveIndex = active.dataset["index"];
 }
 
-function updateInput(setInput?: string): void {
+async function updateInput(setInput?: string): Promise<void> {
   const iconElement: HTMLElement | null = document.querySelector(
     "#commandLine .searchicon"
   );
@@ -639,9 +660,15 @@ function updateInput(setInput?: string): void {
       element.setSelectionRange(0, element.value.length);
     }
   } else {
-    iconElement.innerHTML = '<i class="fas fa-search"></i>';
+    iconElement.innerHTML = '<i class="fas fa-fw fa-search"></i>';
     element.placeholder = "Search...";
 
+    const subgroup = await getSubgroup();
+
+    if (subgroup.title !== undefined && subgroup.title !== "") {
+      element.placeholder = `${subgroup.title}`;
+    }
+
     let length = inputValue.length;
     if (setInput !== undefined) {
       length = setInput.length;
@@ -716,7 +743,7 @@ const modal = new AnimatedModal({
           lastSingleListModeInputValue !== ""
         ) {
           inputValue = lastSingleListModeInputValue;
-          updateInput();
+          await updateInput();
           await filterSubgroup();
           await showCommands();
           await updateActiveCommand();

frontend/src/ts/commandline/lists.ts

@@ -528,7 +528,7 @@ export async function getSingleSubgroup(): Promise<CommandsSubgroup> {
   }
 
   singleList = {
-    title: "All commands",
+    title: "",
     list: singleCommands,
   };
   return singleList;

frontend/src/ts/commandline/lists/keymap-layouts.ts

@@ -6,7 +6,7 @@ import { capitalizeFirstLetterOfEachWord } from "../../utils/strings";
 import { Command, CommandsSubgroup } from "../types";
 
 const subgroup: CommandsSubgroup = {
-  title: "Change keymap layout...",
+  title: "Keymap layout...",
   configKey: "keymapLayout",
   list: [
     {

frontend/src/ts/commandline/lists/min-acc.ts

@@ -2,7 +2,7 @@ import * as UpdateConfig from "../../config";
 import { Command, CommandsSubgroup } from "../types";
 
 const subgroup: CommandsSubgroup = {
-  title: "Change min accuracy mode...",
+  title: "Minimum accuracy...",
   configKey: "minAcc",
   list: [
     {

frontend/src/ts/commandline/lists/min-burst.ts

@@ -3,7 +3,7 @@ import { get as getTypingSpeedUnit } from "../../utils/typing-speed-units";
 import { Command, CommandsSubgroup } from "../types";
 
 const subgroup: CommandsSubgroup = {
-  title: "Change min burst mode...",
+  title: "Minimum burst...",
   configKey: "minBurst",
   list: [
     {

frontend/src/ts/commandline/lists/min-wpm.ts

@@ -3,7 +3,7 @@ import { get as getTypingSpeedUnit } from "../../utils/typing-speed-units";
 import { Command, CommandsSubgroup } from "../types";
 
 const subgroup: CommandsSubgroup = {
-  title: "Change min speed mode...",
+  title: "Minimum speed...",
   configKey: "minWpm",
   list: [
     {

frontend/src/ts/commandline/lists/mode.ts

@@ -9,7 +9,7 @@ const commands: Command[] = [
     display: "Mode...",
     icon: "fa-bars",
     subgroup: {
-      title: "Change mode...",
+      title: "Mode...",
       configKey: "mode",
       list: [
         {

frontend/src/ts/commandline/lists/opposite-shift-mode.ts

@@ -3,7 +3,7 @@ import * as ModesNotice from "./../../elements/modes-notice";
 import { Command, CommandsSubgroup } from "../types";
 
 const subgroup: CommandsSubgroup = {
-  title: "Change opposite shift mode...",
+  title: "Opposite shift mode...",
   configKey: "oppositeShiftMode",
   list: [
     {
@@ -39,7 +39,7 @@ const subgroup: CommandsSubgroup = {
 const commands: Command[] = [
   {
     id: "changeOppositeShiftMode",
-    display: "Change opposite shift mode...",
+    display: "Opposite shift mode...",
     icon: "fa-exchange-alt",
     subgroup,
   },

frontend/src/ts/commandline/lists/punctuation.ts

@@ -8,7 +8,7 @@ const commands: Command[] = [
     display: "Punctuation...",
     icon: "fa-at",
     subgroup: {
-      title: "Change punctuation...",
+      title: "Punctuation...",
       configKey: "punctuation",
       list: [
         {

frontend/src/ts/commandline/lists/quote-length.ts

@@ -10,7 +10,7 @@ const commands: Command[] = [
     icon: "fa-quote-right",
     alias: "quotes",
     subgroup: {
-      title: "Change quote length...",
+      title: "Quote length...",
       configKey: "quoteLength",
       list: [
         {

frontend/src/ts/commandline/lists/tags.ts

@@ -8,7 +8,7 @@ import { isAuthenticated } from "../../firebase";
 import { Command, CommandsSubgroup } from "../types";
 
 const subgroup: CommandsSubgroup = {
-  title: "Change tags...",
+  title: "Tags...",
   list: [],
   beforeList: (): void => {
     update();

frontend/src/ts/commandline/lists/time.ts

@@ -8,7 +8,7 @@ const commands: Command[] = [
     display: "Time...",
     icon: "fa-clock",
     subgroup: {
-      title: "Change time config...",
+      title: "Time...",
       configKey: "time",
       list: [
         {

frontend/src/ts/commandline/lists/words.ts

@@ -9,7 +9,7 @@ const commands: Command[] = [
     alias: "words",
     icon: "fa-font",
     subgroup: {
-      title: "Change word count...",
+      title: "Words...",
       configKey: "words",
       list: [
         {