From c1b71fb9ea07e75712927c9b20169270b697f9a9 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Wed, 13 Mar 2024 12:08:19 +0100
Subject: [PATCH] impr(commandline): show active tags with a check icon

---
 frontend/src/ts/commandline/commandline.ts | 9 ++++++++-
 frontend/src/ts/commandline/lists/tags.ts  | 8 +++++++-
 frontend/src/ts/types/types.d.ts           | 1 +
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/frontend/src/ts/commandline/commandline.ts b/frontend/src/ts/commandline/commandline.ts
index 3d62ae639110..6e7bd402421b 100644
--- 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
index 496fdf10bf1f..90f487f1ee12 100644
--- 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
index 760f74f5f170..37585be9f8e2 100644
--- 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>;
   };