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()}