Migrate WoltLabSuite/Core/Component/User/List to list views

com.woltlab.wcf/templates/boxTodaysBirthdays.tpl

@@ -24,21 +24,13 @@
 	<button type="button" class="jsTodaysBirthdays button small more jsOnly">{lang}wcf.global.button.showAll{/lang}</button>
 
 	<script data-relocate="true">
-		require(['WoltLabSuite/Core/Component/User/List'], ({ UserList }) => {
-			let userList;
+		require(['WoltLabSuite/Core/Component/Dialog'], ({ dialogFactory }) => {
 			document.querySelector('.jsTodaysBirthdays').addEventListener('click', () => {
-				if (userList === undefined) {
-					userList = new UserList({
-						className: 'wcf\\data\\user\\UserBirthdayAction',
-						parameters: {
-							date: '{time type='custom' time=TIME_NOW format='Y-m-d'}',
-							sortField: '{$sortField}',
-							sortOrder: '{$sortOrder}'
-						}
-					}, '{unsafe:$box->getTitle()|encodeJS} ({time type='plainDate' time=TIME_NOW})');
-				}
-
-				userList.open();
+				dialogFactory().usingListView().fromPreset(
+					'{unsafe:$box->getTitle()|encodeJS} ({time type='plainDate' time=TIME_NOW})',
+					'wcf\\system\\listView\\user\\UserBirthdayListView',
+					new Map([['date', '{time type='custom' time=TIME_NOW format='Y-m-d'}']])
+				);
 			});
 		});
 	</script>

com.woltlab.wcf/templates/pollParticipantListViewFilterButtons.tpl

@@ -0,0 +1,27 @@
+<button
+	type="button"
+	class="button small{if !$optionID} active{/if}"
+	data-filter-option-id="0"
+	data-list-view-id="{$view->getID()}"
+>
+	<span>{lang}wcf.global.button.all{/lang}</span>
+	<span class="badge">{#$totalCount}</span>
+</button>
+
+{foreach from=$options item='option'}
+	<button
+		type="button"
+		class="button small{if $option->optionID === $optionID} active{/if}"
+		data-filter-option-id="{$option->optionID}"
+		data-list-view-id="{$view->getID()}"
+	>
+		<span>{$option->optionValue}</span>
+		<span class="badge">{#$voteCounts[$option->optionID]}</span>
+	</button>
+{/foreach}
+
+<script data-relocate="true">
+	require(['WoltLabSuite/Core/Component/Poll/ParticipantFilterButtons'], ({ setup }) => {
+		setup('{unsafe:$view->getID()|encodeJS}');
+	});
+</script>

com.woltlab.wcf/templates/reactionSummaryDetailsFilterButtons.tpl

@@ -4,7 +4,7 @@
 	data-filter-reaction-type-id="0"
 	data-list-view-id="{$view->getID()}"
 >
-	<span>{lang}wcf.like.reaction.all{/lang}</span>
+	<span>{lang}wcf.global.button.all{/lang}</span>
 	<span class="badge">{#$totalCount}</span>
 </button>
 

com.woltlab.wcf/templates/shared_simpleUserListItems.tpl

@@ -0,0 +1,29 @@
+{foreach from=$view->getItems() item='user'}
+	<div class="simpleUserList__item listView__item" data-object-id="{$user->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>
+			{if $view->getItemDescription($user)}
+				<div class="simpleUserList__item__description">
+					{unsafe:$view->getItemDescription($user)}
+				</div>
+			{/if}
+		</div>
+
+		<div class="simpleUserList__item__extra">
+			<div class="simpleUserList__item__interactions">
+				{unsafe:$view->renderInteractionContextMenuButton($user)}
+			</div>
+		</div>
+	</div>
+{/foreach}

ts/WoltLabSuite/Core/Component/Poll/ParticipantFilterButtons.ts

@@ -0,0 +1,35 @@
+/**
+ * Handles the filter buttons in the poll participants 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-option-id][data-list-view-id="${listViewId}"]`)
+    .forEach((button) => {
+      button.addEventListener("click", () => {
+        if (button.classList.contains("active")) {
+          return;
+        }
+
+        document
+          .querySelectorAll<HTMLButtonElement>(`[data-filter-option-id][data-list-view-id="${listViewId}"]`)
+          .forEach((button) => {
+            button.classList.remove("active");
+          });
+
+        button.classList.add("active");
+
+        let optionID: string | undefined = undefined;
+        if (button.dataset.filterOptionId && button.dataset.filterOptionId !== "0") {
+          optionID = button.dataset.filterOptionId;
+        }
+        const listView = document.getElementById(`${listViewId}_items`);
+        listView!.dispatchEvent(new CustomEvent("interaction:set-parameters", { detail: { optionID } }));
+      });
+    });
+}

ts/WoltLabSuite/Core/Component/User/List.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 Use list views instead.
  */
 
 import { dboAction } from "../../Ajax";

ts/WoltLabSuite/Core/Controller/User/Profile.ts

@@ -7,44 +7,39 @@
  */
 
 import { dboAction } from "WoltLabSuite/Core/Ajax";
-import { UserList } from "../../Component/User/List";
 import * as EventHandler from "WoltLabSuite/Core/Event/Handler";
 import { insertHtml } from "WoltLabSuite/Core/Dom/Util";
 import { trigger as triggerDomChange } from "WoltLabSuite/Core/Dom/Change/Listener";
 import { getTabMenu } from "WoltLabSuite/Core/Ui/TabMenu";
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
 
 function setupUserList(userId: number, buttonId: string, className: string): void {
   const button = document.getElementById(buttonId) as HTMLElement;
-  if (button) {
-    let userList: UserList;
-
-    button.addEventListener("click", () => {
-      if (userList === undefined) {
-        userList = new UserList(
-          {
-            className: className,
-            parameters: {
-              userID: userId,
-            },
-          },
-          button.dataset.dialogTitle!,
-        );
-      }
-      userList.open();
-    });
+  if (!button) {
+    return;
   }
+
+  button.addEventListener(
+    "click",
+    promiseMutex(() => {
+      return dialogFactory()
+        .usingListView()
+        .fromPreset(button.dataset.dialogTitle!, className, new Map([["userID", userId.toString()]]));
+    }),
+  );
 }
 
 function setupFollowingList(userId: number): void {
-  setupUserList(userId, "followingAll", "wcf\\data\\user\\follow\\UserFollowingAction");
+  setupUserList(userId, "followingAll", "wcf\\system\\listView\\user\\FollowingListView");
 }
 
 function setupFollowerList(userId: number): void {
-  setupUserList(userId, "followerAll", "wcf\\data\\user\\follow\\UserFollowAction");
+  setupUserList(userId, "followerAll", "wcf\\system\\listView\\user\\FollowerListView");
 }
 
 function setupVisitorList(userId: number): void {
-  setupUserList(userId, "visitorAll", "wcf\\data\\user\\profile\\visitor\\UserProfileVisitorAction");
+  setupUserList(userId, "visitorAll", "wcf\\system\\listView\\user\\UserProfileVisitorListView");
 }
 
 const tabContentLoaded = new Map<string, boolean>();

ts/WoltLabSuite/Core/Ui/Poll/View/Participants.ts

@@ -8,12 +8,12 @@
  */
 
 import { Poll } from "../Poll";
-import { UserList } from "../../../Component/User/List";
+import { promiseMutex } from "WoltLabSuite/Core/Helper/PromiseMutex";
+import { dialogFactory } from "WoltLabSuite/Core/Component/Dialog";
 
 export class Participants {
   protected readonly pollManager: Poll;
   private button: HTMLButtonElement;
-  private userList?: UserList = undefined;
 
   public constructor(manager: Poll) {
     this.pollManager = manager;
@@ -25,29 +25,18 @@ export class Participants {
       );
     }
     this.button = button;
-    this.button.addEventListener("click", (event) => {
-      if (event) {
-        event.preventDefault();
-      }
-
-      this.open();
-    });
-  }
-
-  private open(): void {
-    if (!this.userList) {
-      this.userList = new UserList(
-        {
-          className: "wcf\\data\\poll\\PollAction",
-          parameters: {
-            pollID: this.pollManager.pollId,
-          },
-        },
-        this.pollManager.question,
-      );
-    }
-
-    this.userList.open();
+    this.button.addEventListener(
+      "click",
+      promiseMutex(() => {
+        return dialogFactory()
+          .usingListView()
+          .fromPreset(
+            this.pollManager.question,
+            "wcf\\system\\listView\\user\\PollParticipantListView",
+            new Map([["pollID", this.pollManager.pollId.toString()]]),
+          );
+      }),
+    );
   }
 
   public showButton(): void {