From f9f9eb3781abc53dd4d55de7cd885c5b900e9bce Mon Sep 17 00:00:00 2001
From: Alexander Ebert <ebert@woltlab.com>
Date: Sat, 7 May 2022 18:13:12 +0200
Subject: [PATCH] Visual separator for specialized search filters

See https://www.woltlab.com/community/thread/295502-kategorie-auswahl-ist-verrutscht/
---
 com.woltlab.wcf/templates/search.tpl          |  2 ++
 ts/WoltLabSuite/Core/Ui/Search/Extended.ts    | 18 +++++++++++-
 .../WoltLabSuite/Core/Ui/Search/Extended.js   | 18 +++++++++++-
 wcfsetup/install/files/style/ui/search.scss   | 28 +++++++++++++++++++
 4 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/com.woltlab.wcf/templates/search.tpl b/com.woltlab.wcf/templates/search.tpl
index 61b248f688..8efade706b 100644
--- a/com.woltlab.wcf/templates/search.tpl
+++ b/com.woltlab.wcf/templates/search.tpl
@@ -65,6 +65,8 @@
 				{event name='searchFilters'}
 			</div>
 
+			<div class="searchFiltersTitle" aria-hidden="true" hidden></div>
+
 			{foreach from=$objectTypes key=objectTypeName item=objectType}
 				{if $objectType->isAccessible() && $objectType->getFormTemplateName()}
 					<div class="searchFilters objectTypeSearchFilters" data-object-type="{$objectTypeName}" hidden>
diff --git a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
index 51cdaac1c1..6115fc36f4 100644
--- a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
@@ -75,9 +75,25 @@ export class UiSearchExtended {
   }
 
   private changeType(): void {
+    let hasVisibleFilters = false;
     document.querySelectorAll(".objectTypeSearchFilters").forEach((filter: HTMLElement) => {
-      filter.hidden = filter.dataset.objectType !== this.typeInput.value;
+      if (filter.dataset.objectType === this.typeInput.value) {
+        hasVisibleFilters = true;
+        filter.hidden = false;
+      } else {
+        filter.hidden = true;
+      }
     });
+
+    const title = document.querySelector(".searchFiltersTitle") as HTMLElement;
+    if (hasVisibleFilters) {
+      const selectedOption = this.typeInput.selectedOptions.item(0)!;
+      title.textContent = selectedOption.textContent!.trim();
+
+      title.hidden = false;
+    } else {
+      title.hidden = true;
+    }
   }
 
   private async search(): Promise<void> {
diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
index cdd4d0900d..c9029526f8 100644
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
@@ -51,9 +51,25 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
             });
         }
         changeType() {
+            let hasVisibleFilters = false;
             document.querySelectorAll(".objectTypeSearchFilters").forEach((filter) => {
-                filter.hidden = filter.dataset.objectType !== this.typeInput.value;
+                if (filter.dataset.objectType === this.typeInput.value) {
+                    hasVisibleFilters = true;
+                    filter.hidden = false;
+                }
+                else {
+                    filter.hidden = true;
+                }
             });
+            const title = document.querySelector(".searchFiltersTitle");
+            if (hasVisibleFilters) {
+                const selectedOption = this.typeInput.selectedOptions.item(0);
+                title.textContent = selectedOption.textContent.trim();
+                title.hidden = false;
+            }
+            else {
+                title.hidden = true;
+            }
         }
         async search() {
             var _a;
diff --git a/wcfsetup/install/files/style/ui/search.scss b/wcfsetup/install/files/style/ui/search.scss
index f1e5197f03..6600ab1937 100644
--- a/wcfsetup/install/files/style/ui/search.scss
+++ b/wcfsetup/install/files/style/ui/search.scss
@@ -32,6 +32,31 @@
 	margin-top: 20px;
 }
 
+.searchFiltersTitle {
+	align-items: center;
+	color: $wcfContentDimmedText;
+	display: flex;
+	margin-top: 10px;
+
+	&::before {
+		border-top: 1px solid $wcfContentBorderInner;
+		content: "";
+		flex: 0 0 20px;
+		margin-right: 10px;
+	}
+
+	&::after {
+		border-top: 1px solid $wcfContentBorderInner;
+		content: "";
+		flex: 1 0 auto;
+		margin-left: 10px;
+	}
+
+	& ~ .searchFilters {
+		margin-top: 10px;
+	}
+}
+
 @include screen-md-up {
 	.searchFilters {
 		columns: 2;
@@ -39,6 +64,9 @@
 
 	.searchFilters > :is(div, dl) {
 		break-inside: avoid-column;
+
+		/* work-around for Firefox */
+		overflow: hidden;
 	}
 
 	.searchFiltersContainer .searchButton {
-- 
2.20.1