From fca3a9ab52bbe35e963427cb0ac541c8102a9808 Mon Sep 17 00:00:00 2001
From: hamster1963 <1410514192@qq.com>
Date: Fri, 21 Feb 2025 11:26:32 +0800
Subject: [PATCH] feat: add server ID and improve interactive map and tooltip
 functionality

---
 .../ClientComponents/main/InteractiveMap.tsx     |  2 ++
 app/(main)/ClientComponents/main/MapTooltip.tsx  | 16 +++++++++++++---
 .../ClientComponents/main/ServerListClient.tsx   | 11 ++++++++++-
 app/context/tooltip-context.tsx                  |  1 +
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/(main)/ClientComponents/main/InteractiveMap.tsx b/app/(main)/ClientComponents/main/InteractiveMap.tsx
index 34682b3..f2d3f36 100644
--- a/app/(main)/ClientComponents/main/InteractiveMap.tsx
+++ b/app/(main)/ClientComponents/main/InteractiveMap.tsx
@@ -82,6 +82,7 @@ export function InteractiveMap({
                         (server: any) => server.host.CountryCode?.toUpperCase() === countryCode,
                       )
                       .map((server: any) => ({
+                        id: server.id,
                         name: server.name,
                         status: server.online_status,
                       }))
@@ -122,6 +123,7 @@ export function InteractiveMap({
                   const countryServers = nezhaServerList.result
                     .filter((server: any) => server.host.CountryCode?.toUpperCase() === countryCode)
                     .map((server: any) => ({
+                      id: server.id,
                       name: server.name,
                       status: server.online_status,
                     }))
diff --git a/app/(main)/ClientComponents/main/MapTooltip.tsx b/app/(main)/ClientComponents/main/MapTooltip.tsx
index 492b519..1f6175f 100644
--- a/app/(main)/ClientComponents/main/MapTooltip.tsx
+++ b/app/(main)/ClientComponents/main/MapTooltip.tsx
@@ -2,6 +2,7 @@
 
 import { useTooltip } from "@/app/context/tooltip-context"
 import { useTranslations } from "next-intl"
+import Link from "next/link"
 import { memo } from "react"
 
 const MapTooltip = memo(function MapTooltip() {
@@ -14,6 +15,10 @@ const MapTooltip = memo(function MapTooltip() {
     return a.status === b.status ? 0 : a.status ? 1 : -1
   })
 
+  const saveSession = () => {
+    sessionStorage.setItem("fromMainPage", "true")
+  }
+
   return (
     <div
       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 tooltip-animate"
@@ -31,7 +36,7 @@ const MapTooltip = memo(function MapTooltip() {
         <p className="font-medium">
           {tooltipData.country === "China" ? "Mainland China" : tooltipData.country}
         </p>
-        <p className="text-neutral-600 dark:text-neutral-400 mb-1">
+        <p className="text-neutral-600 dark:text-neutral-400 font-light text-xs mb-1">
           {tooltipData.count} {t("Servers")}
         </p>
       </div>
@@ -43,14 +48,19 @@ const MapTooltip = memo(function MapTooltip() {
         }}
       >
         {sortedServers.map((server) => (
-          <div key={server.name} className="flex items-center gap-1.5 py-0.5">
+          <Link
+            onClick={saveSession}
+            href={`/server/${server.id}`}
+            key={server.name}
+            className="flex items-center gap-1.5 py-0.5 transition-colors text-neutral-500 dark:text-neutral-400 hover:text-black dark:hover:text-white"
+          >
             <span
               className={`w-1.5 h-1.5 shrink-0 rounded-full ${
                 server.status ? "bg-green-500" : "bg-red-500"
               }`}
             />
             <span className="text-xs">{server.name}</span>
-          </div>
+          </Link>
         ))}
       </div>
     </div>
diff --git a/app/(main)/ClientComponents/main/ServerListClient.tsx b/app/(main)/ClientComponents/main/ServerListClient.tsx
index 7a81464..71f1759 100644
--- a/app/(main)/ClientComponents/main/ServerListClient.tsx
+++ b/app/(main)/ClientComponents/main/ServerListClient.tsx
@@ -115,6 +115,11 @@ export default function ServerListClient() {
       setInline(inlineState)
     }
 
+    const showMapState = localStorage.getItem("showMap")
+    if (showMapState !== null) {
+      setShowMap(showMapState === "true")
+    }
+
     const savedTag = sessionStorage.getItem("selectedTag") || defaultTag
     setTag(savedTag)
     restoreScrollPosition()
@@ -169,7 +174,11 @@ export default function ServerListClient() {
       <section className="flex items-center gap-2 w-full overflow-hidden">
         <button
           type="button"
-          onClick={() => setShowMap(!showMap)}
+          onClick={() => {
+            const newShowMap = !showMap
+            setShowMap(newShowMap)
+            localStorage.setItem("showMap", String(newShowMap))
+          }}
           className={cn(
             "rounded-[50px] flex flex-col items-center gap-0  cursor-pointer  bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-100 p-[10px] transition-all inset-shadow-2xs inset-shadow-white/20 ",
             {
diff --git a/app/context/tooltip-context.tsx b/app/context/tooltip-context.tsx
index 03175fa..ccfe556 100644
--- a/app/context/tooltip-context.tsx
+++ b/app/context/tooltip-context.tsx
@@ -7,6 +7,7 @@ export interface TooltipData {
   country: string
   count: number
   servers: Array<{
+    id: string
     name: string
     status: boolean
   }>