feat: save group selected

src/components/GroupSwitch.tsx

@@ -37,6 +37,13 @@ export default function GroupSwitch({
     }
   }, [])
 
+  useEffect(() => {
+    const savedGroup = sessionStorage.getItem("selectedGroup")
+    if (savedGroup && tabs.includes(savedGroup)) {
+      setCurrentTab(savedGroup)
+    }
+  }, [tabs, setCurrentTab])
+
   useEffect(() => {
     const currentTagRef = tagRefs.current[tabs.indexOf(currentTab)]
 

src/components/Header.tsx

@@ -60,7 +60,13 @@ function Header() {
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between header-top">
-        <section onClick={() => navigate("/")} className="cursor-pointer flex items-center sm:text-base text-sm font-medium">
+        <section
+          onClick={() => {
+            sessionStorage.removeItem("selectedGroup")
+            navigate("/")
+          }}
+          className="cursor-pointer flex items-center sm:text-base text-sm font-medium"
+        >
           <div className="mr-1 flex flex-row items-center justify-start header-logo">
             <img
               width={40}

src/pages/Server.tsx

@@ -17,7 +17,7 @@ import { NezhaWebsocketResponse } from "@/types/nezha-api"
 import { ServerGroup } from "@/types/nezha-api"
 import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon, ChartBarSquareIcon, MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
 import { useQuery } from "@tanstack/react-query"
-import { useEffect, useState } from "react"
+import { useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 export default function Servers() {
@@ -32,6 +32,7 @@ export default function Servers() {
   const [showServices, setShowServices] = useState<string>("0")
   const [showMap, setShowMap] = useState<string>("0")
   const [inline, setInline] = useState<string>("0")
+  const containerRef = useRef<HTMLDivElement>(null)
   const [settingsOpen, setSettingsOpen] = useState<boolean>(false)
   const [currentGroup, setCurrentGroup] = useState<string>("All")
 
@@ -39,6 +40,19 @@ export default function Servers() {
     // @ts-expect-error CustomBackgroundImage is a global variable
     (window.CustomBackgroundImage as string) !== "" ? window.CustomBackgroundImage : undefined
 
+  const restoreScrollPosition = () => {
+    const savedPosition = sessionStorage.getItem("scrollPosition")
+    if (savedPosition && containerRef.current) {
+      containerRef.current.scrollTop = Number(savedPosition)
+    }
+  }
+
+  const handleTagChange = (newGroup: string) => {
+    setCurrentGroup(newGroup)
+    sessionStorage.setItem("selectedGroup", newGroup)
+    sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0))
+  }
+
   useEffect(() => {
     const showServicesState = localStorage.getItem("showServices")
     if (showServicesState !== null) {
@@ -53,6 +67,13 @@ export default function Servers() {
     }
   }, [])
 
+  useEffect(() => {
+    const savedGroup = sessionStorage.getItem("selectedGroup") || "All"
+    setCurrentGroup(savedGroup)
+
+    restoreScrollPosition()
+  }, [])
+
   const groupTabs = ["All", ...(groupData?.data?.map((item: ServerGroup) => item.group.name) || [])]
 
   if (!connected && !lastMessage) {
@@ -233,7 +254,7 @@ export default function Servers() {
           >
             <ViewColumnsIcon className="size-[13px]" />
           </button>
-          <GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={setCurrentGroup} />
+          <GroupSwitch tabs={groupTabs} currentTab={currentGroup} setCurrentTab={handleTagChange} />
         </section>
         <Popover onOpenChange={setSettingsOpen}>
           <PopoverTrigger asChild>
@@ -306,14 +327,14 @@ export default function Servers() {
       {showMap === "1" && <GlobalMap now={nezhaWsData.now} serverList={nezhaWsData?.servers || []} />}
       {showServices === "1" && <ServiceTracker serverList={filteredServers} />}
       {inline === "1" && (
-        <section className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6 server-inline-list">
+        <section ref={containerRef} className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6 server-inline-list">
           {filteredServers.map((serverInfo) => (
             <ServerCardInline now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
           ))}
         </section>
       )}
       {inline === "0" && (
-        <section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6 server-card-list">
+        <section ref={containerRef} className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6 server-card-list">
           {filteredServers.map((serverInfo) => (
             <ServerCard now={nezhaWsData.now} key={serverInfo.id} serverInfo={serverInfo} />
           ))}