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`
- ${mapCategoryOrder
- .filter((categoryKey) => categoryKey !== "featured")
- .map((categoryKey) =>
- this.renderCategoryBar(categoryKey, mapsInCategory(categoryKey)),
- )}
+ ${this.allCategories.map((categoryKey) =>
+ this.renderCategoryBar(categoryKey, mapsInCategory(categoryKey)),
+ )}
+
`;
+ }
+
+ private renderExpandToggle() {
+ const anyExpanded = this.expandedCategories.size > 0;
+ return html`
+
`;
}
@@ -271,24 +313,25 @@ export class MapPicker extends LitElement {
const isSearching = this.searchQuery.trim().length > 0;
return html`
-
+
${isSearching
? null
: html`
- ${this.renderTabButton(
- "featured",
- translateText("map.featured"),
- )}
- ${this.renderTabButton("all", translateText("map.all"))}
- ${this.renderTabButton(
- "favorites",
- translateText("map.favorites"),
- )}
-
`}
+ 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"),
+ )}
+
+ ${this.activeTab === "all" ? this.renderExpandToggle() : null}`}
${isSearching ? this.renderSearchResults() : this.renderActiveTab()}