feat: online counter

src/components/Header.tsx

@@ -1,7 +1,9 @@
 import { ModeToggle } from "@/components/ThemeSwitcher"
 import { Separator } from "@/components/ui/separator"
 import { Skeleton } from "@/components/ui/skeleton"
+import { useWebSocketContext } from "@/hooks/use-websocket-context"
 import { fetchLoginUser, fetchSetting } from "@/lib/nezha-api"
+import { cn } from "@/lib/utils"
 import { useQuery } from "@tanstack/react-query"
 import { DateTime } from "luxon"
 import { useEffect, useRef, useState } from "react"
@@ -9,6 +11,7 @@ import { useTranslation } from "react-i18next"
 import { useNavigate } from "react-router-dom"
 
 import { LanguageSwitcher } from "./LanguageSwitcher"
+import { Button } from "./ui/button"
 
 function Header() {
   const { t } = useTranslation()
@@ -21,6 +24,10 @@ function Header() {
     refetchOnWindowFocus: true,
   })
 
+  const { lastMessage, connected } = useWebSocketContext()
+
+  const onlineCount = connected ? (lastMessage ? JSON.parse(lastMessage.data).online || 0 : 0) : "..."
+
   const siteName = settingData?.data?.site_name
 
   // @ts-expect-error CustomLogo is a global variable
@@ -68,6 +75,15 @@ function Header() {
           <DashboardLink />
           <LanguageSwitcher />
           <ModeToggle />
+          <Button
+            variant="outline"
+            size="sm"
+            className={cn("hover:bg-white dark:hover:bg-black cursor-default rounded-full flex items-center px-[9px] bg-white dark:bg-black")}
+          >
+            {connected ? onlineCount : "..."}
+            <p className="text-muted-foreground">{t("online")}</p>
+            <span className="h-2 w-2 rounded-full bg-green-500"></span>
+          </Button>
         </section>
       </section>
       <div className="w-full flex justify-end sm:hidden mt-1">

src/locales/en/translation.json

@@ -3,6 +3,7 @@
   "overview": "Overview",
   "dashboard": "Dashboard",
   "login": "Login",
+  "online": "Online",
   "whereTheTimeIs": "Where the time is",
   "info": {
     "websocketConnecting": "WebSocket connecting",

src/locales/zh-CN/translation.json

@@ -3,6 +3,7 @@
   "overview": "概览",
   "dashboard": "管理后台",
   "login": "登录",
+  "online": "在线",
   "whereTheTimeIs": "当前时间",
   "info": {
     "websocketConnecting": "WebSocket 连接中",

src/locales/zh-TW/translation.json

@@ -3,6 +3,7 @@
   "overview": "概覽",
   "dashboard": "管理後台",
   "login": "登錄",
+  "online": "在線",
   "whereTheTimeIs": "目前時間",
   "info": {
     "websocketConnecting": "WebSocket 連接中",