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/components/DashCommand.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { Home, Moon, Sun, SunMoon } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import {
@@ -42,37 +42,51 @@ export function DashCommand() {
 		return () => document.removeEventListener("keydown", down);
 	}, [toggleCommand]);
 
-	if (!connected || !nezhaWsData) return null;
+	const shortcuts = useMemo(
+		() =>
+			[
+				{
+					keywords: ["home", "homepage"],
+					icon: <Home />,
+					label: t("Home"),
+					action: () => navigate("/"),
+				},
+				{
+					keywords: ["light", "theme", "lightmode"],
+					icon: <Sun />,
+					label: t("ToggleLightMode"),
+					action: () => setTheme("light"),
+				},
+				{
+					keywords: ["dark", "theme", "darkmode"],
+					icon: <Moon />,
+					label: t("ToggleDarkMode"),
+					action: () => setTheme("dark"),
+				},
+				{
+					keywords: ["system", "theme", "systemmode"],
+					icon: <SunMoon />,
+					label: t("ToggleSystemMode"),
+					action: () => setTheme("system"),
+				},
+			].map((item) => ({
+				...item,
+				value: `${item.keywords.join(" ")} ${item.label}`,
+			})),
+		[navigate, setTheme, t],
+	);
 
-	const shortcuts = [
-		{
-			keywords: ["home", "homepage"],
-			icon: <Home />,
-			label: t("Home"),
-			action: () => navigate("/"),
-		},
-		{
-			keywords: ["light", "theme", "lightmode"],
-			icon: <Sun />,
-			label: t("ToggleLightMode"),
-			action: () => setTheme("light"),
-		},
-		{
-			keywords: ["dark", "theme", "darkmode"],
-			icon: <Moon />,
-			label: t("ToggleDarkMode"),
-			action: () => setTheme("dark"),
-		},
-		{
-			keywords: ["system", "theme", "systemmode"],
-			icon: <SunMoon />,
-			label: t("ToggleSystemMode"),
-			action: () => setTheme("system"),
-		},
-	].map((item) => ({
-		...item,
-		value: `${item.keywords.join(" ")} ${item.label}`,
-	}));
+	const serverCommands = useMemo(() => {
+		if (!isOpen || !nezhaWsData) return [];
+
+		return (nezhaWsData.servers ?? []).map((server) => ({
+			id: server.id,
+			name: server.name,
+			online: formatNezhaInfo(nezhaWsData.now, server).online,
+		}));
+	}, [isOpen, nezhaWsData]);
+
+	if (!connected || !nezhaWsData) return null;
 
 	return (
 		<CommandDialog open={isOpen} onOpenChange={closeCommand}>
@@ -83,9 +97,9 @@ export function DashCommand() {
 			/>
 			<CommandList className="border-t">
 				<CommandEmpty>{t("NoResults")}</CommandEmpty>
-				{nezhaWsData.servers && nezhaWsData.servers.length > 0 && (
+				{serverCommands.length > 0 && (
 					<CommandGroup heading={t("Servers")}>
-						{nezhaWsData.servers.map((server) => (
+						{serverCommands.map((server) => (
 							<CommandItem
 								key={server.id}
 								value={server.name}
@@ -95,7 +109,7 @@ export function DashCommand() {
 									closeCommand();
 								}}
 							>
-								{formatNezhaInfo(nezhaWsData.now, server).online ? (
+								{server.online ? (
 									<span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center" />
 								) : (
 									<span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center" />