feat: inline server card

src/components/ServerCardInline.tsx

@@ -0,0 +1,193 @@
+import ServerFlag from "@/components/ServerFlag";
+import ServerUsageBar from "@/components/ServerUsageBar";
+
+import { cn, formatNezhaInfo } from "@/lib/utils";
+import { NezhaServer } from "@/types/nezha-api";
+import { Card } from "./ui/card";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import {
+  GetFontLogoClass,
+  GetOsName,
+  MageMicrosoftWindows,
+} from "@/lib/logo-class";
+import { formatBytes } from "@/lib/format";
+
+export default function ServerCardInline({
+  now,
+  serverInfo,
+}: {
+  now: number;
+  serverInfo: NezhaServer;
+}) {
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const { name, country_code, online, cpu, up, down, mem, stg } =
+    formatNezhaInfo(now, serverInfo);
+
+  const showFlag = true;
+
+  return online ? (
+    <section>
+      <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",
+        )}
+        onClick={() => navigate(`/server/${serverInfo.id}`)}
+      >
+        <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-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">
+                {serverInfo.host.platform.includes("Windows") ? (
+                  <MageMicrosoftWindows className="size-[10px]" />
+                ) : (
+                  <p
+                    className={`fl-${GetFontLogoClass(serverInfo.host.platform)}`}
+                  />
+                )}
+              </div>
+              <div className={"flex w-14 flex-col"}>
+                <p className="text-xs text-muted-foreground">
+                  {t("serverCard.system")}
+                </p>
+                <div className="flex items-center text-[10.5px] font-semibold">
+                  {serverInfo.host.platform.includes("Windows")
+                    ? "Windows"
+                    : GetOsName(serverInfo.host.platform)}
+                </div>
+              </div>
+            </div>
+            <div className={"flex w-14 flex-col"}>
+              <p className="text-xs text-muted-foreground">
+                {t("serverCard.uptime")}
+              </p>
+              <div className="flex items-center text-xs font-semibold">
+                {(serverInfo.state.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("serverCard.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("serverCard.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("serverCard.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("serverCard.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("serverCard.totalUpload")}
+              </p>
+              <div className="flex items-center text-xs font-semibold">
+                {formatBytes(serverInfo.state.net_out_transfer)}
+              </div>
+            </div>
+            <div className={"flex flex-col"}>
+              <p className="text-xs text-muted-foreground">
+                {t("serverCard.totalDownload")}
+              </p>
+              <div className="flex items-center text-xs font-semibold">
+                {formatBytes(serverInfo.state.net_in_transfer)}
+              </div>
+            </div>
+          </section>
+        </div>
+      </Card>
+    </section>
+  ) : (
+    <Card
+      className={cn(
+        "flex  min-h-[61px] min-w-[900px] items-center justify-start gap-3 p-3 md:px-5 flex-row cursor-pointer hover:bg-accent/50 transition-colors",
+      )}
+      onClick={() => navigate(`/server/${serverInfo.id}`)}
+    >
+      <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>
+  );
+}

src/locales/en/translation.json

@@ -20,7 +20,11 @@
     "mem": "MEM",
     "stg": "STG",
     "upload": "Upload",
-    "download": "Download"
+    "download": "Download",
+    "system": "System",
+    "uptime": "Uptime",
+    "totalUpload": "Total Upload",
+    "totalDownload": "Total Download"
   },
   "serverDetail": {
     "status": "Status",

src/locales/zh-CN/translation.json

@@ -20,7 +20,11 @@
     "mem": "内存",
     "stg": "存储",
     "upload": "上传",
-    "download": "下载"
+    "download": "下载",
+    "system": "系统",
+    "uptime": "运行时间",
+    "totalUpload": "总上传",
+    "totalDownload": "总下载"
   },
   "serverDetail": {
     "status": "状态",

src/locales/zh-TW/translation.json

@@ -20,7 +20,11 @@
     "mem": "內存",
     "stg": "存儲",
     "upload": "上傳",
-    "download": "下載"
+    "download": "下載",
+    "system": "系統",
+    "uptime": "運行時間",
+    "totalUpload": "總上傳",
+    "totalDownload": "總下載"
   },
   "serverDetail": {
     "status": "狀態",

src/pages/Server.tsx

@@ -1,6 +1,6 @@
 import { NezhaWebsocketResponse } from "@/types/nezha-api";
 import ServerCard from "@/components/ServerCard";
-import { formatNezhaInfo } from "@/lib/utils";
+import { cn, formatNezhaInfo } from "@/lib/utils";
 import ServerOverview from "@/components/ServerOverview";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -10,8 +10,9 @@ import GroupSwitch from "@/components/GroupSwitch";
 import { ServerGroup } from "@/types/nezha-api";
 import { useWebSocketContext } from "@/hooks/use-websocket-context";
 import { useTranslation } from "react-i18next";
-import { ChartBarSquareIcon } from "@heroicons/react/20/solid";
+import { ChartBarSquareIcon, ViewColumnsIcon } from "@heroicons/react/20/solid";
 import { ServiceTracker } from "@/components/ServiceTracker";
+import ServerCardInline from "@/components/ServerCardInline";
 
 export default function Servers() {
   const { t } = useTranslation();
@@ -23,6 +24,15 @@ export default function Servers() {
 
   const [showServices, setShowServices] = useState(false);
   const [currentGroup, setCurrentGroup] = useState<string>("All");
+  const [inline, setInline] = useState<string>("0");
+
+  useEffect(() => {
+    const inlineState = localStorage.getItem("inline");
+    if (inlineState !== null) {
+      console.log("inlineState", inlineState);
+      setInline(inlineState);
+    }
+  }, []);
 
   const groupTabs = [
     "All",
@@ -111,6 +121,21 @@ export default function Servers() {
         >
           <ChartBarSquareIcon className="size-[13px]" />
         </button>
+        <button
+          onClick={() => {
+            setInline(inline === "0" ? "1" : "0");
+            localStorage.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>
         <GroupSwitch
           tabs={groupTabs}
           currentTab={currentGroup}
@@ -118,6 +143,18 @@ export default function Servers() {
         />
       </section>
       {showServices && <ServiceTracker />}
+      {inline === "1" && (
+        <section className="flex flex-col gap-2 overflow-x-scroll mt-6">
+          {filteredServers.map((serverInfo) => (
+            <ServerCardInline
+              now={nezhaWsData.now}
+              key={serverInfo.id}
+              serverInfo={serverInfo}
+            />
+          ))}
+        </section>
+      )}
+      {inline === "0" && (
         <section className="grid grid-cols-1 gap-2 md:grid-cols-2 mt-6">
           {filteredServers.map((serverInfo) => (
             <ServerCard
@@ -127,6 +164,7 @@ export default function Servers() {
             />
           ))}
         </section>
+      )}
     </div>
   );
 }