From 56a26848e6670fb0e6fad5b9b422b4328a304de4 Mon Sep 17 00:00:00 2001
From: Danielv123 <danielv@danielv.no>
Date: Thu, 31 Jul 2025 00:11:26 +0200
Subject: [PATCH] Paginate users on instance page, better search ux

---
 .../web_ui/src/components/OnlinePlayersList.tsx   |  7 ++++++-
 packages/web_ui/src/components/UsersTable.tsx     | 15 ++++++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/packages/web_ui/src/components/OnlinePlayersList.tsx b/packages/web_ui/src/components/OnlinePlayersList.tsx
index c35e6984..31e5a560 100644
--- a/packages/web_ui/src/components/OnlinePlayersList.tsx
+++ b/packages/web_ui/src/components/OnlinePlayersList.tsx
@@ -20,7 +20,12 @@ export default function OnlinePlayersList({ instanceId }: OnlinePlayersListProps
 	return (
 		<div style={{ marginTop: 16 }}>
 			<h4>Online Players ({onlineUsers.length})</h4>
-			<UsersTable instanceId={instanceId} onlyOnline size="small" pagination={false} />
+			<UsersTable instanceId={instanceId} onlyOnline size="small" pagination={{
+				defaultPageSize: 10,
+				showSizeChanger: true,
+				pageSizeOptions: ["10", "20", "50", "100", "200"],
+				showTotal: (total: number) => `${total} Users`,
+			}} />
 		</div>
 	);
 }
diff --git a/packages/web_ui/src/components/UsersTable.tsx b/packages/web_ui/src/components/UsersTable.tsx
index bc1f0d1f..502afc61 100644
--- a/packages/web_ui/src/components/UsersTable.tsx
+++ b/packages/web_ui/src/components/UsersTable.tsx
@@ -1,5 +1,6 @@
 import React, { useRef } from "react";
 import { Table, Tag, Space, Input, InputRef } from "antd";
+import type { FilterDropdownProps } from "antd/es/table/interface";
 import { SearchOutlined } from "@ant-design/icons";
 import { useNavigate } from "react-router-dom";
 
@@ -78,7 +79,12 @@ export default function UsersTable({ instanceId, onlyOnline = false, pagination,
 			filterDropdownProps: {
 				onOpenChange: (open: boolean) => open && setTimeout(() => searchInput.current?.select(), 100),
 			},
-			filterDropdown: ({ selectedKeys, setSelectedKeys, confirm, clearFilters }: any) => (
+			filterDropdown: ({ selectedKeys, setSelectedKeys, confirm, clearFilters }: {
+				selectedKeys: string[],
+				setSelectedKeys: (keys: string[]) => void,
+				confirm: FilterDropdownProps["confirm"],
+				clearFilters: FilterDropdownProps["clearFilters"],
+			}) => (
 				<div style={{ padding: 4 }} onKeyDown={(e) => e.stopPropagation()}>
 					<Input.Search
 						allowClear
@@ -86,8 +92,11 @@ export default function UsersTable({ instanceId, onlyOnline = false, pagination,
 						placeholder={"Search username"}
 						value={selectedKeys[0]}
 						onChange={(e) => setSelectedKeys([e.target.value])}
-						onClear={() => clearFilters && clearFilters({ confirm: true, closeDropdown: true })}
-						onSearch={() => confirm({ closeDropdown: true })}
+						onSearch={() => confirm({ closeDropdown: false })}
+						onClear={() => {
+							clearFilters?.({ closeDropdown: false });
+							confirm({ closeDropdown: true });
+						}}
 					/>
 				</div>
 			),