feat(clients): restore traffic usage progress bars on Clients page (#5150)

Bring back the v2.9.x traffic column UX: used amount, color-coded progress bar, limit/infinity label, and hover popover with upload/download/remaining breakdown. Adds a shared ClientTrafficCell component, traffic display helpers, and unit tests.

frontend/src/components/clients/ClientTrafficCell.css

@@ -0,0 +1,90 @@
+.client-traffic-cell {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  min-width: 0;
+  box-sizing: border-box;
+  padding: 2px 10px;
+  border-radius: 999px;
+  background: var(--ant-color-fill-quaternary);
+}
+
+.client-traffic-cell.is-compact {
+  gap: 6px;
+  padding: 2px 8px;
+  margin-top: 6px;
+}
+
+.client-traffic-cell-used,
+.client-traffic-cell-limit {
+  flex: 0 0 72px;
+  min-width: 72px;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.client-traffic-cell.is-compact .client-traffic-cell-used {
+  flex-basis: 64px;
+  min-width: 64px;
+  font-size: 11px;
+}
+
+.client-traffic-cell-used {
+  text-align: end;
+  color: var(--ant-color-text);
+}
+
+.client-traffic-cell-limit {
+  text-align: start;
+  color: var(--ant-color-text-secondary);
+}
+
+.client-traffic-cell-bar {
+  flex: 1 1 60px;
+  min-width: 48px;
+}
+
+.client-traffic-cell-bar.ant-progress {
+  margin: 0;
+  line-height: 1;
+}
+
+.client-traffic-cell-bar .ant-progress-outer,
+.client-traffic-cell-bar .ant-progress-inner {
+  display: block;
+}
+
+.client-traffic-cell-bar .ant-progress-inner {
+  background: var(--ant-color-fill-secondary);
+}
+
+.client-traffic-cell.is-unlimited .client-traffic-cell-bar .ant-progress-inner .ant-progress-bg {
+  background-color: color-mix(in srgb, #722ed1 35%, transparent);
+  border: 1px solid color-mix(in srgb, #722ed1 55%, transparent);
+}
+
+.client-traffic-cell-infinity {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  color: var(--ant-color-purple);
+  font-size: 14px;
+  line-height: 1;
+}
+
+.client-traffic-popover table {
+  border-collapse: collapse;
+  width: 100%;
+  font-variant-numeric: tabular-nums;
+}
+
+.client-traffic-popover td {
+  padding: 2px 6px;
+  white-space: nowrap;
+}
+
+.client-traffic-popover td:first-child {
+  color: var(--ant-color-text-secondary);
+}

frontend/src/components/clients/ClientTrafficCell.tsx

@@ -0,0 +1,85 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Popover, Progress } from 'antd';
+
+import InfinityIcon from '@/components/ui/InfinityIcon';
+import { useTheme } from '@/hooks/useTheme';
+import { computeTrafficDisplay } from '@/lib/clients/traffic-display';
+import { SizeFormatter } from '@/utils';
+import './ClientTrafficCell.css';
+
+export interface ClientTrafficCellProps {
+  up?: number;
+  down?: number;
+  total?: number;
+  enabled?: boolean;
+  trafficDiff?: number;
+  compact?: boolean;
+}
+
+export default function ClientTrafficCell({
+  up = 0,
+  down = 0,
+  total = 0,
+  enabled = true,
+  trafficDiff = 0,
+  compact = false,
+}: ClientTrafficCellProps) {
+  const { t } = useTranslation();
+  const { isDark } = useTheme();
+
+  const display = useMemo(
+    () => computeTrafficDisplay({ up, down, total, enabled, trafficDiff }, isDark),
+    [up, down, total, enabled, trafficDiff, isDark],
+  );
+
+  const popover = (
+    <table className="client-traffic-popover">
+      <tbody>
+        <tr>
+          <td>↑</td>
+          <td>{SizeFormatter.sizeFormat(up)}</td>
+          <td>↓</td>
+          <td>{SizeFormatter.sizeFormat(down)}</td>
+        </tr>
+        {!display.isUnlimited && (
+          <tr>
+            <td colSpan={2}>{t('remained')}</td>
+            <td colSpan={2}>{SizeFormatter.sizeFormat(display.remaining)}</td>
+          </tr>
+        )}
+      </tbody>
+    </table>
+  );
+
+  const rootClass = [
+    'client-traffic-cell',
+    compact ? 'is-compact' : '',
+    display.isUnlimited ? 'is-unlimited' : '',
+  ].filter(Boolean).join(' ');
+
+  return (
+    <Popover content={popover} trigger={['hover', 'click']} placement="top">
+      <div className={rootClass}>
+        <span className="client-traffic-cell-used">{SizeFormatter.sizeFormat(display.used)}</span>
+        <Progress
+          className="client-traffic-cell-bar"
+          percent={display.percent}
+          showInfo={false}
+          strokeColor={display.strokeColor}
+          status={display.status}
+          size={compact ? 'small' : 'default'}
+        />
+        <span className="client-traffic-cell-limit">
+          {display.isUnlimited ? (
+            <span className="client-traffic-cell-infinity" aria-label={t('subscription.unlimited')}>
+              <InfinityIcon />
+            </span>
+          ) : (
+            SizeFormatter.sizeFormat(total)
+          )}
+        </span>
+      </div>
+    </Popover>
+  );
+}