fix(settings): remove highlight if not set (@fehmer) (monkeytypegame#6711)

1. config highlight was shown again if you
- select a deep link
- go to another page
- go to the settings page

2. when closing a settings group with a highlight the animation broke
3. when opening a closed settings group with a highlight the animation
was repeated

Author: fehmer

frontend/src/ts/pages/settings.ts

@@ -869,6 +869,9 @@ export async function update(): Promise<void> {
   }
 }
 function toggleSettingsGroup(groupName: string): void {
+  //The highlight is repeated/broken when toggling the group
+  handleHighlightSection(undefined);
+
   const groupEl = $(`.pageSettings .settingsGroup.${groupName}`);
   groupEl.stop(true, true).slideToggle(250).toggleClass("slideup");
   if (groupEl.hasClass("slideup")) {
@@ -1353,7 +1356,15 @@ function getThemeDropdownData(
   }));
 }
 
-function handleHighlightSection(highlight: Highlight): void {
+function handleHighlightSection(highlight: Highlight | undefined): void {
+  if (highlight === undefined) {
+    const element = document.querySelector(".section.highlight");
+    if (element !== null) {
+      element.classList.remove("highlight");
+    }
+    return;
+  }
+
   const element = document.querySelector(
     `[data-config-name="${highlight}"] .groupTitle,[data-section-id="${highlight}"] .groupTitle`
   );
@@ -1419,9 +1430,8 @@ export const page = new PageWithUrlParams({
     await UpdateConfig.loadPromise;
     await fillSettingsPage();
     await update();
-    if (options.urlParams?.highlight !== undefined) {
-      handleHighlightSection(options.urlParams.highlight);
-    }
+
+    handleHighlightSection(options.urlParams?.highlight);
   },
 });