feat: add server ID and improve interactive map and tooltip functionality

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,
                     }))

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>

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 ",
             {

app/context/tooltip-context.tsx

@@ -7,6 +7,7 @@ export interface TooltipData {
   country: string
   count: number
   servers: Array<{
+    id: string
     name: string
     status: boolean
   }>