feat(ui): redesign the overview page as a trend-first command deck

Replace the ten-small-cards overview with an action bar, four vitals
tiles carrying 72-sample sparklines seeded from /server/history, a
two-series throughput chart, a TCP/UDP connections chart, and a
grouped system strip (uptime xray|os, panel ram|threads, ip
addresses). StatusCard and XrayStatusCard are deleted; every modal
stays reachable from the action bar, the Xray error message moves
into a tooltip on the state pill, and the panel version text keeps
opening the update modal (the dev-channel switch lives there) even
when no update is available. Live values sit beside the
upload/download and tcp/udp legends, a health sentence appears only
when a vital crosses the shared warn/crit thresholds now exported
from models/status, and load average is left to System History.

The sidebar becomes an auto-collapsed 72px icon rail that expands as
an overlay on hover: rail width, brand-row height and menu paddings
are pinned so nothing shifts during the transition, the collapsed-menu
tooltips are disabled, hover state survives the per-page sidebar
remounts (with a matches(':hover') resync), and the manual collapse
trigger is gone.

Sparkline gains rgb()/rgba() support in its fill gradient, a
showLegend prop so pages stop reaching into its internals, and loses
a dependency-less repaint effect that doubled canvas paints. Chart
tooltips show clock time via the new TimeFormatter.formatClock;
accents come from theme tokens instead of status.cpu.color. Verified
by screenshot at 390/800/1150/1280/1400/1600px in light and dark,
en and fa-IR, plus programmatic geometry checks on the sidebar.
Locale files gain 8 keys and lose 9 dead ones across all 13
languages.
This commit is contained in:
Sanaei
2026-07-29 20:17:37 +02:00
parent 87ebcc7a6f
commit c3fa73d5a0
30 changed files with 1467 additions and 765 deletions
+12 -8
View File
@@ -106,7 +106,6 @@
"routing": "مسیریابی",
"outbounds": "خروجی‌ها",
"apiDocs": "مستندات API",
"link": "مدیریت",
"donate": "حمایت مالی",
"hosts": "میزبان‌ها",
"docs": "مستندات",
@@ -127,12 +126,9 @@
},
"index": {
"cpu": "پردازنده",
"logicalProcessors": "پردازنده‌های منطقی",
"frequency": "فرکانس",
"swap": "سواپ",
"storage": "ذخیره‌سازی",
"memory": "حافظه",
"threads": "نخ‌ها",
"xrayStatus": "Xray",
"stopXray": "توقف",
"restartXray": "راه‌اندازی مجدد",
@@ -153,7 +149,6 @@
"xrayStatusRunning": "در حال اجرا",
"xrayStatusStop": "متوقف",
"xrayStatusError": "خطا",
"operationHours": "مدت‌کارکرد",
"systemHistoryTitle": "تاریخچه سیستم",
"historyTitleCpu": "مصرف پردازنده",
"historyTitleMem": "مصرف حافظه",
@@ -171,7 +166,6 @@
"historyTabLoad": "بار",
"historyTabConnections": "اتصالات",
"historyTabDiskUsage": "مصرف دیسک",
"charts": "نمودارها",
"xrayMetricsTitle": "متریک‌های Xray",
"xrayTitleHeap": "حافظه‌ی Heap تخصیص‌یافته",
"xrayTitleSys": "حافظه‌ی رزروشده از سیستم‌عامل",
@@ -200,7 +194,6 @@
"overallSpeed": "سرعت کلی",
"upload": "آپلود",
"download": "دانلود",
"totalData": "داده‌های کل",
"sent": "ارسال شده",
"received": "دریافت شده",
"xraySwitchVersionDialog": "آیا واقعاً می‌خواهید نسخه Xray را تغییر دهید؟",
@@ -250,7 +243,18 @@
"exportDatabasePgDesc": "برای دانلود یک دامپ PostgreSQL (.dump) از پایگاه داده فعلی روی دستگاهتان کلیک کنید.",
"importDatabasePgDesc": "برای انتخاب و بارگذاری یک پشتیبان PostgreSQL (.dump)، پایگاه‌دادهٔ SQLite (.db) یا فایل مهاجرت SQLite جهت بازیابی پایگاه داده کلیک کنید. این کار همه داده‌های فعلی را جایگزین می‌کند.",
"migrationDownload": "دانلود فایل مهاجرت",
"migrationDownloadPgDesc": "برای دانلود یک پایگاه‌دادهٔ SQLite با پسوند ‎.db که از داده‌های PostgreSQL شما ساخته می‌شود کلیک کنید؛ آمادهٔ اجرای این پنل روی SQLite."
"migrationDownloadPgDesc": "برای دانلود یک پایگاه‌دادهٔ SQLite با پسوند ‎.db که از داده‌های PostgreSQL شما ساخته می‌شود کلیک کنید؛ آمادهٔ اجرای این پنل روی SQLite.",
"avg": "میانگین",
"peak": "اوج",
"free": "آزاد",
"openSockets": "اتصال باز",
"throughputSub": "کل اینترفیس",
"avgWindow": "میانگین بازه",
"healthWarm": "{list} — رو به گرم شدن",
"healthCritical": "{list} — بحرانی",
"panel": "پنل",
"threads": "نخ‌ها",
"uptime": "مدت کارکرد"
},
"inbounds": {
"totalDownUp": "دریافت/ارسال کل",