From 06d505ebc9c8a8e87a4bdfd23b852652868e831c Mon Sep 17 00:00:00 2001
From: bijx <bsamiee@hotmail.com>
Date: Sun, 28 Jun 2026 22:19:22 -0400
Subject: [PATCH] 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                 |  2 +
 src/client/components/map/MapPicker.ts | 83 +++++++++++++++++++-------
 2 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/resources/lang/en.json b/resources/lang/en.json
index 49bf7e135..187677aa9 100644
--- a/resources/lang/en.json
+++ b/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...",
diff --git a/src/client/components/map/MapPicker.ts b/src/client/components/map/MapPicker.ts
index 442b08f12..5dc76aa15 100644
--- a/src/client/components/map/MapPicker.ts
+++ b/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