impr(commandline): show active tags with a check icon

monkeytypegame · Mar 13, 2024 · c1b71fb · c1b71fb
1 parent 0f6861d
commit c1b71fb
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
@@ -296,7 +296,14 @@ async function showCommands(): Promise<void> {
     }
     let configIcon = "";
     const configKey = command.configKey ?? (await getSubgroup()).configKey;
-    if (configKey !== undefined) {
+    if (command.active !== undefined) {
+      if (command.active()) {
+        firstActive = firstActive ?? index;
+        configIcon = `<i class="fas fa-fw fa-check"></i>`;
+      } else {
+        configIcon = `<i class="fas fa-fw"></i>`;
+      }
+    } else if (configKey !== undefined) {
       const valueIsIncluded =
         command.configValueMode === "include" &&
         (

diff --git a/frontend/src/ts/commandline/lists/tags.ts b/frontend/src/ts/commandline/lists/tags.ts
@@ -16,7 +16,6 @@ const subgroup: MonkeyTypes.CommandsSubgroup = {
 
 const commands: MonkeyTypes.Command[] = [
   {
-    visible: false,
     id: "changeTags",
     display: "Tags...",
     icon: "fa-tag",
@@ -50,6 +49,7 @@ function update(): void {
     id: "clearTags",
     display: `Clear tags`,
     icon: "fa-times",
+    sticky: true,
     exec: (): void => {
       const snapshot = DB.getSnapshot();
       if (!snapshot) return;
@@ -71,6 +71,12 @@ function update(): void {
       id: "toggleTag" + tag._id,
       display: tag.display,
       sticky: true,
+      active: () => {
+        return (
+          DB.getSnapshot()?.tags?.find((t) => t._id === tag._id)?.active ??
+          false
+        );
+      },
       exec: async (): Promise<void> => {
         TagController.toggle(tag._id);
         void ModesNotice.update();

diff --git a/frontend/src/ts/types/types.d.ts b/frontend/src/ts/types/types.d.ts
@@ -313,6 +313,7 @@ declare namespace MonkeyTypes {
     exec?: (input?: string) => void;
     hover?: () => void;
     available?: () => boolean;
+    active?: () => boolean;
     shouldFocusTestUI?: boolean;
     customData?: Record<string, string>;
   };