impr(theme): display custom theme names in indicator (@Sharann-del) (monkeytypegame#7798)

Improves the theme indicator by displaying the actual custom theme name
instead of the generic "custom".

- Matches active custom theme using color comparison
- Displays as: "themeName (custom)"
- Falls back to "custom" if no match is found

Notes:
- Config does not store custom theme IDs, so matching is done via color
arrays
- Handles edge cases such as unsaved themes and missing DB snapshot
- Does not affect preview or random theme behavior

---------

Co-authored-by: Jack <jack@monkeytype.com>

Author: 2 people

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

@@ -85,7 +85,21 @@ function updateThemeIndicator(nameOverride?: string): void {
   //text
   let str: string = Config.theme;
   if (randomTheme !== null) str = randomTheme;
-  if (Config.customTheme) str = "custom";
+
+  if (Config.customTheme && nameOverride === undefined) {
+    // Match current custom theme by colors since Config does not store custom theme IDs
+    const snapshot = DB.getSnapshot();
+    const matchedTheme = snapshot?.customThemes?.find((ct) =>
+      Arrays.areSortedArraysEqual(ct.colors, Config.customThemeColors),
+    );
+
+    if (matchedTheme) {
+      str = `${matchedTheme.name} (custom)`;
+    } else {
+      str = "custom";
+    }
+  }
+
   if (nameOverride !== undefined && nameOverride !== "") str = nameOverride;
   str = str.replace(/_/g, " ");