feat: card inline

app/(main)/ClientComponents/ServerListClient.tsx

@@ -2,12 +2,13 @@
 
 import { ServerApi } from "@/app/types/nezha-api";
 import ServerCard from "@/components/ServerCard";
+import ServerCardInline from "@/components/ServerCardInline";
 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 { cn, nezhaFetcher } from "@/lib/utils";
-import { GlobeAsiaAustraliaIcon } from "@heroicons/react/20/solid";
+import { MapIcon, ViewColumnsIcon } from "@heroicons/react/20/solid";
 import { useTranslations } from "next-intl";
 import { useRouter } from "next/navigation";
 import { useEffect, useRef, useState } from "react";
@@ -22,6 +23,15 @@ export default function ServerListClient() {
   const router = useRouter();
 
   const [tag, setTag] = useState<string>(defaultTag);
+  const [inline, setInline] = useState<string>("0");
+
+  useEffect(() => {
+    const inlineState = sessionStorage.getItem("inline");
+    if (inlineState !== null) {
+      console.log("inlineState", inlineState);
+      setInline(inlineState);
+    }
+  }, []);
 
   useEffect(() => {
     const savedTag = sessionStorage.getItem("selectedTag") || defaultTag;
@@ -123,7 +133,22 @@ export default function ServerListClient() {
           }}
           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]" />
+          <MapIcon className="size-[13px]" />
+        </button>
+        <button
+          onClick={() => {
+            setInline(inline === "0" ? "1" : "0");
+            sessionStorage.setItem("inline", inline === "0" ? "1" : "0");
+          }}
+          className={cn(
+            "rounded-[50px] text-white cursor-pointer [text-shadow:_0_1px_0_rgb(0_0_0_/_20%)] bg-blue-600  p-[10px] transition-all shadow-[inset_0_1px_0_rgba(255,255,255,0.2)]  ",
+            {
+              "shadow-[inset_0_1px_0_rgba(0,0,0,0.2)] bg-blue-500":
+                inline === "1",
+            },
+          )}
+        >
+          <ViewColumnsIcon className="size-[13px]" />
         </button>
         {getEnv("NEXT_PUBLIC_ShowTag") === "true" && (
           <Switch
@@ -134,14 +159,27 @@ export default function ServerListClient() {
           />
         )}
       </section>
-      <section
+      {inline === "1" && (
-        ref={containerRef}
+        <section
-        className="grid grid-cols-1 gap-2 md:grid-cols-2"
+          ref={containerRef}
-      >
+          className="flex flex-col gap-2 overflow-x-scroll"
-        {filteredServers.map((serverInfo) => (
+        >
-          <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
+          {filteredServers.map((serverInfo) => (
-        ))}
+            <ServerCardInline key={serverInfo.id} serverInfo={serverInfo} />
-      </section>
+          ))}
+        </section>
+      )}
+
+      {inline === "0" && (
+        <section
+          ref={containerRef}
+          className="grid grid-cols-1 gap-2 md:grid-cols-2"
+        >
+          {filteredServers.map((serverInfo) => (
+            <ServerCard key={serverInfo.id} serverInfo={serverInfo} />
+          ))}
+        </section>
+      )}
     </>
   );
 }

components/ServerCardInline.tsx

@@ -0,0 +1,178 @@
+import { NezhaAPISafe } from "@/app/types/nezha-api";
+import ServerFlag from "@/components/ServerFlag";
+import ServerUsageBar from "@/components/ServerUsageBar";
+import { Badge } from "@/components/ui/badge";
+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";
+
+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 items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full",
+        )}
+      >
+        <section
+          className={cn("grid items-center gap-2 w-40")}
+          style={{ gridTemplateColumns: "auto auto 1fr" }}
+        >
+          <span className="h-2 w-2 shrink-0 rounded-full bg-green-500 self-center"></span>
+          <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">
+            <p
+              className={cn(
+                "break-all font-bold tracking-tight",
+                showFlag ? "text-xs " : "text-sm",
+              )}
+            >
+              {name}
+            </p>
+          </div>
+        </section>
+        <div className="flex flex-col gap-2">
+          <section className={cn("grid grid-cols-9 items-center gap-3 flex-1")}>
+            <div
+              className={"items-center flex flex-row gap-2 whitespace-nowrap"}
+            >
+              <div className="text-xs font-semibold">
+                {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-xs text-muted-foreground">{t("System")}</p>
+                <div className="flex items-center text-[10.5px] font-semibold">
+                  {host.Platform.includes("Windows")
+                    ? "Windows"
+                    : GetOsName(host.Platform)}
+                </div>
+              </div>
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("Uptime")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {(serverInfo?.status.Uptime / 86400).toFixed(0)} {"Days"}
+              </div>
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">{t("CPU")}</p>
+              <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-xs text-muted-foreground">{t("Mem")}</p>
+              <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-xs text-muted-foreground">{t("STG")}</p>
+              <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-xs text-muted-foreground">{t("Upload")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {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-xs text-muted-foreground">{t("Download")}</p>
+              <div className="flex items-center text-xs font-semibold">
+                {down >= 1024
+                  ? `${(down / 1024).toFixed(2)}G/s`
+                  : `${down.toFixed(2)}M/s`}
+              </div>
+            </div>
+            <div className={"flex flex-col"}>
+              <p className="text-xs text-muted-foreground">
+                {t("TotalUpload")}
+              </p>
+              <div className="flex items-center text-xs font-semibold">
+                {formatBytes(serverInfo.status.NetOutTransfer)}
+              </div>
+            </div>
+            <div className={"flex flex-col"}>
+              <p className="text-xs text-muted-foreground">
+                {t("TotalDownload")}
+              </p>
+              <div className="flex items-center text-xs font-semibold">
+                {formatBytes(serverInfo.status.NetInTransfer)}
+              </div>
+            </div>
+          </section>
+        </div>
+      </Card>
+    </Link>
+  ) : (
+    <Card
+      className={cn(
+        "flex items-center justify-start gap-3 p-3 md:px-5 min-h-[61px] min-w-[900px] flex-row",
+      )}
+    >
+      <section
+        className={cn("grid items-center gap-2 lg:w-40")}
+        style={{ gridTemplateColumns: "auto auto 1fr" }}
+      >
+        <span className="h-2 w-2 shrink-0 rounded-full bg-red-500 self-center"></span>
+        <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">
+          <p
+            className={cn(
+              "break-all font-bold tracking-tight",
+              showFlag ? "text-xs" : "text-sm",
+            )}
+          >
+            {name}
+          </p>
+        </div>
+      </section>
+    </Card>
+  );
+}

messages/en.json

@@ -18,7 +18,11 @@
     "STG": "STG",
     "Upload": "Upload",
     "Download": "Download",
-    "Offline": "Offline"
+    "Offline": "Offline",
+    "Uptime": "Uptime",
+    "TotalUpload": "Upload",
+    "TotalDownload": "Download",
+    "Region": "Region"
   },
   "TabSwitch": {
     "Detail": "Detail",
@@ -39,7 +43,11 @@
     "Network": "Network",
     "Load": "Load",
     "Online": "Online",
-    "Offline": "Offline"
+    "Offline": "Offline",
+    "Uptime": "Uptime",
+    "Upload": "Upload",
+    "Download": "Download",
+    "Region": "Region"
   },
   "NetworkChartClient": {
     "avg_delay": "Latency",

messages/ja.json

@@ -18,7 +18,11 @@
     "STG": "STG",
     "Upload": "Upload",
     "Download": "Download",
-    "Offline": "Offline"
+    "Offline": "Offline",
+    "Uptime": "Uptime",
+    "TotalUpload": "Upload",
+    "TotalDownload": "Download",
+    "Region": "Region"
   },
   "TabSwitch": {
     "Detail": "詳細",
@@ -39,7 +43,11 @@
     "Network": "ネットワーク",
     "Load": "負荷",
     "Online": "オンライン時間",
-    "Offline": "オフライン"
+    "Offline": "オフライン",
+    "Uptime": "アップタイム",
+    "Upload": "アップロード",
+    "Download": "ダウンロード",
+    "Region": "地域"
   },
   "NetworkChartClient": {
     "avg_delay": "遅延",

messages/zh-t.json

@@ -18,7 +18,11 @@
     "STG": "儲存",
     "Upload": "上傳",
     "Download": "下載",
-    "Offline": "離線"
+    "Offline": "離線",
+    "Uptime": "稼働時間",
+    "TotalUpload": "总上傳",
+    "TotalDownload": "总下載",
+    "Region": "地區"
   },
   "TabSwitch": {
     "Detail": "詳細",
@@ -39,7 +43,11 @@
     "Network": "網路",
     "Load": "負載",
     "Online": "在線時間",
-    "Offline": "離線"
+    "Offline": "離線",
+    "Uptime": "稼働時間",
+    "Upload": "上傳",
+    "Download": "下載",
+    "Region": "地域"
   },
   "NetworkChartClient": {
     "avg_delay": "延遲",

messages/zh.json

@@ -18,7 +18,11 @@
     "STG": "存储",
     "Upload": "上传",
     "Download": "下载",
-    "Offline": "离线"
+    "Offline": "离线",
+    "Uptime": "运行时间",
+    "TotalUpload": "总上传",
+    "TotalDownload": "总下载",
+    "Region": "地区"
   },
   "TabSwitch": {
     "Detail": "详情",
@@ -39,7 +43,11 @@
     "Network": "网络",
     "Load": "负载",
     "Online": "在线时间",
-    "Offline": "离线"
+    "Offline": "离线",
+    "Uptime": "运行时间",
+    "Upload": "上传",
+    "Download": "下载",
+    "Region": "地区"
   },
   "NetworkChartClient": {
     "avg_delay": "延迟",