feat: new tooltip

eslint.config.js

@@ -24,6 +24,7 @@ export default tseslint.config(
         { allowConstantExport: true },
       ],
       "react-hooks/exhaustive-deps": "off",
+      "@typescript-eslint/no-explicit-any": "off",
     },
   },
 );

src/components/GlobalMap.tsx

@@ -1,22 +1,23 @@
 import { geoJsonString } from "@/lib/geo-json-string";
 import { NezhaServer } from "@/types/nezha-api";
-import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { AnimatePresence, m } from "framer-motion";
 import { geoEquirectangular, geoPath } from "d3-geo";
 import { countryCoordinates } from "@/lib/geo-limit";
+import MapTooltip from "./MapTooltip";
+import useTooltip from "@/hooks/use-tooltip";
+import { formatNezhaInfo } from "@/lib/utils";
 
 export default function GlobalMap({
   serverList,
+  now,
 }: {
   serverList: NezhaServer[];
+  now: number;
 }) {
   const { t } = useTranslation();
   const countryList: string[] = [];
   const serverCounts: { [key: string]: number } = {};
 
-  console.log(serverList);
-
   serverList.forEach((server) => {
     if (server.country_code) {
       const countryCode = server.country_code.toUpperCase();
@@ -48,6 +49,8 @@ export default function GlobalMap({
           width={width}
           height={height}
           filteredFeatures={filteredFeatures}
+          nezhaServerList={serverList}
+          now={now}
         />
       </div>
     </section>
@@ -67,21 +70,20 @@ interface InteractiveMapProps {
     };
     geometry: never;
   }[];
+  nezhaServerList: NezhaServer[];
+  now: number;
 }
 
-function InteractiveMap({
+export function InteractiveMap({
   countries,
   serverCounts,
   width,
   height,
   filteredFeatures,
+  nezhaServerList,
+  now,
 }: InteractiveMapProps) {
-  const { t } = useTranslation();
+  const { setTooltipData } = useTooltip();
-  const [tooltipData, setTooltipData] = useState<{
-    centroid: [number, number];
-    country: string;
-    count: number;
-  } | null>(null);
 
   const projection = geoEquirectangular()
     .scale(140)
@@ -91,7 +93,10 @@ 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}
@@ -105,15 +110,20 @@ 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,
             );
 
-            if (isHighlighted) {
-              console.log(feature.properties.iso_a2_eh);
-            }
-
             const serverCount = serverCounts[feature.properties.iso_a2_eh] || 0;
 
             return (
@@ -126,15 +136,29 @@ 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
+                      .filter(
+                        (server: NezhaServer) =>
+                          server.country_code?.toUpperCase() === countryCode,
+                      )
+                      .map((server: NezhaServer) => ({
+                        name: server.name,
+                        status: formatNezhaInfo(now, server).online,
+                      }));
                     setTooltipData({
                       centroid: path.centroid(feature),
                       country: feature.properties.name,
                       count: serverCount,
+                      servers: countryServers,
                     });
                   }
                 }}
-                onMouseLeave={() => setTooltipData(null)}
               />
             );
           })}
@@ -161,13 +185,23 @@ function InteractiveMap({
               <g
                 key={countryCode}
                 onMouseEnter={() => {
+                  const countryServers = nezhaServerList
+                    .filter(
+                      (server: NezhaServer) =>
+                        server.country_code?.toUpperCase() ===
+                        countryCode.toUpperCase(),
+                    )
+                    .map((server: NezhaServer) => ({
+                      name: server.name,
+                      status: formatNezhaInfo(now, server).online,
+                    }));
                   setTooltipData({
                     centroid: [x, y],
                     country: coords.name,
                     count: serverCount,
+                    servers: countryServers,
                   });
                 }}
-                onMouseLeave={() => setTooltipData(null)}
                 className="cursor-pointer"
               >
                 <circle
@@ -181,30 +215,7 @@ 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("map.Servers")}
-            </p>
-          </m.div>
-        )}
-      </AnimatePresence>
     </div>
   );
 }

src/components/MapTooltip.tsx

@@ -0,0 +1,62 @@
+import useTooltip from "@/hooks/use-tooltip";
+import { AnimatePresence, m } from "framer-motion";
+import { memo } from "react";
+import { useTranslation } from "react-i18next";
+
+const MapTooltip = memo(function MapTooltip() {
+  const { t } = useTranslation();
+  const { tooltipData } = useTooltip();
+
+  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(20%, -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("map.Servers")}
+          </p>
+        </div>
+        <div
+          className="border-t dark:border-neutral-700 pt-1"
+          style={{
+            maxHeight: "200px",
+            overflowY: "auto",
+          }}
+        >
+          {tooltipData.servers.map((server, index: number) => (
+            <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;

src/context/status-provider.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { ReactNode, useState } from "react";
 import { Status, StatusContext } from "./status-context";
 

src/context/tooltip-context.ts

@@ -0,0 +1,20 @@
+import { createContext } 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;
+}
+
+export const TooltipContext = createContext<TooltipContextType | undefined>(
+  undefined,
+);

src/context/tooltip-provider.tsx

@@ -0,0 +1,12 @@
+import { ReactNode, useState } from "react";
+import { TooltipContext, TooltipData } from "./tooltip-context";
+
+export function TooltipProvider({ children }: { children: ReactNode }) {
+  const [tooltipData, setTooltipData] = useState<TooltipData | null>(null);
+
+  return (
+    <TooltipContext.Provider value={{ tooltipData, setTooltipData }}>
+      {children}
+    </TooltipContext.Provider>
+  );
+}

src/hooks/use-tooltip.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { TooltipContext } from "@/context/tooltip-context";
+
+export const useTooltip = () => {
+  const context = useContext(TooltipContext);
+  if (context === undefined) {
+    throw new Error("useTooltip must be used within a TooltipProvider");
+  }
+  return context;
+};
+
+export default useTooltip;

src/main.tsx

@@ -11,6 +11,7 @@ import { MotionProvider } from "./components/motion/motion-provider";
 import { WebSocketProvider } from "./context/websocket-provider";
 import { StatusProvider } from "./context/status-provider";
 import { FilterProvider } from "./context/network-filter-context";
+import { TooltipProvider } from "./context/tooltip-provider";
 
 const queryClient = new QueryClient();
 
@@ -22,6 +23,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
           <WebSocketProvider url="/api/v1/ws/server">
             <StatusProvider>
               <FilterProvider>
+                <TooltipProvider>
                   <App />
                   <Toaster
                     duration={1000}
@@ -35,6 +37,7 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
                     className={"flex items-center justify-center"}
                   />
                   <ReactQueryDevtools />
+                </TooltipProvider>
               </FilterProvider>
             </StatusProvider>
           </WebSocketProvider>

src/pages/Server.tsx

@@ -243,7 +243,12 @@ export default function Servers() {
           setCurrentTab={setCurrentGroup}
         />
       </section>
-      {showMap === "1" && <GlobalMap serverList={nezhaWsData?.servers || []} />}
+      {showMap === "1" && (
+        <GlobalMap
+          now={nezhaWsData.now}
+          serverList={nezhaWsData?.servers || []}
+        />
+      )}
       {showServices === "1" && <ServiceTracker />}
       {inline === "1" && (
         <section className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6">

src/types/css.d.ts

@@ -1,4 +1,4 @@
-declare module '*.css' {
+declare module "*.css" {
-  const css: { [key: string]: string }
+  const css: { [key: string]: string };
-  export default css
+  export default css;
 }

src/types/nezha-api.ts

@@ -23,7 +23,6 @@ export interface NezhaServerHost {
   swap_total: number;
   arch: string;
   boot_time: number;
-  country_code: string;
   version: string;
 }