feat: add quick theme favorite indicator to the theme picker & via footer current theme button (@byseif21)

frontend/src/html/footer.html

@@ -74,7 +74,10 @@
         aria-label="Shift-click to toggle custom theme"
         data-balloon-pos="left"
       >
-        <i class="fas fa-fw fa-palette"></i>
+        <div class="icon">
+          <i class="fas fa-star favIndicator"></i>
+          <i class="fas fa-fw fa-palette"></i>
+        </div>
         <div class="text">serika dark</div>
       </button>
       <button class="currentVersion textButton">

frontend/src/styles/commandline.scss

@@ -67,7 +67,8 @@
           color: var(--sub-color);
         }
 
-        .fas {
+        .fas,
+        .far {
           margin-right: 0.5rem;
           color: var(--sub-color);
         }
@@ -86,11 +87,13 @@
           }
         }
 
-        &.withThemeBubbles {
-          grid-template-columns: auto 1fr auto;
+        &.changeThemeCommand {
+          grid-template-columns: auto 1fr auto auto;
+          position: relative;
           .themeBubbles {
             display: grid;
             grid-auto-flow: column;
+            place-content: center;
             gap: 0.5em;
             border-radius: 1em;
             .themeBubble {
@@ -99,6 +102,9 @@
               border-radius: 100%;
             }
           }
+          .themeFavIcon {
+            margin-right: 0.25rem;
+          }
         }
       }
     }

frontend/src/styles/footer.scss

@@ -82,6 +82,21 @@ footer {
     }
   }
 
+  .current-theme {
+    .icon {
+      position: relative;
+      .favIndicator {
+        font-size: 0.5em;
+        top: -0.5em;
+        right: -0.5em;
+        padding: 0.25em;
+        position: absolute;
+        background: var(--bg-color);
+        border-radius: 100%;
+      }
+    }
+  }
+
   &.focus {
     .keyTips {
       opacity: 0 !important;

frontend/src/ts/commandline/commandline.ts

@@ -419,10 +419,12 @@ async function showCommands(): Promise<void> {
     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="fas fa-fw ${icon}"></i>`;
+      icon = `<i class="${iconTypeClass} fa-fw ${icon}"></i>`;
     }
     let configIcon = "";
     if (command.isActive) {
@@ -451,12 +453,27 @@ async function showCommands(): Promise<void> {
 
     if (command.customData !== undefined) {
       if (command.id.startsWith("changeTheme")) {
-        html += `<div class="command withThemeBubbles" data-command-id="${command.id}" data-index="${index}" style="${customStyle}">
+        html += `<div class="command changeThemeCommand" data-command-id="${
+          command.id
+        }" data-index="${index}" style="${customStyle}">
       ${iconHTML}<div>${display}</div>
-      <div class="themeBubbles" style="background: ${command.customData["bgColor"]};outline: 0.25rem solid ${command.customData["bgColor"]};">
-        <div class="themeBubble" style="background: ${command.customData["mainColor"]}"></div>
-        <div class="themeBubble" style="background: ${command.customData["subColor"]}"></div>
-        <div class="themeBubble" style="background: ${command.customData["textColor"]}"></div>
+      <div class="themeFavIcon ${
+        command.customData["isFavorite"] === true ? "" : "hidden"
+      }">
+        <i class="fas fa-star"></i>
+      </div>
+      <div class="themeBubbles" style="background: ${
+        command.customData["bgColor"]
+      };outline: 0.25rem solid ${command.customData["bgColor"]};">
+        <div class="themeBubble" style="background: ${
+          command.customData["mainColor"]
+        }"></div>
+        <div class="themeBubble" style="background: ${
+          command.customData["subColor"]
+        }"></div>
+        <div class="themeBubble" style="background: ${
+          command.customData["textColor"]
+        }"></div>
       </div>
       </div>`;
       }

frontend/src/ts/commandline/lists/add-or-remove-theme-to-favorites.ts

@@ -7,7 +7,7 @@ const commands: Command[] = [
   {
     id: "addThemeToFavorite",
     display: "Add current theme to favorite",
-    icon: "fa-heart",
+    icon: "fa-star",
     available: (): boolean => {
       return (
         !Config.customTheme &&
@@ -25,7 +25,8 @@ const commands: Command[] = [
   {
     id: "removeThemeFromFavorite",
     display: "Remove current theme from favorite",
-    icon: "fa-heart-broken",
+    icon: "fa-star",
+    iconType: "regular",
     available: (): boolean => {
       return (
         !Config.customTheme &&

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

@@ -4,17 +4,19 @@ import * as ThemeController from "../../controllers/theme-controller";
 import { Command, CommandsSubgroup } from "../types";
 import { Theme, ThemesList } from "../../constants/themes";
 import { not } from "@monkeytype/util/predicates";
+import * as ConfigEvent from "../../observables/config-event";
+import * as Misc from "../../utils/misc";
 
 const isFavorite = (theme: Theme): boolean =>
   Config.favThemes.includes(theme.name);
 
-const subgroup: CommandsSubgroup = {
-  title: "Theme...",
-  configKey: "theme",
-  list: [
-    ...ThemesList.filter(isFavorite),
-    ...ThemesList.filter(not(isFavorite)),
-  ].map((theme: Theme) => ({
+/**
+ * creates a theme command object for the given theme
+ * @param theme the theme to create a command for
+ * @returns a command object for the theme
+ */
+const createThemeCommand = (theme: Theme): Command => {
+  return {
     id: "changeTheme" + capitalizeFirstLetterOfEachWord(theme.name),
     display: theme.name.replace(/_/g, " "),
     configValue: theme.name,
@@ -24,6 +26,7 @@ const subgroup: CommandsSubgroup = {
       bgColor: theme.bgColor,
       subColor: theme.subColor,
       textColor: theme.textColor,
+      isFavorite: isFavorite(theme),
     },
     hover: (): void => {
       // previewTheme(theme.name);
@@ -32,7 +35,25 @@ const subgroup: CommandsSubgroup = {
     exec: (): void => {
       UpdateConfig.setTheme(theme.name);
     },
-  })),
+  };
+};
+
+/**
+ * sorts themes with favorites first, then non-favorites
+ * @param themes the themes to sort
+ * @returns sorted array of themes
+ */
+const sortThemesByFavorite = (themes: Theme[]): Theme[] => [
+  ...themes.filter(isFavorite),
+  ...themes.filter(not(isFavorite)),
+];
+
+const subgroup: CommandsSubgroup = {
+  title: "Theme...",
+  configKey: "theme",
+  list: sortThemesByFavorite(ThemesList).map((theme) =>
+    createThemeCommand(theme)
+  ),
 };
 
 const commands: Command[] = [
@@ -44,4 +65,28 @@ const commands: Command[] = [
   },
 ];
 
+export function update(themes: Theme[]): void {
+  // clear the current list
+  subgroup.list = [];
+
+  // rebuild with favorites first, then non-favorites
+  subgroup.list = sortThemesByFavorite(themes).map((theme) =>
+    createThemeCommand(theme)
+  );
+}
+
+// subscribe to theme-related config events to update the theme command list
+ConfigEvent.subscribe((eventKey, _eventValue) => {
+  if (eventKey === "favThemes") {
+    // update themes list when favorites change
+    try {
+      update(ThemesList);
+    } catch (e: unknown) {
+      console.error(
+        Misc.createErrorMessage(e, "Failed to update themes commands")
+      );
+    }
+  }
+});
+
 export default commands;

frontend/src/ts/commandline/types.ts

@@ -16,6 +16,7 @@ export type Command = {
   subgroup?: CommandsSubgroup;
   found?: boolean;
   icon?: string;
+  iconType?: "regular" | "solid";
   sticky?: boolean;
   alias?: string;
   input?: boolean;

frontend/src/ts/controllers/theme-controller.ts

@@ -179,7 +179,7 @@ async function apply(
   void updateFavicon();
   $("#metaThemeColor").attr("content", colors.bg);
   // }
-  updateFooterThemeName(isPreview ? themeName : undefined);
+  updateFooterIndicator(isPreview ? themeName : undefined);
 
   if (isColorDark(await ThemeColors.get("bg"))) {
     $("body").addClass("darkMode");
@@ -188,13 +188,47 @@ async function apply(
   }
 }
 
-function updateFooterThemeName(nameOverride?: string): void {
+function updateFooterIndicator(nameOverride?: string): void {
+  const indicator = document.querySelector<HTMLElement>(
+    "footer .right .current-theme"
+  );
+  const text = indicator?.querySelector<HTMLElement>(".text");
+  const favIcon = indicator?.querySelector<HTMLElement>(".favIndicator");
+
+  if (
+    !(indicator instanceof HTMLElement) ||
+    !(text instanceof HTMLElement) ||
+    !(favIcon instanceof HTMLElement)
+  ) {
+    return;
+  }
+
+  //text
   let str: string = Config.theme;
   if (randomTheme !== null) str = randomTheme;
   if (Config.customTheme) str = "custom";
   if (nameOverride !== undefined && nameOverride !== "") str = nameOverride;
   str = str.replace(/_/g, " ");
-  $(".current-theme .text").text(str);
+  text.innerText = str;
+
+  //fav icon
+  const isCustom = Config.customTheme;
+  // hide the favorite icon completely for custom themes
+  if (isCustom) {
+    favIcon.style.display = "none";
+    return;
+  }
+  favIcon.style.display = "";
+  const currentTheme = nameOverride ?? randomTheme ?? Config.theme;
+  const isFavorite =
+    currentTheme !== null &&
+    Config.favThemes.includes(currentTheme as ThemeName);
+
+  if (isFavorite) {
+    favIcon.style.display = "block";
+  } else {
+    favIcon.style.display = "none";
+  }
 }
 
 export function preview(
@@ -433,6 +467,17 @@ ConfigEvent.subscribe(async (eventKey, eventValue, nosave) => {
   ) {
     await set(Config.themeDark, true);
   }
+  if (
+    [
+      "theme",
+      "customTheme",
+      "customThemeColors",
+      "randomTheme",
+      "favThemes",
+    ].includes(eventKey)
+  ) {
+    updateFooterIndicator();
+  }
 });
 
 window.addEventListener("customBackgroundFailed", () => {