fix(settings): ensure themes UI is always up-to-date when renavigating (@byseif21) (monkeytypegame#6581)

### Description
When (changing / adding or removing themes from favorite ) via command
line or from the current theme button "in page e.g test page" and then
navigating to Settings > Themes, the UI does not immediately reflect the
current theme changes . The user has to manually refresh the page to see
these changes.

**Now**
 UI automatically refreshes
to reflect the current theme selection and favorites without requiring
a manual page refresh.

- Added refreshThemeUI function in theme-picker.ts that updates all
  theme-related UI components
- Called this refresh function in the settings page's beforeShow
lifecycle hook to ensure the theme UI is always up-to-date when the page
is displayed.


**FOR TESTING BEFORE & AFTER:**
keep changing themes then navigate to the settings and check and keep
doing those things again to verify that the active theme and favorites
update.

---------

Co-authored-by: Miodec <[email protected]>

Author: byseif21

frontend/src/ts/elements/settings/theme-picker.ts

@@ -115,7 +115,7 @@ function updateColors(
   colorPicker.find("input.color").val(color);
 }
 
-export async function refreshPresetButtons(): Promise<void> {
+export async function fillPresetButtons(): Promise<void> {
   // Update theme buttons
   const favThemesEl = document.querySelector<HTMLElement>(
     ".pageSettings .section.themes .favThemes.buttons"
@@ -211,7 +211,7 @@ export async function refreshPresetButtons(): Promise<void> {
   themesEl.innerHTML = themesElHTML;
 }
 
-export async function refreshCustomButtons(): Promise<void> {
+export async function fillCustomButtons(): Promise<void> {
   // Update custom theme buttons
   const customThemesEl = $(
     ".pageSettings .section.themes .allCustomThemes.buttons"
@@ -318,6 +318,12 @@ export function updateActiveTab(): void {
   }
 }
 
+// separated to avoid repeated calls
+export async function updateThemeUI(): Promise<void> {
+  await fillPresetButtons();
+  updateActiveButton();
+}
+
 // Add events to the DOM
 
 // Handle click on theme: preset or custom tab
@@ -363,7 +369,6 @@ $(".pageSettings").on("click", ".section.themes .theme .favButton", (e) => {
     .attr("theme") as ThemeName;
   if (theme !== undefined) {
     toggleFavourite(theme);
-    void refreshPresetButtons();
   } else {
     console.error(
       "Could not find the theme attribute attached to the button clicked!"
@@ -472,14 +477,14 @@ $(".pageSettings #saveCustomThemeButton").on("click", async () => {
     await DB.addCustomTheme(newCustomTheme);
     Loader.hide();
   }
-  void refreshCustomButtons();
+  void fillCustomButtons();
 });
 
 ConfigEvent.subscribe((eventKey) => {
   if (eventKey === "theme" && ActivePage.get() === "settings") {
     updateActiveButton();
   }
   if (eventKey === "favThemes" && ActivePage.get() === "settings") {
-    void refreshPresetButtons();
+    void fillPresetButtons();
   }
 });

frontend/src/ts/modals/simple-modals.ts

@@ -1152,7 +1152,7 @@ list.updateCustomTheme = new SimpleModal({
       };
     }
     UpdateConfig.setCustomThemeColors(newColors as CustomThemeColors);
-    void ThemePicker.refreshCustomButtons();
+    void ThemePicker.fillCustomButtons();
 
     return {
       status: 1,
@@ -1179,7 +1179,7 @@ list.deleteCustomTheme = new SimpleModal({
   onlineOnly: true,
   execFn: async (_thisPopup): Promise<ExecReturn> => {
     await DB.deleteCustomTheme(_thisPopup.parameters[0] as string);
-    void ThemePicker.refreshCustomButtons();
+    void ThemePicker.fillCustomButtons();
 
     return {
       status: 1,

frontend/src/ts/pages/settings.ts

@@ -686,8 +686,7 @@ async function fillSettingsPage(): Promise<void> {
   setEventDisabled(true);
 
   await initGroups();
-  await ThemePicker.refreshCustomButtons();
-  await ThemePicker.refreshPresetButtons();
+  await ThemePicker.fillCustomButtons();
 
   setEventDisabled(false);
   settingsInitialized = true;
@@ -819,7 +818,6 @@ export async function update(
   await Misc.sleep(0);
   ThemePicker.updateActiveTab();
   ThemePicker.setCustomInputs(true);
-  // ThemePicker.updateActiveButton();
 
   const setInputValue = (
     key: ConfigKey,
@@ -1271,6 +1269,8 @@ export const page = new PageWithUrlParams({
     await UpdateConfig.loadPromise;
     await fillSettingsPage();
     await update();
+    // theme UI updates manually to avoid duplication
+    await ThemePicker.updateThemeUI();
 
     handleHighlightSection(options.urlParams?.highlight);
   },