feat: filter servers by status

app/(main)/ClientComponents/ServerListClient.tsx

@@ -4,12 +4,14 @@ import { ServerApi } from "@/app/types/nezha-api";
 import ServerCard from "@/components/ServerCard";
 import Switch from "@/components/Switch";
 import getEnv from "@/lib/env-entry";
+import { useStatus } from "@/lib/status-context";
 import { nezhaFetcher } from "@/lib/utils";
 import { useTranslations } from "next-intl";
 import { useEffect, useRef, useState } from "react";
 import useSWR from "swr";
 
 export default function ServerListClient() {
+  const { status } = useStatus();
   const t = useTranslations("ServerListClient");
   const containerRef = useRef<HTMLDivElement>(null);
   const defaultTag = "defaultTag";
@@ -73,17 +75,26 @@ export default function ServerListClient() {
     return a.id - b.id;
   });
 
-  const allTag = sortedServers.map((server) => server.tag).filter(Boolean);
+  const filteredServersByStatus =
+    status === "all"
+      ? sortedServers
+      : sortedServers.filter((server) =>
+          [status].includes(server.online_status ? "online" : "offline"),
+        );
+
+  const allTag = filteredServersByStatus
+    .map((server) => server.tag)
+    .filter(Boolean);
   const uniqueTags = [...new Set(allTag)];
   uniqueTags.unshift(defaultTag);
 
   const filteredServers =
     tag === defaultTag
-      ? sortedServers
+      ? filteredServersByStatus
-      : sortedServers.filter((server) => server.tag === tag);
+      : filteredServersByStatus.filter((server) => server.tag === tag);
 
   const tagCountMap: Record<string, number> = {};
-  sortedServers.forEach((server) => {
+  filteredServersByStatus.forEach((server) => {
     if (server.tag) {
       tagCountMap[server.tag] = (tagCountMap[server.tag] || 0) + 1;
     }
@@ -91,7 +102,7 @@ export default function ServerListClient() {
 
   return (
     <>
-      {getEnv("NEXT_PUBLIC_ShowTag") === "true" && uniqueTags.length > 1 && (
+      {getEnv("NEXT_PUBLIC_ShowTag") === "true" && (
         <Switch
           allTag={uniqueTags}
           nowTag={tag}

app/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -4,13 +4,15 @@ import { ServerApi } from "@/app/types/nezha-api";
 import { Loader } from "@/components/loading/Loader";
 import { Card, CardContent } from "@/components/ui/card";
 import getEnv from "@/lib/env-entry";
-import { formatBytes, nezhaFetcher } from "@/lib/utils";
+import { useStatus } from "@/lib/status-context";
+import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
 import blogMan from "@/public/blog-man.webp";
 import { useTranslations } from "next-intl";
 import Image from "next/image";
 import useSWR from "swr";
 
 export default function ServerOverviewClient() {
+  const { status, setStatus } = useStatus();
   const t = useTranslations("ServerOverviewClient");
   const { data, error, isLoading } = useSWR<ServerApi>(
     "/api/server",
@@ -32,7 +34,10 @@ export default function ServerOverviewClient() {
   return (
     <>
       <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
-        <Card>
+        <Card
+          onClick={() => setStatus("all")}
+          className="cursor-pointer hover:border-blue-500 transition-all"
+        >
           <CardContent className="px-6 py-3">
             <section className="flex flex-col gap-1">
               <p className="text-sm font-medium md:text-base">
@@ -55,7 +60,15 @@ export default function ServerOverviewClient() {
             </section>
           </CardContent>
         </Card>
-        <Card>
+        <Card
+          onClick={() => setStatus("online")}
+          className={cn(
+            "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
+            {
+              "ring-green-500 ring-2 border-transparent": status === "online",
+            },
+          )}
+        >
           <CardContent className="px-6 py-3">
             <section className="flex flex-col gap-1">
               <p className="text-sm font-medium md:text-base">
@@ -79,7 +92,15 @@ export default function ServerOverviewClient() {
             </section>
           </CardContent>
         </Card>
-        <Card>
+        <Card
+          onClick={() => setStatus("offline")}
+          className={cn(
+            "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
+            {
+              "ring-red-500 ring-2 border-transparent": status === "offline",
+            },
+          )}
+        >
           <CardContent className="px-6 py-3">
             <section className="flex flex-col gap-1">
               <p className="text-sm font-medium md:text-base">

app/layout.tsx

@@ -1,6 +1,7 @@
 // @auto-i18n-check. Please do not delete the line.
 import { MotionProvider } from "@/components/motion/motion-provider";
 import getEnv from "@/lib/env-entry";
+import { StatusProvider } from "@/lib/status-context";
 import { cn } from "@/lib/utils";
 import "@/styles/globals.css";
 import type { Metadata } from "next";
@@ -78,7 +79,7 @@ export default async function LocaleLayout({
             disableTransitionOnChange
           >
             <NextIntlClientProvider messages={messages}>
-              {children}
+              <StatusProvider>{children}</StatusProvider>
             </NextIntlClientProvider>
           </ThemeProvider>
         </MotionProvider>

lib/status-context.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import React, { ReactNode, createContext, useContext, useState } from "react";
+
+type Status = "all" | "online" | "offline";
+
+interface StatusContextType {
+  status: Status;
+  setStatus: (status: Status) => void;
+}
+
+const StatusContext = createContext<StatusContextType | undefined>(undefined);
+
+export function StatusProvider({ children }: { children: ReactNode }) {
+  const [status, setStatus] = useState<Status>("all");
+
+  return (
+    <StatusContext.Provider value={{ status, setStatus }}>
+      {children}
+    </StatusContext.Provider>
+  );
+}
+
+export function useStatus() {
+  const context = useContext(StatusContext);
+  if (context === undefined) {
+    throw new Error("useStatus must be used within a StatusProvider");
+  }
+  return context;
+}

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@ducanh2912/next-pwa": "^10.2.9",
-    "@heroicons/react": "^2.1.5",
+    "@heroicons/react": "^2.2.0",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-navigation-menu": "^1.2.1",
@@ -23,7 +23,7 @@
     "@radix-ui/react-tooltip": "^1.1.4",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/luxon": "^3.4.2",
-    "@typescript-eslint/eslint-plugin": "^8.14.0",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
     "caniuse-lite": "^1.0.30001680",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
@@ -48,7 +48,7 @@
     "swr": "^2.2.6-beta.4",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "typescript-eslint": "^8.14.0"
+    "typescript-eslint": "^8.15.0"
   },
   "devDependencies": {
     "eslint-plugin-turbo": "^2.3.0",