From 1decac481e48771fea96b8cdbf211b193dfb1c73 Mon Sep 17 00:00:00 2001 From: ZacharyZcR Date: Thu, 9 Oct 2025 13:32:19 +0800 Subject: [PATCH] refactor: improve widget styling and UX consistency Enhance all server stats widgets with improved styling and user experience: Widget improvements: - Fix hardcoded titles, now use i18n translations for all widgets - Improve data formatting with consistent translation keys - Enhance empty state displays with better visual hierarchy - Add smooth hover transitions and visual feedback - Standardize spacing and layout patterns across widgets Specific optimizations: - CPU: Use translated load average display - Memory: Translate "Free" label - Disk: Translate "Available" label - System: Improve icon colors and spacing consistency - Network: Better empty state, enhanced card styling - Processes: Improved card borders and spacing Visual polish: - Unified icon sizing and opacity for empty states - Consistent border radius (rounded-lg) - Better hover states with subtle transitions - Enhanced font weights for improved readability --- .../Desktop/Apps/Server/widgets/CpuWidget.tsx | 12 ++++++++--- .../Apps/Server/widgets/DiskWidget.tsx | 8 ++++++-- .../Apps/Server/widgets/MemoryWidget.tsx | 6 ++++-- .../Apps/Server/widgets/NetworkWidget.tsx | 18 +++++++++-------- .../Apps/Server/widgets/ProcessesWidget.tsx | 20 +++++++++---------- .../Apps/Server/widgets/SystemWidget.tsx | 20 +++++++++---------- 6 files changed, 48 insertions(+), 36 deletions(-) diff --git a/src/ui/Desktop/Apps/Server/widgets/CpuWidget.tsx b/src/ui/Desktop/Apps/Server/widgets/CpuWidget.tsx index de054069..11f26e28 100644 --- a/src/ui/Desktop/Apps/Server/widgets/CpuWidget.tsx +++ b/src/ui/Desktop/Apps/Server/widgets/CpuWidget.tsx @@ -34,7 +34,9 @@ export function CpuWidget({ metrics, metricsHistory }: CpuWidgetProps) {
-

CPU Usage

+

+ {t("serverStats.cpuUsage")} +

@@ -52,8 +54,12 @@ export function CpuWidget({ metrics, metricsHistory }: CpuWidgetProps) {
{metrics?.cpu?.load - ? `Load: ${metrics.cpu.load[0].toFixed(2)} / ${metrics.cpu.load[1].toFixed(2)} / ${metrics.cpu.load[2].toFixed(2)}` - : "Load: N/A"} + ? t("serverStats.loadAverage", { + avg1: metrics.cpu.load[0].toFixed(2), + avg5: metrics.cpu.load[1].toFixed(2), + avg15: metrics.cpu.load[2].toFixed(2), + }) + : t("serverStats.loadAverageNA")}
diff --git a/src/ui/Desktop/Apps/Server/widgets/DiskWidget.tsx b/src/ui/Desktop/Apps/Server/widgets/DiskWidget.tsx index 4ed2d5c4..fd45b38a 100644 --- a/src/ui/Desktop/Apps/Server/widgets/DiskWidget.tsx +++ b/src/ui/Desktop/Apps/Server/widgets/DiskWidget.tsx @@ -31,7 +31,9 @@ export function DiskWidget({ metrics, metricsHistory }: DiskWidgetProps) {
-

Disk Usage

+

+ {t("serverStats.diskUsage")} +

@@ -86,7 +88,9 @@ export function DiskWidget({ metrics, metricsHistory }: DiskWidgetProps) {
{(() => { const available = metrics?.disk?.availableHuman; - return available ? `Available: ${available}` : "Available: N/A"; + return available + ? `${t("serverStats.available")}: ${available}` + : `${t("serverStats.available")}: N/A`; })()}
diff --git a/src/ui/Desktop/Apps/Server/widgets/MemoryWidget.tsx b/src/ui/Desktop/Apps/Server/widgets/MemoryWidget.tsx index f8bcaa2f..679dd4e6 100644 --- a/src/ui/Desktop/Apps/Server/widgets/MemoryWidget.tsx +++ b/src/ui/Desktop/Apps/Server/widgets/MemoryWidget.tsx @@ -34,7 +34,9 @@ export function MemoryWidget({ metrics, metricsHistory }: MemoryWidgetProps) {
-

Memory Usage

+

+ {t("serverStats.memoryUsage")} +

@@ -63,7 +65,7 @@ export function MemoryWidget({ metrics, metricsHistory }: MemoryWidgetProps) { typeof used === "number" && typeof total === "number" ? (total - used).toFixed(1) : "N/A"; - return `Free: ${free} GiB`; + return `${t("serverStats.free")}: ${free} GiB`; })()}
diff --git a/src/ui/Desktop/Apps/Server/widgets/NetworkWidget.tsx b/src/ui/Desktop/Apps/Server/widgets/NetworkWidget.tsx index f79372fc..0093d92e 100644 --- a/src/ui/Desktop/Apps/Server/widgets/NetworkWidget.tsx +++ b/src/ui/Desktop/Apps/Server/widgets/NetworkWidget.tsx @@ -23,38 +23,40 @@ export function NetworkWidget({ metrics }: NetworkWidgetProps) {
-
+
{interfaces.length === 0 ? ( -
- +
+

{t("serverStats.noInterfacesFound")}

) : ( interfaces.map((iface: any, index: number) => (
{iface.name}
{iface.state}
-
{iface.ip}
+
+ {iface.ip} +
)) )} diff --git a/src/ui/Desktop/Apps/Server/widgets/ProcessesWidget.tsx b/src/ui/Desktop/Apps/Server/widgets/ProcessesWidget.tsx index 464fdf83..ab505d32 100644 --- a/src/ui/Desktop/Apps/Server/widgets/ProcessesWidget.tsx +++ b/src/ui/Desktop/Apps/Server/widgets/ProcessesWidget.tsx @@ -40,32 +40,30 @@ export function ProcessesWidget({ metrics }: ProcessesWidgetProps) {
{topProcesses.length === 0 ? ( -
- +
+

{t("serverStats.noProcessesFound")}

) : ( -
+
{topProcesses.map((proc: any, index: number) => (
-
- +
+ PID: {proc.pid} -
+
CPU: {proc.cpu}% MEM: {proc.mem}%
-
+
{proc.command}
-
- User: {proc.user} -
+
User: {proc.user}
))}
diff --git a/src/ui/Desktop/Apps/Server/widgets/SystemWidget.tsx b/src/ui/Desktop/Apps/Server/widgets/SystemWidget.tsx index fd7e8e01..309fd43c 100644 --- a/src/ui/Desktop/Apps/Server/widgets/SystemWidget.tsx +++ b/src/ui/Desktop/Apps/Server/widgets/SystemWidget.tsx @@ -22,38 +22,38 @@ export function SystemWidget({ metrics }: SystemWidgetProps) {
-
+
- +
-

+

{t("serverStats.hostname")}

-

+

{system?.hostname || "N/A"}

- +
-

+

{t("serverStats.operatingSystem")}

-

+

{system?.os || "N/A"}

- +
-

+

{t("serverStats.kernel")}

-

+

{system?.kernel || "N/A"}