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": "Roteamento",
"outbounds": "Saídas",
"apiDocs": "Documentação da API",
"link": "Gerenciar",
"donate": "Doar",
"hosts": "Hosts",
"docs": "Documentação",
@@ -127,12 +126,9 @@
},
"index": {
"cpu": "CPU",
"logicalProcessors": "Processadores lógicos",
"frequency": "Frequência",
"swap": "Swap",
"storage": "Armazenamento",
"memory": "Memória",
"threads": "Threads",
"xrayStatus": "Xray",
"stopXray": "Parar",
"restartXray": "Reiniciar",
@@ -153,7 +149,6 @@
"xrayStatusRunning": "Em execução",
"xrayStatusStop": "Parado",
"xrayStatusError": "Erro",
"operationHours": "Tempo de Atividade",
"systemHistoryTitle": "Histórico do Sistema",
"historyTitleCpu": "Uso da CPU",
"historyTitleMem": "Uso de Memória",
@@ -171,7 +166,6 @@
"historyTabLoad": "Carga",
"historyTabConnections": "Conexões",
"historyTabDiskUsage": "Uso de Disco",
"charts": "Gráficos",
"xrayMetricsTitle": "Métricas do Xray",
"xrayTitleHeap": "Memória Heap Alocada",
"xrayTitleSys": "Memória Reservada do SO",
@@ -200,7 +194,6 @@
"overallSpeed": "Velocidade geral",
"upload": "Upload",
"download": "Download",
"totalData": "Dados totais",
"sent": "Enviado",
"received": "Recebido",
"xraySwitchVersionDialog": "Você realmente deseja alterar a versão do Xray?",
@@ -250,7 +243,18 @@
"exportDatabasePgDesc": "Clique para baixar um dump do PostgreSQL (.dump) do seu banco de dados atual para o seu dispositivo.",
"importDatabasePgDesc": "Clique para selecionar e enviar um backup do PostgreSQL (.dump), um banco de dados SQLite (.db) ou um dump de migração do SQLite para restaurar seu banco de dados. Isso substitui todos os dados atuais.",
"migrationDownload": "Baixar migração",
"migrationDownloadPgDesc": "Clique para baixar um banco de dados SQLite .db criado a partir dos seus dados do PostgreSQL, pronto para executar este painel no SQLite."
"migrationDownloadPgDesc": "Clique para baixar um banco de dados SQLite .db criado a partir dos seus dados do PostgreSQL, pronto para executar este painel no SQLite.",
"avg": "média",
"peak": "pico",
"free": "livre",
"openSockets": "sockets abertos",
"throughputSub": "Total da interface",
"avgWindow": "Média do período",
"healthWarm": "{list} — um pouco alto",
"healthCritical": "{list} — crítico",
"panel": "Painel",
"threads": "Threads",
"uptime": "Tempo ativo"
},
"inbounds": {
"totalDownUp": "Total Enviado/Recebido",