feat: refactor DashCommand to use useMemo for shortcuts and server commands

feat: optimize GlobalMap component with useMemo for country data processing

feat: enhance ServerCard and ServerCardInline components with memoization

feat: improve ServiceTracker component by processing service data with useMemo

feat: add VirtualServerList component for efficient rendering of server lists

refactor: update Servers page to utilize VirtualServerList for better performance

test: add tests for DashCommand and GlobalMap components, including virtualization checks

src/test/components/dash-command.test.tsx

@@ -1,6 +1,6 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 import { DashCommand } from "@/components/DashCommand";
 import { createServer } from "@/test/fixtures";
 
@@ -61,6 +61,16 @@ function seedWebSocketData() {
 }
 
 describe("DashCommand", () => {
+	beforeEach(() => {
+		dashMocks.closeCommand.mockClear();
+		dashMocks.navigate.mockClear();
+		dashMocks.setTheme.mockClear();
+		dashMocks.toggleCommand.mockClear();
+		dashMocks.isOpen = true;
+		dashMocks.connected = true;
+		dashMocks.lastData = null;
+	});
+
 	it("does not render until websocket data is available", () => {
 		dashMocks.connected = false;
 		dashMocks.lastData = null;
@@ -70,6 +80,15 @@ describe("DashCommand", () => {
 		expect(container).toBeEmptyDOMElement();
 	});
 
+	it("does not mount server command items while the dialog is closed", () => {
+		seedWebSocketData();
+		dashMocks.isOpen = false;
+
+		render(<DashCommand />);
+
+		expect(screen.queryByText("edge-7")).not.toBeInTheDocument();
+	});
+
 	it("renders server and shortcut commands, handles selection, and listens for keyboard toggle", async () => {
 		const user = userEvent.setup();
 		seedWebSocketData();

src/test/components/global-map.test.tsx

@@ -87,27 +87,27 @@ describe("InteractiveMap", () => {
 				width={900}
 				height={500}
 				filteredFeatures={filteredFeatures}
-				nezhaServerList={[
-					createServer({
-						id: 11,
-						name: "us-online",
-						country_code: "us",
-						last_active: "2025-01-01T00:00:00.000Z",
-					}),
-					createServer({
-						id: 12,
-						name: "us-offline",
-						country_code: "us",
-						last_active: "2024-12-31T00:00:00.000Z",
-					}),
-					createServer({
-						id: 13,
-						name: "sg-edge",
-						country_code: "sg",
-						last_active: "2025-01-01T00:00:00.000Z",
-					}),
-				]}
-				now={now}
+				countryServers={{
+					US: [
+						{
+							id: 11,
+							name: "us-online",
+							status: true,
+						},
+						{
+							id: 12,
+							name: "us-offline",
+							status: false,
+						},
+					],
+					SG: [
+						{
+							id: 13,
+							name: "sg-edge",
+							status: true,
+						},
+					],
+				}}
 			/>,
 		);
 
@@ -149,14 +149,15 @@ describe("InteractiveMap", () => {
 				width={900}
 				height={500}
 				filteredFeatures={filteredFeatures}
-				nezhaServerList={[
-					createServer({
-						id: 11,
-						name: "us-online",
-						country_code: "us",
-					}),
-				]}
-				now={now}
+				countryServers={{
+					US: [
+						{
+							id: 11,
+							name: "us-online",
+							status: true,
+						},
+					],
+				}}
 			/>,
 		);
 

src/test/pages/Server.test.tsx

@@ -339,7 +339,28 @@ describe("Servers page", () => {
 			lastData: websocketPayload([createServer({ id: 1, name: "alpha" })]),
 		});
 
-		expect(scrollTo).not.toHaveBeenCalled();
+		expect(scrollTo).not.toHaveBeenCalledWith({
+			top: 345,
+			left: 0,
+			behavior: "auto",
+		});
+	});
+
+	it("virtualizes large server lists instead of rendering every card", () => {
+		const servers = Array.from({ length: 2000 }, (_, index) =>
+			createServer({ id: index + 1, name: `server-${index + 1}` }),
+		);
+
+		renderServerPage({
+			connected: true,
+			lastData: websocketPayload(servers),
+		});
+
+		expect(screen.getByTestId("server-overview")).toHaveTextContent(
+			"2000:2000:0",
+		);
+		expect(screen.getAllByTestId("server-card").length).toBeLessThan(2000);
+		expect(screen.getAllByTestId("server-card").length).toBeGreaterThan(0);
 	});
 
 	it("toggles map and service tracker controls when service data exists", async () => {