fix(themes): wrong theme added to favorites when using random theme (mitjans) (#5532)

* fix(theme): random theme switcher (mitjans)

Signed-off-by: Carles Mitjans <[email protected]>

* refactor(theme): remove unnecessary clear of random theme (mitjans)

* chore: remove some words from the profanity list

---------

Signed-off-by: Carles Mitjans <[email protected]>
Co-authored-by: Miodec <[email protected]>

2 files changed, 24 insertions, 9 deletions

diff --git a/frontend/src/ts/commandline/lists/add-or-remove-theme-to-favorites.ts b/frontend/src/ts/commandline/lists/add-or-remove-theme-to-favorites.ts
index d33f83cb4..0cda2388b 100644
--- a/frontend/src/ts/commandline/lists/add-or-remove-theme-to-favorites.ts
+++ b/frontend/src/ts/commandline/lists/add-or-remove-theme-to-favorites.ts
@@ -1,4 +1,5 @@
 import Config, * as UpdateConfig from "../../config";
+import { randomTheme } from "../../controllers/theme-controller";
 
 const commands: MonkeyTypes.Command[] = [
   {
@@ -6,12 +7,16 @@ const commands: MonkeyTypes.Command[] = [
     display: "Add current theme to favorite",
     icon: "fa-heart",
     available: (): boolean => {
-      return !Config.customTheme && !Config.favThemes.includes(Config.theme);
+      return (
+        !Config.customTheme &&
+        !Config.favThemes.includes(randomTheme ?? Config.theme)
+      );
     },
     exec: (): void => {
       const { theme, favThemes, customTheme } = Config;
-      if (!customTheme && !favThemes.includes(theme)) {
-        UpdateConfig.setFavThemes([...favThemes, theme]);
+      const themeToUpdate = randomTheme ?? theme;
+      if (!customTheme && !favThemes.includes(themeToUpdate)) {
+        UpdateConfig.setFavThemes([...favThemes, themeToUpdate]);
       }
     },
   },
@@ -20,12 +25,18 @@ const commands: MonkeyTypes.Command[] = [
     display: "Remove current theme from favorite",
     icon: "fa-heart-broken",
     available: (): boolean => {
-      return !Config.customTheme && Config.favThemes.includes(Config.theme);
+      return (
+        !Config.customTheme &&
+        Config.favThemes.includes(randomTheme ?? Config.theme)
+      );
     },
     exec: (): void => {
       const { theme, favThemes, customTheme } = Config;
-      if (!customTheme && favThemes.includes(theme)) {
-        UpdateConfig.setFavThemes([...favThemes.filter((t) => t !== theme)]);
+      const themeToUpdate = randomTheme ?? theme;
+      if (!customTheme && favThemes.includes(themeToUpdate)) {
+        UpdateConfig.setFavThemes([
+          ...favThemes.filter((t) => t !== themeToUpdate),
+        ]);
       }
     },
   },
diff --git a/frontend/src/ts/controllers/theme-controller.ts b/frontend/src/ts/controllers/theme-controller.ts
index 005374069..dedca718d 100644
--- a/frontend/src/ts/controllers/theme-controller.ts
+++ b/frontend/src/ts/controllers/theme-controller.ts
@@ -191,6 +191,7 @@ async function apply(
 
 function updateFooterThemeName(nameOverride?: string): void {
   let str = Config.theme;
+  if (randomTheme !== null) str = randomTheme;
   if (Config.customTheme) str = "custom";
   if (nameOverride !== undefined && nameOverride !== "") str = nameOverride;
   str = str.replace(/_/g, " ");
@@ -232,9 +233,10 @@ async function set(
 export async function clearPreview(applyTheme = true): Promise<void> {
   if (isPreviewingTheme) {
     isPreviewingTheme = false;
-    randomTheme = null;
     if (applyTheme) {
-      if (Config.customTheme) {
+      if (randomTheme !== null) {
+        await apply(randomTheme);
+      } else if (Config.customTheme) {
         await apply("custom");
       } else {
         await apply(Config.theme);
@@ -300,7 +302,7 @@ export async function randomizeTheme(): Promise<void> {
     randomTheme = "custom";
   }
 
-  preview(randomTheme, colorsOverride);
+  await apply(randomTheme, colorsOverride);
 
   if (randomThemeIndex >= themesList.length) {
     let name = randomTheme.replace(/_/g, " ");
@@ -380,10 +382,12 @@ ConfigEvent.subscribe(async (eventKey, eventValue, nosave) => {
     nosave ? preview("custom") : await set("custom");
   }
   if (eventKey === "theme") {
+    await clearRandom();
     await clearPreview(false);
     await set(eventValue as string);
   }
   if (eventKey === "setThemes") {
+    await clearRandom();
     await clearPreview(false);
     if (Config.autoSwitchTheme) {
       if (window.matchMedia?.("(prefers-color-scheme: dark)").matches) {