fix: Advanced filters does not contain tags after first tag was added (@Rowan441) (#7025)

### Description

fixes #6972

The setup logic for the "tags", "funbox", and "language" advanced
filters are only run on the first load. So adding a tag in the /settings
won't make the "tags" multiselect render when you navigate back to the
/account page unless you reload.

Added logic to add / destroy the "tags" multiselect if you create your
first tag or delete your last tag.

<!-- Please describe the change(s) made in your PR -->

### Checks

- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [ ] Adding a language?
- Make sure to follow the [languages
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LANGUAGES.md)
  - [ ] Add language to `packages/schemas/src/languages.ts`
- [ ] Add language to exactly one group in
`frontend/src/ts/constants/languages.ts`
  - [ ] Add language json file to `frontend/static/languages` 
- [ ] Adding a theme?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/THEMES.md)
  - [ ] Add theme to `packages/schemas/src/themes.ts`
  - [ ] Add theme to `frontend/src/ts/constants/themes.ts`
  - [ ] Add theme css file to `frontend/static/themes`
- [ ] Add some screenshot of the theme, especially with different test
settings (colorful, flip colors) to your pull request
- [ ] Adding a layout?
- [ ] Make sure to follow the [layouts
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/LAYOUTS.md)
  - [ ] Add layout to `packages/schemas/src/layouts.ts`
  - [ ] Add layout json file to `frontend/static/layouts` 
- [ ] Adding a font?
- Make sure to follow the [themes
documentation](https://github.com/monkeytypegame/monkeytype/blob/master/docs/FONTS.md)
  - [ ] Add font file  to `frontend/static/webfonts`
  - [ ] Add font to `packages/schemas/src/fonts.ts`
  - [ ] Add font to `frontend/src/ts/constants/fonts.ts`
- [x] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [x] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title.

<!-- label(optional scope): pull request title (@your_github_username)
-->

<!-- I know I know they seem boring but please do them, they help us and
you will find out it also helps you.-->

Closes #6972

<!-- the issue(s) your PR resolves if any (delete if that is not the
case) -->
<!-- please also reference any issues and or PRs related to your pull
request -->
<!-- Also remove it if you are not following any issues. -->

<!-- pro tip: you can mention an issue, PR, or discussion on GitHub by
referencing its hash number e.g:
[#1234](#1234) -->

<!-- pro tip: you can press . (dot or period) in the code tab of any
GitHub repo to get access to GitHub's VS Code web editor Enjoy! :) -->

Author: Rowan441

frontend/src/ts/elements/account/result-filters.ts

@@ -794,9 +794,14 @@ export function updateTagsDropdownOptions(): void {
 
 let buttonsAppended = false;
 
-export async function appendButtons(
+export async function appendDropdowns(
   selectChangeCallback: () => void
 ): Promise<void> {
+  //snapshot at this point is guaranteed to exist
+  const snapshot = DB.getSnapshot() as Snapshot;
+
+  tagDropdownUpdate(snapshot);
+
   if (buttonsAppended) return;
 
   selectChangeCallbackFn = selectChangeCallback;
@@ -864,60 +869,58 @@ export async function appendButtons(
     },
   });
 
-  //snapshot at this point is guaranteed to exist
-  const snapshot = DB.getSnapshot() as Snapshot;
+  void updateFilterPresets();
+  buttonsAppended = true;
+}
 
+function tagDropdownUpdate(snapshot: Snapshot): void {
   const tagsSection = $(
     ".pageAccount .content .filterButtons .buttonsAndTitle.tags"
   );
 
   if (snapshot.tags.length === 0) {
     tagsSection.addClass("hidden");
+    if (groupSelects["tags"]) {
+      groupSelects["tags"].destroy();
+      delete groupSelects["tags"];
+    }
+    setFilter("tags", "none", true);
   } else {
     tagsSection.removeClass("hidden");
+
     updateTagsDropdownOptions();
-    const selectEl = document.querySelector(
-      ".pageAccount .content .filterButtons .buttonsAndTitle.tags .select .tagsSelect"
-    );
-    if (selectEl) {
-      groupSelects["tags"] = new SlimSelect({
-        select: selectEl,
-        settings: {
-          showSearch: true,
-          placeholderText: "select a tag",
-          allowDeselect: true,
-          closeOnSelect: false,
-        },
-        events: {
-          beforeChange: (selectedOptions, oldSelectedOptions): boolean => {
-            return selectBeforeChangeFn(
-              "tags",
-              selectedOptions,
-              oldSelectedOptions
-            );
+
+    // Only create SlimSelect if it doesn't exist yet
+    if (!groupSelects["tags"]) {
+      const selectEl = document.querySelector(
+        ".pageAccount .content .filterButtons .buttonsAndTitle.tags .select .tagsSelect"
+      );
+
+      if (selectEl) {
+        groupSelects["tags"] = new SlimSelect({
+          select: selectEl,
+          settings: {
+            showSearch: true,
+            placeholderText: "select a tag",
+            allowDeselect: true,
+            closeOnSelect: false,
           },
-          beforeOpen: (): void => {
-            adjustScrollposition("tags");
+          events: {
+            beforeChange: (selectedOptions, oldSelectedOptions): boolean => {
+              return selectBeforeChangeFn(
+                "tags",
+                selectedOptions,
+                oldSelectedOptions
+              );
+            },
+            beforeOpen: (): void => {
+              adjustScrollposition("tags");
+            },
           },
-        },
-      });
+        });
+      }
     }
   }
-
-  void updateFilterPresets();
-  buttonsAppended = true;
-}
-
-export function removeButtons(): void {
-  $(
-    ".pageAccount .content .filterButtons .buttonsAndTitle.languages .buttons"
-  ).empty();
-  $(
-    ".pageAccount .content .filterButtons .buttonsAndTitle.funbox .buttons"
-  ).empty();
-  $(
-    ".pageAccount .content .filterButtons .buttonsAndTitle.tags .buttons"
-  ).empty();
 }
 
 $(".group.presetFilterButtons .filterBtns").on(

frontend/src/ts/pages/account.ts

@@ -1349,14 +1349,12 @@ export const page = new Page({
   },
   afterHide: async (): Promise<void> => {
     reset();
-    ResultFilters.removeButtons();
     Skeleton.remove("pageAccount");
   },
   beforeShow: async (): Promise<void> => {
     Skeleton.append("pageAccount", "main");
     const snapshot = DB.getSnapshot();
-    ResultFilters.updateTagsDropdownOptions();
-    await ResultFilters.appendButtons(update);
+    await ResultFilters.appendDropdowns(update);
     ResultFilters.updateActive();
     await Misc.sleep(0);