feat: refactor overview button

src/components/ServerDetailChart.tsx

@@ -110,8 +110,8 @@ export default function ServerDetailChart({
             gpuName={`#${index + 1}`}
             key={index}
           />
-        )
+        ))
-      )) : (
+      ) : (
         <></>
       )}
       <ProcessChart now={nezhaWsData.now} data={server} />

src/components/ServerOverview.tsx

@@ -6,6 +6,8 @@ import {
   ArrowDownCircleIcon,
   ArrowUpCircleIcon,
 } from "@heroicons/react/20/solid";
+import { useStatus } from "@/hooks/use-status";
+import useFilter from "@/hooks/use-filter";
 
 type ServerOverviewProps = {
   online: number;
@@ -27,11 +29,19 @@ export default function ServerOverview({
   downSpeed,
 }: ServerOverviewProps) {
   const { t } = useTranslation();
+  const { status, setStatus } = useStatus();
+  const { filter, setFilter } = useFilter();
 
   return (
     <>
       <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
-        <Card className={cn("hover:border-blue-500 transition-all")}>
+        <Card
+          onClick={() => {
+            setFilter(false);
+            setStatus("all");
+          }}
+          className={cn("hover:border-blue-500 cursor-pointer transition-all")}
+        >
           <CardContent className="flex h-full items-center px-6 py-3">
             <section className="flex flex-col gap-1">
               <p className="text-sm font-medium md:text-base">
@@ -47,8 +57,15 @@ export default function ServerOverview({
           </CardContent>
         </Card>
         <Card
+          onClick={() => {
+            setFilter(false);
+            setStatus("online");
+          }}
           className={cn(
-            " hover:ring-green-500 ring-1 ring-transparent transition-all",
+            "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
+            {
+              "ring-green-500 ring-2 border-transparent": status === "online",
+            },
           )}
         >
           <CardContent className="flex h-full items-center px-6 py-3">
@@ -68,8 +85,15 @@ export default function ServerOverview({
           </CardContent>
         </Card>
         <Card
+          onClick={() => {
+            setFilter(false);
+            setStatus("offline");
+          }}
           className={cn(
-            " hover:ring-red-500 ring-1 ring-transparent transition-all",
+            "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
+            {
+              "ring-red-500 ring-2 border-transparent": status === "offline",
+            },
           )}
         >
           <CardContent className="flex h-full items-center px-6 py-3">
@@ -88,8 +112,15 @@ export default function ServerOverview({
           </CardContent>
         </Card>
         <Card
+          onClick={() => {
+            setStatus("all");
+            setFilter(true);
+          }}
           className={cn(
-            " hover:ring-purple-500 ring-1 ring-transparent transition-all",
+            "cursor-pointer hover:ring-purple-500 ring-1 ring-transparent transition-all",
+            {
+              "ring-purple-500 ring-2 border-transparent": filter === true,
+            },
           )}
         >
           <CardContent className="flex h-full items-center relative px-6 py-3">

src/context/filter-context.ts

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+
+export interface FilterContextType {
+  filter: boolean;
+  setFilter: (filter: boolean) => void;
+}
+
+export const FilterContext = createContext<FilterContextType | undefined>(
+  undefined,
+);

src/context/network-filter-context.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+import { FilterContext } from "./filter-context";
+
+export function FilterProvider({ children }: { children: ReactNode }) {
+  const [filter, setFilter] = useState<boolean>(false);
+
+  return (
+    <FilterContext.Provider value={{ filter, setFilter }}>
+      {children}
+    </FilterContext.Provider>
+  );
+}

src/context/status-context.ts

@@ -0,0 +1,12 @@
+import { createContext } from "react";
+
+export type Status = "all" | "online" | "offline";
+
+export interface StatusContextType {
+  status: Status;
+  setStatus: (status: Status) => void;
+}
+
+export const StatusContext = createContext<StatusContextType | undefined>(
+  undefined,
+);

src/context/status-provider.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { ReactNode, useState } from "react";
+import { Status, StatusContext } from "./status-context";
+
+export function StatusProvider({ children }: { children: ReactNode }) {
+  const [status, setStatus] = useState<Status>("all");
+
+  return (
+    <StatusContext.Provider value={{ status, setStatus }}>
+      {children}
+    </StatusContext.Provider>
+  );
+}

src/hooks/use-filter.tsx

@@ -0,0 +1,12 @@
+import { useContext } from "react";
+import { FilterContext, FilterContextType } from "@/context/filter-context";
+
+const useFilter = (): FilterContextType => {
+  const context = useContext(FilterContext);
+  if (context === undefined) {
+    throw new Error("useFilter must be used within a FilterProvider");
+  }
+  return context;
+};
+
+export default useFilter;

src/hooks/use-status.tsx

@@ -0,0 +1,10 @@
+import { useContext } from "react";
+import { StatusContext } from "../context/status-context";
+
+export function useStatus() {
+  const context = useContext(StatusContext);
+  if (context === undefined) {
+    throw new Error("useStatus must be used within a StatusProvider");
+  }
+  return context;
+}

src/main.tsx

@@ -9,6 +9,8 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Toaster } from "sonner";
 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";
 
 const queryClient = new QueryClient();
 
@@ -18,19 +20,23 @@ ReactDOM.createRoot(document.getElementById("root")!).render(
       <ThemeProvider storageKey="vite-ui-theme">
         <QueryClientProvider client={queryClient}>
           <WebSocketProvider url="/api/v1/ws/server">
-            <App />
+            <StatusProvider>
-            <Toaster
+              <FilterProvider>
-              duration={1000}
+                <App />
-              toastOptions={{
+                <Toaster
-                classNames: {
+                  duration={1000}
-                  default:
+                  toastOptions={{
-                    "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
+                    classNames: {
-                },
+                      default:
-              }}
+                        "w-fit rounded-full px-2.5 py-1.5 bg-neutral-100 border border-neutral-200 backdrop-blur-xl shadow-none",
-              position="top-center"
+                    },
-              className={"flex items-center justify-center"}
+                  }}
-            />
+                  position="top-center"
-            <ReactQueryDevtools />
+                  className={"flex items-center justify-center"}
+                />
+                <ReactQueryDevtools />
+              </FilterProvider>
+            </StatusProvider>
           </WebSocketProvider>
         </QueryClientProvider>
       </ThemeProvider>

src/pages/Server.tsx

@@ -19,6 +19,8 @@ import { ServiceTracker } from "@/components/ServiceTracker";
 import ServerCardInline from "@/components/ServerCardInline";
 import { Loader } from "@/components/loading/Loader";
 import GlobalMap from "@/components/GlobalMap";
+import { useStatus } from "@/hooks/use-status";
+import useFilter from "@/hooks/use-filter";
 
 export default function Servers() {
   const { t } = useTranslation();
@@ -27,7 +29,8 @@ export default function Servers() {
     queryFn: () => fetchServerGroup(),
   });
   const { lastMessage, connected } = useWebSocketContext();
-
+  const { status } = useStatus();
+  const { filter } = useFilter();
   const [showServices, setShowServices] = useState<string>("0");
   const [showMap, setShowMap] = useState<string>("0");
   const [inline, setInline] = useState<string>("0");
@@ -83,7 +86,7 @@ export default function Servers() {
     );
   }
 
-  const filteredServers =
+  let filteredServers =
     nezhaWsData?.servers?.filter((server) => {
       if (currentGroup === "All") return true;
       const group = groupData?.data?.find(
@@ -138,6 +141,43 @@ export default function Servers() {
       0,
     ) || 0;
 
+  filteredServers =
+    status === "all"
+      ? filteredServers
+      : filteredServers.filter((server) =>
+          [status].includes(
+            formatNezhaInfo(nezhaWsData.now, server).online
+              ? "online"
+              : "offline",
+          ),
+        );
+
+  if (filter) {
+    filteredServers.sort((a, b) => {
+      if (
+        !formatNezhaInfo(nezhaWsData.now, a).online &&
+        formatNezhaInfo(nezhaWsData.now, b).online
+      )
+        return 1;
+      if (
+        formatNezhaInfo(nezhaWsData.now, a).online &&
+        !formatNezhaInfo(nezhaWsData.now, b).online
+      )
+        return -1;
+      if (
+        !formatNezhaInfo(nezhaWsData.now, a).online &&
+        !formatNezhaInfo(nezhaWsData.now, b).online
+      )
+        return 0;
+      return (
+        formatNezhaInfo(nezhaWsData.now, b).state.net_in_speed +
+        formatNezhaInfo(nezhaWsData.now, b).state.net_out_speed -
+        (formatNezhaInfo(nezhaWsData.now, a).state.net_in_speed +
+          formatNezhaInfo(nezhaWsData.now, a).state.net_out_speed)
+      );
+    });
+  }
+
   return (
     <div className="mx-auto w-full max-w-5xl px-0">
       <ServerOverview