From ae707f77689925387576b55b7dc625e37f5aeee2 Mon Sep 17 00:00:00 2001
From: Bastiaan <17990055+bbassie@users.noreply.github.com>
Date: Wed, 11 Nov 2026 18:40:37 +0100
Subject: [PATCH] Always show the instance player list, collapsed when empty
 (#1197)

The list used to disappear when nobody was online. It is now a Collapse
that opens while players are online and closes when the last one leaves.
Once the user toggles it, their choice sticks for the page.

Fixes #1191

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../src/components/OnlinePlayersList.tsx      | 32 +++++++++++--------
 1 file changed, 18 insertions(+), 14 deletions(-)

diff --git a/packages/web_ui/src/components/OnlinePlayersList.tsx b/packages/web_ui/src/components/OnlinePlayersList.tsx
index 31e5a560..643e1743 100644
--- a/packages/web_ui/src/components/OnlinePlayersList.tsx
+++ b/packages/web_ui/src/components/OnlinePlayersList.tsx
@@ -1,4 +1,5 @@
-import React from "react";
+import React, { useState } from "react";
+import { Collapse } from "antd";
 
 import { useUsers } from "../model/user";
 import UsersTable from "./UsersTable";
@@ -9,23 +10,26 @@ type OnlinePlayersListProps = {
 
 export default function OnlinePlayersList({ instanceId }: OnlinePlayersListProps) {
 	const [users] = useUsers();
+	// undefined until the user toggles the panel, then their choice sticks.
+	const [open, setOpen] = useState<boolean>();
 
-	// Filter users to only show those online on this specific instance
-	const onlineUsers = [...users.values()].filter(user => user.instances && user.instances.has(instanceId));
+	const onlineCount = [...users.values()].filter(user => user.instances?.has(instanceId)).length;
+	const expanded = open ?? onlineCount > 0;
 
-	if (onlineUsers.length === 0) {
-		return null;
-	}
-
-	return (
-		<div style={{ marginTop: 16 }}>
-			<h4>Online Players ({onlineUsers.length})</h4>
-			<UsersTable instanceId={instanceId} onlyOnline size="small" pagination={{
+	return <Collapse
+		size="small"
+		style={{ marginTop: 16 }}
+		activeKey={expanded ? ["players"] : []}
+		onChange={keys => setOpen(keys.length > 0)}
+		items={[{
+			key: "players",
+			label: `Online Players (${onlineCount})`,
+			children: <UsersTable instanceId={instanceId} onlyOnline size="small" pagination={{
 				defaultPageSize: 10,
 				showSizeChanger: true,
 				pageSizeOptions: ["10", "20", "50", "100", "200"],
 				showTotal: (total: number) => `${total} Users`,
-			}} />
-		</div>
-	);
+			}} />,
+		}]}
+	/>;
 }