feat: Expand maps button (#4431)

## Description:

QoL fix w.r.t. "All" maps category. Maps used to all be shown in a big
list, now the category sections need to be expanded one by one.
Categories are super clean and useful, but to visually see and pick maps
when you're not certain which one you want to play becomes challenging
(to click and expand each category manually). This just adds a simple
"Expand All" and "Collapse All" button to the all category list on Solo
and Private Match screens.


https://github.com/user-attachments/assets/e5d7a754-a6b6-461c-b039-7b6a8d3bee46


## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory

## Please put your Discord username so you can be contacted if a bug or
regression is found:

bijx

resources/lang/en.json

@@ -982,7 +982,9 @@
     "world": "World"
   },
   "map_component": {
+    "collapse_all": "Collapse all",
     "error": "Error",
+    "expand_all": "Expand all",
     "favorite": "Add to favourites",
     "favorites_empty": "Click the star on any map to favourite it",
     "loading": "Loading...",

src/client/components/map/MapPicker.ts

@@ -71,6 +71,17 @@ export class MapPicker extends LitElement {
     this.expandedCategories = expanded;
   }
 
+  private get allCategories(): MapCategory[] {
+    return mapCategoryOrder.filter((categoryKey) => categoryKey !== "featured");
+  }
+
+  private toggleExpandAll() {
+    this.expandedCategories =
+      this.expandedCategories.size > 0
+        ? new Set()
+        : new Set(this.allCategories);
+  }
+
   private preventImageDrag(event: DragEvent) {
     event.preventDefault();
   }
@@ -183,11 +194,42 @@ export class MapPicker extends LitElement {
 
   private renderAllTab() {
     return html`<div class="space-y-3">
-      ${mapCategoryOrder
-        .filter((categoryKey) => categoryKey !== "featured")
-        .map((categoryKey) =>
-          this.renderCategoryBar(categoryKey, mapsInCategory(categoryKey)),
-        )}
+      ${this.allCategories.map((categoryKey) =>
+        this.renderCategoryBar(categoryKey, mapsInCategory(categoryKey)),
+      )}
+    </div>`;
+  }
+
+  private renderExpandToggle() {
+    const anyExpanded = this.expandedCategories.size > 0;
+    return html`<div
+      class="shrink-0 rounded-xl border border-white/10 bg-black/20 p-1"
+    >
+      <button
+        type="button"
+        aria-expanded=${anyExpanded}
+        title=${anyExpanded
+          ? translateText("map_component.collapse_all")
+          : translateText("map_component.expand_all")}
+        @click=${() => this.toggleExpandAll()}
+        class="h-full flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-bold uppercase tracking-wider text-white/60 hover:text-white transition-all active:scale-95"
+      >
+        <svg
+          class="w-3 h-3 shrink-0 transition-transform duration-200 ${anyExpanded
+            ? "rotate-180"
+            : ""}"
+          viewBox="0 0 12 12"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path d="M2 4l4 5 4-5z" />
+        </svg>
+        <span class="hidden sm:inline">
+          ${anyExpanded
+            ? translateText("map_component.collapse_all")
+            : translateText("map_component.expand_all")}
+        </span>
+      </button>
     </div>`;
   }
 
@@ -271,24 +313,25 @@ export class MapPicker extends LitElement {
     const isSearching = this.searchQuery.trim().length > 0;
     return html`
       <div class="space-y-8">
-        <div class="w-full">
+        <div class="w-full flex items-center gap-2">
           ${isSearching
             ? null
             : html`<div
-                role="tablist"
-                aria-label="${translateText("map.map")}"
-                class="grid grid-cols-3 gap-2 rounded-xl border border-white/10 bg-black/20 p-1"
-              >
-                ${this.renderTabButton(
-                  "featured",
-                  translateText("map.featured"),
-                )}
-                ${this.renderTabButton("all", translateText("map.all"))}
-                ${this.renderTabButton(
-                  "favorites",
-                  translateText("map.favorites"),
-                )}
-              </div>`}
+                  role="tablist"
+                  aria-label="${translateText("map.map")}"
+                  class="flex-1 grid grid-cols-3 gap-2 rounded-xl border border-white/10 bg-black/20 p-1"
+                >
+                  ${this.renderTabButton(
+                    "featured",
+                    translateText("map.featured"),
+                  )}
+                  ${this.renderTabButton("all", translateText("map.all"))}
+                  ${this.renderTabButton(
+                    "favorites",
+                    translateText("map.favorites"),
+                  )}
+                </div>
+                ${this.activeTab === "all" ? this.renderExpandToggle() : null}`}
         </div>
         ${isSearching ? this.renderSearchResults() : this.renderActiveTab()}
         <div