.env.example

@@ -15,4 +15,3 @@ NEXT_PUBLIC_CustomDescription=NezhaDash is a dashboard for Nezha.
 NEXT_PUBLIC_Links='[{"link":"https://github.com/hamster1963/nezha-dash","name":"GitHub"},{"link":"https://buycoffee.top/coffee","name":"Buycoffee☕️"}]'
 NEXT_PUBLIC_DisableIndex=false
 NEXT_PUBLIC_ShowTagCount=false
-NEXT_PUBLIC_ShowIpInfo=false

.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript"],
+  "rules": {
+    "@typescript-eslint/no-explicit-any": "off",
+    "@next/next/no-img-element": "off",
+    "react-hooks/exhaustive-deps": "off"
+  }
+}

.github/ISSUE_TEMPLATE/bug-提交.md

@@ -1,19 +0,0 @@
----
-name: Bug 提交
-about: 提交 bug，让面板变得更好。
-title: "[BUG]"
-labels: ""
-assignees: ""
----
-
-**面板版本（二选一）**
-V0 | V1
-
-**描述 bug**
-在这里描述 bug 的相关信息
-
-**屏幕截图**
-有屏幕截图可以帮助更快定位到问题
-
-**额外信息**
-可附上其他需要的额外信息

.github/ISSUE_TEMPLATE/功能申请.md

@@ -1,14 +0,0 @@
----
-name: 功能申请
-about: 描述需求
-title: "[FEAT]"
-labels: ""
-assignees: ""
----
-
-**面板版本（二选一）**
-V0 | V1
-
-**需要什么？**
-
-**额外信息**

.github/ISSUE_TEMPLATE/改善建议.md

@@ -1,14 +0,0 @@
----
-name: 改善建议
-about: 交流面板需要改进的地方
-title: "[SUGGEST]"
-labels: ""
-assignees: ""
----
-
-**面板版本（二选一）**
-V0 | V1
-
-**需要改进的？**
-
--

.github/workflows/Deploy.yml

@@ -1,7 +1,5 @@
 name: Build and push Docker image
-permissions:
+
-  contents: write
-  
 on:
   push:
     tags:
@@ -19,8 +17,6 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
@@ -60,12 +56,20 @@ jobs:
           tags: ${{ steps.meta.outputs.tags }}
           labels: ${{ steps.meta.outputs.labels }}
 
-      - name: Set up Bun
+  release:
-        uses: oven-sh/setup-bun@v1
+    runs-on: ubuntu-latest
+    needs: build-and-push
+    steps:
+      - uses: actions/checkout@v4
         with:
-          bun-version: "latest"
+          fetch-depth: 0
 
-      - name: Changelog
+      - name: Set node
-        run: bun x changelogithub
+        uses: actions/setup-node@v4
+        with:
+          registry-url: https://registry.npmjs.org/
+          node-version: lts/*
+
+      - run: npx changelogithub
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.github/workflows/auto-fix-lint-format-commit.yml

@@ -1,56 +0,0 @@
-name: Auto Fix Lint and Format
-permissions:
-  contents: write
-  pull-requests: write
-
-on:
-  pull_request:
-    types: [opened, synchronize]
-
-jobs:
-  auto-fix:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-          ref: ${{ github.head_ref }}
-          repository: ${{ github.event.pull_request.head.repo.full_name }}
-
-      - name: Set up Bun
-        uses: oven-sh/setup-bun@v1
-        with:
-          bun-version: "latest"
-
-      - name: Install dependencies
-        run: bun install
-
-      - name: Run linter & formatter and fix issues
-        run: bun run check:fix
-
-      - name: Check for changes
-        id: check_changes
-        run: |
-          git diff --exit-code || echo "has_changes=true" >> $GITHUB_ENV
-
-      - name: Commit and push changes
-        if: steps.check_changes.outputs.has_changes == 'true' || env.has_changes == 'true'
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: "chore: auto-fix linting and formatting issues"
-          commit_options: "--no-verify"
-          file_pattern: "."
-
-      - name: Add PR comment
-        if: steps.check_changes.outputs.has_changes == 'true' || env.has_changes == 'true'
-        uses: actions/github-script@v7
-        with:
-          github-token: ${{secrets.GITHUB_TOKEN}}
-          script: |
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: 'Linting and formatting issues were automatically fixed. Please review the changes.'
-            });

LICENSE

@@ -1,201 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.

README.md

@@ -1,17 +1,10 @@
-<div align="center"><img width="600" alt="nezhadash" src="https://github.com/user-attachments/assets/0a5768e1-96f2-4f8a-b77f-01488ed3b237"></div>
+<h1 align="center">NezhaDash</h1>
-<h3 align="center">NezhaDash 是一个基于 Next.js 和 哪吒监控 的仪表盘</h3>
+
+<strong>NezhaDash 是一个基于 Next.js 和 哪吒监控 的仪表盘</strong>
 <br>
 
 </div>
 
-> [!CAUTION]
-> 此为 V0 兼容版本，与 V1 内置版本功能上可能有所不同
->
-> V0 | V1 版本 issue 请在当前仓库发起
-
-> [!TIP]
-> 有关 V1 版本 pr 可移步 https://github.com/hamster1963/nezha-dash-v1
-
 ### 部署
 
 支持部署环境：
@@ -20,7 +13,7 @@
 - Cloudflare
 - Docker
 
-[演示站点](https://nezha-vercel.vercel.app)
+[演示站点](https://nezha-cf.buycoffee.top)
 [说明文档](https://nezhadash-docs.vercel.app)
 
 ### 如何更新
@@ -31,8 +24,11 @@
 
 [环境变量介绍](https://nezhadash-docs.vercel.app/environment)
 
-![screen](/.github/v2-1.webp)
+![screen](/.github/1.webp)
-![screen](/.github/v2-2.webp)
+![screen](/.github/2.webp)
-![screen](/.github/v2-3.webp)
+![screen](/.github/3.webp)
-![screen](/.github/v2-4.webp)
+![screen](/.github/4.webp)
-![screen](/.github/v2-dark.webp)
+![screen](/.github/1-dark.webp)
+![screen](/.github/2-dark.webp)
+![screen](/.github/3-dark.webp)
+![screen](/.github/4-dark.webp)

app/(main)/ClientComponents/Global.tsx

@@ -0,0 +1,45 @@
+import { GetNezhaData } from "@/lib/serverFetch";
+
+import { geoJsonString } from "../../../lib/geo-json-string";
+import GlobalInfo from "./GlobalInfo";
+import { InteractiveMap } from "./InteractiveMap";
+
+export default async function ServerGlobal() {
+  const nezhaServerList = await GetNezhaData();
+
+  const countryList: string[] = [];
+  const serverCounts: { [key: string]: number } = {};
+
+  nezhaServerList.result.forEach((server) => {
+    if (server.host.CountryCode) {
+      const countryCode = server.host.CountryCode.toUpperCase();
+      if (!countryList.includes(countryCode)) {
+        countryList.push(countryCode);
+      }
+      serverCounts[countryCode] = (serverCounts[countryCode] || 0) + 1;
+    }
+  });
+
+  const width = 900;
+  const height = 500;
+
+  const geoJson = JSON.parse(geoJsonString);
+  const filteredFeatures = geoJson.features.filter(
+    (feature: any) => feature.properties.iso_a3_eh !== "",
+  );
+
+  return (
+    <section className="flex flex-col gap-4 mt-[3.2px]">
+      <GlobalInfo countries={countryList} />
+      <div className="w-full overflow-x-auto">
+        <InteractiveMap
+          countries={countryList}
+          serverCounts={serverCounts}
+          width={width}
+          height={height}
+          filteredFeatures={filteredFeatures}
+        />
+      </div>
+    </section>
+  );
+}

app/(main)/ClientComponents/GlobalInfo.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import GlobalBackButton from "@/components/GlobalBackButton";
+import { useTranslations } from "next-intl";
+
+type GlobalInfoProps = {
+  countries: string[];
+};
+
+export default function GlobalInfo({ countries }: GlobalInfoProps) {
+  const t = useTranslations("Global");
+  return (
+    <section className="flex items-center justify-between">
+      <GlobalBackButton />
+      <p className="text-sm font-medium opacity-40">
+        {t("Distributions")} {countries.length} {t("Regions")}
+      </p>
+    </section>
+  );
+}

app/(main)/ClientComponents/GlobalLoading.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import GlobalBackButton from "@/components/GlobalBackButton";
+import { Loader } from "@/components/loading/Loader";
+import { useTranslations } from "next-intl";
+
+export default function GlobalLoading() {
+  const t = useTranslations("Global");
+  return (
+    <section className="flex flex-col gap-4 mt-[3.2px]">
+      <GlobalBackButton />
+      <div className="flex min-h-40 flex-col items-center justify-center font-medium text-sm">
+        {t("Loading")}
+        <Loader visible={true} />
+      </div>
+    </section>
+  );
+}

app/(main)/ClientComponents/InteractiveMap.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { countryCodeMapping } from "@/lib/geo";
+import { geoEquirectangular, geoPath } from "d3-geo";
+import { AnimatePresence, m } from "framer-motion";
+import { useTranslations } from "next-intl";
+import { useState } from "react";
+
+interface InteractiveMapProps {
+  countries: string[];
+  serverCounts: { [key: string]: number };
+  width: number;
+  height: number;
+  filteredFeatures: any[];
+}
+
+export function InteractiveMap({
+  countries,
+  serverCounts,
+  width,
+  height,
+  filteredFeatures,
+}: InteractiveMapProps) {
+  const t = useTranslations("Global");
+
+  const [tooltipData, setTooltipData] = useState<{
+    centroid: [number, number];
+    country: string;
+    count: number;
+  } | null>(null);
+
+  const countries_alpha3 = countries
+    .map((code) => countryCodeMapping[code])
+    .filter((code) => code !== undefined);
+
+  const projection = geoEquirectangular()
+    .scale(140)
+    .translate([width / 2, height / 2])
+    .rotate([-12, 0, 0]);
+
+  const path = geoPath().projection(projection);
+
+  return (
+    <div className="relative w-full aspect-[2/1]">
+      <svg
+        width={width}
+        height={height}
+        viewBox={`0 0 ${width} ${height}`}
+        xmlns="http://www.w3.org/2000/svg"
+        className="w-full h-auto"
+      >
+        <defs>
+          <pattern id="dots" width="2" height="2" patternUnits="userSpaceOnUse">
+            <circle cx="1" cy="1" r="0.5" fill="currentColor" />
+          </pattern>
+        </defs>
+        <g>
+          {filteredFeatures.map((feature, index) => {
+            const isHighlighted = countries_alpha3.includes(
+              feature.properties.iso_a3_eh,
+            );
+
+            const countryCode = Object.entries(countryCodeMapping).find(
+              ([, alpha3]) => alpha3 === feature.properties.iso_a3_eh,
+            )?.[0];
+
+            const serverCount = countryCode
+              ? serverCounts[countryCode] || 0
+              : 0;
+
+            return (
+              <path
+                key={index}
+                d={path(feature) || ""}
+                className={
+                  isHighlighted
+                    ? "fill-orange-500 hover:fill-orange-300 stroke-orange-500 dark:stroke-amber-900  dark:fill-amber-900 dark:hover:fill-amber-700 transition-all cursor-pointer"
+                    : "fill-neutral-200/50 dark:fill-neutral-800 stroke-neutral-300/40 dark:stroke-neutral-700 stroke-[0.5]"
+                }
+                onMouseEnter={() => {
+                  if (isHighlighted && path.centroid(feature)) {
+                    setTooltipData({
+                      centroid: path.centroid(feature),
+                      country: feature.properties.name,
+                      count: serverCount,
+                    });
+                  }
+                }}
+                onMouseLeave={() => setTooltipData(null)}
+              />
+            );
+          })}
+        </g>
+      </svg>
+      <AnimatePresence mode="wait">
+        {tooltipData && (
+          <m.div
+            initial={{ opacity: 0, filter: "blur(10px)" }}
+            animate={{ opacity: 1, filter: "blur(0px)" }}
+            className="absolute hidden lg:block pointer-events-none bg-white dark:bg-neutral-800 px-2 py-1 rounded shadow-lg text-sm dark:border dark:border-neutral-700"
+            key={tooltipData.country}
+            style={{
+              left: tooltipData.centroid[0],
+              top: tooltipData.centroid[1],
+              transform: "translate(-50%, -50%)",
+            }}
+          >
+            <p className="font-medium">{tooltipData.country}</p>
+            <p className="text-neutral-600 dark:text-neutral-400">
+              {tooltipData.count} {t("Servers")}
+            </p>
+          </m.div>
+        )}
+      </AnimatePresence>
+    </div>
+  );
+}

app/(main)/ClientComponents/NetworkChart.tsx

@@ -0,0 +1,285 @@
+"use client";
+
+import NetworkChartLoading from "@/app/(main)/ClientComponents/NetworkChartLoading";
+import { NezhaAPIMonitor, ServerMonitorChart } from "@/app/types/nezha-api";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+import getEnv from "@/lib/env-entry";
+import { formatTime, nezhaFetcher } from "@/lib/utils";
+import { formatRelativeTime } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import * as React from "react";
+import { useCallback, useMemo } from "react";
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts";
+import useSWR from "swr";
+
+interface ResultItem {
+  created_at: number;
+  [key: string]: number | null;
+}
+
+export function NetworkChartClient({
+  server_id,
+  show,
+}: {
+  server_id: number;
+  show: boolean;
+}) {
+  const t = useTranslations("NetworkChartClient");
+  const { data, error } = useSWR<NezhaAPIMonitor[]>(
+    `/api/monitor?server_id=${server_id}`,
+    nezhaFetcher,
+    {
+      refreshInterval:
+        Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 15000,
+      isVisible: () => show,
+    },
+  );
+
+  if (error) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-sm font-medium opacity-40">{error.message}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("chart_fetch_error_message")}
+          </p>
+        </div>
+        <NetworkChartLoading />
+      </>
+    );
+  }
+
+  if (!data) return <NetworkChartLoading />;
+
+  const transformedData = transformData(data);
+
+  const formattedData = formatData(data);
+
+  const initChartConfig = {
+    avg_delay: {
+      label: t("avg_delay"),
+    },
+  } satisfies ChartConfig;
+
+  const chartDataKey = Object.keys(transformedData);
+
+  return (
+    <NetworkChart
+      chartDataKey={chartDataKey}
+      chartConfig={initChartConfig}
+      chartData={transformedData}
+      serverName={data[0].server_name}
+      formattedData={formattedData}
+    />
+  );
+}
+
+export const NetworkChart = React.memo(function NetworkChart({
+  chartDataKey,
+  chartConfig,
+  chartData,
+  serverName,
+  formattedData,
+}: {
+  chartDataKey: string[];
+  chartConfig: ChartConfig;
+  chartData: ServerMonitorChart;
+  serverName: string;
+  formattedData: ResultItem[];
+}) {
+  const t = useTranslations("NetworkChart");
+
+  const defaultChart = "All";
+
+  const [activeChart, setActiveChart] = React.useState(defaultChart);
+
+  const handleButtonClick = useCallback(
+    (chart: string) => {
+      setActiveChart((prev) => (prev === chart ? defaultChart : chart));
+    },
+    [defaultChart],
+  );
+
+  const getColorByIndex = useCallback(
+    (chart: string) => {
+      const index = chartDataKey.indexOf(chart);
+      return `hsl(var(--chart-${(index % 10) + 1}))`;
+    },
+    [chartDataKey],
+  );
+
+  const chartButtons = useMemo(
+    () =>
+      chartDataKey.map((key) => (
+        <button
+          key={key}
+          data-active={activeChart === key}
+          className={`relative z-30 flex cursor-pointer flex-1 flex-col justify-center gap-1 border-b border-neutral-200 dark:border-neutral-800 px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-l sm:border-t-0 sm:px-6`}
+          onClick={() => handleButtonClick(key)}
+        >
+          <span className="whitespace-nowrap text-xs text-muted-foreground">
+            {key}
+          </span>
+          <span className="text-md font-bold leading-none sm:text-lg">
+            {chartData[key][chartData[key].length - 1].avg_delay.toFixed(2)}ms
+          </span>
+        </button>
+      )),
+    [chartDataKey, activeChart, chartData, handleButtonClick],
+  );
+
+  const chartLines = useMemo(() => {
+    if (activeChart !== defaultChart) {
+      return (
+        <Line
+          isAnimationActive={false}
+          strokeWidth={1}
+          type="linear"
+          dot={false}
+          dataKey="avg_delay"
+          stroke={getColorByIndex(activeChart)}
+        />
+      );
+    }
+    return chartDataKey.map((key) => (
+      <Line
+        key={key}
+        isAnimationActive={false}
+        strokeWidth={1}
+        type="linear"
+        dot={false}
+        dataKey={key}
+        stroke={getColorByIndex(key)}
+        connectNulls={true}
+      />
+    ));
+  }, [activeChart, defaultChart, chartDataKey, getColorByIndex]);
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col items-stretch space-y-0 p-0 sm:flex-row">
+        <div className="flex flex-none flex-col justify-center gap-1 border-b px-6 py-4">
+          <CardTitle className="flex flex-none items-center gap-0.5 text-md">
+            {serverName}
+          </CardTitle>
+          <CardDescription className="text-xs">
+            {chartDataKey.length} {t("ServerMonitorCount")}
+          </CardDescription>
+        </div>
+        <div className="flex flex-wrap">{chartButtons}</div>
+      </CardHeader>
+      <CardContent className="pr-2 pl-0 py-4 sm:pt-6 sm:pb-6 sm:pr-6 sm:pl-2">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <LineChart
+            accessibilityLayer
+            data={
+              activeChart === defaultChart
+                ? formattedData
+                : chartData[activeChart]
+            }
+            margin={{ left: 12, right: 12 }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="created_at"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              interval={"preserveStartEnd"}
+              tickFormatter={(value) => formatRelativeTime(value)}
+            />
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={15}
+              minTickGap={20}
+              tickFormatter={(value) => `${value}ms`}
+            />
+            <ChartTooltip
+              isAnimationActive={false}
+              content={
+                <ChartTooltipContent
+                  indicator={"line"}
+                  labelKey="created_at"
+                  labelFormatter={(_, payload) => {
+                    return formatTime(payload[0].payload.created_at);
+                  }}
+                />
+              }
+            />
+            {activeChart === defaultChart && (
+              <ChartLegend content={<ChartLegendContent />} />
+            )}
+            {chartLines}
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+});
+
+const transformData = (data: NezhaAPIMonitor[]) => {
+  const monitorData: ServerMonitorChart = {};
+
+  data.forEach((item) => {
+    const monitorName = item.monitor_name;
+
+    if (!monitorData[monitorName]) {
+      monitorData[monitorName] = [];
+    }
+
+    for (let i = 0; i < item.created_at.length; i++) {
+      monitorData[monitorName].push({
+        created_at: item.created_at[i],
+        avg_delay: item.avg_delay[i],
+      });
+    }
+  });
+
+  return monitorData;
+};
+
+const formatData = (rawData: NezhaAPIMonitor[]) => {
+  const result: { [time: number]: ResultItem } = {};
+
+  const allTimes = new Set<number>();
+  rawData.forEach((item) => {
+    item.created_at.forEach((time) => allTimes.add(time));
+  });
+
+  const allTimeArray = Array.from(allTimes).sort((a, b) => a - b);
+
+  rawData.forEach((item) => {
+    const { monitor_name, created_at, avg_delay } = item;
+
+    allTimeArray.forEach((time) => {
+      if (!result[time]) {
+        result[time] = { created_at: time };
+      }
+
+      const timeIndex = created_at.indexOf(time);
+      result[time][monitor_name] =
+        timeIndex !== -1 ? avg_delay[timeIndex] : null;
+    });
+  });
+
+  return Object.values(result).sort((a, b) => a.created_at - b.created_at);
+};

app/(main)/ClientComponents/NetworkChartLoading.tsx

@@ -1,5 +1,5 @@
-import { Loader } from "@/components/loading/Loader"
+import { Loader } from "@/components/loading/Loader";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
 export default function NetworkChartLoading() {
   return (
@@ -7,17 +7,17 @@ export default function NetworkChartLoading() {
       <CardHeader className="flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row">
         <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5">
           <CardTitle className="flex items-center gap-0.5 text-xl">
-            <div className="aspect-auto h-[20px] w-24 bg-muted" />
+            <div className="aspect-auto h-[20px] w-24 bg-muted"></div>
           </CardTitle>
-          <div className="mt-[2px] aspect-auto h-[14px] w-32 bg-muted" />
+          <div className="mt-[2px] aspect-auto h-[14px] w-32 bg-muted"></div>
         </div>
-        <div className="hidden pt-4 pr-4 sm:block">
+        <div className="hidden pr-4 pt-4 sm:block">
           <Loader visible={true} />
         </div>
       </CardHeader>
       <CardContent className="px-2 sm:p-6">
-        <div className="aspect-auto h-[250px] w-full" />
+        <div className="aspect-auto h-[250px] w-full"></div>
       </CardContent>
     </Card>
-  )
+  );
 }

app/(main)/ClientComponents/ServerDetailChartClient.tsx

@@ -0,0 +1,766 @@
+"use client";
+
+import { ServerDetailChartLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading";
+import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api";
+import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar";
+import { Card, CardContent } from "@/components/ui/card";
+import { ChartConfig, ChartContainer } from "@/components/ui/chart";
+import getEnv from "@/lib/env-entry";
+import { formatNezhaInfo, formatRelativeTime, nezhaFetcher } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import { useEffect, useState } from "react";
+import {
+  Area,
+  AreaChart,
+  CartesianGrid,
+  Line,
+  LineChart,
+  XAxis,
+  YAxis,
+} from "recharts";
+import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
+
+type cpuChartData = {
+  timeStamp: string;
+  cpu: number;
+};
+
+type processChartData = {
+  timeStamp: string;
+  process: number;
+};
+
+type diskChartData = {
+  timeStamp: string;
+  disk: number;
+};
+
+type memChartData = {
+  timeStamp: string;
+  mem: number;
+  swap: number;
+};
+
+type networkChartData = {
+  timeStamp: string;
+  upload: number;
+  download: number;
+};
+
+type connectChartData = {
+  timeStamp: string;
+  tcp: number;
+  udp: number;
+};
+
+export default function ServerDetailChartClient({
+  server_id,
+  show,
+}: {
+  server_id: number;
+  show: boolean;
+}) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const { data: allFallbackData } = useSWRImmutable<ServerApi>(
+    "/api/server",
+    nezhaFetcher,
+  );
+  const fallbackData = allFallbackData?.result?.find(
+    (item) => item.id === server_id,
+  );
+
+  const { data, error } = useSWR<NezhaAPISafe>(
+    `/api/detail?server_id=${server_id}`,
+    nezhaFetcher,
+    {
+      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+      isVisible: () => show,
+      fallbackData,
+      revalidateOnMount: false,
+      revalidateIfStale: false,
+    },
+  );
+
+  if (error) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-sm font-medium opacity-40">{error.message}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("chart_fetch_error_message")}
+          </p>
+        </div>
+      </>
+    );
+  }
+  if (!data) return <ServerDetailChartLoading />;
+
+  return (
+    <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
+      <CpuChart data={data} />
+      <ProcessChart data={data} />
+      <DiskChart data={data} />
+      <MemChart data={data} />
+      <NetworkChart data={data} />
+      <ConnectChart data={data} />
+    </section>
+  );
+}
+
+function CpuChart({ data }: { data: NezhaAPISafe }) {
+  const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[]);
+
+  const { cpu } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as cpuChartData[];
+      if (cpuChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, cpu: cpu },
+          { timeStamp: timestamp, cpu: cpu },
+        ];
+      } else {
+        newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setCpuChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    cpu: {
+      label: "CPU",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <p className="text-md font-medium">CPU</p>
+            <section className="flex items-center gap-2">
+              <p className="text-xs text-end w-10 font-medium">
+                {cpu.toFixed(0)}%
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={cpu}
+                primaryColor="hsl(var(--chart-1))"
+              />
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={cpuChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="cpu"
+                type="step"
+                fill="hsl(var(--chart-1))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-1))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ProcessChart({ data }: { data: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const [processChartData, setProcessChartData] = useState(
+    [] as processChartData[],
+  );
+
+  const { process } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as processChartData[];
+      if (processChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, process: process },
+          { timeStamp: timestamp, process: process },
+        ];
+      } else {
+        newData = [
+          ...processChartData,
+          { timeStamp: timestamp, process: process },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setProcessChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    process: {
+      label: "Process",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <p className="text-md font-medium">{t("Process")}</p>
+            <section className="flex items-center gap-2">
+              <p className="text-xs text-end w-10 font-medium">{process}</p>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={processChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="process"
+                type="step"
+                fill="hsl(var(--chart-2))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-2))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function MemChart({ data }: { data: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const [memChartData, setMemChartData] = useState([] as memChartData[]);
+
+  const { mem, swap } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as memChartData[];
+      if (memChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, mem: mem, swap: swap },
+          { timeStamp: timestamp, mem: mem, swap: swap },
+        ];
+      } else {
+        newData = [
+          ...memChartData,
+          { timeStamp: timestamp, mem: mem, swap: swap },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setMemChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    mem: {
+      label: "Mem",
+    },
+    swap: {
+      label: "Swap",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center">
+            <section className="flex items-center gap-4">
+              <div className="flex flex-col">
+                <p className=" text-xs text-muted-foreground">{t("Mem")}</p>
+                <div className="flex items-center gap-2">
+                  <AnimatedCircularProgressBar
+                    className="size-3 text-[0px]"
+                    max={100}
+                    min={0}
+                    value={mem}
+                    primaryColor="hsl(var(--chart-8))"
+                  />
+                  <p className="text-xs font-medium">{mem.toFixed(0)}%</p>
+                </div>
+              </div>
+              <div className="flex flex-col">
+                <p className=" text-xs text-muted-foreground">{t("Swap")}</p>
+                <div className="flex items-center gap-2">
+                  <AnimatedCircularProgressBar
+                    className="size-3 text-[0px]"
+                    max={100}
+                    min={0}
+                    value={swap}
+                    primaryColor="hsl(var(--chart-10))"
+                  />
+                  <p className="text-xs font-medium">{swap.toFixed(0)}%</p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={memChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="mem"
+                type="step"
+                fill="hsl(var(--chart-8))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-8))"
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="swap"
+                type="step"
+                fill="hsl(var(--chart-10))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-10))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function DiskChart({ data }: { data: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const [diskChartData, setDiskChartData] = useState([] as diskChartData[]);
+
+  const { disk } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as diskChartData[];
+      if (diskChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, disk: disk },
+          { timeStamp: timestamp, disk: disk },
+        ];
+      } else {
+        newData = [...diskChartData, { timeStamp: timestamp, disk: disk }];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setDiskChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    disk: {
+      label: "Disk",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center justify-between">
+            <p className="text-md font-medium">{t("Disk")}</p>
+            <section className="flex items-center gap-2">
+              <p className="text-xs text-end w-10 font-medium">
+                {disk.toFixed(0)}%
+              </p>
+              <AnimatedCircularProgressBar
+                className="size-3 text-[0px]"
+                max={100}
+                min={0}
+                value={disk}
+                primaryColor="hsl(var(--chart-5))"
+              />
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <AreaChart
+              accessibilityLayer
+              data={diskChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                domain={[0, 100]}
+                tickFormatter={(value) => `${value}%`}
+              />
+              <Area
+                isAnimationActive={false}
+                dataKey="disk"
+                type="step"
+                fill="hsl(var(--chart-5))"
+                fillOpacity={0.3}
+                stroke="hsl(var(--chart-5))"
+              />
+            </AreaChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function NetworkChart({ data }: { data: NezhaAPISafe }) {
+  const t = useTranslations("ServerDetailChartClient");
+
+  const [networkChartData, setNetworkChartData] = useState(
+    [] as networkChartData[],
+  );
+
+  const { up, down } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as networkChartData[];
+      if (networkChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, upload: up, download: down },
+          { timeStamp: timestamp, upload: up, download: down },
+        ];
+      } else {
+        newData = [
+          ...networkChartData,
+          { timeStamp: timestamp, upload: up, download: down },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setNetworkChartData(newData);
+    }
+  }, [data]);
+
+  let maxDownload = Math.max(...networkChartData.map((item) => item.download));
+  maxDownload = Math.ceil(maxDownload);
+  if (maxDownload < 1) {
+    maxDownload = 1;
+  }
+
+  const chartConfig = {
+    upload: {
+      label: "Upload",
+    },
+    download: {
+      label: "Download",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center">
+            <section className="flex items-center gap-4">
+              <div className="flex flex-col w-20">
+                <p className="text-xs text-muted-foreground">{t("Upload")}</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
+                  <p className="text-xs font-medium">{up.toFixed(2)} M/s</p>
+                </div>
+              </div>
+              <div className="flex flex-col w-20">
+                <p className=" text-xs text-muted-foreground">
+                  {t("Download")}
+                </p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
+                  <p className="text-xs font-medium">{down.toFixed(2)} M/s</p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <LineChart
+              accessibilityLayer
+              data={networkChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                type="number"
+                minTickGap={50}
+                interval="preserveStartEnd"
+                domain={[1, maxDownload]}
+                tickFormatter={(value) => `${value.toFixed(0)}M/s`}
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="upload"
+                type="linear"
+                stroke="hsl(var(--chart-1))"
+                strokeWidth={1}
+                dot={false}
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="download"
+                type="linear"
+                stroke="hsl(var(--chart-4))"
+                strokeWidth={1}
+                dot={false}
+              />
+            </LineChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ConnectChart({ data }: { data: NezhaAPISafe }) {
+  const [connectChartData, setConnectChartData] = useState(
+    [] as connectChartData[],
+  );
+
+  const { tcp, udp } = formatNezhaInfo(data);
+
+  useEffect(() => {
+    if (data) {
+      const timestamp = Date.now().toString();
+      let newData = [] as connectChartData[];
+      if (connectChartData.length === 0) {
+        newData = [
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+        ];
+      } else {
+        newData = [
+          ...connectChartData,
+          { timeStamp: timestamp, tcp: tcp, udp: udp },
+        ];
+      }
+      if (newData.length > 30) {
+        newData.shift();
+      }
+      setConnectChartData(newData);
+    }
+  }, [data]);
+
+  const chartConfig = {
+    tcp: {
+      label: "TCP",
+    },
+    udp: {
+      label: "UDP",
+    },
+  } satisfies ChartConfig;
+
+  return (
+    <Card>
+      <CardContent className="px-6 py-3">
+        <section className="flex flex-col gap-1">
+          <div className="flex items-center">
+            <section className="flex items-center gap-4">
+              <div className="flex flex-col w-12">
+                <p className="text-xs text-muted-foreground">TCP</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-1))]"></span>
+                  <p className="text-xs font-medium">{tcp}</p>
+                </div>
+              </div>
+              <div className="flex flex-col w-12">
+                <p className=" text-xs text-muted-foreground">UDP</p>
+                <div className="flex items-center gap-1">
+                  <span className="relative inline-flex  size-1.5 rounded-full bg-[hsl(var(--chart-4))]"></span>
+                  <p className="text-xs font-medium">{udp}</p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <ChartContainer
+            config={chartConfig}
+            className="aspect-auto h-[130px] w-full"
+          >
+            <LineChart
+              accessibilityLayer
+              data={connectChartData}
+              margin={{
+                top: 12,
+                left: 12,
+                right: 12,
+              }}
+            >
+              <CartesianGrid vertical={false} />
+              <XAxis
+                dataKey="timeStamp"
+                tickLine={false}
+                axisLine={false}
+                tickMargin={8}
+                minTickGap={200}
+                interval="preserveStartEnd"
+                tickFormatter={(value) => formatRelativeTime(value)}
+              />
+              <YAxis
+                tickLine={false}
+                axisLine={false}
+                mirror={true}
+                tickMargin={-15}
+                type="number"
+                interval="preserveStartEnd"
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="tcp"
+                type="linear"
+                stroke="hsl(var(--chart-1))"
+                strokeWidth={1}
+                dot={false}
+              />
+              <Line
+                isAnimationActive={false}
+                dataKey="udp"
+                type="linear"
+                stroke="hsl(var(--chart-4))"
+                strokeWidth={1}
+                dot={false}
+              />
+            </LineChart>
+          </ChartContainer>
+        </section>
+      </CardContent>
+    </Card>
+  );
+}

app/(main)/ClientComponents/ServerDetailClient.tsx

@@ -0,0 +1,200 @@
+"use client";
+
+import { ServerDetailLoading } from "@/app/(main)/ClientComponents/ServerDetailLoading";
+import { NezhaAPISafe, ServerApi } from "@/app/types/nezha-api";
+import { BackIcon } from "@/components/Icon";
+import ServerFlag from "@/components/ServerFlag";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import getEnv from "@/lib/env-entry";
+import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import useSWR from "swr";
+import useSWRImmutable from "swr/immutable";
+
+export default function ServerDetailClient({
+  server_id,
+}: {
+  server_id: number;
+}) {
+  const t = useTranslations("ServerDetailClient");
+  const router = useRouter();
+
+  const [hasHistory, setHasHistory] = useState(false);
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
+  useEffect(() => {
+    const previousPath = sessionStorage.getItem("fromMainPage");
+    if (previousPath) {
+      setHasHistory(true);
+    }
+  }, []);
+
+  const linkClick = () => {
+    if (hasHistory) {
+      router.back();
+    } else {
+      router.push(`/`);
+    }
+  };
+
+  const { data: allFallbackData } = useSWRImmutable<ServerApi>(
+    "/api/server",
+    nezhaFetcher,
+  );
+  const fallbackData = allFallbackData?.result?.find(
+    (item) => item.id === server_id,
+  );
+
+  const { data, error } = useSWR<NezhaAPISafe>(
+    `/api/detail?server_id=${server_id}`,
+    nezhaFetcher,
+    {
+      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 5000,
+      fallbackData,
+      revalidateOnMount: false,
+      revalidateIfStale: false,
+    },
+  );
+
+  if (error) {
+    return (
+      <>
+        <div className="flex flex-col items-center justify-center">
+          <p className="text-sm font-medium opacity-40">{error.message}</p>
+          <p className="text-sm font-medium opacity-40">
+            {t("detail_fetch_error_message")}
+          </p>
+        </div>
+      </>
+    );
+  }
+
+  if (!data) return <ServerDetailLoading />;
+
+  return (
+    <div>
+      <div
+        onClick={linkClick}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        {data?.name}
+      </div>
+      <section className="flex flex-wrap gap-2 mt-3">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("status")}</p>
+              <Badge
+                className={cn(
+                  "text-[9px] rounded-[6px] w-fit px-1 py-0 -mt-[0.3px] dark:text-white",
+                  {
+                    " bg-green-800": data?.online_status,
+                    " bg-red-600": !data?.online_status,
+                  },
+                )}
+              >
+                {data?.online_status ? t("Online") : t("Offline")}
+              </Badge>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("Uptime")}</p>
+              <div className="text-xs">
+                {" "}
+                {(data?.status.Uptime / 86400).toFixed(0)} {t("Days")}{" "}
+              </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("Version")}</p>
+              <div className="text-xs">{data?.host.Version || "Unknown"} </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("Arch")}</p>
+              <div className="text-xs">{data?.host.Arch || "Unknown"} </div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("Mem")}</p>
+              <div className="text-xs">{formatBytes(data?.host.MemTotal)}</div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("Disk")}</p>
+              <div className="text-xs">{formatBytes(data?.host.DiskTotal)}</div>
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("Region")}</p>
+              <section className="flex items-start gap-1">
+                <div className="text-xs text-start">
+                  {data?.host.CountryCode.toUpperCase()}
+                </div>
+                <ServerFlag
+                  className="text-[11px] -mt-[1px]"
+                  country_code={data?.host.CountryCode}
+                />
+              </section>
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+      <section className="flex flex-wrap gap-2 mt-1">
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("System")}</p>
+              {data?.host.Platform ? (
+                <div className="text-xs">
+                  {" "}
+                  {data?.host.Platform || "Unknown"} -{" "}
+                  {data?.host.PlatformVersion}{" "}
+                </div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+        <Card className="rounded-[10px] bg-transparent border-none shadow-none">
+          <CardContent className="px-1.5 py-1">
+            <section className="flex flex-col items-start gap-0.5">
+              <p className="text-xs text-muted-foreground">{t("CPU")}</p>
+              {data?.host.CPU ? (
+                <div className="text-xs"> {data?.host.CPU}</div>
+              ) : (
+                <div className="text-xs">Unknown</div>
+              )}
+            </section>
+          </CardContent>
+        </Card>
+      </section>
+    </div>
+  );
+}

app/(main)/ClientComponents/ServerDetailLoading.tsx

@@ -0,0 +1,37 @@
+import { BackIcon } from "@/components/Icon";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useRouter } from "next/navigation";
+
+export function ServerDetailChartLoading() {
+  return (
+    <div>
+      <section className="grid md:grid-cols-2 lg:grid-cols-3 grid-cols-1 gap-3">
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        <Skeleton className="h-[182px] w-full rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      </section>
+    </div>
+  );
+}
+
+export function ServerDetailLoading() {
+  const router = useRouter();
+
+  return (
+    <>
+      <div
+        onClick={() => {
+          router.push(`/`);
+        }}
+        className="flex flex-none cursor-pointer font-semibold leading-none items-center break-all tracking-tight gap-0.5 text-xl"
+      >
+        <BackIcon />
+        <Skeleton className="h-[20px] w-24 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+      </div>
+      <Skeleton className="flex flex-wrap gap-2 h-[81px] w-1/2 mt-3 rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+    </>
+  );
+}

app/(main)/ClientComponents/ServerListClient.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import { ServerApi } from "@/app/types/nezha-api";
+import ServerCard from "@/components/ServerCard";
+import Switch from "@/components/Switch";
+import getEnv from "@/lib/env-entry";
+import { useFilter } from "@/lib/network-filter-context";
+import { useStatus } from "@/lib/status-context";
+import { nezhaFetcher } from "@/lib/utils";
+import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
+import { useTranslations } from "next-intl";
+import { useRouter } from "next/navigation";
+import { useEffect, useRef, useState } from "react";
+import useSWR from "swr";
+
+export default function ServerListClient() {
+  const { status } = useStatus();
+  const { filter } = useFilter();
+  const t = useTranslations("ServerListClient");
+  const containerRef = useRef<HTMLDivElement>(null);
+  const defaultTag = "defaultTag";
+  const router = useRouter();
+
+  const [tag, setTag] = useState<string>(defaultTag);
+
+  useEffect(() => {
+    const savedTag = sessionStorage.getItem("selectedTag") || defaultTag;
+    setTag(savedTag);
+
+    restoreScrollPosition();
+  }, []);
+
+  const handleTagChange = (newTag: string) => {
+    setTag(newTag);
+    sessionStorage.setItem("selectedTag", newTag);
+    sessionStorage.setItem(
+      "scrollPosition",
+      String(containerRef.current?.scrollTop || 0),
+    );
+  };
+
+  const restoreScrollPosition = () => {
+    const savedPosition = sessionStorage.getItem("scrollPosition");
+    if (savedPosition && containerRef.current) {
+      containerRef.current.scrollTop = Number(savedPosition);
+    }
+  };
+
+  useEffect(() => {
+    const handleRouteChange = () => {
+      restoreScrollPosition();
+    };
+
+    window.addEventListener("popstate", handleRouteChange);
+    return () => {
+      window.removeEventListener("popstate", handleRouteChange);
+    };
+  }, []);
+
+  const { data, error } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
+    refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 2000,
+  });
+
+  if (error)
+    return (
+      <div className="flex flex-col items-center justify-center">
+        <p className="text-sm font-medium opacity-40">{error.message}</p>
+        <p className="text-sm font-medium opacity-40">{t("error_message")}</p>
+      </div>
+    );
+
+  if (!data?.result) return null;
+
+  const { result } = data;
+  const sortedServers = result.sort((a, b) => {
+    const displayIndexDiff = (b.display_index || 0) - (a.display_index || 0);
+    if (displayIndexDiff !== 0) return displayIndexDiff;
+    return a.id - b.id;
+  });
+
+  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
+      ? filteredServersByStatus
+      : filteredServersByStatus.filter((server) => server.tag === tag);
+
+  if (filter) {
+    // 根据使用流量进行从高到低排序
+    filteredServers.sort((a, b) => {
+      return (
+        b.status.NetInTransfer +
+        b.status.NetOutTransfer -
+        (a.status.NetInTransfer + b.status.NetOutTransfer)
+      );
+    });
+  }
+
+  const tagCountMap: Record<string, number> = {};
+  filteredServersByStatus.forEach((server) => {
+    if (server.tag) {
+      tagCountMap[server.tag] = (tagCountMap[server.tag] || 0) + 1;
+    }
+  });
+
+  return (
+    <>
+      <section className="flex items-center gap-2 w-full overflow-hidden">
+        <button
+          onClick={() => {
+            router.push(`/?global=true`);
+          }}
+          className="rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600 hover:bg-blue-500 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] hover:shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] "
+        >
+          <GlobeAsiaAustraliaIcon className="size-[13px]" />
+        </button>
+        {getEnv("NEXT_PUBLIC_ShowTag") === "true" && (
+          <Switch
+            allTag={uniqueTags}
+            nowTag={tag}
+            tagCountMap={tagCountMap}
+            onTagChange={handleTagChange}
+          />
+        )}
+      </section>
+      <section
+        ref={containerRef}
+        className="grid grid-cols-1 gap-2 md:grid-cols-2"
+      >
+        {filteredServers.map((serverInfo) => (
+          <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
+        ))}
+      </section>
+    </>
+  );
+}

app/(main)/ClientComponents/ServerOverviewClient.tsx

@@ -1,35 +1,41 @@
-"use client"
+"use client";
 
-import { useFilter } from "@/app/context/network-filter-context"
+import { ServerApi } from "@/app/types/nezha-api";
-import { useServerData } from "@/app/context/server-data-context"
+import { Loader } from "@/components/loading/Loader";
-import { useStatus } from "@/app/context/status-context"
+import { Card, CardContent } from "@/components/ui/card";
-import AnimateCountClient from "@/components/AnimatedCount"
+import getEnv from "@/lib/env-entry";
-import { Loader } from "@/components/loading/Loader"
+import { useFilter } from "@/lib/network-filter-context";
-import { Card, CardContent } from "@/components/ui/card"
+import { useStatus } from "@/lib/status-context";
-import getEnv from "@/lib/env-entry"
+import { cn, formatBytes, nezhaFetcher } from "@/lib/utils";
-import { cn, formatBytes } from "@/lib/utils"
+import blogMan from "@/public/blog-man.webp";
-import blogMan from "@/public/blog-man.webp"
+import { useTranslations } from "next-intl";
-import { ArrowDownCircleIcon, ArrowUpCircleIcon } from "@heroicons/react/20/solid"
+import Image from "next/image";
-import { useTranslations } from "next-intl"
+import { useSearchParams } from "next/navigation";
-import Image from "next/image"
+import useSWR from "swr";
 
 export default function ServerOverviewClient() {
-  const { data, error, isLoading } = useServerData()
+  const { status, setStatus } = useStatus();
-  const { status, setStatus } = useStatus()
+  const { filter, setFilter } = useFilter();
-  const { filter, setFilter } = useFilter()
+  const t = useTranslations("ServerOverviewClient");
-  const t = useTranslations("ServerOverviewClient")
+  const { data, error, isLoading } = useSWR<ServerApi>(
-  const disableCartoon = getEnv("NEXT_PUBLIC_DisableCartoon") === "true"
+    "/api/server",
+    nezhaFetcher,
+  );
+  const disableCartoon = getEnv("NEXT_PUBLIC_DisableCartoon") === "true";
+
+  const searchParams = useSearchParams();
+
+  const global = searchParams.get("global");
 
   if (error) {
-    const errorInfo = error as any
     return (
       <div className="flex flex-col items-center justify-center">
-        <p className="font-medium text-sm opacity-40">
+        <p className="text-sm font-medium opacity-40">
-          Error status:{errorInfo?.status} {errorInfo.info?.cause ?? errorInfo?.message}
+          Error status:{error.status} {error.info?.cause ?? error.message}
         </p>
-        <p className="font-medium text-sm opacity-40">{t("error_message")}</p>
+        <p className="text-sm font-medium opacity-40">{t("error_message")}</p>
       </div>
-    )
+    );
   }
 
   return (
@@ -37,21 +43,27 @@ export default function ServerOverviewClient() {
       <section className="grid grid-cols-2 gap-4 lg:grid-cols-4">
         <Card
           onClick={() => {
-            setFilter(false)
+            if (!global) {
-            setStatus("all")
+              setFilter(false);
+              setStatus("all");
+            }
           }}
-          className={cn("group cursor-pointer transition-all hover:border-blue-500")}
+          className={cn("cursor-pointer hover:border-blue-500 transition-all", {
+            "pointer-events-none": global,
+          })}
         >
-          <CardContent className="flex h-full items-center px-6 py-3">
+          <CardContent className="px-6 py-3">
             <section className="flex flex-col gap-1">
-              <p className="font-medium text-sm md:text-base">{t("p_816-881_Totalservers")}</p>
+              <p className="text-sm font-medium md:text-base">
-              <div className="flex min-h-[28px] items-center gap-2">
+                {t("p_816-881_Totalservers")}
+              </p>
+              <div className="flex items-center gap-2">
                 <span className="relative flex h-2 w-2">
-                  <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500" />
+                  <span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
                 </span>
                 {data?.result ? (
-                  <div className="font-semibold text-lg">
+                  <div className="text-lg font-semibold">
-                    <AnimateCountClient count={data?.result.length} />
+                    {data?.result.length}
                   </div>
                 ) : (
                   <div className="flex h-7 items-center">
@@ -64,27 +76,34 @@ export default function ServerOverviewClient() {
         </Card>
         <Card
           onClick={() => {
-            setFilter(false)
+            if (!global) {
-            setStatus("online")
+              setFilter(false);
+              setStatus("online");
+            }
           }}
           className={cn(
-            "cursor-pointer ring-1 ring-transparent transition-all hover:ring-green-500",
+            "cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
             {
-              "border-transparent ring-2 ring-green-500": status === "online",
+              "ring-green-500 ring-2 border-transparent": status === "online",
+            },
+            {
+              "pointer-events-none": global,
             },
           )}
         >
-          <CardContent className="flex h-full items-center px-6 py-3">
+          <CardContent className="px-6 py-3">
             <section className="flex flex-col gap-1">
-              <p className="font-medium text-sm md:text-base">{t("p_1610-1676_Onlineservers")}</p>
+              <p className="text-sm font-medium md:text-base">
-              <div className="flex min-h-[28px] items-center gap-2">
+                {t("p_1610-1676_Onlineservers")}
+              </p>
+              <div className="flex items-center gap-2">
                 <span className="relative flex h-2 w-2">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75" />
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-green-500 opacity-75"></span>
-                  <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500" />
+                  <span className="relative inline-flex h-2 w-2 rounded-full bg-green-500"></span>
                 </span>
                 {data?.result ? (
-                  <div className="font-semibold text-lg">
+                  <div className="text-lg font-semibold">
-                    <AnimateCountClient count={data?.live_servers} />
+                    {data?.live_servers}
                   </div>
                 ) : (
                   <div className="flex h-7 items-center">
@@ -97,27 +116,34 @@ export default function ServerOverviewClient() {
         </Card>
         <Card
           onClick={() => {
-            setFilter(false)
+            if (!global) {
-            setStatus("offline")
+              setFilter(false);
+              setStatus("offline");
+            }
           }}
           className={cn(
-            "cursor-pointer ring-1 ring-transparent transition-all hover:ring-red-500",
+            "cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
             {
-              "border-transparent ring-2 ring-red-500": status === "offline",
+              "ring-red-500 ring-2 border-transparent": status === "offline",
+            },
+            {
+              "pointer-events-none": global,
             },
           )}
         >
-          <CardContent className="flex h-full items-center px-6 py-3">
+          <CardContent className="px-6 py-3">
             <section className="flex flex-col gap-1">
-              <p className="font-medium text-sm md:text-base">{t("p_2532-2599_Offlineservers")}</p>
+              <p className="text-sm font-medium md:text-base">
-              <div className="flex min-h-[28px] items-center gap-2">
+                {t("p_2532-2599_Offlineservers")}
+              </p>
+              <div className="flex items-center gap-2">
                 <span className="relative flex h-2 w-2">
-                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75" />
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-500 opacity-75"></span>
-                  <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500" />
+                  <span className="relative inline-flex h-2 w-2 rounded-full bg-red-500"></span>
                 </span>
                 {data?.result ? (
-                  <div className="font-semibold text-lg">
+                  <div className="text-lg font-semibold">
-                    <AnimateCountClient count={data?.offline_servers} />
+                    {data?.offline_servers}
                   </div>
                 ) : (
                   <div className="flex h-7 items-center">
@@ -130,51 +156,44 @@ export default function ServerOverviewClient() {
         </Card>
         <Card
           onClick={() => {
-            setStatus("all")
+            if (!global) {
-            setFilter(true)
+              setStatus("all");
+              setFilter(true);
+            }
           }}
           className={cn(
-            "group cursor-pointer ring-1 ring-transparent transition-all hover:ring-purple-500",
+            "cursor-pointer hover:ring-purple-500 ring-1 ring-transparent transition-all",
             {
-              "border-transparent ring-2 ring-purple-500": filter === true,
+              "ring-purple-500 ring-2 border-transparent": filter === true,
+            },
+            {
+              "pointer-events-none": global,
             },
           )}
         >
-          <CardContent className="relative flex h-full items-center px-6 py-3">
+          <CardContent className="relative px-6 py-3">
-            <section className="flex w-full flex-col gap-1">
+            <section className="flex flex-col gap-1">
-              <div className="flex w-full items-center justify-between">
+              <p className="text-sm font-medium md:text-base">
-                <p className="font-medium text-sm md:text-base">{t("network")}</p>
+                {t("p_3463-3530_Totalbandwidth")}
-              </div>
+              </p>
               {data?.result ? (
-                <>
+                <section className="flex flex-col sm:flex-row pt-[8px] sm:items-center items-start gap-1">
-                  <section className="flex flex-row flex-wrap items-start gap-1 pr-0">
+                  <p className="text-[12px]  text-nowrap font-semibold">
-                    <p className="text-nowrap font-medium text-[12px] text-blue-800 dark:text-blue-400">
+                    ↑{formatBytes(data?.total_out_bandwidth)}
-                      ↑{formatBytes(data?.total_out_bandwidth)}
+                  </p>
-                    </p>
+                  <p className="text-[12px] text-nowrap font-semibold">
-                    <p className="text-nowrap font-medium text-[12px] text-purple-800 dark:text-purple-400">
+                    ↓{formatBytes(data?.total_in_bandwidth)}
-                      ↓{formatBytes(data?.total_in_bandwidth)}
+                  </p>
-                    </p>
+                </section>
-                  </section>
-                  <section className="-mr-1 flex flex-row flex-wrap items-start gap-1 sm:items-center">
-                    <p className="flex items-center text-nowrap font-semibold text-[11px]">
-                      <ArrowUpCircleIcon className="mr-0.5 size-3 sm:mb-[1px]" />
-                      {formatBytes(data?.total_out_speed)}/s
-                    </p>
-                    <p className="flex items-center text-nowrap font-semibold text-[11px]">
-                      <ArrowDownCircleIcon className="mr-0.5 size-3" />
-                      {formatBytes(data?.total_in_speed)}/s
-                    </p>
-                  </section>
-                </>
               ) : (
-                <div className="flex h-[38px] items-center">
+                <div className="flex h-7 items-center">
                   <Loader visible={true} />
                 </div>
               )}
             </section>
             {!disableCartoon && (
               <Image
-                className="absolute top-[-85px] right-3 z-50 w-20 scale-90 transition-all group-hover:opacity-50 md:scale-100"
+                className="pointer-events-none absolute right-3 top-[-85px] z-10 w-20 scale-90 md:scale-100"
                 alt={"Hamster1963"}
                 src={blogMan}
                 priority
@@ -186,9 +205,9 @@ export default function ServerOverviewClient() {
       </section>
       {data?.result === undefined && !isLoading && (
         <div className="flex flex-col items-center justify-center">
-          <p className="font-medium text-sm opacity-40">{t("error_message")}</p>
+          <p className="text-sm font-medium opacity-40">{t("error_message")}</p>
         </div>
       )}
     </>
-  )
+  );
 }

app/(main)/ClientComponents/detail/NetworkChart.tsx

@@ -1,398 +0,0 @@
-"use client"
-
-import type { NezhaAPIMonitor, ServerMonitorChart } from "@/app/types/nezha-api"
-import NetworkChartLoading from "@/components/loading/NetworkChartLoading"
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartLegend,
-  ChartLegendContent,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart"
-import { Label } from "@/components/ui/label"
-import { Switch } from "@/components/ui/switch"
-import getEnv from "@/lib/env-entry"
-import { formatTime, nezhaFetcher } from "@/lib/utils"
-import { useTranslations } from "next-intl"
-import * as React from "react"
-import { useCallback, useMemo } from "react"
-import { CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
-import useSWR from "swr"
-
-interface ResultItem {
-  created_at: number
-  [key: string]: number
-}
-
-export function NetworkChartClient({
-  server_id,
-  show,
-}: {
-  server_id: number
-  show: boolean
-}) {
-  const t = useTranslations("NetworkChartClient")
-  const { data, error } = useSWR<NezhaAPIMonitor[]>(
-    `/api/monitor?server_id=${server_id}`,
-    nezhaFetcher,
-    {
-      refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 15000,
-      isVisible: () => show,
-    },
-  )
-
-  if (error) {
-    return (
-      <>
-        <div className="flex flex-col items-center justify-center">
-          <p className="font-medium text-sm opacity-40">{error.message}</p>
-          <p className="font-medium text-sm opacity-40">{t("chart_fetch_error_message")}</p>
-        </div>
-        <NetworkChartLoading />
-      </>
-    )
-  }
-
-  if (!data) return <NetworkChartLoading />
-
-  const transformedData = transformData(data)
-
-  const formattedData = formatData(data)
-
-  const initChartConfig = {
-    avg_delay: {
-      label: t("avg_delay"),
-    },
-  } satisfies ChartConfig
-
-  const chartDataKey = Object.keys(transformedData)
-
-  return (
-    <NetworkChart
-      chartDataKey={chartDataKey}
-      chartConfig={initChartConfig}
-      chartData={transformedData}
-      serverName={data[0].server_name}
-      formattedData={formattedData}
-    />
-  )
-}
-
-export const NetworkChart = React.memo(function NetworkChart({
-  chartDataKey,
-  chartConfig,
-  chartData,
-  serverName,
-  formattedData,
-}: {
-  chartDataKey: string[]
-  chartConfig: ChartConfig
-  chartData: ServerMonitorChart
-  serverName: string
-  formattedData: ResultItem[]
-}) {
-  const t = useTranslations("NetworkChart")
-
-  const defaultChart = "All"
-
-  const [activeChart, setActiveChart] = React.useState(defaultChart)
-  const [isPeakEnabled, setIsPeakEnabled] = React.useState(false)
-
-  const handleButtonClick = useCallback(
-    (chart: string) => {
-      setActiveChart((prev) => (prev === chart ? defaultChart : chart))
-    },
-    [defaultChart],
-  )
-
-  const getColorByIndex = useCallback(
-    (chart: string) => {
-      const index = chartDataKey.indexOf(chart)
-      return `hsl(var(--chart-${(index % 10) + 1}))`
-    },
-    [chartDataKey],
-  )
-
-  const chartButtons = useMemo(
-    () =>
-      chartDataKey.map((key) => (
-        <button
-          type="button"
-          key={key}
-          data-active={activeChart === key}
-          className={
-            "relative z-30 flex grow basis-0 cursor-pointer flex-col justify-center gap-1 border-neutral-200 border-b px-6 py-4 text-left data-[active=true]:bg-muted/50 sm:border-t-0 sm:border-l sm:px-6 dark:border-neutral-800"
-          }
-          onClick={() => handleButtonClick(key)}
-        >
-          <span className="whitespace-nowrap text-muted-foreground text-xs">{key}</span>
-          <span className="font-bold text-md leading-none sm:text-lg">
-            {chartData[key][chartData[key].length - 1].avg_delay.toFixed(2)}ms
-          </span>
-        </button>
-      )),
-    [chartDataKey, activeChart, chartData, handleButtonClick],
-  )
-
-  const chartLines = useMemo(() => {
-    if (activeChart !== defaultChart) {
-      return (
-        <Line
-          isAnimationActive={false}
-          strokeWidth={1}
-          type="linear"
-          dot={false}
-          dataKey="avg_delay"
-          stroke={getColorByIndex(activeChart)}
-        />
-      )
-    }
-    return chartDataKey.map((key) => (
-      <Line
-        key={key}
-        isAnimationActive={false}
-        strokeWidth={1}
-        type="linear"
-        dot={false}
-        dataKey={key}
-        stroke={getColorByIndex(key)}
-        connectNulls={true}
-      />
-    ))
-  }, [activeChart, defaultChart, chartDataKey, getColorByIndex])
-
-  const processedData = useMemo(() => {
-    if (!isPeakEnabled) {
-      return activeChart === defaultChart ? formattedData : chartData[activeChart]
-    }
-
-    const data = (
-      activeChart === defaultChart ? formattedData : chartData[activeChart]
-    ) as ResultItem[]
-
-    const windowSize = 11 // 增加窗口大小以获取更好的统计效果
-    const alpha = 0.3 // EWMA平滑因子
-
-    // 辅助函数：计算中位数
-    const getMedian = (arr: number[]) => {
-      const sorted = [...arr].sort((a, b) => a - b)
-      const mid = Math.floor(sorted.length / 2)
-      return sorted.length % 2 ? sorted[mid] : (sorted[mid - 1] + sorted[mid]) / 2
-    }
-
-    // 辅助函数：异常值处理
-    const processValues = (values: number[]) => {
-      if (values.length === 0) return null
-
-      const median = getMedian(values)
-      const deviations = values.map((v) => Math.abs(v - median))
-      const medianDeviation = getMedian(deviations) * 1.4826 // MAD估计器
-
-      // 使用中位数绝对偏差(MAD)进行异常值检测
-      const validValues = values.filter(
-        (v) =>
-          Math.abs(v - median) <= 3 * medianDeviation && // 更严格的异常值判定
-          v <= median * 3, // 限制最大值不超过中位数的3倍
-      )
-
-      if (validValues.length === 0) return median // 如果没有有效值，返回中位数
-
-      // 计算EWMA
-      let ewma = validValues[0]
-      for (let i = 1; i < validValues.length; i++) {
-        ewma = alpha * validValues[i] + (1 - alpha) * ewma
-      }
-
-      return ewma
-    }
-
-    // 初始化EWMA历史值
-    const ewmaHistory: { [key: string]: number } = {}
-
-    return data.map((point, index) => {
-      if (index < windowSize - 1) return point
-
-      const window = data.slice(index - windowSize + 1, index + 1)
-      const smoothed = { ...point } as ResultItem
-
-      if (activeChart === defaultChart) {
-        for (const key of chartDataKey) {
-          const values = window
-            .map((w) => w[key])
-            .filter((v) => v !== undefined && v !== null) as number[]
-
-          if (values.length > 0) {
-            const processed = processValues(values)
-            if (processed !== null) {
-              // 应用EWMA平滑
-              if (ewmaHistory[key] === undefined) {
-                ewmaHistory[key] = processed
-              } else {
-                ewmaHistory[key] = alpha * processed + (1 - alpha) * ewmaHistory[key]
-              }
-              smoothed[key] = ewmaHistory[key]
-            }
-          }
-        }
-      } else {
-        const values = window
-          .map((w) => w.avg_delay)
-          .filter((v) => v !== undefined && v !== null) as number[]
-
-        if (values.length > 0) {
-          const processed = processValues(values)
-          if (processed !== null) {
-            // 应用EWMA平滑
-            if (ewmaHistory.current === undefined) {
-              ewmaHistory.current = processed
-            } else {
-              ewmaHistory.current = alpha * processed + (1 - alpha) * ewmaHistory.current
-            }
-            smoothed.avg_delay = ewmaHistory.current
-          }
-        }
-      }
-
-      return smoothed
-    })
-  }, [isPeakEnabled, activeChart, formattedData, chartData, chartDataKey, defaultChart])
-
-  return (
-    <Card>
-      <CardHeader className="flex flex-col items-stretch space-y-0 p-0 sm:flex-row">
-        <div className="flex flex-none flex-col justify-center gap-1 border-b px-6 py-4">
-          <CardTitle className="flex flex-none items-center gap-0.5 text-md">
-            {serverName}
-          </CardTitle>
-          <CardDescription className="text-xs">
-            {chartDataKey.length} {t("ServerMonitorCount")}
-          </CardDescription>
-          <div className="mt-0.5 flex items-center space-x-2">
-            <Switch id="Peak" checked={isPeakEnabled} onCheckedChange={setIsPeakEnabled} />
-            <Label className="text-xs" htmlFor="Peak">
-              Peak cut
-            </Label>
-          </div>
-        </div>
-        <div className="flex w-full flex-wrap">{chartButtons}</div>
-      </CardHeader>
-      <CardContent className="py-4 pr-2 pl-0 sm:pt-6 sm:pr-6 sm:pb-6 sm:pl-2">
-        <ChartContainer config={chartConfig} className="aspect-auto h-[250px] w-full">
-          <LineChart accessibilityLayer data={processedData} margin={{ left: 12, right: 12 }}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="created_at"
-              tickLine={true}
-              tickSize={3}
-              axisLine={false}
-              tickMargin={8}
-              minTickGap={80}
-              ticks={processedData
-                .filter((item, index, array) => {
-                  if (array.length < 6) {
-                    return index === 0 || index === array.length - 1
-                  }
-
-                  // 计算数据的总时间跨度（毫秒）
-                  const timeSpan = array[array.length - 1].created_at - array[0].created_at
-                  const hours = timeSpan / (1000 * 60 * 60)
-
-                  // 根据时间跨度调整显示间隔
-                  if (hours <= 12) {
-                    // 12小时内，每60分钟显示一个刻度
-                    return (
-                      index === 0 ||
-                      index === array.length - 1 ||
-                      new Date(item.created_at).getMinutes() % 60 === 0
-                    )
-                  }
-                  // 超过12小时，每2小时显示一个刻度
-                  const date = new Date(item.created_at)
-                  return date.getMinutes() === 0 && date.getHours() % 2 === 0
-                })
-                .map((item) => item.created_at)}
-              tickFormatter={(value) => {
-                const date = new Date(value)
-                const minutes = date.getMinutes()
-                return minutes === 0 ? `${date.getHours()}:00` : `${date.getHours()}:${minutes}`
-              }}
-            />
-            <YAxis
-              tickLine={false}
-              axisLine={false}
-              tickMargin={15}
-              minTickGap={20}
-              tickFormatter={(value) => `${value}ms`}
-            />
-            <ChartTooltip
-              isAnimationActive={false}
-              content={
-                <ChartTooltipContent
-                  indicator={"line"}
-                  labelKey="created_at"
-                  labelFormatter={(_, payload) => {
-                    return formatTime(payload[0].payload.created_at)
-                  }}
-                />
-              }
-            />
-            {activeChart === defaultChart && <ChartLegend content={<ChartLegendContent />} />}
-            {chartLines}
-          </LineChart>
-        </ChartContainer>
-      </CardContent>
-    </Card>
-  )
-})
-
-const transformData = (data: NezhaAPIMonitor[]) => {
-  const monitorData: ServerMonitorChart = {}
-
-  for (const item of data) {
-    const monitorName = item.monitor_name
-
-    if (!monitorData[monitorName]) {
-      monitorData[monitorName] = []
-    }
-
-    for (let i = 0; i < item.created_at.length; i++) {
-      monitorData[monitorName].push({
-        created_at: item.created_at[i],
-        avg_delay: item.avg_delay[i],
-      })
-    }
-  }
-
-  return monitorData
-}
-
-const formatData = (rawData: NezhaAPIMonitor[]) => {
-  const result: { [time: number]: ResultItem } = {}
-
-  const allTimes = new Set<number>()
-  for (const item of rawData) {
-    for (const time of item.created_at) {
-      allTimes.add(time)
-    }
-  }
-
-  const allTimeArray = Array.from(allTimes).sort((a, b) => a - b)
-
-  for (const item of rawData) {
-    const { monitor_name, created_at, avg_delay } = item
-
-    for (const time of allTimeArray) {
-      if (!result[time]) {
-        result[time] = { created_at: time }
-      }
-
-      const timeIndex = created_at.indexOf(time)
-      // @ts-expect-error - avg_delay is an array
-      result[time][monitor_name] = timeIndex !== -1 ? avg_delay[timeIndex] : null
-    }
-  }
-
-  return Object.values(result).sort((a, b) => a.created_at - b.created_at)
-}

app/(main)/ClientComponents/detail/ServerDetailChartClient.tsx

@@ -1,892 +0,0 @@
-"use client"
-
-import {
-  MAX_HISTORY_LENGTH,
-  type ServerDataWithTimestamp,
-  useServerData,
-} from "@/app/context/server-data-context"
-import type { NezhaAPISafe } from "@/app/types/nezha-api"
-import { ServerDetailChartLoading } from "@/components/loading/ServerDetailLoading"
-import AnimatedCircularProgressBar from "@/components/ui/animated-circular-progress-bar"
-import { Card, CardContent } from "@/components/ui/card"
-import { type ChartConfig, ChartContainer } from "@/components/ui/chart"
-import { formatBytes, formatNezhaInfo, formatRelativeTime } from "@/lib/utils"
-import { useTranslations } from "next-intl"
-import { useEffect, useRef, useState } from "react"
-import { Area, AreaChart, CartesianGrid, Line, LineChart, XAxis, YAxis } from "recharts"
-
-type cpuChartData = {
-  timeStamp: string
-  cpu: number
-}
-
-type processChartData = {
-  timeStamp: string
-  process: number
-}
-
-type diskChartData = {
-  timeStamp: string
-  disk: number
-}
-
-type memChartData = {
-  timeStamp: string
-  mem: number
-  swap: number
-}
-
-type networkChartData = {
-  timeStamp: string
-  upload: number
-  download: number
-}
-
-type connectChartData = {
-  timeStamp: string
-  tcp: number
-  udp: number
-}
-
-export default function ServerDetailChartClient({
-  server_id,
-}: {
-  server_id: number
-  show: boolean
-}) {
-  const t = useTranslations("ServerDetailChartClient")
-
-  const { data: serverList, error, history } = useServerData()
-
-  const data = serverList?.result?.find((item) => item.id === server_id)
-
-  if (error) {
-    return (
-      <>
-        <div className="flex flex-col items-center justify-center">
-          <p className="font-medium text-sm opacity-40">{error.message}</p>
-          <p className="font-medium text-sm opacity-40">{t("chart_fetch_error_message")}</p>
-        </div>
-      </>
-    )
-  }
-  if (!data) return <ServerDetailChartLoading />
-
-  return (
-    <section className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
-      <CpuChart data={data} history={history} />
-      <ProcessChart data={data} history={history} />
-      <DiskChart data={data} history={history} />
-      <MemChart data={data} history={history} />
-      <NetworkChart data={data} history={history} />
-      <ConnectChart data={data} history={history} />
-    </section>
-  )
-}
-
-function CpuChart({
-  history,
-  data,
-}: {
-  history: ServerDataWithTimestamp[]
-  data: NezhaAPISafe
-}) {
-  const [cpuChartData, setCpuChartData] = useState([] as cpuChartData[])
-  const hasInitialized = useRef(false)
-  const [historyLoaded, setHistoryLoaded] = useState(false)
-
-  useEffect(() => {
-    if (!hasInitialized.current && history.length > 0) {
-      const historyData = history
-        .map((msg) => {
-          const server = msg.data?.result?.find((item) => item.id === data.id)
-          if (!server) return null
-          const { cpu } = formatNezhaInfo(server)
-          return {
-            timeStamp: msg.timestamp.toString(),
-            cpu: cpu,
-          }
-        })
-        .filter((item): item is cpuChartData => item !== null)
-        .reverse() // 保持时间顺序
-
-      setCpuChartData(historyData)
-      hasInitialized.current = true
-      setHistoryLoaded(true)
-    } else if (history.length === 0) {
-      setHistoryLoaded(true)
-    }
-  }, [])
-
-  const { cpu } = formatNezhaInfo(data)
-
-  useEffect(() => {
-    if (data && historyLoaded) {
-      const timestamp = Date.now().toString()
-      let newData = [] as cpuChartData[]
-      if (cpuChartData.length === 0) {
-        newData = [
-          { timeStamp: timestamp, cpu: cpu },
-          { timeStamp: timestamp, cpu: cpu },
-        ]
-      } else {
-        newData = [...cpuChartData, { timeStamp: timestamp, cpu: cpu }]
-      }
-      if (newData.length > MAX_HISTORY_LENGTH) {
-        newData.shift()
-      }
-      setCpuChartData(newData)
-    }
-  }, [data, historyLoaded])
-
-  const chartConfig = {
-    cpu: {
-      label: "CPU",
-    },
-  } satisfies ChartConfig
-
-  return (
-    <Card>
-      <CardContent className="px-6 py-3">
-        <section className="flex flex-col gap-1">
-          <div className="flex items-center justify-between">
-            <p className="font-medium text-md">CPU</p>
-            <section className="flex items-center gap-2">
-              <p className="w-10 text-end font-medium text-xs">{cpu.toFixed(0)}%</p>
-              <AnimatedCircularProgressBar
-                className="size-3 text-[0px]"
-                max={100}
-                min={0}
-                value={cpu}
-                primaryColor="hsl(var(--chart-1))"
-              />
-            </section>
-          </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
-            <AreaChart
-              accessibilityLayer
-              data={cpuChartData}
-              margin={{
-                top: 12,
-                left: 12,
-                right: 12,
-              }}
-            >
-              <CartesianGrid vertical={false} />
-              <XAxis
-                dataKey="timeStamp"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                minTickGap={200}
-                interval="preserveStartEnd"
-                tickFormatter={(value) => formatRelativeTime(value)}
-              />
-              <YAxis
-                tickLine={false}
-                axisLine={false}
-                mirror={true}
-                tickMargin={-15}
-                domain={[0, 100]}
-                tickFormatter={(value) => `${value}%`}
-              />
-              <Area
-                isAnimationActive={false}
-                dataKey="cpu"
-                type="step"
-                fill="hsl(var(--chart-1))"
-                fillOpacity={0.3}
-                stroke="hsl(var(--chart-1))"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </section>
-      </CardContent>
-    </Card>
-  )
-}
-
-function ProcessChart({
-  data,
-  history,
-}: {
-  data: NezhaAPISafe
-  history: ServerDataWithTimestamp[]
-}) {
-  const t = useTranslations("ServerDetailChartClient")
-  const [processChartData, setProcessChartData] = useState([] as processChartData[])
-  const hasInitialized = useRef(false)
-  const [historyLoaded, setHistoryLoaded] = useState(false)
-
-  useEffect(() => {
-    if (!hasInitialized.current && history.length > 0) {
-      const historyData = history
-        .map((msg) => {
-          const server = msg.data?.result?.find((item) => item.id === data.id)
-          if (!server) return null
-          const { process } = formatNezhaInfo(server)
-          return {
-            timeStamp: msg.timestamp.toString(),
-            process: process,
-          }
-        })
-        .filter((item): item is processChartData => item !== null)
-        .reverse()
-
-      setProcessChartData(historyData)
-      hasInitialized.current = true
-      setHistoryLoaded(true)
-    } else if (history.length === 0) {
-      setHistoryLoaded(true)
-    }
-  }, [])
-
-  const { process } = formatNezhaInfo(data)
-
-  useEffect(() => {
-    if (data && historyLoaded) {
-      const timestamp = Date.now().toString()
-      let newData = [] as processChartData[]
-      if (processChartData.length === 0) {
-        newData = [
-          { timeStamp: timestamp, process: process },
-          { timeStamp: timestamp, process: process },
-        ]
-      } else {
-        newData = [...processChartData, { timeStamp: timestamp, process: process }]
-      }
-      if (newData.length > MAX_HISTORY_LENGTH) {
-        newData.shift()
-      }
-      setProcessChartData(newData)
-    }
-  }, [data, historyLoaded])
-
-  const chartConfig = {
-    process: {
-      label: "Process",
-    },
-  } satisfies ChartConfig
-
-  return (
-    <Card>
-      <CardContent className="px-6 py-3">
-        <section className="flex flex-col gap-1">
-          <div className="flex items-center justify-between">
-            <p className="font-medium text-md">{t("Process")}</p>
-            <section className="flex items-center gap-2">
-              <p className="w-10 text-end font-medium text-xs">{process}</p>
-            </section>
-          </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
-            <AreaChart
-              accessibilityLayer
-              data={processChartData}
-              margin={{
-                top: 12,
-                left: 12,
-                right: 12,
-              }}
-            >
-              <CartesianGrid vertical={false} />
-              <XAxis
-                dataKey="timeStamp"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                minTickGap={200}
-                interval="preserveStartEnd"
-                tickFormatter={(value) => formatRelativeTime(value)}
-              />
-              <YAxis tickLine={false} axisLine={false} mirror={true} tickMargin={-15} />
-              <Area
-                isAnimationActive={false}
-                dataKey="process"
-                type="step"
-                fill="hsl(var(--chart-2))"
-                fillOpacity={0.3}
-                stroke="hsl(var(--chart-2))"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </section>
-      </CardContent>
-    </Card>
-  )
-}
-
-function MemChart({
-  data,
-  history,
-}: {
-  data: NezhaAPISafe
-  history: ServerDataWithTimestamp[]
-}) {
-  const t = useTranslations("ServerDetailChartClient")
-  const [memChartData, setMemChartData] = useState([] as memChartData[])
-  const hasInitialized = useRef(false)
-  const [historyLoaded, setHistoryLoaded] = useState(false)
-
-  useEffect(() => {
-    if (!hasInitialized.current && history.length > 0) {
-      const historyData = history
-        .map((msg) => {
-          const server = msg.data?.result?.find((item) => item.id === data.id)
-          if (!server) return null
-          const { mem, swap } = formatNezhaInfo(server)
-          return {
-            timeStamp: msg.timestamp.toString(),
-            mem: mem,
-            swap: swap,
-          }
-        })
-        .filter((item): item is memChartData => item !== null)
-        .reverse()
-
-      setMemChartData(historyData)
-      hasInitialized.current = true
-      setHistoryLoaded(true)
-    } else if (history.length === 0) {
-      setHistoryLoaded(true)
-    }
-  }, [])
-
-  const { mem, swap } = formatNezhaInfo(data)
-
-  useEffect(() => {
-    if (data && historyLoaded) {
-      const timestamp = Date.now().toString()
-      let newData = [] as memChartData[]
-      if (memChartData.length === 0) {
-        newData = [
-          { timeStamp: timestamp, mem: mem, swap: swap },
-          { timeStamp: timestamp, mem: mem, swap: swap },
-        ]
-      } else {
-        newData = [...memChartData, { timeStamp: timestamp, mem: mem, swap: swap }]
-      }
-      if (newData.length > MAX_HISTORY_LENGTH) {
-        newData.shift()
-      }
-      setMemChartData(newData)
-    }
-  }, [data, historyLoaded])
-
-  const chartConfig = {
-    mem: {
-      label: "Mem",
-    },
-    swap: {
-      label: "Swap",
-    },
-  } satisfies ChartConfig
-
-  return (
-    <Card>
-      <CardContent className="px-6 py-3">
-        <section className="flex flex-col gap-1">
-          <div className="flex items-center justify-between">
-            <section className="flex items-center gap-4">
-              <div className="flex flex-col">
-                <p className=" text-muted-foreground text-xs">{t("Mem")}</p>
-                <div className="flex items-center gap-2">
-                  <AnimatedCircularProgressBar
-                    className="size-3 text-[0px]"
-                    max={100}
-                    min={0}
-                    value={mem}
-                    primaryColor="hsl(var(--chart-8))"
-                  />
-                  <p className="font-medium text-xs">{mem.toFixed(0)}%</p>
-                </div>
-              </div>
-              <div className="flex flex-col">
-                <p className=" text-muted-foreground text-xs">{t("Swap")}</p>
-                <div className="flex items-center gap-2">
-                  <AnimatedCircularProgressBar
-                    className="size-3 text-[0px]"
-                    max={100}
-                    min={0}
-                    value={swap}
-                    primaryColor="hsl(var(--chart-10))"
-                  />
-                  <p className="font-medium text-xs">{swap.toFixed(0)}%</p>
-                </div>
-              </div>
-            </section>
-            <section className="flex flex-col items-end gap-0.5">
-              <div className="flex items-center gap-2 font-medium text-[11px]">
-                {formatBytes(data.status.MemUsed)} / {formatBytes(data.host.MemTotal)}
-              </div>
-              <div className="flex items-center gap-2 font-medium text-[11px]">
-                swap: {formatBytes(data.status.SwapUsed)}
-              </div>
-            </section>
-          </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
-            <AreaChart
-              accessibilityLayer
-              data={memChartData}
-              margin={{
-                top: 12,
-                left: 12,
-                right: 12,
-              }}
-            >
-              <CartesianGrid vertical={false} />
-              <XAxis
-                dataKey="timeStamp"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                minTickGap={200}
-                interval="preserveStartEnd"
-                tickFormatter={(value) => formatRelativeTime(value)}
-              />
-              <YAxis
-                tickLine={false}
-                axisLine={false}
-                mirror={true}
-                tickMargin={-15}
-                domain={[0, 100]}
-                tickFormatter={(value) => `${value}%`}
-              />
-              <Area
-                isAnimationActive={false}
-                dataKey="mem"
-                type="step"
-                fill="hsl(var(--chart-8))"
-                fillOpacity={0.3}
-                stroke="hsl(var(--chart-8))"
-              />
-              <Area
-                isAnimationActive={false}
-                dataKey="swap"
-                type="step"
-                fill="hsl(var(--chart-10))"
-                fillOpacity={0.3}
-                stroke="hsl(var(--chart-10))"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </section>
-      </CardContent>
-    </Card>
-  )
-}
-
-function DiskChart({
-  data,
-  history,
-}: {
-  data: NezhaAPISafe
-  history: ServerDataWithTimestamp[]
-}) {
-  const t = useTranslations("ServerDetailChartClient")
-  const [diskChartData, setDiskChartData] = useState([] as diskChartData[])
-  const hasInitialized = useRef(false)
-  const [historyLoaded, setHistoryLoaded] = useState(false)
-
-  useEffect(() => {
-    if (!hasInitialized.current && history.length > 0) {
-      const historyData = history
-        .map((msg) => {
-          const server = msg.data?.result?.find((item) => item.id === data.id)
-          if (!server) return null
-          const { disk } = formatNezhaInfo(server)
-          return {
-            timeStamp: msg.timestamp.toString(),
-            disk: disk,
-          }
-        })
-        .filter((item): item is diskChartData => item !== null)
-        .reverse()
-
-      setDiskChartData(historyData)
-      hasInitialized.current = true
-      setHistoryLoaded(true)
-    } else if (history.length === 0) {
-      setHistoryLoaded(true)
-    }
-  }, [])
-
-  const { disk } = formatNezhaInfo(data)
-
-  useEffect(() => {
-    if (data && historyLoaded) {
-      const timestamp = Date.now().toString()
-      let newData = [] as diskChartData[]
-      if (diskChartData.length === 0) {
-        newData = [
-          { timeStamp: timestamp, disk: disk },
-          { timeStamp: timestamp, disk: disk },
-        ]
-      } else {
-        newData = [...diskChartData, { timeStamp: timestamp, disk: disk }]
-      }
-      if (newData.length > MAX_HISTORY_LENGTH) {
-        newData.shift()
-      }
-      setDiskChartData(newData)
-    }
-  }, [data, historyLoaded])
-
-  const chartConfig = {
-    disk: {
-      label: "Disk",
-    },
-  } satisfies ChartConfig
-
-  return (
-    <Card>
-      <CardContent className="px-6 py-3">
-        <section className="flex flex-col gap-1">
-          <div className="flex items-center justify-between">
-            <p className="font-medium text-md">{t("Disk")}</p>
-            <section className="flex flex-col items-end gap-0.5">
-              <section className="flex items-center gap-2">
-                <p className="w-10 text-end font-medium text-xs">{disk.toFixed(0)}%</p>
-                <AnimatedCircularProgressBar
-                  className="size-3 text-[0px]"
-                  max={100}
-                  min={0}
-                  value={disk}
-                  primaryColor="hsl(var(--chart-5))"
-                />
-              </section>
-              <div className="flex items-center gap-2 font-medium text-[11px]">
-                {formatBytes(data.status.DiskUsed)} / {formatBytes(data.host.DiskTotal)}
-              </div>
-            </section>
-          </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
-            <AreaChart
-              accessibilityLayer
-              data={diskChartData}
-              margin={{
-                top: 12,
-                left: 12,
-                right: 12,
-              }}
-            >
-              <CartesianGrid vertical={false} />
-              <XAxis
-                dataKey="timeStamp"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                minTickGap={200}
-                interval="preserveStartEnd"
-                tickFormatter={(value) => formatRelativeTime(value)}
-              />
-              <YAxis
-                tickLine={false}
-                axisLine={false}
-                mirror={true}
-                tickMargin={-15}
-                domain={[0, 100]}
-                tickFormatter={(value) => `${value}%`}
-              />
-              <Area
-                isAnimationActive={false}
-                dataKey="disk"
-                type="step"
-                fill="hsl(var(--chart-5))"
-                fillOpacity={0.3}
-                stroke="hsl(var(--chart-5))"
-              />
-            </AreaChart>
-          </ChartContainer>
-        </section>
-      </CardContent>
-    </Card>
-  )
-}
-
-function NetworkChart({
-  data,
-  history,
-}: {
-  data: NezhaAPISafe
-  history: ServerDataWithTimestamp[]
-}) {
-  const t = useTranslations("ServerDetailChartClient")
-  const [networkChartData, setNetworkChartData] = useState([] as networkChartData[])
-  const hasInitialized = useRef(false)
-  const [historyLoaded, setHistoryLoaded] = useState(false)
-
-  useEffect(() => {
-    if (!hasInitialized.current && history.length > 0) {
-      const historyData = history
-        .map((msg) => {
-          const server = msg.data?.result?.find((item) => item.id === data.id)
-          if (!server) return null
-          const { up, down } = formatNezhaInfo(server)
-          return {
-            timeStamp: msg.timestamp.toString(),
-            upload: up,
-            download: down,
-          }
-        })
-        .filter((item): item is networkChartData => item !== null)
-        .reverse()
-
-      setNetworkChartData(historyData)
-      hasInitialized.current = true
-      setHistoryLoaded(true)
-    } else if (history.length === 0) {
-      setHistoryLoaded(true)
-    }
-  }, [])
-
-  const { up, down } = formatNezhaInfo(data)
-
-  useEffect(() => {
-    if (data && historyLoaded) {
-      const timestamp = Date.now().toString()
-      let newData = [] as networkChartData[]
-      if (networkChartData.length === 0) {
-        newData = [
-          { timeStamp: timestamp, upload: up, download: down },
-          { timeStamp: timestamp, upload: up, download: down },
-        ]
-      } else {
-        newData = [...networkChartData, { timeStamp: timestamp, upload: up, download: down }]
-      }
-      if (newData.length > MAX_HISTORY_LENGTH) {
-        newData.shift()
-      }
-      setNetworkChartData(newData)
-    }
-  }, [data, historyLoaded])
-
-  let maxDownload = Math.max(...networkChartData.map((item) => item.download))
-  maxDownload = Math.ceil(maxDownload)
-  if (maxDownload < 1) {
-    maxDownload = 1
-  }
-
-  const chartConfig = {
-    upload: {
-      label: "Upload",
-    },
-    download: {
-      label: "Download",
-    },
-  } satisfies ChartConfig
-
-  return (
-    <Card>
-      <CardContent className="px-6 py-3">
-        <section className="flex flex-col gap-1">
-          <div className="flex items-center">
-            <section className="flex items-center gap-4">
-              <div className="flex w-20 flex-col">
-                <p className="text-muted-foreground text-xs">{t("Upload")}</p>
-                <div className="flex items-center gap-1">
-                  <span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-1))]" />
-                  <p className="font-medium text-xs">{up.toFixed(2)} M/s</p>
-                </div>
-              </div>
-              <div className="flex w-20 flex-col">
-                <p className=" text-muted-foreground text-xs">{t("Download")}</p>
-                <div className="flex items-center gap-1">
-                  <span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-4))]" />
-                  <p className="font-medium text-xs">{down.toFixed(2)} M/s</p>
-                </div>
-              </div>
-            </section>
-          </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
-            <LineChart
-              accessibilityLayer
-              data={networkChartData}
-              margin={{
-                top: 12,
-                left: 12,
-                right: 12,
-              }}
-            >
-              <CartesianGrid vertical={false} />
-              <XAxis
-                dataKey="timeStamp"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                minTickGap={200}
-                interval="preserveStartEnd"
-                tickFormatter={(value) => formatRelativeTime(value)}
-              />
-              <YAxis
-                tickLine={false}
-                axisLine={false}
-                mirror={true}
-                tickMargin={-15}
-                type="number"
-                minTickGap={50}
-                interval="preserveStartEnd"
-                domain={[1, maxDownload]}
-                tickFormatter={(value) => `${value.toFixed(0)}M/s`}
-              />
-              <Line
-                isAnimationActive={false}
-                dataKey="upload"
-                type="linear"
-                stroke="hsl(var(--chart-1))"
-                strokeWidth={1}
-                dot={false}
-              />
-              <Line
-                isAnimationActive={false}
-                dataKey="download"
-                type="linear"
-                stroke="hsl(var(--chart-4))"
-                strokeWidth={1}
-                dot={false}
-              />
-            </LineChart>
-          </ChartContainer>
-        </section>
-      </CardContent>
-    </Card>
-  )
-}
-
-function ConnectChart({
-  data,
-  history,
-}: {
-  data: NezhaAPISafe
-  history: ServerDataWithTimestamp[]
-}) {
-  const [connectChartData, setConnectChartData] = useState([] as connectChartData[])
-  const hasInitialized = useRef(false)
-  const [historyLoaded, setHistoryLoaded] = useState(false)
-
-  useEffect(() => {
-    if (!hasInitialized.current && history.length > 0) {
-      const historyData = history
-        .map((msg) => {
-          const server = msg.data?.result?.find((item) => item.id === data.id)
-          if (!server) return null
-          const { tcp, udp } = formatNezhaInfo(server)
-          return {
-            timeStamp: msg.timestamp.toString(),
-            tcp: tcp,
-            udp: udp,
-          }
-        })
-        .filter((item): item is connectChartData => item !== null)
-        .reverse()
-
-      setConnectChartData(historyData)
-      hasInitialized.current = true
-      setHistoryLoaded(true)
-    } else if (history.length === 0) {
-      setHistoryLoaded(true)
-    }
-  }, [])
-
-  const { tcp, udp } = formatNezhaInfo(data)
-
-  useEffect(() => {
-    if (data && historyLoaded) {
-      const timestamp = Date.now().toString()
-      let newData = [] as connectChartData[]
-      if (connectChartData.length === 0) {
-        newData = [
-          { timeStamp: timestamp, tcp: tcp, udp: udp },
-          { timeStamp: timestamp, tcp: tcp, udp: udp },
-        ]
-      } else {
-        newData = [...connectChartData, { timeStamp: timestamp, tcp: tcp, udp: udp }]
-      }
-      if (newData.length > MAX_HISTORY_LENGTH) {
-        newData.shift()
-      }
-      setConnectChartData(newData)
-    }
-  }, [data, historyLoaded])
-
-  const chartConfig = {
-    tcp: {
-      label: "TCP",
-    },
-    udp: {
-      label: "UDP",
-    },
-  } satisfies ChartConfig
-
-  return (
-    <Card>
-      <CardContent className="px-6 py-3">
-        <section className="flex flex-col gap-1">
-          <div className="flex items-center">
-            <section className="flex items-center gap-4">
-              <div className="flex w-12 flex-col">
-                <p className="text-muted-foreground text-xs">TCP</p>
-                <div className="flex items-center gap-1">
-                  <span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-1))]" />
-                  <p className="font-medium text-xs">{tcp}</p>
-                </div>
-              </div>
-              <div className="flex w-12 flex-col">
-                <p className=" text-muted-foreground text-xs">UDP</p>
-                <div className="flex items-center gap-1">
-                  <span className="relative inline-flex size-1.5 rounded-full bg-[hsl(var(--chart-4))]" />
-                  <p className="font-medium text-xs">{udp}</p>
-                </div>
-              </div>
-            </section>
-          </div>
-          <ChartContainer config={chartConfig} className="aspect-auto h-[130px] w-full">
-            <LineChart
-              accessibilityLayer
-              data={connectChartData}
-              margin={{
-                top: 12,
-                left: 12,
-                right: 12,
-              }}
-            >
-              <CartesianGrid vertical={false} />
-              <XAxis
-                dataKey="timeStamp"
-                tickLine={false}
-                axisLine={false}
-                tickMargin={8}
-                minTickGap={200}
-                interval="preserveStartEnd"
-                tickFormatter={(value) => formatRelativeTime(value)}
-              />
-              <YAxis
-                tickLine={false}
-                axisLine={false}
-                mirror={true}
-                tickMargin={-15}
-                type="number"
-                interval="preserveStartEnd"
-              />
-              <Line
-                isAnimationActive={false}
-                dataKey="tcp"
-                type="linear"
-                stroke="hsl(var(--chart-1))"
-                strokeWidth={1}
-                dot={false}
-              />
-              <Line
-                isAnimationActive={false}
-                dataKey="udp"
-                type="linear"
-                stroke="hsl(var(--chart-4))"
-                strokeWidth={1}
-                dot={false}
-              />
-            </LineChart>
-          </ChartContainer>
-        </section>
-      </CardContent>
-    </Card>
-  )
-}

app/(main)/ClientComponents/detail/ServerDetailClient.tsx

@@ -1,276 +0,0 @@
-"use client"
-
-import { useServerData } from "@/app/context/server-data-context"
-import { BackIcon } from "@/components/Icon"
-import ServerFlag from "@/components/ServerFlag"
-import { ServerDetailLoading } from "@/components/loading/ServerDetailLoading"
-import { Badge } from "@/components/ui/badge"
-import { Card, CardContent } from "@/components/ui/card"
-import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils"
-import countries from "i18n-iso-countries"
-import enLocale from "i18n-iso-countries/langs/en.json"
-import { useTranslations } from "next-intl"
-import { notFound, useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
-
-countries.registerLocale(enLocale)
-
-export default function ServerDetailClient({
-  server_id,
-}: {
-  server_id: number
-}) {
-  const t = useTranslations("ServerDetailClient")
-  const router = useRouter()
-
-  const [hasHistory, setHasHistory] = useState(false)
-
-  useEffect(() => {
-    window.scrollTo({ top: 0, left: 0, behavior: "instant" })
-  }, [])
-
-  useEffect(() => {
-    const previousPath = sessionStorage.getItem("fromMainPage")
-    if (previousPath) {
-      setHasHistory(true)
-    }
-  }, [])
-
-  const linkClick = () => {
-    if (hasHistory) {
-      router.back()
-    } else {
-      router.push("/")
-    }
-  }
-
-  const { data: serverList, error, isLoading } = useServerData()
-  const serverData = serverList?.result?.find((item) => item.id === server_id)
-
-  if (!serverData && !isLoading) {
-    notFound()
-  }
-
-  if (error) {
-    return (
-      <>
-        <div className="flex flex-col items-center justify-center">
-          <p className="font-medium text-sm opacity-40">{error.message}</p>
-          <p className="font-medium text-sm opacity-40">{t("detail_fetch_error_message")}</p>
-        </div>
-      </>
-    )
-  }
-
-  if (!serverData) return <ServerDetailLoading />
-
-  const {
-    name,
-    online,
-    uptime,
-    version,
-    arch,
-    mem_total,
-    disk_total,
-    country_code,
-    platform,
-    platform_version,
-    cpu_info,
-    gpu_info,
-    load_1,
-    load_5,
-    load_15,
-    net_out_transfer,
-    net_in_transfer,
-    last_active_time_string,
-    boot_time_string,
-  } = formatNezhaInfo(serverData)
-
-  return (
-    <div>
-      <div
-        onClick={linkClick}
-        className="flex flex-none cursor-pointer items-center gap-0.5 break-all font-semibold text-xl leading-none tracking-tight transition-opacity duration-300 hover:opacity-50"
-      >
-        <BackIcon />
-        {name}
-      </div>
-      <section className="mt-3 flex flex-wrap gap-2">
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-muted-foreground text-xs">{t("status")}</p>
-              <Badge
-                className={cn(
-                  "-mt-[0.3px] w-fit rounded-[6px] px-1 py-0 text-[9px] dark:text-white",
-                  {
-                    " bg-green-800": online,
-                    " bg-red-600": !online,
-                  },
-                )}
-              >
-                {online ? t("Online") : t("Offline")}
-              </Badge>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-muted-foreground text-xs">{t("Uptime")}</p>
-              <div className="text-xs">
-                {" "}
-                {uptime / 86400 >= 1
-                  ? `${Math.floor(uptime / 86400)} ${t("Days")} ${Math.floor((uptime % 86400) / 3600)} ${t("Hours")}`
-                  : `${Math.floor(uptime / 3600)} ${t("Hours")}`}
-              </div>
-            </section>
-          </CardContent>
-        </Card>
-        {version && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("Version")}</p>
-                <div className="text-xs">{version} </div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {arch && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("Arch")}</p>
-                <div className="text-xs">{arch} </div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-muted-foreground text-xs">{t("Mem")}</p>
-              <div className="text-xs">{formatBytes(mem_total)}</div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-muted-foreground text-xs">{t("Disk")}</p>
-              <div className="text-xs">{formatBytes(disk_total)}</div>
-            </section>
-          </CardContent>
-        </Card>
-        {country_code && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("Region")}</p>
-                <section className="flex items-start gap-1">
-                  <div className="text-start text-xs">{countries.getName(country_code, "en")}</div>
-                  <ServerFlag className="-mt-[1px] text-[11px]" country_code={country_code} />
-                </section>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-      </section>
-      <section className="mt-1 flex flex-wrap gap-2">
-        {platform && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("System")}</p>
-
-                <div className="text-xs">
-                  {" "}
-                  {platform} - {platform_version}{" "}
-                </div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {cpu_info && cpu_info.length > 0 && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("CPU")}</p>
-
-                <div className="text-xs"> {cpu_info.join(", ")}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {gpu_info && gpu_info.length > 0 && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{"GPU"}</p>
-                <div className="text-xs"> {gpu_info.join(", ")}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-      </section>
-      <section className="mt-1 flex flex-wrap gap-2">
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-muted-foreground text-xs">{t("Load")}</p>
-              <div className="text-xs">
-                {load_1 || "0.00"} / {load_5 || "0.00"} / {load_15 || "0.00"}
-              </div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-muted-foreground text-xs">{t("Upload")}</p>
-              {net_out_transfer ? (
-                <div className="text-xs"> {formatBytes(net_out_transfer)} </div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-muted-foreground text-xs">{t("Download")}</p>
-              {net_in_transfer ? (
-                <div className="text-xs"> {formatBytes(net_in_transfer)} </div>
-              ) : (
-                <div className="text-xs">Unknown</div>
-              )}
-            </section>
-          </CardContent>
-        </Card>
-      </section>
-      <section className="mt-1 flex flex-wrap gap-2">
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-muted-foreground text-xs">{t("BootTime")}</p>
-              <div className="text-xs">{boot_time_string ? boot_time_string : "N/A"}</div>
-            </section>
-          </CardContent>
-        </Card>
-        <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-          <CardContent className="px-1.5 py-1">
-            <section className="flex flex-col items-start gap-0.5">
-              <p className="text-muted-foreground text-xs">{t("LastActive")}</p>
-              <div className="text-xs">
-                {last_active_time_string ? last_active_time_string : "N/A"}
-              </div>
-            </section>
-          </CardContent>
-        </Card>
-      </section>
-    </div>
-  )
-}

app/(main)/ClientComponents/detail/ServerIPInfo.tsx

@@ -1,119 +0,0 @@
-"use client"
-
-import type { IPInfo } from "@/app/api/server-ip/route"
-import { Loader } from "@/components/loading/Loader"
-import { Card, CardContent } from "@/components/ui/card"
-import { nezhaFetcher } from "@/lib/utils"
-import { useTranslations } from "next-intl"
-import useSWRImmutable from "swr/immutable"
-
-export default function ServerIPInfo({ server_id }: { server_id: number }) {
-  const t = useTranslations("IPInfo")
-
-  const { data } = useSWRImmutable<IPInfo>(`/api/server-ip?server_id=${server_id}`, nezhaFetcher)
-
-  if (!data) {
-    return (
-      <div className="mb-11">
-        <Loader visible />
-      </div>
-    )
-  }
-
-  return (
-    <>
-      <section className="mb-4 flex flex-wrap gap-2">
-        {data.asn?.autonomous_system_organization && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{"ASN"}</p>
-                <div className="text-xs">{data.asn.autonomous_system_organization}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {data.asn?.autonomous_system_number && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("asn_number")}</p>
-                <div className="text-xs">AS{data.asn.autonomous_system_number}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {data.city?.registered_country?.names.en && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("registered_country")}</p>
-                <div className="text-xs">{data.city.registered_country?.names.en}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {data.city?.country?.iso_code && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{"ISO"}</p>
-                <div className="text-xs">{data.city.country?.iso_code}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {data.city?.city?.names.en && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("city")}</p>
-                <div className="text-xs">{data.city.city?.names.en}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {data.city?.location?.longitude && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("longitude")}</p>
-                <div className="text-xs">{data.city.location?.longitude}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {data.city?.location?.latitude && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("latitude")}</p>
-                <div className="text-xs">{data.city.location?.latitude}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {data.city?.location?.time_zone && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("time_zone")}</p>
-                <div className="text-xs">{data.city.location?.time_zone}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-        {data.city?.postal && (
-          <Card className="rounded-[10px] border-none bg-transparent shadow-none">
-            <CardContent className="px-1.5 py-1">
-              <section className="flex flex-col items-start gap-0.5">
-                <p className="text-muted-foreground text-xs">{t("postal_code")}</p>
-                <div className="text-xs">{data.city.postal?.code}</div>
-              </section>
-            </CardContent>
-          </Card>
-        )}
-      </section>
-    </>
-  )
-}

app/(main)/ClientComponents/main/Global.tsx

@@ -1,62 +0,0 @@
-"use client"
-
-import GlobalInfo from "@/app/(main)/ClientComponents/main/GlobalInfo"
-import { InteractiveMap } from "@/app/(main)/ClientComponents/main/InteractiveMap"
-import { useServerData } from "@/app/context/server-data-context"
-import { TooltipProvider } from "@/app/context/tooltip-context"
-import GlobalLoading from "@/components/loading/GlobalLoading"
-import { geoJsonString } from "@/lib/geo/geo-json-string"
-
-export default function ServerGlobal() {
-  const { data: nezhaServerList, error } = useServerData()
-
-  if (error)
-    return (
-      <div className="flex flex-col items-center justify-center">
-        <p className="font-medium text-sm opacity-40">{error.message}</p>
-      </div>
-    )
-
-  if (!nezhaServerList) {
-    return <GlobalLoading />
-  }
-
-  const countryList: string[] = []
-  const serverCounts: { [key: string]: number } = {}
-
-  for (const server of nezhaServerList.result) {
-    if (server.host.CountryCode) {
-      const countryCode = server.host.CountryCode.toUpperCase()
-      if (!countryList.includes(countryCode)) {
-        countryList.push(countryCode)
-      }
-      serverCounts[countryCode] = (serverCounts[countryCode] || 0) + 1
-    }
-  }
-
-  const width = 900
-  const height = 500
-
-  const geoJson = JSON.parse(geoJsonString)
-  const filteredFeatures = geoJson.features.filter(
-    (feature: any) => feature.properties.iso_a3_eh !== "",
-  )
-
-  return (
-    <section className="mt-[3.2px] flex flex-col gap-4">
-      <GlobalInfo countries={countryList} />
-      <div className="w-full overflow-x-auto">
-        <TooltipProvider>
-          <InteractiveMap
-            countries={countryList}
-            serverCounts={serverCounts}
-            width={width}
-            height={height}
-            filteredFeatures={filteredFeatures}
-            nezhaServerList={nezhaServerList}
-          />
-        </TooltipProvider>
-      </div>
-    </section>
-  )
-}

app/(main)/ClientComponents/main/GlobalInfo.tsx

@@ -1,18 +0,0 @@
-"use client"
-
-import { useTranslations } from "next-intl"
-
-type GlobalInfoProps = {
-  countries: string[]
-}
-
-export default function GlobalInfo({ countries }: GlobalInfoProps) {
-  const t = useTranslations("Global")
-  return (
-    <section className="flex items-center justify-between">
-      <p className="font-medium text-sm opacity-40">
-        {t("Distributions")} {countries.length} {t("Regions")}
-      </p>
-    </section>
-  )
-}

app/(main)/ClientComponents/main/InteractiveMap.tsx

@@ -1,153 +0,0 @@
-"use client"
-
-import MapTooltip from "@/app/(main)/ClientComponents/main/MapTooltip"
-import { useTooltip } from "@/app/context/tooltip-context"
-import { countryCoordinates } from "@/lib/geo/geo-limit"
-import { geoEquirectangular, geoPath } from "d3-geo"
-
-interface InteractiveMapProps {
-  countries: string[]
-  serverCounts: { [key: string]: number }
-  width: number
-  height: number
-  filteredFeatures: any[]
-  nezhaServerList: any
-}
-
-export function InteractiveMap({
-  countries,
-  serverCounts,
-  width,
-  height,
-  filteredFeatures,
-  nezhaServerList,
-}: InteractiveMapProps) {
-  const { setTooltipData } = useTooltip()
-
-  const projection = geoEquirectangular()
-    .scale(140)
-    .translate([width / 2, height / 2])
-    .rotate([-12, 0, 0])
-
-  const path = geoPath().projection(projection)
-
-  return (
-    <div className="relative aspect-[2/1] w-full" onMouseLeave={() => setTooltipData(null)}>
-      <svg
-        width={width}
-        height={height}
-        viewBox={`0 0 ${width} ${height}`}
-        xmlns="http://www.w3.org/2000/svg"
-        className="h-auto w-full"
-      >
-        <title>Interactive Map</title>
-        <defs>
-          <pattern id="dots" width="2" height="2" patternUnits="userSpaceOnUse">
-            <circle cx="1" cy="1" r="0.5" fill="currentColor" />
-          </pattern>
-        </defs>
-        <g>
-          {/* Background rect to handle mouse events in empty areas */}
-          <rect
-            x="0"
-            y="0"
-            width={width}
-            height={height}
-            fill="transparent"
-            onMouseEnter={() => setTooltipData(null)}
-          />
-          {filteredFeatures.map((feature, index) => {
-            const isHighlighted = countries.includes(feature.properties.iso_a2_eh)
-
-            const serverCount = serverCounts[feature.properties.iso_a2_eh] || 0
-
-            return (
-              <path
-                key={feature.properties.iso_a2_eh + String(index)}
-                d={path(feature) || ""}
-                className={
-                  isHighlighted
-                    ? "cursor-pointer fill-green-700 transition-all hover:fill-green-600 dark:fill-green-900 dark:hover:fill-green-700"
-                    : "fill-neutral-200/50 stroke-[0.5] stroke-neutral-300/40 dark:fill-neutral-800 dark:stroke-neutral-700"
-                }
-                onMouseEnter={() => {
-                  if (!isHighlighted) {
-                    setTooltipData(null)
-                    return
-                  }
-                  if (path.centroid(feature)) {
-                    const countryCode = feature.properties.iso_a2_eh
-                    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,
-                      }))
-                    setTooltipData({
-                      centroid: path.centroid(feature),
-                      country: feature.properties.name,
-                      count: serverCount,
-                      servers: countryServers,
-                    })
-                  }
-                }}
-              />
-            )
-          })}
-
-          {/* 渲染不在 filteredFeatures 中的国家标记点 */}
-          {countries.map((countryCode) => {
-            // 检查该国家是否已经在 filteredFeatures 中
-            const isInFilteredFeatures = filteredFeatures.some(
-              (feature) => feature.properties.iso_a2_eh === countryCode,
-            )
-
-            // 如果已经在 filteredFeatures 中，跳过
-            if (isInFilteredFeatures) return null
-
-            // 获取国家的经纬度
-            const coords = countryCoordinates[countryCode]
-            if (!coords) return null
-
-            // 使用投影函数将经纬度转换为 SVG 坐标
-            const [x, y] = projection([coords.lng, coords.lat]) || [0, 0]
-            const serverCount = serverCounts[countryCode] || 0
-
-            return (
-              <g
-                key={countryCode}
-                onMouseEnter={() => {
-                  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,
-                    }))
-                  setTooltipData({
-                    centroid: [x, y],
-                    country: coords.name,
-                    count: serverCount,
-                    servers: countryServers,
-                  })
-                }}
-                className="cursor-pointer"
-              >
-                <circle
-                  cx={x}
-                  cy={y}
-                  r={4}
-                  className="fill-sky-700 stroke-white transition-all hover:fill-sky-600 dark:fill-sky-900 dark:hover:fill-sky-700"
-                />
-              </g>
-            )
-          })}
-        </g>
-      </svg>
-      <MapTooltip />
-    </div>
-  )
-}

app/(main)/ClientComponents/main/MapTooltip.tsx

@@ -1,70 +0,0 @@
-"use client"
-
-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() {
-  const { tooltipData } = useTooltip()
-  const t = useTranslations("Global")
-
-  if (!tooltipData) return null
-
-  const sortedServers = tooltipData.servers.sort((a, b) => {
-    return a.status === b.status ? 0 : a.status ? 1 : -1
-  })
-
-  const saveSession = () => {
-    sessionStorage.setItem("fromMainPage", "true")
-  }
-
-  return (
-    <div
-      className="tooltip-animate absolute z-50 hidden rounded bg-white px-2 py-1 text-sm shadow-lg lg:block dark:border dark:border-neutral-700 dark:bg-neutral-800"
-      key={tooltipData.country}
-      style={{
-        left: tooltipData.centroid[0],
-        top: tooltipData.centroid[1],
-        transform: "translate(10%, -50%)",
-      }}
-      onMouseEnter={(e) => {
-        e.stopPropagation()
-      }}
-    >
-      <div>
-        <p className="font-medium">
-          {tooltipData.country === "China" ? "Mainland China" : tooltipData.country}
-        </p>
-        <p className="mb-1 font-light text-neutral-600 text-xs dark:text-neutral-400">
-          {tooltipData.count} {t("Servers")}
-        </p>
-      </div>
-      <div
-        className="border-t pt-1 dark:border-neutral-700"
-        style={{
-          maxHeight: "200px",
-          overflowY: "auto",
-        }}
-      >
-        {sortedServers.map((server) => (
-          <Link
-            onClick={saveSession}
-            href={`/server/${server.id}`}
-            key={server.name}
-            className="flex items-center gap-1.5 py-0.5 text-neutral-500 transition-colors hover:text-black dark:text-neutral-400 dark:hover:text-white"
-          >
-            <span
-              className={`h-1.5 w-1.5 shrink-0 rounded-full ${
-                server.status ? "bg-green-500" : "bg-red-500"
-              }`}
-            />
-            <span className="text-xs">{server.name}</span>
-          </Link>
-        ))}
-      </div>
-    </div>
-  )
-})
-
-export default MapTooltip

app/(main)/ClientComponents/main/ServerListClient.tsx

@@ -1,222 +0,0 @@
-"use client"
-
-import { useFilter } from "@/app/context/network-filter-context"
-import { useServerData } from "@/app/context/server-data-context"
-import { useStatus } from "@/app/context/status-context"
-import ServerCard from "@/components/ServerCard"
-import ServerCardInline from "@/components/ServerCardInline"
-import Switch from "@/components/Switch"
-import GlobalLoading from "@/components/loading/GlobalLoading"
-import { Loader } from "@/components/loading/Loader"
-import getEnv from "@/lib/env-entry"
-import { cn } from "@/lib/utils"
-import { MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid"
-import { useTranslations } from "next-intl"
-import dynamic from "next/dynamic"
-import { useEffect, useRef, useState } from "react"
-
-const ServerGlobal = dynamic(() => import("./Global"), {
-  ssr: false,
-  loading: () => <GlobalLoading />,
-})
-
-const sortServersByDisplayIndex = (servers: any[]) => {
-  return servers.sort((a, b) => {
-    const displayIndexDiff = (b.display_index || 0) - (a.display_index || 0)
-    return displayIndexDiff !== 0 ? displayIndexDiff : a.id - b.id
-  })
-}
-
-const filterServersByStatus = (servers: any[], status: string) => {
-  return status === "all"
-    ? servers
-    : servers.filter((server) => [status].includes(server.online_status ? "online" : "offline"))
-}
-
-const filterServersByTag = (servers: any[], tag: string, defaultTag: string) => {
-  return tag === defaultTag ? servers : servers.filter((server) => server.tag === tag)
-}
-
-const sortServersByNetwork = (servers: any[]) => {
-  return [...servers].sort((a, b) => {
-    if (!a.online_status && b.online_status) return 1
-    if (a.online_status && !b.online_status) return -1
-    if (!a.online_status && !b.online_status) return 0
-    return b.status.NetInSpeed + b.status.NetOutSpeed - (a.status.NetInSpeed + a.status.NetOutSpeed)
-  })
-}
-
-const getTagCounts = (servers: any[]) => {
-  return servers.reduce((acc: Record<string, number>, server) => {
-    if (server.tag) {
-      acc[server.tag] = (acc[server.tag] || 0) + 1
-    }
-    return acc
-  }, {})
-}
-
-const LoadingState = ({ t }: { t: any }) => (
-  <div className="flex min-h-96 flex-col items-center justify-center ">
-    <div className="flex items-center gap-2 font-semibold text-sm">
-      <Loader visible={true} />
-      {t("connecting")}...
-    </div>
-  </div>
-)
-
-const ErrorState = ({ error, t }: { error: Error; t: any }) => (
-  <div className="flex flex-col items-center justify-center">
-    <p className="font-medium text-sm opacity-40">{error.message}</p>
-    <p className="font-medium text-sm opacity-40">{t("error_message")}</p>
-  </div>
-)
-
-const ServerList = ({
-  servers,
-  inline,
-  containerRef,
-}: { servers: any[]; inline: string; containerRef: any }) => {
-  if (inline === "1") {
-    return (
-      <section
-        ref={containerRef}
-        className="scrollbar-hidden flex flex-col gap-2 overflow-x-scroll"
-      >
-        {servers.map((serverInfo) => (
-          <ServerCardInline key={serverInfo.id} serverInfo={serverInfo} />
-        ))}
-      </section>
-    )
-  }
-
-  return (
-    <section ref={containerRef} className="grid grid-cols-1 gap-2 md:grid-cols-2">
-      {servers.map((serverInfo) => (
-        <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
-      ))}
-    </section>
-  )
-}
-
-export default function ServerListClient() {
-  const { status } = useStatus()
-  const { filter } = useFilter()
-  const t = useTranslations("ServerListClient")
-  const containerRef = useRef<HTMLDivElement>(null)
-  const defaultTag = "defaultTag"
-
-  const [tag, setTag] = useState<string>(defaultTag)
-  const [showMap, setShowMap] = useState<boolean>(false)
-  const [inline, setInline] = useState<string>("0")
-
-  useEffect(() => {
-    const inlineState = localStorage.getItem("inline")
-    if (inlineState !== null) {
-      setInline(inlineState)
-    }
-
-    const showMapState = localStorage.getItem("showMap")
-    if (showMapState !== null) {
-      setShowMap(showMapState === "true")
-    }
-
-    const savedTag = sessionStorage.getItem("selectedTag") || defaultTag
-    setTag(savedTag)
-    restoreScrollPosition()
-  }, [])
-
-  const handleTagChange = (newTag: string) => {
-    setTag(newTag)
-    sessionStorage.setItem("selectedTag", newTag)
-    sessionStorage.setItem("scrollPosition", String(containerRef.current?.scrollTop || 0))
-  }
-
-  const restoreScrollPosition = () => {
-    const savedPosition = sessionStorage.getItem("scrollPosition")
-    if (savedPosition && containerRef.current) {
-      containerRef.current.scrollTop = Number(savedPosition)
-    }
-  }
-
-  useEffect(() => {
-    const handleRouteChange = () => {
-      restoreScrollPosition()
-    }
-
-    window.addEventListener("popstate", handleRouteChange)
-    return () => {
-      window.removeEventListener("popstate", handleRouteChange)
-    }
-  }, [])
-
-  const { data, error } = useServerData()
-
-  if (error) return <ErrorState error={error} t={t} />
-  if (!data?.result) return <LoadingState t={t} />
-
-  const { result } = data
-  const sortedServers = sortServersByDisplayIndex(result)
-  const filteredServersByStatus = filterServersByStatus(sortedServers, status)
-  const allTag = filteredServersByStatus.map((server) => server.tag).filter(Boolean)
-  const uniqueTags = [...new Set(allTag)]
-  uniqueTags.unshift(defaultTag)
-
-  let filteredServers = filterServersByTag(filteredServersByStatus, tag, defaultTag)
-
-  if (filter) {
-    filteredServers = sortServersByNetwork(filteredServers)
-  }
-
-  const tagCountMap = getTagCounts(filteredServersByStatus)
-
-  return (
-    <>
-      <section className="flex w-full items-center gap-2 overflow-hidden">
-        <button
-          type="button"
-          onClick={() => {
-            const newShowMap = !showMap
-            setShowMap(newShowMap)
-            localStorage.setItem("showMap", String(newShowMap))
-          }}
-          className={cn(
-            "inset-shadow-2xs inset-shadow-white/20 flex cursor-pointer flex-col items-center gap-0 rounded-[50px] bg-blue-100 p-[10px] text-blue-600 transition-all dark:bg-blue-900 dark:text-blue-100 ",
-            {
-              "inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600":
-                showMap,
-            },
-          )}
-        >
-          <MapIcon className="size-[13px]" />
-        </button>
-        <button
-          type="button"
-          onClick={() => {
-            const newInline = inline === "0" ? "1" : "0"
-            setInline(newInline)
-            localStorage.setItem("inline", newInline)
-          }}
-          className={cn(
-            "inset-shadow-2xs inset-shadow-white/20 flex cursor-pointer flex-col items-center gap-0 rounded-[50px] bg-blue-100 p-[10px] text-blue-600 transition-all dark:bg-blue-900 dark:text-blue-100 ",
-            {
-              "inset-shadow-black/20 bg-blue-600 text-white dark:bg-blue-100 dark:text-blue-600":
-                inline === "1",
-            },
-          )}
-        >
-          <ViewColumnsIcon className="size-[13px]" />
-        </button>
-        {getEnv("NEXT_PUBLIC_ShowTag") === "true" && (
-          <Switch
-            allTag={uniqueTags}
-            nowTag={tag}
-            tagCountMap={tagCountMap}
-            onTagChange={handleTagChange}
-          />
-        )}
-      </section>
-      {showMap && <ServerGlobal />}
-      <ServerList servers={filteredServers} inline={inline} containerRef={containerRef} />
-    </>
-  )
-}

app/(main)/[id]/page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { NetworkChartClient } from "@/app/(main)/ClientComponents/NetworkChart";
+import ServerDetailChartClient from "@/app/(main)/ClientComponents/ServerDetailChartClient";
+import ServerDetailClient from "@/app/(main)/ClientComponents/ServerDetailClient";
+import TabSwitch from "@/components/TabSwitch";
+import { Separator } from "@/components/ui/separator";
+import { use, useState } from "react";
+
+export default function Page(props: { params: Promise<{ id: string }> }) {
+  const params = use(props.params);
+  const tabs = ["Detail", "Network"];
+  const [currentTab, setCurrentTab] = useState(tabs[0]);
+  return (
+    <div className="mx-auto grid w-full max-w-5xl gap-2">
+      <ServerDetailClient server_id={Number(params.id)} />
+      <section className="flex items-center my-2 w-full">
+        <Separator className="flex-1" />
+        <div className="flex justify-center w-full max-w-[200px]">
+          <TabSwitch
+            tabs={tabs}
+            currentTab={currentTab}
+            setCurrentTab={setCurrentTab}
+          />
+        </div>
+        <Separator className="flex-1" />
+      </section>
+      <div style={{ display: currentTab === tabs[0] ? "block" : "none" }}>
+        <ServerDetailChartClient
+          server_id={Number(params.id)}
+          show={currentTab === tabs[0]}
+        />
+      </div>
+      <div style={{ display: currentTab === tabs[1] ? "block" : "none" }}>
+        <NetworkChartClient
+          server_id={Number(params.id)}
+          show={currentTab === tabs[1]}
+        />
+      </div>
+    </div>
+  );
+}

app/(main)/footer.tsx

@@ -1,58 +1,35 @@
-"use client"
+import pack from "@/package.json";
-
+import { useTranslations } from "next-intl";
-import pack from "@/package.json"
-import { useTranslations } from "next-intl"
-import { useEffect, useState } from "react"
-const GITHUB_URL = "https://github.com/hamster1963/nezha-dash"
-const PERSONAL_URL = "https://buycoffee.top"
-
-type LinkProps = {
-  href: string
-  children: React.ReactNode
-}
-
-const FooterLink = ({ href, children }: LinkProps) => (
-  <a
-    href={href}
-    target="_blank"
-    className="cursor-pointer font-normal underline decoration-2 decoration-yellow-500 underline-offset-2 transition-colors hover:decoration-yellow-600 dark:decoration-yellow-500/60 dark:hover:decoration-yellow-500/80"
-    rel="noreferrer"
-  >
-    {children}
-  </a>
-)
-
-const baseTextStyles =
-  "text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50"
 
 export default function Footer() {
-  const t = useTranslations("Footer")
+  const t = useTranslations("Footer");
-  const version = pack.version
+  const version = pack.version;
-  const currentYear = new Date().getFullYear()
-  const [isMac, setIsMac] = useState(true)
-
-  useEffect(() => {
-    setIsMac(/macintosh|mac os x/i.test(navigator.userAgent))
-  }, [])
-
   return (
-    <footer className="mx-auto flex w-full max-w-5xl items-center justify-between">
+    <footer className="mx-auto w-full max-w-5xl">
       <section className="flex flex-col">
-        <p className={`mt-3 flex gap-1 ${baseTextStyles}`}>
+        <p className="mt-3 flex gap-1 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
           {t("p_146-598_Findthecodeon")}{" "}
-          <FooterLink href={GITHUB_URL}>{t("a_303-585_GitHub")}</FooterLink>
+          <a
-          <FooterLink href={`${GITHUB_URL}/releases/tag/v${version}`}>v{version}</FooterLink>
+            href="https://github.com/hamster1963/nezha-dash"
+            target="_blank"
+            className="cursor-pointer font-normal underline decoration-yellow-500 hover:decoration-yellow-300 transition-colors decoration-2 underline-offset-2 dark:decoration-yellow-900 dark:hover:decoration-yellow-600"
+          >
+            {t("a_303-585_GitHub")}
+          </a>
+          <a
+            href={`https://github.com/hamster1963/nezha-dash/releases/tag/v${version}`}
+            target="_blank"
+            className="cursor-pointer font-normal underline decoration-yellow-500 hover:decoration-yellow-300 transition-colors decoration-2 underline-offset-2 dark:decoration-yellow-900 dark:hover:decoration-yellow-600"
+          >
+            v{version}
+          </a>
         </p>
-        <section className={`mt-1 flex items-center gap-2 ${baseTextStyles}`}>
+        <section className="mt-1 flex items-center gap-2 text-[13px] font-light tracking-tight text-neutral-600/50 dark:text-neutral-300/50">
           {t("section_607-869_2020")}
-          {currentYear} <FooterLink href={PERSONAL_URL}>{t("a_800-850_Hamster1963")}</FooterLink>
+          {new Date().getFullYear()}{" "}
+          <a href={"https://buycoffee.top"}>{t("a_800-850_Hamster1963")}</a>
         </section>
       </section>
-      <p className={`mt-1 ${baseTextStyles}`}>
-        <kbd className="pointer-events-none mx-1 inline-flex h-4 select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium font-mono text-[10px] text-muted-foreground opacity-100">
-          {isMac ? <span className="text-xs">⌘</span> : "Ctrl "}K
-        </kbd>
-      </p>
     </footer>
-  )
+  );
 }

app/(main)/header.tsx

@@ -1,125 +1,32 @@
-"use client"
+"use client";
 
-import AnimateCountClient from "@/components/AnimatedCount"
+import { LanguageSwitcher } from "@/components/LanguageSwitcher";
-import { LanguageSwitcher } from "@/components/LanguageSwitcher"
+import { ModeToggle } from "@/components/ThemeSwitcher";
-import { ModeToggle } from "@/components/ThemeSwitcher"
+import { Separator } from "@/components/ui/separator";
-import { Separator } from "@/components/ui/separator"
+import { Skeleton } from "@/components/ui/skeleton";
-import { Skeleton } from "@/components/ui/skeleton"
+import getEnv from "@/lib/env-entry";
-
+import { DateTime } from "luxon";
-import getEnv from "@/lib/env-entry"
+import { useTranslations } from "next-intl";
-import { DateTime } from "luxon"
+import { useRouter } from "next/navigation";
-import { useTranslations } from "next-intl"
+import React, { useEffect, useRef, useState } from "react";
-import { useRouter } from "next/navigation"
-import { memo, useCallback, useEffect, useState } from "react"
-
-interface TimeState {
-  hh: number
-  mm: number
-  ss: number
-}
-
-interface CustomLink {
-  link: string
-  name: string
-}
-
-const useCurrentTime = () => {
-  const [time, setTime] = useState<TimeState>({
-    hh: DateTime.now().setLocale("en-US").hour,
-    mm: DateTime.now().setLocale("en-US").minute,
-    ss: DateTime.now().setLocale("en-US").second,
-  })
-
-  useEffect(() => {
-    const intervalId = setInterval(() => {
-      const now = DateTime.now().setLocale("en-US")
-      setTime({
-        hh: now.hour,
-        mm: now.minute,
-        ss: now.second,
-      })
-    }, 1000)
-
-    return () => clearInterval(intervalId)
-  }, [])
-
-  return time
-}
-
-const Links = memo(function Links() {
-  const linksEnv = getEnv("NEXT_PUBLIC_Links")
-  const links: CustomLink[] | null = linksEnv ? JSON.parse(linksEnv) : null
-
-  if (!links) return null
-
-  return (
-    <div className="flex items-center gap-2">
-      {links.map((link) => (
-        <a
-          key={link.link}
-          href={link.link}
-          target="_blank"
-          rel="noopener noreferrer"
-          className="flex items-center gap-1 font-medium text-sm opacity-50 transition-opacity hover:opacity-100"
-        >
-          {link.name}
-        </a>
-      ))}
-    </div>
-  )
-})
-
-const Overview = memo(function Overview() {
-  const t = useTranslations("Overview")
-  const time = useCurrentTime()
-  const [mounted, setMounted] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <section className={"mt-10 flex flex-col md:mt-16"}>
-      <p className="font-semibold text-base">{t("p_2277-2331_Overview")}</p>
-      <div className="flex items-center gap-1">
-        <p className="font-medium text-sm opacity-50">{t("p_2390-2457_wherethetimeis")}</p>
-        {mounted ? (
-          <div className="flex items-center font-medium text-sm">
-            <AnimateCountClient count={time.hh} minDigits={2} />
-            <span className="mb-[1px] font-medium text-sm opacity-50">:</span>
-            <AnimateCountClient count={time.mm} minDigits={2} />
-            <span className="mb-[1px] font-medium text-sm opacity-50">:</span>
-            <span className="font-medium text-sm">
-              <AnimateCountClient count={time.ss} minDigits={2} />
-            </span>
-          </div>
-        ) : (
-          <Skeleton className="h-[21px] w-16 animate-none rounded-[5px] bg-muted-foreground/10" />
-        )}
-      </div>
-    </section>
-  )
-})
 
 function Header() {
-  const t = useTranslations("Header")
+  const t = useTranslations("Header");
-  const customLogo = getEnv("NEXT_PUBLIC_CustomLogo")
+  const customLogo = getEnv("NEXT_PUBLIC_CustomLogo");
-  const customTitle = getEnv("NEXT_PUBLIC_CustomTitle")
+  const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
-  const customDescription = getEnv("NEXT_PUBLIC_CustomDescription")
+  const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
 
-  const router = useRouter()
+  const router = useRouter();
-
-  const handleLogoClick = useCallback(() => {
-    sessionStorage.removeItem("selectedTag")
-    router.push("/")
-  }, [router])
 
   return (
     <div className="mx-auto w-full max-w-5xl">
       <section className="flex items-center justify-between">
         <section
-          onClick={handleLogoClick}
+          onClick={() => {
-          className="flex cursor-pointer items-center font-medium text-base transition-opacity duration-300 hover:opacity-50"
+            sessionStorage.removeItem("selectedTag");
+            router.push(`/`);
+          }}
+          className="flex cursor-pointer items-center text-base font-medium"
         >
           <div className="mr-1 flex flex-row items-center justify-start">
             <img
@@ -127,36 +34,111 @@ function Header() {
               height={40}
               alt="apple-touch-icon"
               src={customLogo ? customLogo : "/apple-touch-icon.png"}
-              className="relative m-0! h-6 w-6 border-2 border-transparent object-cover object-top p-0! dark:hidden"
+              className="relative m-0! border-2 border-transparent h-6 w-6 object-cover object-top p-0! dark:hidden"
             />
             <img
               width={40}
               height={40}
               alt="apple-touch-icon"
               src={customLogo ? customLogo : "/apple-touch-icon-dark.png"}
-              className="relative m-0! hidden h-6 w-6 border-2 border-transparent object-cover object-top p-0! dark:block"
+              className="relative m-0! border-2 border-transparent h-6 w-6 object-cover object-top p-0! hidden dark:block"
             />
           </div>
           {customTitle ? customTitle : "NezhaDash"}
-          <Separator orientation="vertical" className="mx-2 hidden h-4 w-[1px] md:block" />
+          <Separator
-          <p className="hidden font-medium text-sm opacity-40 md:block">
+            orientation="vertical"
-            {customDescription ? customDescription : t("p_1079-1199_Simpleandbeautifuldashbo")}
+            className="mx-2 hidden h-4 w-[1px] md:block"
+          />
+          <p className="hidden text-sm font-medium opacity-40 md:block">
+            {customDescription
+              ? customDescription
+              : t("p_1079-1199_Simpleandbeautifuldashbo")}
           </p>
         </section>
         <section className="flex items-center gap-2">
-          <div className="hidden sm:block">
+          <Links />
-            <Links />
-          </div>
           <LanguageSwitcher />
           <ModeToggle />
         </section>
       </section>
-      <div className="mt-1 flex w-full justify-end sm:hidden">
-        <Links />
-      </div>
       <Overview />
     </div>
-  )
+  );
 }
 
-export default Header
+type links = {
+  link: string;
+  name: string;
+};
+
+function Links() {
+  const linksEnv = getEnv("NEXT_PUBLIC_Links");
+
+  const links: links[] | null = linksEnv ? JSON.parse(linksEnv) : null;
+
+  if (!links) return null;
+
+  return (
+    <div className="flex items-center gap-2">
+      {links.map((link, index) => {
+        return (
+          <a
+            key={index}
+            href={link.link}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="flex items-center gap-1 text-sm font-medium opacity-50 transition-opacity hover:opacity-100"
+          >
+            {link.name}
+          </a>
+        );
+      })}
+    </div>
+  );
+}
+
+// https://github.com/streamich/react-use/blob/master/src/useInterval.ts
+const useInterval = (callback: () => void, delay: number | null) => {
+  const savedCallback = useRef<() => void>(() => {});
+  useEffect(() => {
+    savedCallback.current = callback;
+  });
+  useEffect(() => {
+    if (delay !== null) {
+      const interval = setInterval(() => savedCallback.current(), delay || 0);
+      return () => clearInterval(interval);
+    }
+    return undefined;
+  }, [delay]);
+};
+function Overview() {
+  const t = useTranslations("Overview");
+  const [mouted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const timeOption = DateTime.TIME_SIMPLE;
+  timeOption.hour12 = true;
+  const [timeString, setTimeString] = useState(
+    DateTime.now().setLocale("en-US").toLocaleString(timeOption),
+  );
+  useInterval(() => {
+    setTimeString(DateTime.now().setLocale("en-US").toLocaleString(timeOption));
+  }, 1000);
+  return (
+    <section className={"mt-10 flex flex-col md:mt-16"}>
+      <p className="text-base font-semibold">{t("p_2277-2331_Overview")}</p>
+      <div className="flex items-center gap-1.5">
+        <p className="text-sm font-medium opacity-50">
+          {t("p_2390-2457_wherethetimeis")}
+        </p>
+        {mouted ? (
+          <p className="text-sm font-medium">{timeString}</p>
+        ) : (
+          <Skeleton className="h-[20px] w-[50px] rounded-[5px] bg-muted-foreground/10 animate-none"></Skeleton>
+        )}
+      </div>
+    </section>
+  );
+}
+export default Header;

app/(main)/layout.tsx

@@ -1,38 +1,31 @@
-import Footer from "@/app/(main)/footer"
+import Footer from "@/app/(main)/footer";
-import Header from "@/app/(main)/header"
+import Header from "@/app/(main)/header";
-import { ServerDataProvider } from "@/app/context/server-data-context"
+import { auth } from "@/auth";
-import { auth } from "@/auth"
+import { SignIn } from "@/components/SignIn";
-import { DashCommand } from "@/components/DashCommand"
+import getEnv from "@/lib/env-entry";
-import { SignIn } from "@/components/SignIn"
+import React from "react";
-import getEnv from "@/lib/env-entry"
-import type React from "react"
 
 type DashboardProps = {
-  children: React.ReactNode
+  children: React.ReactNode;
-}
+};
 export default function MainLayout({ children }: DashboardProps) {
   return (
     <div className="flex min-h-screen w-full flex-col">
       <main className="flex min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 bg-background p-4 md:p-10 md:pt-8">
         <Header />
-        <AuthProtected>
+        <AuthProtected>{children}</AuthProtected>
-          <ServerDataProvider>
-            {children}
-            <DashCommand />
-          </ServerDataProvider>
-        </AuthProtected>
         <Footer />
       </main>
     </div>
-  )
+  );
 }
 
 async function AuthProtected({ children }: DashboardProps) {
   if (getEnv("SitePassword")) {
-    const session = await auth()
+    const session = await auth();
     if (!session) {
-      return <SignIn />
+      return <SignIn />;
     }
   }
-  return children
+  return children;
 }

app/(main)/page.tsx

@@ -1,11 +1,25 @@
-import ServerListClient from "@/app/(main)/ClientComponents/main/ServerListClient"
+import ServerList from "@/components/ServerList";
-import ServerOverviewClient from "@/app/(main)/ClientComponents/main/ServerOverviewClient"
+import ServerOverview from "@/components/ServerOverview";
+import { Suspense } from "react";
 
-export default async function Home() {
+import ServerGlobal from "./ClientComponents/Global";
+import GlobalLoading from "./ClientComponents/GlobalLoading";
+
+export default async function Home({
+  searchParams,
+}: {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+}) {
+  const global = (await searchParams).global;
   return (
     <div className="mx-auto grid w-full max-w-5xl gap-4 md:gap-6">
-      <ServerOverviewClient />
+      <ServerOverview />
-      <ServerListClient />
+      {!global && <ServerList />}
+      {global && (
+        <Suspense fallback={<GlobalLoading />}>
+          <ServerGlobal />
+        </Suspense>
+      )}
     </div>
-  )
+  );
 }

app/(main)/server/[id]/page.tsx

@@ -1,53 +0,0 @@
-"use client"
-
-import { NetworkChartClient } from "@/app/(main)/ClientComponents/detail/NetworkChart"
-import ServerDetailChartClient from "@/app/(main)/ClientComponents/detail/ServerDetailChartClient"
-import ServerDetailClient from "@/app/(main)/ClientComponents/detail/ServerDetailClient"
-import ServerIPInfo from "@/app/(main)/ClientComponents/detail/ServerIPInfo"
-import TabSwitch from "@/components/TabSwitch"
-import { Separator } from "@/components/ui/separator"
-import getEnv from "@/lib/env-entry"
-import { use, useState } from "react"
-
-type PageProps = {
-  params: Promise<{ id: string }>
-}
-
-type TabType = "Detail" | "Network"
-
-export default function Page({ params }: PageProps) {
-  const { id } = use(params)
-  const serverId = Number(id)
-  const tabs: TabType[] = ["Detail", "Network"]
-  const [currentTab, setCurrentTab] = useState<TabType>(tabs[0])
-
-  const tabContent = {
-    Detail: <ServerDetailChartClient server_id={serverId} show={currentTab === "Detail"} />,
-    Network: (
-      <>
-        {getEnv("NEXT_PUBLIC_ShowIpInfo") && <ServerIPInfo server_id={serverId} />}
-        <NetworkChartClient server_id={serverId} show={currentTab === "Network"} />
-      </>
-    ),
-  }
-
-  return (
-    <main className="mx-auto grid w-full max-w-5xl gap-2">
-      <ServerDetailClient server_id={serverId} />
-
-      <nav className="my-2 flex w-full items-center">
-        <Separator className="flex-1" />
-        <div className="flex w-full max-w-[200px] justify-center">
-          <TabSwitch
-            tabs={tabs}
-            currentTab={currentTab}
-            setCurrentTab={(tab: string) => setCurrentTab(tab as TabType)}
-          />
-        </div>
-        <Separator className="flex-1" />
-      </nav>
-
-      {tabContent[currentTab]}
-    </main>
-  )
-}

app/api/auth/[...nextauth]/route.ts

@@ -1,3 +1,3 @@
-import { handlers } from "@/auth"
+import { handlers } from "@/auth";
 
-export const { GET, POST } = handlers
+export const { GET, POST } = handlers;

app/api/detail/route.ts

@@ -1,44 +1,50 @@
-import { auth } from "@/auth"
+import { auth } from "@/auth";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { GetServerDetail } from "@/lib/serverFetch"
+import { GetServerDetail } from "@/lib/serverFetch";
-import { redirect } from "next/navigation"
+import { redirect } from "next/navigation";
-import { type NextRequest, NextResponse } from "next/server"
+import { NextRequest, NextResponse } from "next/server";
 
-export const dynamic = "force-dynamic"
+export const dynamic = "force-dynamic";
 
 interface ResError extends Error {
-  statusCode: number
+  statusCode: number;
-  message: string
+  message: string;
 }
 
 export async function GET(req: NextRequest) {
   if (getEnv("SitePassword")) {
-    const session = await auth()
+    const session = await auth();
     if (!session) {
-      redirect("/")
+      redirect("/");
     }
   }
 
-  const { searchParams } = new URL(req.url)
+  const { searchParams } = new URL(req.url);
-  const server_id = searchParams.get("server_id")
+  const server_id = searchParams.get("server_id");
 
   if (!server_id) {
-    return NextResponse.json({ error: "server_id is required" }, { status: 400 })
+    return NextResponse.json(
+      { error: "server_id is required" },
+      { status: 400 },
+    );
   }
 
   try {
-    const serverIdNum = Number.parseInt(server_id, 10)
+    const serverIdNum = parseInt(server_id, 10);
-    if (Number.isNaN(serverIdNum)) {
+    if (isNaN(serverIdNum)) {
-      return NextResponse.json({ error: "server_id must be a valid number" }, { status: 400 })
+      return NextResponse.json(
+        { error: "server_id must be a valid number" },
+        { status: 400 },
+      );
     }
 
-    const detailData = await GetServerDetail({ server_id: serverIdNum })
+    const detailData = await GetServerDetail({ server_id: serverIdNum });
-    return NextResponse.json(detailData, { status: 200 })
+    return NextResponse.json(detailData, { status: 200 });
   } catch (error) {
-    const err = error as ResError
+    const err = error as ResError;
-    console.error("Error in GET handler:", err)
+    console.error("Error in GET handler:", err);
-    const statusCode = err.statusCode || 500
+    const statusCode = err.statusCode || 500;
-    const message = err.message || "Internal Server Error"
+    const message = err.message || "Internal Server Error";
-    return NextResponse.json({ error: message }, { status: statusCode })
+    return NextResponse.json({ error: message }, { status: statusCode });
   }
 }

app/api/monitor/route.ts

@@ -1,46 +1,52 @@
-import { auth } from "@/auth"
+import { auth } from "@/auth";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { GetServerMonitor } from "@/lib/serverFetch"
+import { GetServerMonitor } from "@/lib/serverFetch";
-import { redirect } from "next/navigation"
+import { redirect } from "next/navigation";
-import { type NextRequest, NextResponse } from "next/server"
+import { NextRequest, NextResponse } from "next/server";
 
-export const dynamic = "force-dynamic"
+export const dynamic = "force-dynamic";
 
 interface ResError extends Error {
-  statusCode: number
+  statusCode: number;
-  message: string
+  message: string;
 }
 
 export async function GET(req: NextRequest) {
   if (getEnv("SitePassword")) {
-    const session = await auth()
+    const session = await auth();
     if (!session) {
-      redirect("/")
+      redirect("/");
     }
   }
 
-  const { searchParams } = new URL(req.url)
+  const { searchParams } = new URL(req.url);
-  const server_id = searchParams.get("server_id")
+  const server_id = searchParams.get("server_id");
 
   if (!server_id) {
-    return NextResponse.json({ error: "server_id is required" }, { status: 400 })
+    return NextResponse.json(
+      { error: "server_id is required" },
+      { status: 400 },
+    );
   }
 
   try {
-    const serverIdNum = Number.parseInt(server_id, 10)
+    const serverIdNum = parseInt(server_id, 10);
-    if (Number.isNaN(serverIdNum)) {
+    if (isNaN(serverIdNum)) {
-      return NextResponse.json({ error: "server_id must be a number" }, { status: 400 })
+      return NextResponse.json(
+        { error: "server_id must be a number" },
+        { status: 400 },
+      );
     }
 
     const monitorData = await GetServerMonitor({
       server_id: serverIdNum,
-    })
+    });
-    return NextResponse.json(monitorData, { status: 200 })
+    return NextResponse.json(monitorData, { status: 200 });
   } catch (error) {
-    const err = error as ResError
+    const err = error as ResError;
-    console.error("Error in GET handler:", err)
+    console.error("Error in GET handler:", err);
-    const statusCode = err.statusCode || 500
+    const statusCode = err.statusCode || 500;
-    const message = err.message || "Internal Server Error"
+    const message = err.message || "Internal Server Error";
-    return NextResponse.json({ error: message }, { status: statusCode })
+    return NextResponse.json({ error: message }, { status: statusCode });
   }
 }

app/api/server-ip/route.ts

@@ -1,66 +0,0 @@
-import fs from "node:fs"
-import path from "node:path"
-import { auth } from "@/auth"
-import getEnv from "@/lib/env-entry"
-import { GetServerIP } from "@/lib/serverFetch"
-import { type AsnResponse, type CityResponse, Reader } from "maxmind"
-import { redirect } from "next/navigation"
-import { type NextRequest, NextResponse } from "next/server"
-
-export const dynamic = "force-dynamic"
-
-interface ResError extends Error {
-  statusCode: number
-  message: string
-}
-
-export type IPInfo = {
-  city: CityResponse
-  asn: AsnResponse
-}
-
-export async function GET(req: NextRequest) {
-  if (getEnv("SitePassword")) {
-    const session = await auth()
-    if (!session) {
-      redirect("/")
-    }
-  }
-
-  if (!getEnv("NEXT_PUBLIC_ShowIpInfo")) {
-    return NextResponse.json({ error: "ip info is disabled" }, { status: 400 })
-  }
-
-  const { searchParams } = new URL(req.url)
-  const server_id = searchParams.get("server_id")
-
-  if (!server_id) {
-    return NextResponse.json({ error: "server_id is required" }, { status: 400 })
-  }
-
-  try {
-    const ip = await GetServerIP({ server_id: Number(server_id) })
-
-    const cityDbPath = path.join(process.cwd(), "lib", "maxmind-db", "GeoLite2-City.mmdb")
-
-    const asnDbPath = path.join(process.cwd(), "lib", "maxmind-db", "GeoLite2-ASN.mmdb")
-
-    const cityDbBuffer = fs.readFileSync(cityDbPath)
-    const asnDbBuffer = fs.readFileSync(asnDbPath)
-
-    const cityLookup = new Reader<CityResponse>(cityDbBuffer)
-    const asnLookup = new Reader<AsnResponse>(asnDbBuffer)
-
-    const data: IPInfo = {
-      city: cityLookup.get(ip) as CityResponse,
-      asn: asnLookup.get(ip) as AsnResponse,
-    }
-    return NextResponse.json(data, { status: 200 })
-  } catch (error) {
-    const err = error as ResError
-    console.error("Error in GET handler:", err)
-    const statusCode = err.statusCode || 500
-    const message = err.message || "Internal Server Error"
-    return NextResponse.json({ error: message }, { status: statusCode })
-  }
-}

app/api/server/route.ts

@@ -1,32 +1,32 @@
-import { auth } from "@/auth"
+import { auth } from "@/auth";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { GetNezhaData } from "@/lib/serverFetch"
+import { GetNezhaData } from "@/lib/serverFetch";
-import { redirect } from "next/navigation"
+import { redirect } from "next/navigation";
-import { NextResponse } from "next/server"
+import { NextResponse } from "next/server";
 
-export const dynamic = "force-dynamic"
+export const dynamic = "force-dynamic";
 
 interface ResError extends Error {
-  statusCode: number
+  statusCode: number;
-  message: string
+  message: string;
 }
 
 export async function GET() {
   if (getEnv("SitePassword")) {
-    const session = await auth()
+    const session = await auth();
     if (!session) {
-      redirect("/")
+      redirect("/");
     }
   }
 
   try {
-    const data = await GetNezhaData()
+    const data = await GetNezhaData();
-    return NextResponse.json(data, { status: 200 })
+    return NextResponse.json(data, { status: 200 });
   } catch (error) {
-    const err = error as ResError
+    const err = error as ResError;
-    console.error("Error in GET handler:", err)
+    console.error("Error in GET handler:", err);
-    const statusCode = err.statusCode || 500
+    const statusCode = err.statusCode || 500;
-    const message = err.message || "Internal Server Error"
+    const message = err.message || "Internal Server Error";
-    return NextResponse.json({ error: message }, { status: statusCode })
+    return NextResponse.json({ error: message }, { status: statusCode });
   }
 }

app/context/network-filter-context.tsx

@@ -1,24 +0,0 @@
-"use client"
-
-import { type ReactNode, createContext, useContext, useState } from "react"
-
-interface FilterContextType {
-  filter: boolean
-  setFilter: (filter: boolean) => void
-}
-
-const FilterContext = createContext<FilterContextType | undefined>(undefined)
-
-export function FilterProvider({ children }: { children: ReactNode }) {
-  const [filter, setFilter] = useState<boolean>(false)
-
-  return <FilterContext.Provider value={{ filter, setFilter }}>{children}</FilterContext.Provider>
-}
-
-export function useFilter() {
-  const context = useContext(FilterContext)
-  if (context === undefined) {
-    throw new Error("useFilter must be used within a FilterProvider")
-  }
-  return context
-}

app/context/server-data-context.tsx

@@ -1,62 +0,0 @@
-"use client"
-
-import type { ServerApi } from "@/app/types/nezha-api"
-import getEnv from "@/lib/env-entry"
-import { nezhaFetcher } from "@/lib/utils"
-import { type ReactNode, createContext, useContext, useEffect, useState } from "react"
-import useSWR from "swr"
-
-export interface ServerDataWithTimestamp {
-  timestamp: number
-  data: ServerApi
-}
-
-interface ServerDataContextType {
-  data: ServerApi | undefined
-  error: Error | undefined
-  isLoading: boolean
-  history: ServerDataWithTimestamp[]
-}
-
-const ServerDataContext = createContext<ServerDataContextType | undefined>(undefined)
-
-export const MAX_HISTORY_LENGTH = 30
-
-export function ServerDataProvider({ children }: { children: ReactNode }) {
-  const [history, setHistory] = useState<ServerDataWithTimestamp[]>([])
-
-  const { data, error, isLoading } = useSWR<ServerApi>("/api/server", nezhaFetcher, {
-    refreshInterval: Number(getEnv("NEXT_PUBLIC_NezhaFetchInterval")) || 2000,
-    dedupingInterval: 1000,
-  })
-
-  useEffect(() => {
-    if (data) {
-      setHistory((prev) => {
-        const newHistory = [
-          {
-            timestamp: Date.now(),
-            data: data,
-          },
-          ...prev,
-        ].slice(0, MAX_HISTORY_LENGTH)
-
-        return newHistory
-      })
-    }
-  }, [data])
-
-  return (
-    <ServerDataContext.Provider value={{ data, error, isLoading, history }}>
-      {children}
-    </ServerDataContext.Provider>
-  )
-}
-
-export function useServerData() {
-  const context = useContext(ServerDataContext)
-  if (context === undefined) {
-    throw new Error("useServerData must be used within a ServerDataProvider")
-  }
-  return context
-}

app/context/status-context.tsx

@@ -1,26 +0,0 @@
-"use client"
-
-import { type 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
-}

app/context/tooltip-context.tsx

@@ -1,39 +0,0 @@
-"use client"
-
-import { type ReactNode, createContext, useContext, useState } from "react"
-
-export interface TooltipData {
-  centroid: [number, number]
-  country: string
-  count: number
-  servers: Array<{
-    id: string
-    name: string
-    status: boolean
-  }>
-}
-
-interface TooltipContextType {
-  tooltipData: TooltipData | null
-  setTooltipData: (data: TooltipData | null) => void
-}
-
-const TooltipContext = createContext<TooltipContextType | undefined>(undefined)
-
-export function TooltipProvider({ children }: { children: ReactNode }) {
-  const [tooltipData, setTooltipData] = useState<TooltipData | null>(null)
-
-  return (
-    <TooltipContext.Provider value={{ tooltipData, setTooltipData }}>
-      {children}
-    </TooltipContext.Provider>
-  )
-}
-
-export function useTooltip() {
-  const context = useContext(TooltipContext)
-  if (context === undefined) {
-    throw new Error("useTooltip must be used within a TooltipProvider")
-  }
-  return context
-}

app/layout.tsx

@@ -1,26 +1,27 @@
-import { FilterProvider } from "@/app/context/network-filter-context"
+// @auto-i18n-check. Please do not delete the line.
-import { StatusProvider } from "@/app/context/status-context"
+import { MotionProvider } from "@/components/motion/motion-provider";
-import { ThemeColorManager } from "@/components/ThemeColorManager"
+import getEnv from "@/lib/env-entry";
-import getEnv from "@/lib/env-entry"
+import { FilterProvider } from "@/lib/network-filter-context";
-import { cn } from "@/lib/utils"
+import { StatusProvider } from "@/lib/status-context";
-import "@/styles/globals.css"
+import { cn } from "@/lib/utils";
-import type { Metadata } from "next"
+import "@/styles/globals.css";
-import type { Viewport } from "next"
+import type { Metadata } from "next";
-import { NextIntlClientProvider } from "next-intl"
+import { Viewport } from "next";
-import { getLocale, getMessages } from "next-intl/server"
+import { NextIntlClientProvider } from "next-intl";
-import { PublicEnvScript } from "next-runtime-env"
+import { getLocale, getMessages } from "next-intl/server";
-import { ThemeProvider } from "next-themes"
+import { PublicEnvScript } from "next-runtime-env";
-import { Inter as FontSans } from "next/font/google"
+import { ThemeProvider } from "next-themes";
-import type React from "react"
+import { Inter as FontSans } from "next/font/google";
+import React from "react";
 
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
-})
+});
 
-const customTitle = getEnv("NEXT_PUBLIC_CustomTitle")
+const customTitle = getEnv("NEXT_PUBLIC_CustomTitle");
-const customDescription = getEnv("NEXT_PUBLIC_CustomDescription")
+const customDescription = getEnv("NEXT_PUBLIC_CustomDescription");
-const disableIndex = getEnv("NEXT_PUBLIC_DisableIndex")
+const disableIndex = getEnv("NEXT_PUBLIC_DisableIndex");
 
 export const metadata: Metadata = {
   manifest: "/manifest.json",
@@ -29,28 +30,28 @@ export const metadata: Metadata = {
   appleWebApp: {
     capable: true,
     title: customTitle || "NezhaDash",
-    statusBarStyle: "default",
+    statusBarStyle: "black-translucent",
   },
   robots: {
-    index: !disableIndex,
+    index: disableIndex ? false : true,
-    follow: !disableIndex,
+    follow: disableIndex ? false : true,
   },
-}
+};
 
 export const viewport: Viewport = {
   width: "device-width",
   initialScale: 1,
   maximumScale: 1,
   userScalable: false,
-}
+};
 
 export default async function LocaleLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
-  const locale = await getLocale()
+  const locale = await getLocale();
-  const messages = await getMessages()
+  const messages = await getMessages();
 
   return (
     <html lang={locale} suppressHydrationWarning>
@@ -58,30 +59,34 @@ export default async function LocaleLayout({
         <PublicEnvScript />
         <link
           rel="stylesheet"
-          href="https://fastly.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"
+          href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.0.0/css/flag-icons.min.css"
         />
         <link
           rel="stylesheet"
-          href="https://fastly.jsdelivr.net/npm/font-logos@1/assets/font-logos.css"
+          href="https://cdn.jsdelivr.net/npm/font-logos@1/assets/font-logos.css"
         />
       </head>
-      <body className={cn("min-h-screen bg-background font-sans antialiased", fontSans.variable)}>
+      <body
-        <ThemeProvider
+        className={cn(
-          attribute="class"
+          "min-h-screen bg-background font-sans antialiased",
-          defaultTheme="system"
+          fontSans.variable,
-          enableSystem
+        )}
-          disableTransitionOnChange
+      >
-        >
+        <MotionProvider>
-          <NextIntlClientProvider messages={messages}>
+          <ThemeProvider
-            <FilterProvider>
+            attribute="class"
-              <StatusProvider>
+            defaultTheme="system"
-                <ThemeColorManager />
+            enableSystem
-                {children}
+            disableTransitionOnChange
-              </StatusProvider>
+          >
-            </FilterProvider>
+            <NextIntlClientProvider messages={messages}>
-          </NextIntlClientProvider>
+              <FilterProvider>
-        </ThemeProvider>
+                <StatusProvider>{children}</StatusProvider>
+              </FilterProvider>
+            </NextIntlClientProvider>
+          </ThemeProvider>
+        </MotionProvider>
       </body>
     </html>
-  )
+  );
 }

app/not-found.tsx

@@ -1,22 +1,31 @@
-import Footer from "@/app/(main)/footer"
+import { useTranslations } from "next-intl";
-import Header from "@/app/(main)/header"
+import Image from "next/image";
-import { useTranslations } from "next-intl"
+import Link from "next/link";
-import Link from "next/link"
 
 export default function NotFoundPage() {
-  const t = useTranslations("NotFoundPage")
+  const t = useTranslations("NotFoundPage");
   return (
-    <div className="flex min-h-screen w-full flex-col">
+    <main className="relative h-screen w-full">
-      <main className="flex min-h-[calc(100vh-calc(var(--spacing)*16))] flex-1 flex-col gap-4 bg-background p-4 md:p-10 md:pt-8">
+      <div className="absolute inset-0 m-4 flex items-center justify-center">
-        <Header />
+        <Image
-        <section className="flex flex-1 flex-col items-center justify-center gap-2">
+          priority
-          <p className="font-semibold text-sm">{t("h1_490-590_404NotFound")}</p>
+          className="rounded-3xl object-cover"
-          <Link href="/" className="flex items-center gap-1">
+          src="/tardis.jpg"
-            <p className="font-medium text-sm opacity-40">{t("h1_490-590_404NotFoundBack")}</p>
+          fill={true}
+          alt="TARDIS"
+        />
+        <div className="text-container absolute right-4 p-4 md:right-20">
+          <h1 className="text-2xl font-bold opacity-80 md:text-5xl">
+            {t("h1_490-590_404NotFound")}
+          </h1>
+          <p className="text-lg opacity-60 md:text-base">
+            {t("p_601-665_TARDISERROR")}
+          </p>
+          <Link href={"/"} className="text-2xl opacity-80 md:text-3xl">
+            {t("Link_676-775_Doctor")}
           </Link>
-        </section>
+        </div>
-        <Footer />
+      </div>
-      </main>
+    </main>
-    </div>
+  );
-  )
 }

app/types/nezha-api.ts

@@ -1,77 +1,75 @@
 export type ServerApi = {
-  live_servers: number
+  live_servers: number;
-  offline_servers: number
+  offline_servers: number;
-  total_out_bandwidth: number
+  total_out_bandwidth: number;
-  total_in_bandwidth: number
+  total_in_bandwidth: number;
-  total_out_speed: number
+  result: NezhaAPISafe[];
-  total_in_speed: number
+};
-  result: NezhaAPISafe[]
-}
 
-export type NezhaAPISafe = Omit<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">
+export type NezhaAPISafe = Omit<NezhaAPI, "ipv4" | "ipv6" | "valid_ip">;
 
 export interface NezhaAPI {
-  id: number
+  id: number;
-  name: string
+  name: string;
-  tag: string
+  tag: string;
-  last_active: number
+  last_active: number;
-  online_status: boolean
+  online_status: boolean;
-  ipv4: string
+  ipv4: string;
-  ipv6: string
+  ipv6: string;
-  valid_ip: string
+  valid_ip: string;
-  display_index: number
+  display_index: number;
-  hide_for_guest: boolean
+  hide_for_guest: boolean;
-  host: NezhaAPIHost
+  host: NezhaAPIHost;
-  status: NezhaAPIStatus
+  status: NezhaAPIStatus;
 }
 
 export interface NezhaAPIHost {
-  Platform: string
+  Platform: string;
-  PlatformVersion: string
+  PlatformVersion: string;
-  CPU: string[]
+  CPU: string[];
-  MemTotal: number
+  MemTotal: number;
-  DiskTotal: number
+  DiskTotal: number;
-  SwapTotal: number
+  SwapTotal: number;
-  Arch: string
+  Arch: string;
-  Virtualization: string
+  Virtualization: string;
-  BootTime: number
+  BootTime: number;
-  CountryCode: string
+  CountryCode: string;
-  Version: string
+  Version: string;
-  GPU: string[]
+  GPU: null;
 }
 
 export interface NezhaAPIStatus {
-  CPU: number
+  CPU: number;
-  MemUsed: number
+  MemUsed: number;
-  SwapUsed: number
+  SwapUsed: number;
-  DiskUsed: number
+  DiskUsed: number;
-  NetInTransfer: number
+  NetInTransfer: number;
-  NetOutTransfer: number
+  NetOutTransfer: number;
-  NetInSpeed: number
+  NetInSpeed: number;
-  NetOutSpeed: number
+  NetOutSpeed: number;
-  Uptime: number
+  Uptime: number;
-  Load1: number
+  Load1: number;
-  Load5: number
+  Load5: number;
-  Load15: number
+  Load15: number;
-  TcpConnCount: number
+  TcpConnCount: number;
-  UdpConnCount: number
+  UdpConnCount: number;
-  ProcessCount: number
+  ProcessCount: number;
-  Temperatures: number
+  Temperatures: number;
-  GPU: number
+  GPU: number;
 }
 
 export type ServerMonitorChart = {
   [key: string]: {
-    created_at: number
+    created_at: number;
-    avg_delay: number
+    avg_delay: number;
-  }[]
+  }[];
-}
+};
 
 export interface NezhaAPIMonitor {
-  monitor_id: number
+  monitor_id: number;
-  monitor_name: string
+  monitor_name: string;
-  server_id: number
+  server_id: number;
-  server_name: string
+  server_name: string;
-  created_at: number[]
+  created_at: number[];
-  avg_delay: number[]
+  avg_delay: number[];
 }

app/types/utils.ts

@@ -1 +1,2 @@
-export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> &
+  Partial<Pick<T, K>>;

auth.ts

@@ -1,12 +1,10 @@
-import getEnv from "@/lib/env-entry"
+import NextAuth from "next-auth";
-import CryptoJS from "crypto-js"
+import CredentialsProvider from "next-auth/providers/credentials";
-import NextAuth from "next-auth"
+
-import CredentialsProvider from "next-auth/providers/credentials"
+import getEnv from "./lib/env-entry";
 
 export const { handlers, signIn, signOut, auth } = NextAuth({
-  secret:
+  secret: process.env.AUTH_SECRET ?? "this_is_nezha_dash_web_secret",
-    process.env.AUTH_SECRET ??
-    CryptoJS.MD5(`this_is_nezha_dash_web_secret_${getEnv("SitePassword")}`).toString(),
   trustHost: (process.env.AUTH_TRUST_HOST as boolean | undefined) ?? true,
   providers: [
     CredentialsProvider({
@@ -14,21 +12,21 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
       credentials: { password: { label: "Password", type: "password" } },
       // authorization function
       async authorize(credentials) {
-        const { password } = credentials
+        const { password } = credentials;
         if (password === getEnv("SitePassword")) {
-          return { id: "nezha-dash-auth" }
+          return { id: "nezha-dash-auth" };
         }
-        return { error: "Invalid password" }
+        return { error: "Invalid password" };
       },
     }),
   ],
   callbacks: {
     async signIn({ user }) {
-      // @ts-expect-error user is not null
+      // @ts-ignore
       if (user.error) {
-        return false
+        return false;
       }
-      return true
+      return true;
     },
   },
-})
+});

biome.json

@@ -1,86 +0,0 @@
-{
-  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
-  "vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
-  "files": { "ignoreUnknown": false, "ignore": [".next", "public", "styles/globals.css"] },
-  "formatter": {
-    "enabled": true,
-    "useEditorconfig": true,
-    "formatWithErrors": false,
-    "indentStyle": "space",
-    "indentWidth": 2,
-    "lineWidth": 100,
-    "attributePosition": "auto",
-    "bracketSpacing": true
-  },
-  "organizeImports": { "enabled": true },
-  "linter": {
-    "enabled": true,
-    "rules": {
-      "recommended": true,
-      "nursery": {
-        "useSortedClasses": "error"
-      },
-      "a11y": {
-        "useKeyWithClickEvents": "off",
-        "noLabelWithoutControl": "off"
-      },
-      "security": {
-        "noDangerouslySetInnerHtml": "off"
-      },
-      "complexity": { "noUselessTypeConstraint": "error" },
-      "correctness": {
-        "noUnusedVariables": "error",
-        "useArrayLiterals": "off",
-        "useExhaustiveDependencies": "off"
-      },
-      "style": { "noNamespace": "error", "useAsConstAssertion": "error" },
-      "suspicious": {
-        "noExplicitAny": "off",
-        "noExtraNonNullAssertion": "error",
-        "noMisleadingInstantiator": "error",
-        "noUnsafeDeclarationMerging": "error",
-        "useNamespaceKeyword": "error"
-      }
-    }
-  },
-  "javascript": {
-    "formatter": {
-      "jsxQuoteStyle": "double",
-      "quoteProperties": "asNeeded",
-      "trailingCommas": "all",
-      "semicolons": "asNeeded",
-      "arrowParentheses": "always",
-      "bracketSameLine": false,
-      "quoteStyle": "double",
-      "attributePosition": "auto",
-      "bracketSpacing": true
-    }
-  },
-  "overrides": [
-    {
-      "include": ["*.ts", "*.tsx", "*.mts", "*.cts"],
-      "linter": {
-        "rules": {
-          "correctness": {
-            "noUnusedImports": "error"
-          },
-          "style": {
-            "noArguments": "error",
-            "noVar": "error",
-            "useConst": "error"
-          },
-          "suspicious": {
-            "noClassAssign": "off",
-            "noDuplicateClassMembers": "off",
-            "noDuplicateObjectKeys": "off",
-            "noDuplicateParameters": "off",
-            "noFunctionAssign": "off",
-            "noRedeclare": "off",
-            "noUnsafeNegation": "off",
-            "useGetterReturn": "off"
-          }
-        }
-      }
-    }
-  ]
-}

bunfig.toml

@@ -0,0 +1,2 @@
+[install]
+registry = "https://registry.npmmirror.com/"

components/AnimatedCount.tsx

@@ -1,96 +0,0 @@
-import { cn } from "@/lib/utils"
-import { useEffect, useState } from "react"
-
-export default function AnimateCountClient({
-  count,
-  className,
-  minDigits,
-}: {
-  count: number
-  className?: string
-  minDigits?: number
-}) {
-  const [previousCount, setPreviousCount] = useState(count)
-
-  useEffect(() => {
-    if (count !== previousCount) {
-      setTimeout(() => {
-        setPreviousCount(count)
-      }, 300)
-    }
-  }, [count])
-  return (
-    <AnimateCount
-      key={count}
-      preCount={previousCount}
-      className={cn("inline-flex items-center leading-none", className)}
-      minDigits={minDigits}
-      data-issues-count-animation
-    >
-      {count}
-    </AnimateCount>
-  )
-}
-
-export function AnimateCount({
-  children: count,
-  className,
-  preCount,
-  minDigits = 1,
-  ...props
-}: {
-  children: number
-  className?: string
-  preCount?: number
-  minDigits?: number
-}) {
-  const currentDigits = count.toString().split("")
-  const previousDigits = (
-    preCount !== undefined ? preCount.toString() : count - 1 >= 0 ? (count - 1).toString() : "0"
-  ).split("")
-
-  // Ensure both numbers meet the minimum length requirement and maintain the same length for animation
-  const maxLength = Math.max(previousDigits.length, currentDigits.length, minDigits)
-  while (previousDigits.length < maxLength) {
-    previousDigits.unshift("0")
-  }
-  while (currentDigits.length < maxLength) {
-    currentDigits.unshift("0")
-  }
-
-  return (
-    <div {...props} className={cn("flex h-[1em] items-center", className)}>
-      {currentDigits.map((digit, index) => {
-        const hasChanged = digit !== previousDigits[index]
-        return (
-          <div
-            key={`${index}-${digit}`}
-            className={cn("relative flex h-full min-w-[0.6em] items-center text-center", {
-              "min-w-[0.2em]": digit === ".",
-            })}
-          >
-            <div
-              aria-hidden
-              data-issues-count-exit
-              className={cn(
-                "absolute inset-0 flex items-center justify-center",
-                hasChanged ? "animate" : "opacity-0",
-              )}
-            >
-              {previousDigits[index]}
-            </div>
-            <div
-              data-issues-count-enter
-              className={cn(
-                "absolute inset-0 flex items-center justify-center",
-                hasChanged && "animate",
-              )}
-            >
-              {digit}
-            </div>
-          </div>
-        )
-      })}
-    </div>
-  )
-}

components/BlurLayer.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+const BlurLayers = () => {
+  const computeLayerStyle = (index: number) => {
+    const blurAmount = index * 3.7037;
+    const maskStart = index * 10;
+    let maskEnd = maskStart + 20;
+    if (maskEnd > 100) {
+      maskEnd = 100;
+    }
+    return {
+      backdropFilter: `blur-sm(${blurAmount}px)`,
+      WebkitBackdropFilter: `blur-sm(${blurAmount}px)`,
+      zIndex: index + 1,
+      maskImage: `linear-gradient(rgba(0, 0, 0, 0) ${maskStart}%, rgb(0, 0, 0) ${maskEnd}%)`,
+    };
+  };
+
+  // 根据层数动态生成层
+  const layers = Array.from({ length: 5 }).map((_, index) => (
+    <div
+      key={index}
+      className={"absolute inset-0 h-full w-full"}
+      style={computeLayerStyle(index)}
+    />
+  ));
+
+  return (
+    <div className={"fixed bottom-0 left-0 right-0 z-50 h-[140px]"}>
+      <div className={"relative h-full"}>{layers}</div>
+    </div>
+  );
+};
+
+export default BlurLayers;

components/DashCommand.tsx

@@ -1,135 +0,0 @@
-"use client"
-
-import { Home, Languages, Moon, Sun, SunMoon } from "lucide-react"
-
-import { useServerData } from "@/app/context/server-data-context"
-import {
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-} from "@/components/ui/command"
-import { localeItems } from "@/i18n-metadata"
-import { setUserLocale } from "@/i18n/locale"
-import { useTranslations } from "next-intl"
-import { useTheme } from "next-themes"
-import { useRouter } from "next/navigation"
-import { useEffect, useState } from "react"
-
-export function DashCommand() {
-  const [open, setOpen] = useState(false)
-  const [search, setSearch] = useState("")
-  const { data } = useServerData()
-  const router = useRouter()
-  const { setTheme } = useTheme()
-  const t = useTranslations("DashCommand")
-
-  useEffect(() => {
-    const down = (e: KeyboardEvent) => {
-      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
-        e.preventDefault()
-        setOpen((open) => !open)
-      }
-    }
-
-    document.addEventListener("keydown", down)
-    return () => document.removeEventListener("keydown", down)
-  }, [])
-
-  if (!data?.result) return null
-
-  const sortedServers = data.result.sort((a, b) => {
-    const displayIndexDiff = (b.display_index || 0) - (a.display_index || 0)
-    if (displayIndexDiff !== 0) return displayIndexDiff
-    return a.id - b.id
-  })
-
-  const languageShortcuts = localeItems.map((item) => ({
-    keywords: ["language", "locale", item.code.toLowerCase()],
-    icon: <Languages />,
-    label: item.name,
-    action: () => setUserLocale(item.code),
-    value: `language ${item.name.toLowerCase()} ${item.code}`,
-  }))
-
-  const shortcuts = [
-    {
-      keywords: ["home", "homepage"],
-      icon: <Home />,
-      label: t("Home"),
-      action: () => router.push("/"),
-    },
-    {
-      keywords: ["light", "theme", "lightmode"],
-      icon: <Sun />,
-      label: t("ToggleLightMode"),
-      action: () => setTheme("light"),
-    },
-    {
-      keywords: ["dark", "theme", "darkmode"],
-      icon: <Moon />,
-      label: t("ToggleDarkMode"),
-      action: () => setTheme("dark"),
-    },
-    {
-      keywords: ["system", "theme", "systemmode"],
-      icon: <SunMoon />,
-      label: t("ToggleSystemMode"),
-      action: () => setTheme("system"),
-    },
-    ...languageShortcuts,
-  ].map((item) => ({
-    ...item,
-    value: `${item.keywords.join(" ")} ${item.label}`,
-  }))
-
-  return (
-    <>
-      <CommandDialog open={open} onOpenChange={setOpen}>
-        <CommandInput placeholder={t("TypeCommand")} value={search} onValueChange={setSearch} />
-        <CommandList className="border-t">
-          <CommandEmpty>{t("NoResults")}</CommandEmpty>
-          <CommandGroup heading={t("Servers")}>
-            {sortedServers.map((server) => (
-              <CommandItem
-                key={server.id}
-                value={server.name}
-                onSelect={() => {
-                  router.push(`/server/${server.id}`)
-                  setOpen(false)
-                }}
-              >
-                {server.online_status ? (
-                  <span className="h-2 w-2 shrink-0 self-center rounded-full bg-green-500" />
-                ) : (
-                  <span className="h-2 w-2 shrink-0 self-center rounded-full bg-red-500" />
-                )}
-                <span>{server.name}</span>
-              </CommandItem>
-            ))}
-          </CommandGroup>
-          <CommandSeparator />
-
-          <CommandGroup heading={t("Shortcuts")}>
-            {shortcuts.map((item) => (
-              <CommandItem
-                key={item.label}
-                value={item.value}
-                onSelect={() => {
-                  item.action()
-                  setOpen(false)
-                }}
-              >
-                {item.icon}
-                <span>{item.label}</span>
-              </CommandItem>
-            ))}
-          </CommandGroup>
-        </CommandList>
-      </CommandDialog>
-    </>
-  )
-}

components/GlobalBackButton.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useFilter } from "@/lib/network-filter-context";
+import { useStatus } from "@/lib/status-context";
+import { ServerStackIcon } from "@heroicons/react/20/solid";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
+
+export default function GlobalBackButton() {
+  const router = useRouter();
+  const { setStatus } = useStatus();
+  const { setFilter } = useFilter();
+
+  useEffect(() => {
+    setStatus("all");
+    setFilter(false);
+    sessionStorage.removeItem("selectedTag");
+    router.prefetch(`/`);
+  }, []);
+
+  return (
+    <button
+      onClick={() => {
+        router.push(`/`);
+      }}
+      className="rounded-[50px] mt-[1px] w-fit text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-green-600 hover:bg-green-500 p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)] hover:shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] "
+    >
+      <ServerStackIcon className="size-[13px]" />
+    </button>
+  );
+}

components/Icon.tsx

@@ -1,11 +1,11 @@
-import Image from "next/image"
+import Image from "next/image";
 
 export function GitHubIcon(props: React.ComponentPropsWithoutRef<"svg">) {
   return (
-    <svg role="img" aria-label="github-icon" viewBox="0 0 496 512" fill="white" {...props}>
+    <svg viewBox="0 0 496 512" fill="white" {...props}>
       <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
     </svg>
-  )
+  );
 }
 
 export function BackIcon() {
@@ -30,5 +30,5 @@ export function BackIcon() {
         height="20"
       />
     </>
-  )
+  );
 }

components/LanguageSwitcher.tsx

@@ -1,25 +1,25 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
-import { localeItems } from "@/i18n-metadata"
+import { localeItems } from "@/i18n-metadata";
-import { setUserLocale } from "@/i18n/locale"
+import { setUserLocale } from "@/i18n/locale";
-import { cn } from "@/lib/utils"
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { CheckCircleIcon, LanguageIcon } from "@heroicons/react/20/solid"
+import { useLocale } from "next-intl";
-import { useLocale } from "next-intl"
+import * as React from "react";
 
 export function LanguageSwitcher() {
-  const locale = useLocale()
+  const locale = useLocale();
 
   const handleSelect = (e: Event, newLocale: string) => {
-    e.preventDefault() // 阻止默认的关闭行为
+    e.preventDefault(); // 阻止默认的关闭行为
-    setUserLocale(newLocale)
+    setUserLocale(newLocale);
-  }
+  };
 
   return (
     <DropdownMenu>
@@ -27,32 +27,24 @@ export function LanguageSwitcher() {
         <Button
           variant="outline"
           size="sm"
-          className="cursor-pointer rounded-full bg-white px-[9px] hover:bg-accent/50 dark:bg-black dark:hover:bg-accent/50"
+          className="rounded-full px-[9px] bg-white dark:bg-black cursor-pointer hover:bg-accent/50 dark:hover:bg-accent/50"
         >
-          <LanguageIcon className="size-4" />
+          {localeItems.find((item) => item.code === locale)?.name}
           <span className="sr-only">Change language</span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
-        {localeItems.map((item, index) => (
+        {localeItems.map((item) => (
           <DropdownMenuItem
             key={item.code}
             onSelect={(e) => handleSelect(e, item.code)}
-            className={cn(
+            className={locale === item.code ? "bg-muted gap-3" : ""}
-              {
-                "gap-3 bg-muted font-semibold": locale === item.code,
-              },
-              {
-                "rounded-t-[5px]": index === localeItems.length - 1,
-                "rounded-[5px]": index !== 0 && index !== localeItems.length - 1,
-                "rounded-b-[5px]": index === 0,
-              },
-            )}
           >
-            {item.name} {locale === item.code && <CheckCircleIcon className="size-4" />}
+            {item.name}{" "}
+            {locale === item.code && <CheckCircleIcon className="size-4" />}
           </DropdownMenuItem>
         ))}
       </DropdownMenuContent>
     </DropdownMenu>
-  )
+  );
 }

components/ServerCard.tsx

@@ -1,36 +1,43 @@
-import type { NezhaAPISafe } from "@/app/types/nezha-api"
+import { NezhaAPISafe } from "@/app/types/nezha-api";
-import ServerFlag from "@/components/ServerFlag"
+import ServerFlag from "@/components/ServerFlag";
-import ServerUsageBar from "@/components/ServerUsageBar"
+import ServerUsageBar from "@/components/ServerUsageBar";
-import { Badge } from "@/components/ui/badge"
+import { Badge } from "@/components/ui/badge";
-import { Card } from "@/components/ui/card"
+import { Card } from "@/components/ui/card";
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class"
+import {
-import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils"
+  GetFontLogoClass,
-import { useTranslations } from "next-intl"
+  GetOsName,
-import Link from "next/link"
+  MageMicrosoftWindows,
+} from "@/lib/logo-class";
+import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 export default function ServerCard({
   serverInfo,
 }: {
-  serverInfo: NezhaAPISafe
+  serverInfo: NezhaAPISafe;
 }) {
-  const t = useTranslations("ServerCard")
+  const t = useTranslations("ServerCard");
+  const router = useRouter();
   const { id, name, country_code, online, cpu, up, down, mem, stg, host } =
-    formatNezhaInfo(serverInfo)
+    formatNezhaInfo(serverInfo);
 
-  const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true"
+  const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true";
-  const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true"
+  const showNetTransfer = getEnv("NEXT_PUBLIC_ShowNetTransfer") === "true";
-  const fixedTopServerName = getEnv("NEXT_PUBLIC_FixedTopServerName") === "true"
+  const fixedTopServerName =
+    getEnv("NEXT_PUBLIC_FixedTopServerName") === "true";
 
   const saveSession = () => {
-    sessionStorage.setItem("fromMainPage", "true")
+    sessionStorage.setItem("fromMainPage", "true");
-  }
+  };
 
   return online ? (
-    <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
+    <Link onClick={saveSession} href={`/${id}`} prefetch={true}>
       <Card
         className={cn(
-          "flex cursor-pointer flex-col items-center justify-start gap-3 p-3 hover:border-stone-300 hover:shadow-md md:px-5 dark:hover:border-stone-700",
+          "flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors",
           {
             "flex-col": fixedTopServerName,
             "lg:flex-row": !fixedTopServerName,
@@ -43,7 +50,7 @@ export default function ServerCard({
           })}
           style={{ gridTemplateColumns: "auto auto 1fr" }}
         >
-          <span className="h-2 w-2 shrink-0 self-center rounded-full bg-green-500" />
+          <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
           <div
             className={cn(
               "flex items-center justify-center",
@@ -70,8 +77,12 @@ export default function ServerCard({
             })}
           >
             {fixedTopServerName && (
-              <div className={"col-span-1 hidden items-center gap-2 lg:flex lg:flex-row"}>
+              <div
-                <div className="font-semibold text-xs">
+                className={
+                  "hidden col-span-1 items-center lg:flex lg:flex-row gap-2"
+                }
+              >
+                <div className="text-xs font-semibold">
                   {host.Platform.includes("Windows") ? (
                     <MageMicrosoftWindows className="size-[10px]" />
                   ) : (
@@ -79,52 +90,69 @@ export default function ServerCard({
                   )}
                 </div>
                 <div className={"flex w-14 flex-col"}>
-                  <p className="text-muted-foreground text-xs">{t("System")}</p>
+                  <p className="text-xs text-muted-foreground">{t("System")}</p>
-                  <div className="flex items-center font-semibold text-[10.5px]">
+                  <div className="flex items-center text-[10.5px] font-semibold">
-                    {host.Platform.includes("Windows") ? "Windows" : GetOsName(host.Platform)}
+                    {host.Platform.includes("Windows")
+                      ? "Windows"
+                      : GetOsName(host.Platform)}
                   </div>
                 </div>
               </div>
             )}
             <div className={"flex w-14 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("CPU")}</p>
+              <p className="text-xs text-muted-foreground">{t("CPU")}</p>
-              <div className="flex items-center font-semibold text-xs">{cpu.toFixed(2)}%</div>
+              <div className="flex items-center text-xs font-semibold">
+                {cpu.toFixed(2)}%
+              </div>
               <ServerUsageBar value={cpu} />
             </div>
             <div className={"flex w-14 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("Mem")}</p>
+              <p className="text-xs text-muted-foreground">{t("Mem")}</p>
-              <div className="flex items-center font-semibold text-xs">{mem.toFixed(2)}%</div>
+              <div className="flex items-center text-xs font-semibold">
+                {mem.toFixed(2)}%
+              </div>
               <ServerUsageBar value={mem} />
             </div>
             <div className={"flex w-14 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("STG")}</p>
+              <p className="text-xs text-muted-foreground">{t("STG")}</p>
-              <div className="flex items-center font-semibold text-xs">{stg.toFixed(2)}%</div>
+              <div className="flex items-center text-xs font-semibold">
+                {stg.toFixed(2)}%
+              </div>
               <ServerUsageBar value={stg} />
             </div>
             <div className={"flex w-14 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("Upload")}</p>
+              <p className="text-xs text-muted-foreground">{t("Upload")}</p>
-              <div className="flex items-center font-semibold text-xs">
+              <div className="flex items-center text-xs font-semibold">
-                {up >= 1024 ? `${(up / 1024).toFixed(2)}G/s` : `${up.toFixed(2)}M/s`}
+                {up >= 1024
+                  ? `${(up / 1024).toFixed(2)}G/s`
+                  : `${up.toFixed(2)}M/s`}
               </div>
             </div>
             <div className={"flex w-14 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("Download")}</p>
+              <p className="text-xs text-muted-foreground">{t("Download")}</p>
-              <div className="flex items-center font-semibold text-xs">
+              <div className="flex items-center text-xs font-semibold">
-                {down >= 1024 ? `${(down / 1024).toFixed(2)}G/s` : `${down.toFixed(2)}M/s`}
+                {down >= 1024
+                  ? `${(down / 1024).toFixed(2)}G/s`
+                  : `${down.toFixed(2)}M/s`}
               </div>
             </div>
           </section>
           {showNetTransfer && (
-            <section className={"flex items-center justify-between gap-1"}>
+            <section
+              onClick={() => {
+                router.push(`/${id}`);
+              }}
+              className={"flex items-center justify-between gap-1"}
+            >
               <Badge
                 variant="secondary"
-                className="flex-1 items-center justify-center text-nowrap rounded-[8px] border-muted-50 text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
+                className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] border-muted-50 shadow-md shadow-neutral-200/30 dark:shadow-none"
               >
                 {t("Upload")}:{formatBytes(serverInfo.status.NetOutTransfer)}
               </Badge>
               <Badge
                 variant="outline"
-                className="flex-1 items-center justify-center text-nowrap rounded-[8px] text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
+                className="items-center flex-1 justify-center rounded-[8px] text-nowrap text-[11px] shadow-md shadow-neutral-200/30 dark:shadow-none"
               >
                 {t("Download")}:{formatBytes(serverInfo.status.NetInTransfer)}
               </Badge>
@@ -134,41 +162,44 @@ export default function ServerCard({
       </Card>
     </Link>
   ) : (
-    <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
+    <Card
-      <Card
+      className={cn(
-        className={cn(
+        "flex flex-col items-center justify-start gap-3 p-3 md:px-5",
-          "flex cursor-pointer flex-col items-center justify-start gap-3 p-3 hover:border-stone-300 hover:shadow-md md:px-5 dark:hover:border-stone-700",
+        showNetTransfer
-          showNetTransfer ? "min-h-[123px] lg:min-h-[91px]" : "min-h-[93px] lg:min-h-[61px]",
+          ? "lg:min-h-[91px] min-h-[123px]"
-          {
+          : "lg:min-h-[61px] min-h-[93px]",
-            "flex-col": fixedTopServerName,
+        {
-            "lg:flex-row": !fixedTopServerName,
+          "flex-col": fixedTopServerName,
-          },
+          "lg:flex-row": !fixedTopServerName,
-        )}
+        },
+      )}
+    >
+      <section
+        className={cn("grid items-center gap-2", {
+          "lg:w-40": !fixedTopServerName,
+        })}
+        style={{ gridTemplateColumns: "auto auto 1fr" }}
       >
-        <section
+        <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
-          className={cn("grid items-center gap-2", {
+        <div
-            "lg:w-40": !fixedTopServerName,
+          className={cn(
-          })}
+            "flex items-center justify-center",
-          style={{ gridTemplateColumns: "auto auto 1fr" }}
+            showFlag ? "min-w-[17px]" : "min-w-0",
+          )}
         >
-          <span className="h-2 w-2 shrink-0 self-center rounded-full bg-red-500" />
+          {showFlag ? <ServerFlag country_code={country_code} /> : null}
-          <div
+        </div>
+        <div className="relative">
+          <p
             className={cn(
-              "flex items-center justify-center",
+              "break-all font-bold tracking-tight",
-              showFlag ? "min-w-[17px]" : "min-w-0",
+              showFlag ? "text-xs" : "text-sm",
             )}
           >
-            {showFlag ? <ServerFlag country_code={country_code} /> : null}
+            {name}
-          </div>
+          </p>
-          <div className="relative">
+        </div>
-            <p
+      </section>
-              className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}
+    </Card>
-            >
+  );
-              {name}
-            </p>
-          </div>
-        </section>
-      </Card>
-    </Link>
-  )
 }

components/ServerCardInline.tsx

@@ -1,157 +0,0 @@
-import type { NezhaAPISafe } from "@/app/types/nezha-api"
-import ServerFlag from "@/components/ServerFlag"
-import ServerUsageBar from "@/components/ServerUsageBar"
-import { Card } from "@/components/ui/card"
-import getEnv from "@/lib/env-entry"
-import { GetFontLogoClass, GetOsName, MageMicrosoftWindows } from "@/lib/logo-class"
-import { cn, formatBytes, formatNezhaInfo } from "@/lib/utils"
-import { useTranslations } from "next-intl"
-import Link from "next/link"
-
-import { Separator } from "./ui/separator"
-
-export default function ServerCardInline({
-  serverInfo,
-}: {
-  serverInfo: NezhaAPISafe
-}) {
-  const t = useTranslations("ServerCard")
-  const { id, name, country_code, online, cpu, up, down, mem, stg, host } =
-    formatNezhaInfo(serverInfo)
-
-  const showFlag = getEnv("NEXT_PUBLIC_ShowFlag") === "true"
-
-  const saveSession = () => {
-    sessionStorage.setItem("fromMainPage", "true")
-  }
-
-  return online ? (
-    <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
-      <Card
-        className={cn(
-          "flex w-full min-w-[900px] cursor-pointer items-center justify-start gap-3 p-3 hover:border-stone-300 hover:shadow-md md:px-5 lg:flex-row dark:hover:border-stone-700",
-        )}
-      >
-        <section
-          className={cn("grid items-center gap-2 lg:w-36")}
-          style={{ gridTemplateColumns: "auto auto 1fr" }}
-        >
-          <span className="h-2 w-2 shrink-0 self-center rounded-full bg-green-500" />
-          <div
-            className={cn(
-              "flex items-center justify-center",
-              showFlag ? "min-w-[17px]" : "min-w-0",
-            )}
-          >
-            {showFlag ? <ServerFlag country_code={country_code} /> : null}
-          </div>
-          <div className="relative w-28">
-            <p
-              className={cn(
-                "break-all font-bold tracking-tight",
-                showFlag ? "text-xs " : "text-sm",
-              )}
-            >
-              {name}
-            </p>
-          </div>
-        </section>
-        <Separator orientation="vertical" className="mx-0 ml-2 h-8" />
-        <div className="flex flex-col gap-2">
-          <section className={cn("grid flex-1 grid-cols-9 items-center gap-3")}>
-            <div className={"flex flex-row items-center gap-2 whitespace-nowrap"}>
-              <div className="font-semibold text-xs">
-                {host.Platform.includes("Windows") ? (
-                  <MageMicrosoftWindows className="size-[10px]" />
-                ) : (
-                  <p className={`fl-${GetFontLogoClass(host.Platform)}`} />
-                )}
-              </div>
-              <div className={"flex w-14 flex-col"}>
-                <p className="text-muted-foreground text-xs">{t("System")}</p>
-                <div className="flex items-center font-semibold text-[10.5px]">
-                  {host.Platform.includes("Windows") ? "Windows" : GetOsName(host.Platform)}
-                </div>
-              </div>
-            </div>
-            <div className={"flex w-20 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("Uptime")}</p>
-              <div className="flex items-center font-semibold text-xs">
-                {(serverInfo?.status.Uptime / 86400).toFixed(0)} {"Days"}
-              </div>
-            </div>
-            <div className={"flex w-14 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("CPU")}</p>
-              <div className="flex items-center font-semibold text-xs">{cpu.toFixed(2)}%</div>
-              <ServerUsageBar value={cpu} />
-            </div>
-            <div className={"flex w-14 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("Mem")}</p>
-              <div className="flex items-center font-semibold text-xs">{mem.toFixed(2)}%</div>
-              <ServerUsageBar value={mem} />
-            </div>
-            <div className={"flex w-14 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("STG")}</p>
-              <div className="flex items-center font-semibold text-xs">{stg.toFixed(2)}%</div>
-              <ServerUsageBar value={stg} />
-            </div>
-            <div className={"flex w-16 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("Upload")}</p>
-              <div className="flex items-center font-semibold text-xs">
-                {up >= 1024 ? `${(up / 1024).toFixed(2)}G/s` : `${up.toFixed(2)}M/s`}
-              </div>
-            </div>
-            <div className={"flex w-16 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("Download")}</p>
-              <div className="flex items-center font-semibold text-xs">
-                {down >= 1024 ? `${(down / 1024).toFixed(2)}G/s` : `${down.toFixed(2)}M/s`}
-              </div>
-            </div>
-            <div className={"flex w-20 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("TotalUpload")}</p>
-              <div className="flex items-center font-semibold text-xs">
-                {formatBytes(serverInfo.status.NetOutTransfer)}
-              </div>
-            </div>
-            <div className={"flex w-20 flex-col"}>
-              <p className="text-muted-foreground text-xs">{t("TotalDownload")}</p>
-              <div className="flex items-center font-semibold text-xs">
-                {formatBytes(serverInfo.status.NetInTransfer)}
-              </div>
-            </div>
-          </section>
-        </div>
-      </Card>
-    </Link>
-  ) : (
-    <Link onClick={saveSession} href={`/server/${id}`} prefetch={true}>
-      <Card
-        className={cn(
-          "flex min-h-[61px] min-w-[900px] flex-row items-center justify-start gap-3 p-3 hover:border-stone-300 hover:shadow-md md:px-5 dark:hover:border-stone-700",
-        )}
-      >
-        <section
-          className={cn("grid items-center gap-2 lg:w-40")}
-          style={{ gridTemplateColumns: "auto auto 1fr" }}
-        >
-          <span className="h-2 w-2 shrink-0 self-center rounded-full bg-red-500" />
-          <div
-            className={cn(
-              "flex items-center justify-center",
-              showFlag ? "min-w-[17px]" : "min-w-0",
-            )}
-          >
-            {showFlag ? <ServerFlag country_code={country_code} /> : null}
-          </div>
-          <div className="relative w-28">
-            <p
-              className={cn("break-all font-bold tracking-tight", showFlag ? "text-xs" : "text-sm")}
-            >
-              {name}
-            </p>
-          </div>
-        </section>
-      </Card>
-    </Link>
-  )
-}

components/ServerCardPopover.tsx

@@ -0,0 +1,73 @@
+import { NezhaAPISafe } from "@/app/types/nezha-api";
+import { cn, formatBytes } from "@/lib/utils";
+import { useTranslations } from "next-intl";
+
+export function ServerCardPopoverCard({
+  className,
+  title,
+  content,
+  children,
+}: {
+  className?: string;
+  title: string;
+  content?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className={cn("mb-[6px] flex w-full flex-col", className)}>
+      <div className="text-sm font-semibold">{title}</div>
+      {children ? (
+        children
+      ) : (
+        <div className="break-all text-xs font-medium">{content}</div>
+      )}
+    </div>
+  );
+}
+
+export default function ServerCardPopover({
+  host,
+  status,
+}: {
+  host: NezhaAPISafe["host"];
+  status: NezhaAPISafe["status"];
+}) {
+  const t = useTranslations("ServerCardPopover");
+  return (
+    <section className="max-w-[300px]">
+      <ServerCardPopoverCard
+        title={t("System")}
+        content={`${host.Platform}-${host.PlatformVersion} [${host.Virtualization}: ${host.Arch}]`}
+      />
+      <ServerCardPopoverCard
+        title={t("CPU")}
+        content={`${host.CPU.map((item) => item).join(", ")}`}
+      />
+      <ServerCardPopoverCard
+        title={t("Mem")}
+        content={`${formatBytes(status.MemUsed)} / ${formatBytes(host.MemTotal)}`}
+      />
+      <ServerCardPopoverCard
+        title={t("STG")}
+        content={`${formatBytes(status.DiskUsed)} / ${formatBytes(host.DiskTotal)}`}
+      />
+      <ServerCardPopoverCard
+        title={t("Swap")}
+        content={`${formatBytes(status.SwapUsed)} / ${formatBytes(host.SwapTotal)}`}
+      />
+      <ServerCardPopoverCard
+        title={t("Network")}
+        content={`${formatBytes(status.NetOutTransfer)} / ${formatBytes(status.NetInTransfer)}`}
+      />
+      <ServerCardPopoverCard
+        title={t("Load")}
+        content={`${status.Load1.toFixed(2)} / ${status.Load5.toFixed(2)} / ${status.Load15.toFixed(2)}`}
+      />
+      <ServerCardPopoverCard
+        className="mb-0"
+        title={t("Online")}
+        content={`${(status.Uptime / 86400).toFixed(0)} Days`}
+      />
+    </section>
+  );
+}

components/ServerFlag.tsx

@@ -1,44 +1,48 @@
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import getUnicodeFlagIcon from "country-flag-icons/unicode"
+import getUnicodeFlagIcon from "country-flag-icons/unicode";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
 export default function ServerFlag({
   country_code,
   className,
 }: {
-  country_code: string
+  country_code: string;
-  className?: string
+  className?: string;
 }) {
-  const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(true)
+  const [supportsEmojiFlags, setSupportsEmojiFlags] = useState(false);
 
-  const useSvgFlag = getEnv("NEXT_PUBLIC_ForceUseSvgFlag") === "true"
+  const useSvgFlag = getEnv("NEXT_PUBLIC_ForceUseSvgFlag") === "true";
 
   useEffect(() => {
     if (useSvgFlag) {
       // 如果环境变量要求直接使用 SVG，则无需检查 Emoji 支持
-      setSupportsEmojiFlags(false)
+      setSupportsEmojiFlags(false);
-      return
+      return;
     }
 
     const checkEmojiSupport = () => {
-      const canvas = document.createElement("canvas")
+      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d")
+      const ctx = canvas.getContext("2d");
-      const emojiFlag = "🇺🇸" // 使用美国国旗作为测试
+      const emojiFlag = "🇺🇸"; // 使用美国国旗作为测试
-      if (!ctx) return
+      if (!ctx) return;
-      ctx.fillStyle = "#000"
+      ctx.fillStyle = "#000";
-      ctx.textBaseline = "top"
+      ctx.textBaseline = "top";
-      ctx.font = "32px Arial"
+      ctx.font = "32px Arial";
-      ctx.fillText(emojiFlag, 0, 0)
+      ctx.fillText(emojiFlag, 0, 0);
 
-      const support = ctx.getImageData(16, 16, 1, 1).data[3] !== 0
+      const support = ctx.getImageData(16, 16, 1, 1).data[3] !== 0;
-      setSupportsEmojiFlags(support)
+      setSupportsEmojiFlags(support);
-    }
+    };
 
-    checkEmojiSupport()
+    checkEmojiSupport();
-  }, [useSvgFlag]) // 将 `useSvgFlag` 作为依赖，当其变化时重新触发
+  }, [useSvgFlag]); // 将 `useSvgFlag` 作为依赖，当其变化时重新触发
 
-  if (!country_code) return null
+  if (!country_code) return null;
+
+  if (supportsEmojiFlags && country_code.toLowerCase() === "tw") {
+    country_code = "cn";
+  }
 
   return (
     <span className={cn("text-[12px] text-muted-foreground", className)}>
@@ -48,5 +52,5 @@ export default function ServerFlag({
         getUnicodeFlagIcon(country_code)
       )}
     </span>
-  )
+  );
 }

components/ServerList.tsx

@@ -0,0 +1,5 @@
+import ServerListClient from "@/app/(main)/ClientComponents/ServerListClient";
+
+export default async function ServerList() {
+  return <ServerListClient />;
+}

components/ServerOverview.tsx

@@ -0,0 +1,5 @@
+import ServerOverviewClient from "@/app/(main)/ClientComponents/ServerOverviewClient";
+
+export default async function ServerOverview() {
+  return <ServerOverviewClient />;
+}

components/ServerUsageBar.tsx

@@ -1,8 +1,9 @@
-import { Progress } from "@/components/ui/progress"
+import { Progress } from "@/components/ui/progress";
+import React from "react";
 
 type ServerUsageBarProps = {
-  value: number
+  value: number;
-}
+};
 
 export default function ServerUsageBar({ value }: ServerUsageBarProps) {
   return (
@@ -10,8 +11,14 @@ export default function ServerUsageBar({ value }: ServerUsageBarProps) {
       aria-label={"Server Usage Bar"}
       aria-labelledby={"Server Usage Bar"}
       value={value}
-      indicatorClassName={value > 90 ? "bg-red-500" : value > 70 ? "bg-orange-400" : "bg-green-500"}
+      indicatorClassName={
+        value > 90
+          ? "bg-red-500"
+          : value > 70
+            ? "bg-orange-400"
+            : "bg-green-500"
+      }
       className={"h-[3px] rounded-sm"}
     />
-  )
+  );
 }

components/SignIn.tsx

@@ -1,74 +1,79 @@
-"use client"
+"use client";
 
-import { getCsrfToken, signIn } from "next-auth/react"
+import { getCsrfToken, signIn } from "next-auth/react";
-import { useTranslations } from "next-intl"
+import { useTranslations } from "next-intl";
-import { useRouter } from "next/navigation"
+import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react"
+import { useEffect, useState } from "react";
 
-import { Loader } from "./loading/Loader"
+import { Loader } from "./loading/Loader";
 
 export function SignIn() {
-  const t = useTranslations("SignIn")
+  const t = useTranslations("SignIn");
 
-  const [csrfToken, setCsrfToken] = useState("")
+  const [csrfToken, setCsrfToken] = useState("");
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
-  const [errorState, setErrorState] = useState(false)
+  const [errorState, setErrorState] = useState(false);
-  const [successState, setSuccessState] = useState(false)
+  const [successState, setSuccessState] = useState(false);
 
-  const router = useRouter()
+  const router = useRouter();
 
   useEffect(() => {
     async function loadProviders() {
-      const csrf = await getCsrfToken()
+      const csrf = await getCsrfToken();
-      setCsrfToken(csrf)
+      setCsrfToken(csrf);
     }
-    loadProviders()
+    loadProviders();
-  }, [])
+  }, []);
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault()
+    e.preventDefault();
-    setLoading(true)
+    setLoading(true);
-    const formData = new FormData(e.currentTarget)
+    const formData = new FormData(e.currentTarget);
-    const password = formData.get("password") as string
+    const password = formData.get("password") as string;
     const res = await signIn("credentials", {
       password: password,
       redirect: false,
-    })
+    });
     if (res?.error) {
-      console.log("login error")
+      console.log("login error");
-      setErrorState(true)
+      setErrorState(true);
-      setSuccessState(false)
+      setSuccessState(false);
     } else {
-      console.log("login success")
+      console.log("login success");
-      setErrorState(false)
+      setErrorState(false);
-      setSuccessState(true)
+      setSuccessState(true);
-      router.push("/")
+      router.push("/");
-      router.refresh()
+      router.refresh();
     }
-    setLoading(false)
+    setLoading(false);
-  }
+  };
   return (
     <form
-      className="flex flex-1 flex-col items-center justify-center gap-4 p-4 "
+      className="flex flex-col items-center justify-start gap-4 p-4 "
       onSubmit={handleSubmit}
     >
       <input type="hidden" name="csrfToken" value={csrfToken} />
       <section className="flex flex-col items-start gap-2">
         <label className="flex flex-col items-start gap-1 ">
-          {errorState && <p className="font-semibold text-red-500 text-sm">{t("ErrorMessage")}</p>}
+          {errorState && (
-          {successState && (
+            <p className="text-red-500 text-sm font-semibold">
-            <p className="font-semibold text-green-500 text-sm">{t("SuccessMessage")}</p>
+              {t("ErrorMessage")}
+            </p>
           )}
-          <p className="font-semibold text-base">{t("SignInMessage")}</p>
+          {successState && (
+            <p className="text-green-500 text-sm font-semibold">
+              {t("SuccessMessage")}
+            </p>
+          )}
+          <p className="text-base font-semibold">{t("SignInMessage")}</p>
           <input
-            className="rounded-[5px] border-[1px] border-stone-300 px-1 dark:border-stone-800"
+            className="px-1 border-[1px] rounded-[5px] border-stone-300 dark:border-stone-800"
             name="password"
             type="password"
           />
         </label>
         <button
-          type="submit"
+          className="px-1.5 py-0.5 w-fit flex items-center gap-1 text-sm font-semibold border-stone-300 dark:border-stone-800 rounded-[8px] border bg-card hover:brightness-95 transition-all text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none"
-          className="flex w-fit items-center gap-1 rounded-[8px] border border-stone-300 bg-card px-1.5 py-0.5 font-semibold text-card-foreground text-sm shadow-lg shadow-neutral-200/40 transition-all hover:brightness-95 dark:border-stone-800 dark:shadow-none"
           disabled={loading}
         >
           {t("Submit")}
@@ -76,5 +81,5 @@ export function SignIn() {
         </button>
       </section>
     </form>
-  )
+  );
 }

components/Switch.tsx

@@ -1,9 +1,10 @@
-"use client"
+"use client";
 
-import getEnv from "@/lib/env-entry"
+import getEnv from "@/lib/env-entry";
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { useLocale, useTranslations } from "next-intl"
+import { m } from "framer-motion";
-import { createRef, useEffect, useRef, useState } from "react"
+import { useTranslations } from "next-intl";
+import React, { createRef, useEffect, useRef } from "react";
 
 export default function Switch({
   allTag,
@@ -11,121 +12,94 @@ export default function Switch({
   tagCountMap,
   onTagChange,
 }: {
-  allTag: string[]
+  allTag: string[];
-  nowTag: string
+  nowTag: string;
-  tagCountMap: Record<string, number>
+  tagCountMap: Record<string, number>;
-  onTagChange: (tag: string) => void
+  onTagChange: (tag: string) => void;
 }) {
-  const scrollRef = useRef<HTMLDivElement>(null)
+  const scrollRef = useRef<HTMLDivElement>(null);
-  const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()))
+  const tagRefs = useRef(allTag.map(() => createRef<HTMLDivElement>()));
-  const t = useTranslations("ServerListClient")
+  const t = useTranslations("ServerListClient");
-  const locale = useLocale()
-  const [indicator, setIndicator] = useState<{ x: number; w: number } | null>(null)
-  const [isFirstRender, setIsFirstRender] = useState(true)
 
   useEffect(() => {
-    const savedTag = sessionStorage.getItem("selectedTag")
+    const savedTag = sessionStorage.getItem("selectedTag");
     if (savedTag && allTag.includes(savedTag)) {
-      onTagChange(savedTag)
+      onTagChange(savedTag);
     }
-  }, [allTag, onTagChange])
+  }, [allTag, onTagChange]);
 
   useEffect(() => {
-    const container = scrollRef.current
+    const container = scrollRef.current;
-    if (!container) return
+    if (!container) return;
 
-    const isOverflowing = container.scrollWidth > container.clientWidth
+    const isOverflowing = container.scrollWidth > container.clientWidth;
-    if (!isOverflowing) return
+    if (!isOverflowing) return;
 
     const onWheel = (e: WheelEvent) => {
-      e.preventDefault()
+      e.preventDefault();
-      container.scrollLeft += e.deltaY
+      container.scrollLeft += e.deltaY;
-    }
+    };
 
-    container.addEventListener("wheel", onWheel, { passive: false })
+    container.addEventListener("wheel", onWheel, { passive: false });
 
     return () => {
-      container.removeEventListener("wheel", onWheel)
+      container.removeEventListener("wheel", onWheel);
-    }
+    };
-  }, [])
+  }, []);
 
   useEffect(() => {
-    const currentTagElement = tagRefs.current[allTag.indexOf(nowTag)]?.current
+    const currentTagRef = tagRefs.current[allTag.indexOf(nowTag)];
-    if (currentTagElement) {
+    if (currentTagRef && currentTagRef.current) {
-      setIndicator({
+      currentTagRef.current.scrollIntoView({
-        x: currentTagElement.offsetLeft,
-        w: currentTagElement.offsetWidth,
-      })
-    }
-
-    if (isFirstRender) {
-      setTimeout(() => {
-        setIsFirstRender(false)
-      }, 50)
-    }
-  }, [nowTag, locale, allTag, isFirstRender])
-
-  useEffect(() => {
-    const currentTagElement = tagRefs.current[allTag.indexOf(nowTag)]?.current
-    const container = scrollRef.current
-
-    if (currentTagElement && container) {
-      const containerRect = container.getBoundingClientRect()
-      const tagRect = currentTagElement.getBoundingClientRect()
-
-      const scrollLeft = currentTagElement.offsetLeft - (containerRect.width - tagRect.width) / 2
-
-      container.scrollTo({
-        left: Math.max(0, scrollLeft),
         behavior: "smooth",
-      })
+        block: "nearest",
+        inline: "center",
+      });
     }
-  }, [nowTag, locale])
+  }, [nowTag]);
 
   return (
     <div
       ref={scrollRef}
       className="scrollbar-hidden z-50 flex flex-col items-start overflow-x-scroll rounded-[50px]"
     >
-      <div className="relative flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+      <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
-        {indicator && (
-          <div
-            className="absolute top-[3px] left-0 z-10 h-[35px] bg-white shadow-black/5 shadow-lg dark:bg-stone-700 dark:shadow-white/5"
-            style={{
-              borderRadius: 24,
-              width: `${indicator.w}px`,
-              transform: `translateX(${indicator.x}px)`,
-              transition: isFirstRender ? "none" : "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
-            }}
-          />
-        )}
         {allTag.map((tag, index) => (
           <div
             key={tag}
             ref={tagRefs.current[index]}
-            onClick={() => {
+            onClick={() => onTagChange(tag)}
-              onTagChange(tag)
-              sessionStorage.setItem("selectedTag", tag)
-            }}
             className={cn(
-              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] font-[600] text-[13px]",
+              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
-              "text-stone-400 transition-all duration-500 ease-in-out hover:text-stone-950 dark:text-stone-500 hover:dark:text-stone-50",
+              nowTag === tag
-              {
+                ? "text-black dark:text-white"
-                "text-stone-950 dark:text-stone-50": nowTag === tag,
+                : "text-stone-400 dark:text-stone-500",
-              },
             )}
           >
+            {nowTag === tag && (
+              <m.div
+                layoutId="nav-item"
+                className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
+                style={{
+                  originY: "0px",
+                  borderRadius: 46,
+                }}
+              />
+            )}
             <div className="relative z-20 flex items-center gap-1">
-              <div className="flex items-center gap-2 whitespace-nowrap">
+              <div className="whitespace-nowrap flex items-center gap-2">
                 {tag === "defaultTag" ? t("defaultTag") : tag}{" "}
-                {getEnv("NEXT_PUBLIC_ShowTagCount") === "true" && tag !== "defaultTag" && (
+                {getEnv("NEXT_PUBLIC_ShowTagCount") === "true" &&
-                  <div className="w-fit rounded-full bg-muted px-1.5">{tagCountMap[tag]}</div>
+                  tag !== "defaultTag" && (
-                )}
+                    <div className="w-fit px-1.5 rounded-full bg-muted">
+                      {tagCountMap[tag]}
+                    </div>
+                  )}
               </div>
             </div>
           </div>
         ))}
       </div>
     </div>
-  )
+  );
 }

components/TabSwitch.tsx

@@ -1,69 +1,44 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { useLocale, useTranslations } from "next-intl"
+import { m } from "framer-motion";
-import { useEffect, useRef, useState } from "react"
+import { useTranslations } from "next-intl";
+import React from "react";
 
 export default function TabSwitch({
   tabs,
   currentTab,
   setCurrentTab,
 }: {
-  tabs: string[]
+  tabs: string[];
-  currentTab: string
+  currentTab: string;
-  setCurrentTab: (tab: string) => void
+  setCurrentTab: (tab: string) => void;
 }) {
-  const t = useTranslations("TabSwitch")
+  const t = useTranslations("TabSwitch");
-  const [indicator, setIndicator] = useState<{ x: number; w: number }>({
-    x: 0,
-    w: 0,
-  })
-  const tabRefs = useRef<(HTMLDivElement | null)[]>([])
-  const locale = useLocale()
-
-  useEffect(() => {
-    const currentTabElement = tabRefs.current[tabs.indexOf(currentTab)]
-    if (currentTabElement) {
-      const parentPadding = 1
-      setIndicator({
-        x:
-          tabs.indexOf(currentTab) !== 0
-            ? currentTabElement.offsetLeft - parentPadding
-            : currentTabElement.offsetLeft,
-        w: currentTabElement.offsetWidth,
-      })
-    }
-  }, [currentTab, tabs, locale])
-
   return (
     <div className="z-50 flex flex-col items-start rounded-[50px]">
-      <div className="relative flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
+      <div className="flex items-center gap-1 rounded-[50px] bg-stone-100 p-[3px] dark:bg-stone-800">
-        {indicator.w > 0 && (
+        {tabs.map((tab: string) => (
-          <div
-            className="absolute top-[3px] left-0 z-10 h-[35px] bg-white shadow-black/5 shadow-lg dark:bg-stone-700 dark:shadow-white/5"
-            style={{
-              borderRadius: 24,
-              width: `${indicator.w}px`,
-              transform: `translateX(${indicator.x}px)`,
-              transition: "all 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
-            }}
-          />
-        )}
-        {tabs.map((tab: string, index) => (
           <div
             key={tab}
-            ref={(el) => {
-              tabRefs.current[index] = el
-            }}
             onClick={() => setCurrentTab(tab)}
             className={cn(
-              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] font-[600] text-[13px]",
+              "relative cursor-pointer rounded-3xl px-2.5 py-[8px] text-[13px] font-[600] transition-all duration-500",
-              "text-stone-400 transition-all duration-500 ease-in-out hover:text-stone-950 dark:text-stone-500 hover:dark:text-stone-50",
+              currentTab === tab
-              {
+                ? "text-black dark:text-white"
-                "text-stone-950 dark:text-stone-50": currentTab === tab,
+                : "text-stone-400 dark:text-stone-500",
-              },
             )}
           >
+            {currentTab === tab && (
+              <m.div
+                layoutId="tab-switch"
+                className="absolute inset-0 z-10 h-full w-full content-center bg-white shadow-lg shadow-black/5 dark:bg-stone-700 dark:shadow-white/5"
+                style={{
+                  originY: "0px",
+                  borderRadius: 46,
+                }}
+              />
+            )}
             <div className="relative z-20 flex items-center gap-1">
               <p className="whitespace-nowrap">{t(tab)}</p>
             </div>
@@ -71,5 +46,5 @@ export default function TabSwitch({
         ))}
       </div>
     </div>
-  )
+  );
 }

components/ThemeColorManager.tsx

@@ -1,39 +0,0 @@
-"use client"
-
-import { useTheme } from "next-themes"
-import { useEffect } from "react"
-
-export function ThemeColorManager() {
-  const { theme, systemTheme } = useTheme()
-
-  useEffect(() => {
-    const updateThemeColor = () => {
-      const currentTheme = theme === "system" ? systemTheme : theme
-      const meta = document.querySelector('meta[name="theme-color"]')
-
-      if (!meta) {
-        const newMeta = document.createElement("meta")
-        newMeta.name = "theme-color"
-        document.head.appendChild(newMeta)
-      }
-
-      const themeColor =
-        currentTheme === "dark"
-          ? "hsl(30 15% 8%)" // 深色模式背景色
-          : "hsl(0 0% 98%)" // 浅色模式背景色
-
-      document.querySelector('meta[name="theme-color"]')?.setAttribute("content", themeColor)
-    }
-
-    // Update on mount and theme change
-    updateThemeColor()
-
-    // Listen for system theme changes
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)")
-    mediaQuery.addEventListener("change", updateThemeColor)
-
-    return () => mediaQuery.removeEventListener("change", updateThemeColor)
-  }, [theme, systemTheme])
-
-  return null
-}

components/ThemeSwitcher.tsx

@@ -1,31 +1,26 @@
-"use client"
+"use client";
 
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
+  DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
+} from "@/components/ui/dropdown-menu";
-import { CheckIcon, MinusIcon, Moon, Sun } from "lucide-react"
+import { cn } from "@/lib/utils";
-import { useTranslations } from "next-intl"
+import { CheckCircleIcon } from "@heroicons/react/20/solid";
-import { useTheme } from "next-themes"
+import { Moon, Sun } from "lucide-react";
-import { useId } from "react"
+import { useTranslations } from "next-intl";
-import { RadioGroup, RadioGroupItem } from "./ui/radio-group"
+import { useTheme } from "next-themes";
-
-const items = [
-  { value: "light", label: "Light", image: "/ui-light.png" },
-  { value: "dark", label: "Dark", image: "/ui-dark.png" },
-  { value: "system", label: "System", image: "/ui-system.png" },
-]
 
 export function ModeToggle() {
-  const { setTheme, theme } = useTheme()
+  const { setTheme, theme } = useTheme();
-  const t = useTranslations("ThemeSwitcher")
+  const t = useTranslations("ThemeSwitcher");
 
-  const handleSelect = (newTheme: string) => {
+  const handleSelect = (e: Event, newTheme: string) => {
-    setTheme(newTheme)
+    e.preventDefault();
-  }
+    setTheme(newTheme);
-  const id = useId()
+  };
 
   return (
     <DropdownMenu>
@@ -33,48 +28,36 @@ export function ModeToggle() {
         <Button
           variant="outline"
           size="sm"
-          className="cursor-pointer rounded-full bg-white px-[9px] hover:bg-accent/50 dark:bg-black dark:hover:bg-accent/50"
+          className="rounded-full px-[9px] bg-white dark:bg-black cursor-pointer hover:bg-accent/50 dark:hover:bg-accent/50"
         >
-          <Sun className="dark:-rotate-90 h-4 w-4 rotate-0 scale-100 transition-all dark:scale-0" />
+          <Sun className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <Moon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Toggle theme</span>
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="px-2 pt-2 pb-1.5" align="end">
+      <DropdownMenuContent className="flex flex-col gap-0.5" align="end">
-        <fieldset className="space-y-4">
+        <DropdownMenuItem
-          <RadioGroup className="flex gap-2" defaultValue={theme} onValueChange={handleSelect}>
+          className={cn({ "gap-3 bg-muted": theme === "light" })}
-            {items.map((item) => (
+          onSelect={(e) => handleSelect(e, "light")}
-              <label key={`${id}-${item.value}`}>
+        >
-                <RadioGroupItem
+          {t("Light")}{" "}
-                  id={`${id}-${item.value}`}
+          {theme === "light" && <CheckCircleIcon className="size-4" />}
-                  value={item.value}
+        </DropdownMenuItem>
-                  className="peer sr-only after:absolute after:inset-0"
+        <DropdownMenuItem
-                />
+          className={cn({ "gap-3 bg-muted": theme === "dark" })}
-                <img
+          onSelect={(e) => handleSelect(e, "dark")}
-                  src={item.image}
+        >
-                  alt={item.label}
+          {t("Dark")}{" "}
-                  width={88}
+          {theme === "dark" && <CheckCircleIcon className="size-4" />}
-                  height={70}
+        </DropdownMenuItem>
-                  className="relative cursor-pointer overflow-hidden rounded-[8px] border border-neutral-300 shadow-xs outline-none transition-[color,box-shadow] peer-focus-visible:ring-[3px] peer-focus-visible:ring-ring/50 peer-data-disabled:cursor-not-allowed peer-data-[state=checked]:bg-accent peer-data-disabled:opacity-50 dark:border-neutral-700"
+        <DropdownMenuItem
-                />
+          className={cn({ "gap-3 bg-muted": theme === "system" })}
-                <span className="group mt-2 flex items-center gap-1 peer-data-[state=unchecked]:text-muted-foreground/70">
+          onSelect={(e) => handleSelect(e, "system")}
-                  <CheckIcon
+        >
-                    size={16}
+          {t("System")}{" "}
-                    className="group-peer-data-[state=unchecked]:hidden"
+          {theme === "system" && <CheckCircleIcon className="size-4" />}
-                    aria-hidden="true"
+        </DropdownMenuItem>
-                  />
-                  <MinusIcon
-                    size={16}
-                    className="group-peer-data-[state=checked]:hidden"
-                    aria-hidden="true"
-                  />
-                  <span className="font-medium text-xs">{t(item.label)}</span>
-                </span>
-              </label>
-            ))}
-          </RadioGroup>
-        </fieldset>
       </DropdownMenuContent>
     </DropdownMenu>
-  )
+  );
 }

components/loading/GlobalLoading.tsx

@@ -1,16 +0,0 @@
-"use client"
-
-import { Loader } from "@/components/loading/Loader"
-import { useTranslations } from "next-intl"
-
-export default function GlobalLoading() {
-  const t = useTranslations("Global")
-  return (
-    <section className="mt-[3.2px] flex flex-col gap-4">
-      <div className="flex min-h-40 flex-col items-center justify-center font-medium text-sm">
-        {t("Loading")}
-        <Loader visible={true} />
-      </div>
-    </section>
-  )
-}

components/loading/Loader.tsx

@@ -1,13 +1,13 @@
-const bars = Array(8).fill(0)
+const bars = Array(8).fill(0);
 
 export const Loader = ({ visible }: { visible: boolean }) => {
   return (
     <div className="hamster-loading-wrapper" data-visible={visible}>
       <div className="hamster-spinner">
         {bars.map((_, i) => (
-          <div className="hamster-loading-bar" key={`hamster-bar-${i + 1}`} />
+          <div className="hamster-loading-bar" key={`hamster-bar-${i}`} />
         ))}
       </div>
     </div>
-  )
+  );
-}
+};

components/loading/ServerDetailLoading.tsx

@@ -1,37 +0,0 @@
-import { BackIcon } from "@/components/Icon"
-import { Skeleton } from "@/components/ui/skeleton"
-import { useRouter } from "next/navigation"
-
-export function ServerDetailChartLoading() {
-  return (
-    <div>
-      <section className="grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-3">
-        <Skeleton className="h-[182px] w-full animate-none rounded-[5px] bg-muted-foreground/10" />
-        <Skeleton className="h-[182px] w-full animate-none rounded-[5px] bg-muted-foreground/10" />
-        <Skeleton className="h-[182px] w-full animate-none rounded-[5px] bg-muted-foreground/10" />
-        <Skeleton className="h-[182px] w-full animate-none rounded-[5px] bg-muted-foreground/10" />
-        <Skeleton className="h-[182px] w-full animate-none rounded-[5px] bg-muted-foreground/10" />
-        <Skeleton className="h-[182px] w-full animate-none rounded-[5px] bg-muted-foreground/10" />
-      </section>
-    </div>
-  )
-}
-
-export function ServerDetailLoading() {
-  const router = useRouter()
-
-  return (
-    <>
-      <div
-        onClick={() => {
-          router.push("/")
-        }}
-        className="flex flex-none cursor-pointer items-center gap-0.5 break-all font-semibold text-xl leading-none tracking-tight"
-      >
-        <BackIcon />
-        <Skeleton className="h-[20px] w-24 animate-none rounded-[5px] bg-muted-foreground/10" />
-      </div>
-      <Skeleton className="mt-3 flex h-[81px] w-1/2 animate-none flex-wrap gap-2 rounded-[5px] bg-muted-foreground/10" />
-    </>
-  )
-}

components/motion/framer-lazy-feature.ts

@@ -0,0 +1 @@
+export { domMax as default } from "framer-motion";

components/motion/motion-provider.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { LazyMotion } from "framer-motion";
+
+const loadFeatures = () =>
+  import("./framer-lazy-feature").then((res) => res.default);
+
+export const MotionProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <LazyMotion features={loadFeatures} strict key="framer">
+      {children}
+    </LazyMotion>
+  );
+};

components/ui/animated-circular-progress-bar.tsx

@@ -1,11 +1,11 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 interface Props {
-  max: number
+  max: number;
-  value: number
+  value: number;
-  min: number
+  min: number;
-  className?: string
+  className?: string;
-  primaryColor?: string
+  primaryColor?: string;
 }
 
 export default function AnimatedCircularProgressBar({
@@ -15,13 +15,13 @@ export default function AnimatedCircularProgressBar({
   primaryColor,
   className,
 }: Props) {
-  const circumference = 2 * Math.PI * 45
+  const circumference = 2 * Math.PI * 45;
-  const percentPx = circumference / 100
+  const percentPx = circumference / 100;
-  const currentPercent = ((value - min) / (max - min)) * 100
+  const currentPercent = ((value - min) / (max - min)) * 100;
 
   return (
     <div
-      className={cn("relative size-40 font-semibold text-2xl", className)}
+      className={cn("relative size-40 text-2xl font-semibold", className)}
       style={
         {
           "--circle-size": "100px",
@@ -37,8 +37,12 @@ export default function AnimatedCircularProgressBar({
         } as React.CSSProperties
       }
     >
-      <svg fill="none" className="size-full" strokeWidth="2" viewBox="0 0 100 100">
+      <svg
-        <title>Circular Progress Bar</title>
+        fill="none"
+        className="size-full"
+        strokeWidth="2"
+        viewBox="0 0 100 100"
+      >
         {currentPercent <= 90 && currentPercent >= 0 && (
           <circle
             cx="50"
@@ -48,7 +52,7 @@ export default function AnimatedCircularProgressBar({
             strokeDashoffset="0"
             strokeLinecap="round"
             strokeLinejoin="round"
-            className="stroke-muted opacity-100"
+            className="opacity-100 stroke-muted"
             style={
               {
                 "--stroke-percent": 90 - currentPercent,
@@ -58,7 +62,8 @@ export default function AnimatedCircularProgressBar({
                 transform:
                   "rotate(calc(1turn - 90deg - (var(--gap-percent) * var(--percent-to-deg) * var(--offset-factor-secondary)))) scaleY(-1)",
                 transition: "all var(--transition-length) ease var(--delay)",
-                transformOrigin: "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
+                transformOrigin:
+                  "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
               } as React.CSSProperties
             }
           />
@@ -71,7 +76,7 @@ export default function AnimatedCircularProgressBar({
           strokeDashoffset="0"
           strokeLinecap="round"
           strokeLinejoin="round"
-          className={cn("stroke-current opacity-100", {
+          className={cn("opacity-100 stroke-current", {
             "stroke-[var(--stroke-primary-color)]": primaryColor,
           })}
           style={
@@ -85,17 +90,18 @@ export default function AnimatedCircularProgressBar({
               transitionProperty: "stroke-dasharray,transform",
               transform:
                 "rotate(calc(-90deg + var(--gap-percent) * var(--offset-factor) * var(--percent-to-deg)))",
-              transformOrigin: "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
+              transformOrigin:
+                "calc(var(--circle-size) / 2) calc(var(--circle-size) / 2)",
             } as React.CSSProperties
           }
         />
       </svg>
       <span
         data-current-value={currentPercent}
-        className="fade-in absolute inset-0 m-auto size-fit animate-in delay-[var(--delay)] duration-[var(--transition-length)] ease-linear"
+        className="duration-[var(--transition-length)] delay-[var(--delay)] absolute inset-0 m-auto size-fit ease-linear animate-in fade-in"
       >
         {currentPercent}
       </span>
     </div>
-  )
+  );
 }

components/ui/animated-tooltip.tsx

@@ -1,20 +1,21 @@
-import Image from "next/image"
+import Image from "next/image";
-import Link from "next/link"
+import Link from "next/link";
+import React from "react";
 
 export const AnimatedTooltip = ({
   items,
 }: {
   items: {
-    id: number
+    id: number;
-    name: string
+    name: string;
-    designation: string
+    designation: string;
-    image: string
+    image: string;
-  }[]
+  }[];
 }) => {
   return (
     <>
       {items.map((item) => (
-        <div className="group -mr-4 relative" key={item.name}>
+        <div className="group relative -mr-4" key={item.name}>
           <Link href="https://buycoffee.top" target="_blank">
             <Image
               width={40}
@@ -28,5 +29,5 @@ export const AnimatedTooltip = ({
         </div>
       ))}
     </>
-  )
+  );
-}
+};

components/ui/badge.tsx

@@ -1,13 +1,14 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
-import type * as React from "react"
+import * as React from "react";
 
 const badgeVariants = cva(
   "inline-flex items-center text-nowarp rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors pointer-events-none focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
@@ -19,14 +20,16 @@ const badgeVariants = cva(
       variant: "default",
     },
   },
-)
+);
 
 export interface BadgeProps
   extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };

components/ui/button.tsx

@@ -1,7 +1,7 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Slot } from "@radix-ui/react-slot"
+import { Slot } from "@radix-ui/react-slot";
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps, cva } from "class-variance-authority";
-import * as React from "react"
+import * as React from "react";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
@@ -9,9 +9,12 @@ const buttonVariants = cva(
     variants: {
       variant: {
         default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        destructive:
-        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -27,22 +30,26 @@ const buttonVariants = cva(
       size: "default",
     },
   },
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
-      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+      <Comp
-    )
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
   },
-)
+);
-Button.displayName = "Button"
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

components/ui/card.tsx

@@ -1,58 +1,85 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as React from "react"
+import * as React from "react";
 
-const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const Card = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div
+  React.HTMLAttributes<HTMLDivElement>
-      ref={ref}
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div
-        "rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
+    ref={ref}
-        className,
+    className={cn(
-      )}
+      "rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
-      {...props}
+      className,
-    />
+    )}
-  ),
+    {...props}
-)
+  />
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
-const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardHeader = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  ),
+>(({ className, ...props }, ref) => (
-)
+  <div
-CardHeader.displayName = "CardHeader"
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+const CardTitle = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLParagraphElement,
-    <h3
+  React.HTMLAttributes<HTMLHeadingElement>
-      ref={ref}
+>(({ className, ...props }, ref) => (
-      className={cn("font-semibold text-2xl leading-none tracking-tight", className)}
+  <h3
-      {...props}
+    ref={ref}
-    />
+    className={cn(
-  ),
+      "text-2xl font-semibold leading-none tracking-tight",
-)
+      className,
-CardTitle.displayName = "CardTitle"
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+  <p
-))
+    ref={ref}
-CardDescription.displayName = "CardDescription"
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardContent = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  ),
+>(({ className, ...props }, ref) => (
-)
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+const CardFooter = React.forwardRef<
-  ({ className, ...props }, ref) => (
+  HTMLDivElement,
-    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  React.HTMLAttributes<HTMLDivElement>
-  ),
+>(({ className, ...props }, ref) => (
-)
+  <div
-CardFooter.displayName = "CardFooter"
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

components/ui/chart.tsx

@@ -1,47 +1,49 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as React from "react"
+import * as React from "react";
-import * as RechartsPrimitive from "recharts"
+import * as RechartsPrimitive from "recharts";
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-const THEMES = { light: "", dark: ".dark" } as const
+const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
   [k: string]: {
-    label?: React.ReactNode
+    label?: React.ReactNode;
-    icon?: React.ComponentType
+    icon?: React.ComponentType;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  )
+  );
-}
+};
 
 type ChartContextProps = {
-  config: ChartConfig
+  config: ChartConfig;
-}
+};
 
-const ChartContext = React.createContext<ChartContextProps | null>(null)
+const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext)
+  const context = React.useContext(ChartContext);
 
   if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />")
+    throw new Error("useChart must be used within a <ChartContainer />");
   }
 
-  return context
+  return context;
 }
 
 const ChartContainer = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> & {
-    config: ChartConfig
+    config: ChartConfig;
-    children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
   }
 >(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId()
+  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
   return (
     <ChartContext.Provider value={{ config }}>
@@ -55,18 +57,22 @@ const ChartContainer = React.forwardRef<
         {...props}
       >
         <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>{children}</RechartsPrimitive.ResponsiveContainer>
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
       </div>
     </ChartContext.Provider>
-  )
+  );
-})
+});
-ChartContainer.displayName = "Chart"
+ChartContainer.displayName = "Chart";
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color)
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
 
   if (!colorConfig.length) {
-    return null
+    return null;
   }
 
   return (
@@ -78,8 +84,10 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
 ${prefix} [data-chart=${id}] {
 ${colorConfig
   .map(([key, itemConfig]) => {
-    const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color
+    const color =
-    return color ? `  --color-${key}: ${color};` : null
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
   })
   .join("\n")}
 }
@@ -88,20 +96,20 @@ ${colorConfig
           .join("\n"),
       }}
     />
-  )
+  );
-}
+};
 
-const ChartTooltip = RechartsPrimitive.Tooltip
+const ChartTooltip = RechartsPrimitive.Tooltip;
 
 const ChartTooltipContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
     React.ComponentProps<"div"> & {
-      hideLabel?: boolean
+      hideLabel?: boolean;
-      hideIndicator?: boolean
+      hideIndicator?: boolean;
-      indicator?: "line" | "dot" | "dashed"
+      indicator?: "line" | "dot" | "dashed";
-      nameKey?: string
+      nameKey?: string;
-      labelKey?: string
+      labelKey?: string;
     }
 >(
   (
@@ -122,65 +130,68 @@ const ChartTooltipContent = React.forwardRef<
     },
     ref,
   ) => {
-    const { config } = useChart()
+    const { config } = useChart();
 
     const tooltipLabel = React.useMemo(() => {
       if (hideLabel || !payload?.length) {
-        return null
+        return null;
       }
 
-      const [item] = payload
+      const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || "value"}`
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key)
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
       const value =
         !labelKey && typeof label === "string"
           ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label
+          : itemConfig?.label;
 
       if (labelFormatter) {
         return (
-          <div className={cn("font-medium", labelClassName)}>{labelFormatter(value, payload)}</div>
+          <div className={cn("font-medium", labelClassName)}>
-        )
+            {labelFormatter(value, payload)}
+          </div>
+        );
       }
 
       if (!value) {
-        return null
+        return null;
       }
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey])
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
 
     if (!active || !payload?.length) {
-      return null
+      return null;
     }
 
     payload.sort((a, b) => {
-      return Number(b.value) - Number(a.value)
+      return Number(b.value) - Number(a.value);
-    })
+    });
 
-    const nestLabel = payload.length === 1 && indicator !== "dot"
+    const nestLabel = payload.length === 1 && indicator !== "dot";
 
     return (
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 overflow-hidden rounded-sm border border-border/50 bg-stone-100 text-xs dark:bg-stone-900",
+          "grid min-w-[8rem] items-start gap-1.5 rounded-sm border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
           className,
         )}
       >
-        {!nestLabel && (
+        {!nestLabel ? tooltipLabel : null}
-          <div className="-mb-1 mx-auto px-2.5 pt-1">{!nestLabel ? tooltipLabel : null}</div>
+        <div className="grid gap-1.5">
-        )}
-
-        <div
-          className={cn("grid gap-1.5 bg-white px-2.5 py-1.5 dark:bg-black", {
-            "border-t-[1px]": !nestLabel,
-          })}
-        >
           {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key)
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color
+            const indicatorColor = color || item.payload.fill || item.color;
 
             return (
               <div
@@ -233,108 +244,125 @@ const ChartTooltipContent = React.forwardRef<
                       {item.value && (
                         <span
                           className={cn(
-                            "ml-2 font-medium text-foreground tabular-nums",
+                            "ml-2 font-mono font-medium tabular-nums text-foreground",
                             payload.length === 1 && "-ml-9",
                           )}
                         >
                           {typeof item.value === "number"
-                            ? item.value.toFixed(2).toLocaleString()
+                            ? item.value.toFixed(3).toLocaleString()
-                            : item.value}{" "}
+                            : item.value}
-                          ms
                         </span>
                       )}
                     </div>
                   </>
                 )}
               </div>
-            )
+            );
           })}
         </div>
       </div>
-    )
+    );
   },
-)
+);
-ChartTooltipContent.displayName = "ChartTooltip"
+ChartTooltipContent.displayName = "ChartTooltip";
 
-const ChartLegend = RechartsPrimitive.Legend
+const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
   HTMLDivElement,
   React.ComponentProps<"div"> &
     Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean
+      hideIcon?: boolean;
-      nameKey?: string
+      nameKey?: string;
     }
->(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+>(
-  const { config } = useChart()
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref,
+  ) => {
+    const { config } = useChart();
 
-  if (!payload?.length) {
+    if (!payload?.length) {
-    return null
+      return null;
-  }
+    }
 
-  return (
+    return (
-    <div
+      <div
-      ref={ref}
+        ref={ref}
-      className={cn(
+        className={cn(
-        "flex flex-wrap items-center justify-center gap-4",
+          "flex flex-wrap items-center justify-center gap-4",
-        verticalAlign === "top" ? "pb-3" : "pt-3",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
-        className,
+          className,
-      )}
+        )}
-    >
+      >
-      {payload.map((item) => {
+        {payload.map((item) => {
-        const key = `${nameKey || item.dataKey || "value"}`
+          const key = `${nameKey || item.dataKey || "value"}`;
-        const itemConfig = getPayloadConfigFromPayload(config, item, key)
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
-        return (
+          return (
-          <div
+            <div
-            key={item.value}
+              key={item.value}
-            className={cn(
+              className={cn(
-              "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground",
-            )}
+              )}
-          >
+            >
-            {itemConfig?.icon && !hideIcon ? (
+              {itemConfig?.icon && !hideIcon ? (
-              <itemConfig.icon />
+                <itemConfig.icon />
-            ) : (
+              ) : (
-              <div
+                <div
-                className="h-2 w-2 shrink-0 rounded-[2px]"
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                style={{
+                  style={{
-                  backgroundColor: item.color,
+                    backgroundColor: item.color,
-                }}
+                  }}
-              />
+                />
-            )}
+              )}
-            {key}
+              {key}
-          </div>
+            </div>
-        )
+          );
-      })}
+        })}
-    </div>
+      </div>
-  )
+    );
-})
+  },
-ChartLegendContent.displayName = "ChartLegend"
+);
+ChartLegendContent.displayName = "ChartLegend";
 
 // Helper to extract item config from a payload.
-function getPayloadConfigFromPayload(config: ChartConfig, payload: unknown, key: string) {
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
   if (typeof payload !== "object" || payload === null) {
-    return undefined
+    return undefined;
   }
 
   const payloadPayload =
-    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
       ? payload.payload
-      : undefined
+      : undefined;
 
-  let configLabelKey: string = key
+  let configLabelKey: string = key;
 
-  if (key in payload && typeof payload[key as keyof typeof payload] === "string") {
+  if (
-    configLabelKey = payload[key as keyof typeof payload] as string
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
   } else if (
     payloadPayload &&
     key in payloadPayload &&
     typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
   ) {
-    configLabelKey = payloadPayload[key as keyof typeof payloadPayload] as string
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
   }
 
-  return configLabelKey in config ? config[configLabelKey] : config[key as keyof typeof config]
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
 }
 
 export {
@@ -344,4 +372,4 @@ export {
   ChartLegend,
   ChartLegendContent,
   ChartStyle,
-}
+};

components/ui/command.tsx

@@ -1,144 +0,0 @@
-"use client"
-
-import { type DialogProps, DialogTitle } from "@radix-ui/react-dialog"
-import { Command as CommandPrimitive } from "cmdk"
-import { Search } from "lucide-react"
-import * as React from "react"
-
-import { Dialog, DialogContent } from "@/components/ui/dialog"
-import { cn } from "@/lib/utils"
-
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className,
-    )}
-    {...props}
-  />
-))
-Command.displayName = CommandPrimitive.displayName
-
-const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogTitle />
-      <DialogContent className="overflow-hidden p-0 shadow-lg">
-        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-4 [&_[cmdk-input-wrapper]_svg]:w-4 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-4 [&_[cmdk-item]_svg]:w-4">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  )
-}
-
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
-  <div className="flex items-center bg-stone-100 px-3 dark:bg-stone-900" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
-))
-
-CommandInput.displayName = CommandPrimitive.Input.displayName
-
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("mb-1 max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-    {...props}
-  />
-))
-
-CommandList.displayName = CommandPrimitive.List.displayName
-
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
-))
-
-CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:text-xs",
-      className,
-    )}
-    {...props}
-  />
-))
-
-CommandGroup.displayName = CommandPrimitive.Group.displayName
-
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 h-px bg-border", className)}
-    {...props}
-  />
-))
-CommandSeparator.displayName = CommandPrimitive.Separator.displayName
-
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-[8px] px-2 py-1.5 text-xs outline-none data-[disabled=true]:pointer-events-none data-[selected='true']:bg-stone-100 data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 dark:data-[selected='true']:bg-stone-900 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className,
-    )}
-    {...props}
-  />
-))
-
-CommandItem.displayName = CommandPrimitive.Item.displayName
-
-const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-muted-foreground text-xs tracking-widest", className)}
-      {...props}
-    />
-  )
-}
-CommandShortcut.displayName = "CommandShortcut"
-
-export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
-}

components/ui/dialog.tsx

@@ -1,104 +0,0 @@
-"use client"
-
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-
-const Dialog = DialogPrimitive.Root
-
-const DialogTrigger = DialogPrimitive.Trigger
-
-const DialogPortal = DialogPrimitive.Portal
-
-const DialogClose = DialogPrimitive.Close
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80 data-[state=closed]:animate-out data-[state=open]:animate-in",
-      className,
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=open]:animate-in sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute top-4 right-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
-)
-DialogHeader.displayName = "DialogHeader"
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn("font-semibold text-lg leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}

components/ui/dropdown-menu.tsx

@@ -1,26 +1,26 @@
-"use client"
+"use client";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { Check, ChevronRight, Circle } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react";
-import * as React from "react"
+import * as React from "react";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -35,8 +35,9 @@ const DropdownMenuSubTrigger = React.forwardRef<
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
-DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -45,13 +46,14 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className,
     )}
     {...props}
   />
-))
+));
-DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -62,32 +64,32 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-2xl data-[state=closed]:animate-out data-[state=open]:animate-in dark:shadow-none",
+        "z-50 overflow-hidden rounded-md border bg-popover p-1.5 text-popover-foreground shadow-2xl dark:shadow-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
+));
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-[10px] px-2 py-1.5 font-normal text-xs outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-[10px] px-2 py-1.5 text-xs font-medium outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className,
     )}
     {...props}
   />
-))
+));
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -96,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     checked={checked}
@@ -109,8 +111,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
-DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -119,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden transition-colors focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className,
     )}
     {...props}
@@ -131,22 +134,26 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
+));
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 font-semibold text-sm", inset && "pl-8", className)}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className,
+    )}
     {...props}
   />
-))
+));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -157,13 +164,21 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
+));
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+const DropdownMenuShortcut = ({
-  return <span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+  className,
-}
+  ...props
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -181,4 +196,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-}
+};

components/ui/input.tsx

@@ -1,7 +1,7 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as React from "react"
+import * as React from "react";
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, type, ...props }, ref) => {
@@ -9,15 +9,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:font-medium file:text-sm placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         ref={ref}
         {...props}
       />
-    )
+    );
   },
-)
+);
-Input.displayName = "Input"
+Input.displayName = "Input";
 
-export { Input }
+export { Input };

components/ui/label.tsx

@@ -1,20 +0,0 @@
-"use client"
-
-import { cn } from "@/lib/utils"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { type VariantProps, cva } from "class-variance-authority"
-import * as React from "react"
-
-const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-)
-
-const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
->(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
-))
-Label.displayName = LabelPrimitive.Root.displayName
-
-export { Label }

components/ui/navigation-menu.tsx

@@ -1,8 +1,8 @@
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import { cva } from "class-variance-authority"
+import { cva } from "class-variance-authority";
-import { ChevronDown } from "lucide-react"
+import { ChevronDown } from "lucide-react";
-import * as React from "react"
+import * as React from "react";
 
 const NavigationMenu = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Root>,
@@ -10,14 +10,17 @@ const NavigationMenu = React.forwardRef<
 >(({ className, children, ...props }, ref) => (
   <NavigationMenuPrimitive.Root
     ref={ref}
-    className={cn("relative z-10 flex max-w-max flex-1 items-center justify-center", className)}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className,
+    )}
     {...props}
   >
     {children}
     <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-))
+));
-NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
 const NavigationMenuList = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.List>,
@@ -25,17 +28,20 @@ const NavigationMenuList = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <NavigationMenuPrimitive.List
     ref={ref}
-    className={cn("group flex flex-1 list-none items-center justify-center space-x-1", className)}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className,
+    )}
     {...props}
   />
-))
+));
-NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
-const NavigationMenuItem = NavigationMenuPrimitive.Item
+const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
   "group inline-flex h-10 w-max items-center justify-center rounded-md bg-transparent px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
-)
+);
 
 const NavigationMenuTrigger = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
@@ -52,8 +58,8 @@ const NavigationMenuTrigger = React.forwardRef<
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
-))
+));
-NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Content>,
@@ -62,32 +68,33 @@ const NavigationMenuContent = React.forwardRef<
   <NavigationMenuPrimitive.Content
     ref={ref}
     className={cn(
-      "data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out md:absolute md:w-auto",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
       className,
     )}
     {...props}
   />
-))
+));
-NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
-const NavigationMenuLink = NavigationMenuPrimitive.Link
+const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
 const NavigationMenuViewport = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
   React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute top-full left-0 flex justify-center")}>
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full origin-top-center overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=closed]:animate-out data-[state=open]:animate-in md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className,
       )}
       ref={ref}
       {...props}
     />
   </div>
-))
+));
-NavigationMenuViewport.displayName = NavigationMenuPrimitive.Viewport.displayName
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
   React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
@@ -96,15 +103,16 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in",
+      "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
       className,
     )}
     {...props}
   >
     <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-))
+));
-NavigationMenuIndicator.displayName = NavigationMenuPrimitive.Indicator.displayName
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName;
 
 export {
   NavigationMenu,
@@ -116,4 +124,4 @@ export {
   NavigationMenuTrigger,
   navigationMenuTriggerStyle,
   NavigationMenuViewport,
-}
+};