feat(global): new tooltip

app/(main)/ClientComponents/Global.tsx

@@ -8,6 +8,7 @@ import { geoJsonString } from "../../../lib/geo-json-string";
 import GlobalInfo from "./GlobalInfo";
 import GlobalLoading from "./GlobalLoading";
 import { InteractiveMap } from "./InteractiveMap";
+import { TooltipProvider } from "./TooltipContext";
 
 export default function ServerGlobal() {
   const { data: nezhaServerList, error } = useSWR<ServerApi>(
@@ -51,13 +52,16 @@ export default function ServerGlobal() {
     <section className="flex flex-col gap-4 mt-[3.2px]">
       <GlobalInfo countries={countryList} />
       <div className="w-full overflow-x-auto">
-        <InteractiveMap
+        <TooltipProvider>
-          countries={countryList}
+          <InteractiveMap
-          serverCounts={serverCounts}
+            countries={countryList}
-          width={width}
+            serverCounts={serverCounts}
-          height={height}
+            width={width}
-          filteredFeatures={filteredFeatures}
+            height={height}
-        />
+            filteredFeatures={filteredFeatures}
+            nezhaServerList={nezhaServerList}
+          />
+        </TooltipProvider>
       </div>
     </section>
   );

app/(main)/ClientComponents/InteractiveMap.tsx

@@ -2,9 +2,10 @@
 
 import { countryCoordinates } from "@/lib/geo-limit";
 import { geoEquirectangular, geoPath } from "d3-geo";
-import { AnimatePresence, m } from "framer-motion";
 import { useTranslations } from "next-intl";
-import { useState } from "react";
+
+import MapTooltip from "./MapTooltip";
+import { useTooltip } from "./TooltipContext";
 
 interface InteractiveMapProps {
   countries: string[];
@@ -12,6 +13,7 @@ interface InteractiveMapProps {
   width: number;
   height: number;
   filteredFeatures: any[];
+  nezhaServerList: any;
 }
 
 export function InteractiveMap({
@@ -20,14 +22,10 @@ export function InteractiveMap({
   width,
   height,
   filteredFeatures,
+  nezhaServerList,
 }: InteractiveMapProps) {
   const t = useTranslations("Global");
-
+  const { setTooltipData } = useTooltip();
-  const [tooltipData, setTooltipData] = useState<{
-    centroid: [number, number];
-    country: string;
-    count: number;
-  } | null>(null);
 
   const projection = geoEquirectangular()
     .scale(140)
@@ -37,7 +35,10 @@ export function InteractiveMap({
   const path = geoPath().projection(projection);
 
   return (
-    <div className="relative w-full aspect-[2/1]">
+    <div
+      className="relative w-full aspect-[2/1]"
+      onMouseLeave={() => setTooltipData(null)}
+    >
       <svg
         width={width}
         height={height}
@@ -51,6 +52,15 @@ export function InteractiveMap({
           </pattern>
         </defs>
         <g>
+          {/* Background rect to handle mouse events in empty areas */}
+          <rect
+            x="0"
+            y="0"
+            width={width}
+            height={height}
+            fill="transparent"
+            onMouseEnter={() => setTooltipData(null)}
+          />
           {filteredFeatures.map((feature, index) => {
             const isHighlighted = countries.includes(
               feature.properties.iso_a2_eh,
@@ -72,15 +82,30 @@ export function InteractiveMap({
                     : "fill-neutral-200/50 dark:fill-neutral-800 stroke-neutral-300/40 dark:stroke-neutral-700 stroke-[0.5]"
                 }
                 onMouseEnter={() => {
-                  if (isHighlighted && path.centroid(feature)) {
+                  if (!isHighlighted) {
+                    setTooltipData(null);
+                    return;
+                  }
+                  if (path.centroid(feature)) {
+                    const countryCode = feature.properties.iso_a2_eh;
+                    const countryServers = nezhaServerList.result
+                      .filter(
+                        (server: any) =>
+                          server.host.CountryCode?.toUpperCase() ===
+                          countryCode,
+                      )
+                      .map((server: any) => ({
+                        name: server.name,
+                        status: server.online_status,
+                      }));
                     setTooltipData({
                       centroid: path.centroid(feature),
                       country: feature.properties.name,
                       count: serverCount,
+                      servers: countryServers,
                     });
                   }
                 }}
-                onMouseLeave={() => setTooltipData(null)}
               />
             );
           })}
@@ -107,13 +132,22 @@ export function InteractiveMap({
               <g
                 key={countryCode}
                 onMouseEnter={() => {
+                  const countryServers = nezhaServerList.result
+                    .filter(
+                      (server: any) =>
+                        server.host.CountryCode?.toUpperCase() === countryCode,
+                    )
+                    .map((server: any) => ({
+                      name: server.name,
+                      status: server.online_status,
+                    }));
                   setTooltipData({
                     centroid: [x, y],
                     country: coords.name,
                     count: serverCount,
+                    servers: countryServers,
                   });
                 }}
-                onMouseLeave={() => setTooltipData(null)}
                 className="cursor-pointer"
               >
                 <circle
@@ -127,30 +161,7 @@ export function InteractiveMap({
           })}
         </g>
       </svg>
-      <AnimatePresence mode="wait">
+      <MapTooltip />
-        {tooltipData && (
-          <m.div
-            initial={{ opacity: 0, filter: "blur(10px)" }}
-            animate={{ opacity: 1, filter: "blur(0px)" }}
-            className="absolute hidden lg:block pointer-events-none bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700"
-            key={tooltipData.country}
-            style={{
-              left: tooltipData.centroid[0],
-              top: tooltipData.centroid[1],
-              transform: "translate(-50%, -50%)",
-            }}
-          >
-            <p className="font-medium">
-              {tooltipData.country === "China"
-                ? "Mainland China"
-                : tooltipData.country}
-            </p>
-            <p className="text-neutral-600 dark:text-neutral-400">
-              {tooltipData.count} {t("Servers")}
-            </p>
-          </m.div>
-        )}
-      </AnimatePresence>
     </div>
   );
 }

app/(main)/ClientComponents/MapTooltip.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { AnimatePresence, m } from "framer-motion";
+import { useTranslations } from "next-intl";
+import { memo } from "react";
+
+import { useTooltip } from "./TooltipContext";
+
+const MapTooltip = memo(function MapTooltip() {
+  const { tooltipData } = useTooltip();
+  const t = useTranslations("Global");
+
+  if (!tooltipData) return null;
+
+  return (
+    <AnimatePresence mode="wait">
+      <m.div
+        initial={{ opacity: 0, filter: "blur(10px)" }}
+        animate={{ opacity: 1, filter: "blur(0px)" }}
+        exit={{ opacity: 0, filter: "blur(10px)" }}
+        className="absolute hidden lg:block bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700 z-50"
+        key={tooltipData.country}
+        style={{
+          left: tooltipData.centroid[0],
+          top: tooltipData.centroid[1],
+          transform: "translate(-50%, -50%)",
+        }}
+        onMouseEnter={(e) => {
+          e.stopPropagation();
+        }}
+      >
+        <div>
+          <p className="font-medium">
+            {tooltipData.country === "China"
+              ? "Mainland China"
+              : tooltipData.country}
+          </p>
+          <p className="text-neutral-600 dark:text-neutral-400 mb-1">
+            {tooltipData.count} {t("Servers")}
+          </p>
+        </div>
+        <div
+          className="border-t dark:border-neutral-700 pt-1"
+          style={{
+            maxHeight: "200px",
+            overflowY: "auto",
+          }}
+        >
+          {tooltipData.servers.map((server, index) => (
+            <div key={index} className="flex items-center gap-1.5 py-0.5">
+              <span
+                className={`w-1.5 h-1.5 shrink-0 rounded-full ${
+                  server.status ? "bg-green-500" : "bg-red-500"
+                }`}
+              ></span>
+              <span className="text-xs">{server.name}</span>
+            </div>
+          ))}
+        </div>
+      </m.div>
+    </AnimatePresence>
+  );
+});
+
+export default MapTooltip;

app/(main)/ClientComponents/TooltipContext.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { ReactNode, createContext, useContext, useState } from "react";
+
+export interface TooltipData {
+  centroid: [number, number];
+  country: string;
+  count: number;
+  servers: Array<{
+    name: string;
+    status: boolean;
+  }>;
+}
+
+interface TooltipContextType {
+  tooltipData: TooltipData | null;
+  setTooltipData: (data: TooltipData | null) => void;
+}
+
+const TooltipContext = createContext<TooltipContextType | undefined>(undefined);
+
+export function TooltipProvider({ children }: { children: ReactNode }) {
+  const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
+
+  return (
+    <TooltipContext.Provider value={{ tooltipData, setTooltipData }}>
+      {children}
+    </TooltipContext.Provider>
+  );
+}
+
+export function useTooltip() {
+  const context = useContext(TooltipContext);
+  if (context === undefined) {
+    throw new Error("useTooltip must be used within a TooltipProvider");
+  }
+  return context;
+}