Overhaul reaction summary dialog

com.woltlab.wcf/templates/reactionSummaryDetailsFilterButtons.tpl

@@ -0,0 +1,28 @@
+<button
+	type="button"
+	class="button small{if !$reactionTypeID} active{/if}"
+	data-filter-reaction-type-id="0"
+	data-list-view-id="{$view->getID()}"
+>
+	<span>{lang}wcf.like.reaction.all{/lang}</span>
+	<span class="badge">{#$totalCount}</span>
+</button>
+
+{foreach from=$reactionTypes item='reactionType'}
+	<button
+		type="button"
+		class="button small{if $reactionType->reactionTypeID === $reactionTypeID} active{/if}"
+		data-filter-reaction-type-id="{$reactionType->reactionTypeID}"
+		data-list-view-id="{$view->getID()}"
+	>
+		{unsafe:$reactionType->renderIcon()}
+		<span>{$reactionType->getTitle()}</span>
+		<span class="badge">{#$reactionCounts[$reactionType->reactionTypeID]}</span>
+	</button>
+{/foreach}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Component/Reaction/SummaryDetailsFilterButtons'], ({ setup }) => {
+		setup('{unsafe:$view->getID()|encodeJS}');
+	});
+</script>

com.woltlab.wcf/templates/reactionSummaryDetailsListItems.tpl

@@ -0,0 +1,30 @@
+{foreach from=$view->getItems() item='reaction'}
+	{assign var='user' value=$reaction->getUserProfile()}
+	<div class="simpleUserList__item listView__item" data-object-id="{$reaction->getObjectID()}">
+		<div class="simpleUserList__item__avatar">
+			{unsafe:$user->getAvatar()->getImageTag(96)}
+		</div>
+
+		<div class="simpleUserList__item__content">
+			<div class="simpleUserList__item__title">
+				<h3 class="simpleUserList__item__username">
+					<a href="{$user->getLink()}" class="simpleUserList__item__link userLink" data-object-id="{$user->userID}">{unsafe:$user->getFormattedUsername()}</a>
+				</h3>
+				{if MODULE_USER_RANK && $user->getUserTitle()}
+					<span class="badge userTitleBadge{if $user->getRank() && $user->getRank()->cssClassName} {$user->getRank()->cssClassName}{/if}">{$user->getUserTitle()}</span>
+				{/if}
+			</div>
+			<div class="simpleUserList__item__description">
+				{time time=$reaction->time}
+			</div>
+		</div>
+
+		<div class="simpleUserList__item__extra">
+			{unsafe:$reaction->render()}
+
+			<div class="simpleUserList__item__interactions">
+				{unsafe:$view->renderInteractionContextMenuButton($reaction)}
+			</div>
+		</div>
+	</div>
+{/foreach}

com.woltlab.wcf/templates/shared_listView.tpl

@@ -1,6 +1,12 @@
 <div class="listView">
-	{if $view->isSortable() || $view->isFilterable() || $view->hasBulkInteractions()}
+	{if $view->isSortable() || $view->isFilterable() || $view->hasBulkInteractions() || $view->getAdditionalHeaderContent()}
 		<div class="listView__header">
+			{if $view->getAdditionalHeaderContent()}
+				<div class="listView__header__additionalContent">
+					{unsafe:$view->getAdditionalHeaderContent()}
+				</div>
+			{/if}
+
 			{if $view->isFilterable()}
 				<div class="listView__filters" id="{$view->getID()}_filters">
 					{foreach from=$view->getActiveFilters() item='value' key='key'}
@@ -17,53 +23,57 @@
 					{/foreach}
 				</div>
 			{/if}
-			<div class="listView__header__buttons">
-				{if $view->hasAvailableInteractions()}
-					<div class="listView__header__button">
-						<button type="button" class="button small listView__editMode__toggle">
-							{icon name='pencil'}
-							<span>{lang}wcf.global.button.edit{/lang}</span>
-						</button>
+			{hascontent}
+				<div class="listView__header__buttons">
+					{content}
+						{if $view->hasAvailableInteractions()}
+							<div class="listView__header__button">
+								<button type="button" class="button small listView__editMode__toggle">
+									{icon name='pencil'}
+									<span>{lang}wcf.global.button.edit{/lang}</span>
+								</button>
 
-						{if $view->hasBulkInteractions()}
-							<label class="listView__selectAllItems__label jsTooltip" title="{lang}wcf.clipboard.item.markAll{/lang}">
-								<input type="checkbox" id="{$view->getID()}_selectAllItems" class="listView__selectAllItems"
-									aria-label="{lang}wcf.clipboard.item.markAll{/lang}">
-							</label>
+								{if $view->hasBulkInteractions()}
+									<label class="listView__selectAllItems__label jsTooltip" title="{lang}wcf.clipboard.item.markAll{/lang}">
+										<input type="checkbox" id="{$view->getID()}_selectAllItems" class="listView__selectAllItems"
+											aria-label="{lang}wcf.clipboard.item.markAll{/lang}">
+									</label>
+								{/if}
+							</div>
 						{/if}
-					</div>
-				{/if}
-				{if $view->isSortable()}
-					<div class="listView__header__button dropdown">
-						<button type="button" class="button small dropdownToggle">
-							{icon name='arrow-down-short-wide'}
-							<span>{lang}wcf.global.sorting{/lang}</span>
-						</button>
-						<ul class="dropdownMenu" id="{$view->getID()}_sorting">
-							{foreach from=$view->getAvailableSortFields() item='sortField'}
-								<li>
-									<button type="button" class="listView__sorting__button" data-sort-id="{$sortField->id}">
-										{unsafe:$sortField}
-									</button>
-								</li>
-							{/foreach}
-						</ul>
-					</div>
-				{/if}
-				{if $view->isFilterable()}
-					<div class="listView__header__button">
-						<button type="button" class="button small" id="{$view->getID()}_filterButton" data-endpoint="{$view->getFilterActionEndpoint()}">
-							{icon name='sliders'}
-							{lang}wcf.global.filter{/lang}
-						</button>
-					</div>
-				{/if}
-				{if $view->getPrimaryButton()}
-					<div class="listView__header__button">
-						{unsafe:$view->getPrimaryButton()->render()}
-					</div>
-				{/if}
-			</div>
+						{if $view->isSortable()}
+							<div class="listView__header__button dropdown">
+								<button type="button" class="button small dropdownToggle">
+									{icon name='arrow-down-short-wide'}
+									<span>{lang}wcf.global.sorting{/lang}</span>
+								</button>
+								<ul class="dropdownMenu" id="{$view->getID()}_sorting">
+									{foreach from=$view->getAvailableSortFields() item='sortField'}
+										<li>
+											<button type="button" class="listView__sorting__button" data-sort-id="{$sortField->id}">
+												{unsafe:$sortField}
+											</button>
+										</li>
+									{/foreach}
+								</ul>
+							</div>
+						{/if}
+						{if $view->isFilterable()}
+							<div class="listView__header__button">
+								<button type="button" class="button small" id="{$view->getID()}_filterButton" data-endpoint="{$view->getFilterActionEndpoint()}">
+									{icon name='sliders'}
+									{lang}wcf.global.filter{/lang}
+								</button>
+							</div>
+						{/if}
+						{if $view->getPrimaryButton()}
+							<div class="listView__header__button">
+								{unsafe:$view->getPrimaryButton()->render()}
+							</div>
+						{/if}
+					{/content}
+				</div>
+			{/hascontent}
 		</div>
 	{/if}
 

ts/WoltLabSuite/Core/BootstrapFrontend.ts

@@ -148,7 +148,7 @@ export function setup(options: BootstrapOptions): void {
   }
 
   whenFirstSeen("woltlab-core-reaction-summary", () => {
-    void import("./Ui/Reaction/SummaryDetails").then(({ setup }) => setup());
+    void import("./Component/Reaction/SummaryDetails").then(({ setup }) => setup());
   });
   whenFirstSeen("woltlab-core-comment", () => {
     void import("./Component/Comment/woltlab-core-comment");

ts/WoltLabSuite/Core/Component/ListView.ts

@@ -128,6 +128,22 @@ export class ListView {
     this.#viewElement.addEventListener("interaction:reset-selection", () => {
       this.#state.resetSelection();
     });
+
+    this.#viewElement.addEventListener("interaction:set-parameters", (event: CustomEvent) => {
+      for (const key of Object.keys(event.detail)) {
+        if (this.#listViewParameters === undefined) {
+          this.#listViewParameters = new Map();
+        }
+
+        if (event.detail[key] === undefined) {
+          this.#listViewParameters.delete(key);
+        } else {
+          this.#listViewParameters.set(key, event.detail[key]);
+        }
+      }
+
+      void this.#loadItems(StateChangeCause.Change);
+    });
   }
 
   #setupState(

ts/WoltLabSuite/Core/Component/Reaction/SummaryDetails.ts

@@ -0,0 +1,37 @@
+/**
+ * Handles the reaction summary details dialog.
+ *
+ * @author Marcel Werk
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+import { getPhrase } from "WoltLabSuite/Core/Language";
+import { dialogFactory } from "../../Component/Dialog";
+import { wheneverFirstSeen } from "../../Helper/Selector";
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+
+export function setup(): void {
+  wheneverFirstSeen("woltlab-core-reaction-summary", (element: WoltlabCoreReactionSummaryElement) => {
+    element.addEventListener(
+      "showDetails",
+      promiseMutex(() => {
+        return dialogFactory()
+          .usingListView()
+          .fromPreset(
+            getPhrase("wcf.reactions.summary.title"),
+            "wcf\\system\\listView\\user\\ReactionSummaryDetailsListView",
+            1,
+            "",
+            "ASC",
+            undefined,
+            new Map([
+              ["objectID", element.objectId.toString()],
+              ["objectType", element.objectType],
+            ]),
+          );
+      }),
+    );
+  });
+}

ts/WoltLabSuite/Core/Component/Reaction/SummaryDetailsFilterButtons.ts

@@ -0,0 +1,35 @@
+/**
+ * Handles the filter buttons in the reaction summary details dialog.
+ *
+ * @author Marcel Werk
+ * @copyright 2001-2026 WoltLab GmbH
+ * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
+ * @since 6.3
+ */
+
+export function setup(listViewId: string): void {
+  document
+    .querySelectorAll<HTMLButtonElement>(`[data-filter-reaction-type-id][data-list-view-id="${listViewId}"]`)
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        if (button.classList.contains("active")) {
+          return;
+        }
+
+        document
+          .querySelectorAll<HTMLButtonElement>(`[data-filter-reaction-type-id][data-list-view-id="${listViewId}"]`)
+          .forEach((button) => {
+            button.classList.remove("active");
+          });
+
+        button.classList.add("active");
+
+        let reactionTypeID: string | undefined = undefined;
+        if (button.dataset.filterReactionTypeId && button.dataset.filterReactionTypeId !== "0") {
+          reactionTypeID = button.dataset.filterReactionTypeId;
+        }
+        const listView = document.getElementById(`${listViewId}_items`);
+        listView!.dispatchEvent(new CustomEvent("interaction:set-parameters", { detail: { reactionTypeID } }));
+      });
+    });
+}

ts/WoltLabSuite/Core/Ui/Reaction/SummaryDetails.ts

@@ -5,6 +5,7 @@
  * @copyright 2001-2022 WoltLab GmbH
  * @license GNU Lesser General Public License <http://opensource.org/licenses/lgpl-license.php>
  * @since 6.0
+ * @deprecated 6.3
  */
 
 import { dboAction } from "../../Ajax";