feat: add @numeric-text/react for improved numeric display in Header and ServerOverview components

package.json

@@ -16,6 +16,7 @@
 	"dependencies": {
 		"@fontsource/inter": "5.2.8",
 		"@heroicons/react": "2.2.0",
+		"@numeric-text/react": "^0.1.4",
 		"@radix-ui/react-accordion": "1.2.12",
 		"@radix-ui/react-checkbox": "1.3.3",
 		"@radix-ui/react-dialog": "^1.1.16",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ importers:
       '@heroicons/react':
         specifier: 2.2.0
         version: 2.2.0(react@19.2.6)
+      '@numeric-text/react':
+        specifier: ^0.1.4
+        version: 0.1.4(react@19.2.6)
       '@radix-ui/react-accordion':
         specifier: 1.2.12
         version: 1.2.12(@types/react-dom@19.2.3(@types/react@19.2.15))(@types/react@19.2.15)(react-dom@19.2.6(react@19.2.6))(react@19.2.6)
@@ -275,6 +278,14 @@ packages:
       '@emnapi/core': ^1.7.1
       '@emnapi/runtime': ^1.7.1
 
+  '@numeric-text/core@0.1.4':
+    resolution: {integrity: sha512-tMaH5u/kdpw3AP+XJMnDWyq39zVHoP80NCLTFwzVept64dIAMKBNLlYtUK0+EULiyFg6IiSwswmc9tMukV1tLw==}
+
+  '@numeric-text/react@0.1.4':
+    resolution: {integrity: sha512-i1t18jSzn168nl9jYrC+W1FlPexjy0dbAa9bofykaL44ogu+puLg2f5roVA3xOUgjL6bSojv+wKUA/ZRRshwEw==}
+    peerDependencies:
+      react: ^18 || ^19
+
   '@oxc-project/types@0.132.0':
     resolution: {integrity: sha512-FESMOxil5Se014ui/Eq8fT5uHJo6nIRwH0PfJrZJXs6Gek3ZVFOrpUv3YIZT20m+extU98Hg1Ym72U58rlsxUQ==}
 
@@ -1800,6 +1811,13 @@ snapshots:
       '@tybys/wasm-util': 0.10.2
     optional: true
 
+  '@numeric-text/core@0.1.4': {}
+
+  '@numeric-text/react@0.1.4(react@19.2.6)':
+    dependencies:
+      '@numeric-text/core': 0.1.4
+      react: 19.2.6
+
   '@oxc-project/types@0.132.0': {}
 
   '@radix-ui/number@1.1.1': {}

src/components/Header.tsx

@@ -1,3 +1,4 @@
+import NumericText from "@numeric-text/react";
 import { useQuery } from "@tanstack/react-query";
 import { ImageMinus } from "lucide-react";
 import { DateTime } from "luxon";
@@ -180,7 +181,11 @@ function Header() {
 							},
 						)}
 					>
-						{connected ? onlineCount : <Loader visible={true} />}
+						{connected ? (
+							<NumericText value={onlineCount} />
+						) : (
+							<Loader visible={true} />
+						)}
 						<p className="text-muted-foreground">
 							{connected ? t("online") : t("offline")}
 						</p>

src/components/ServerOverview.tsx

@@ -2,6 +2,7 @@ import {
 	ArrowDownCircleIcon,
 	ArrowUpCircleIcon,
 } from "@heroicons/react/20/solid";
+import NumericText from "@numeric-text/react";
 import { useTranslation } from "react-i18next";
 import { Card, CardContent } from "@/components/ui/card";
 import { useStatus } from "@/hooks/use-status";
@@ -63,7 +64,7 @@ export default function ServerOverview({
 							<span className="relative flex h-2 w-2">
 								<span className="relative inline-flex h-2 w-2 rounded-full bg-blue-500"></span>
 							</span>
-							<div className="text-lg font-semibold">{total}</div>
+							<NumericText value={total} className="text-lg font-semibold" />
 						</div>
 					</section>
 				</CardContent>
@@ -93,8 +94,7 @@ export default function ServerOverview({
 								<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>
 							</span>
-
+							<NumericText value={online} className="text-lg font-semibold" />
-							<div className="text-lg font-semibold">{online}</div>
 						</div>
 					</section>
 				</CardContent>
@@ -124,7 +124,7 @@ export default function ServerOverview({
 								<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>
 							</span>
-							<div className="text-lg font-semibold">{offline}</div>
+							<NumericText value={offline} className="text-lg font-semibold" />
 						</div>
 					</section>
 				</CardContent>
@@ -145,12 +145,14 @@ export default function ServerOverview({
 							</p>
 						</div>
 						<section className="flex items-start flex-row z-10 pr-0 gap-1">
-							<p className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400   text-nowrap font-medium">
+							<NumericText
-								↑{formatBytes(up)}
+								value={`↑${formatBytes(up)}`}
-							</p>
+								className="sm:text-[12px] text-[10px] text-blue-800 dark:text-blue-400  text-nowrap font-medium"
-							<p className="sm:text-[12px] text-[10px]  text-purple-800 dark:text-purple-400  text-nowrap font-medium">
+							/>
-								↓{formatBytes(down)}
+							<NumericText
-							</p>
+								value={`↓${formatBytes(down)}`}
+								className="sm:text-[12px] text-[10px]  text-purple-800 dark:text-purple-400  text-nowrap font-medium"
+							/>
 						</section>
 						<section className="flex flex-col sm:flex-row -mr-1 sm:items-center items-start gap-1">
 							<p className="text-[11px] flex items-center text-nowrap font-semibold">