Skip to content

feat(web-ui): add bandwidth unit toggle (Mbps / MB/s) on status page#467

Merged
stackia merged 1 commit intomainfrom
feat/bandwidth-unit-toggle
May 5, 2026
Merged

feat(web-ui): add bandwidth unit toggle (Mbps / MB/s) on status page#467
stackia merged 1 commit intomainfrom
feat/bandwidth-unit-toggle

Conversation

@stackia
Copy link
Copy Markdown
Owner

@stackia stackia commented May 5, 2026

Summary

  • Adds a Mbps / MB/s unit selector to the status header. Default Mbps; choice persists in localStorage and is applied to every bandwidth readout (header total, per-client table, per-worker stats).
  • Factors the shared "persisted enum" pattern out of useTheme, useLocale, and the new useBandwidthUnit into a single usePersistedEnum hook. Also fixes an inherited no-op localStorage write on mount.
  • Extracts a HeaderSelect helper inside StatusHeader to dedupe the three icon + label + SelectBox blocks (Language / Appearance / Bandwidth Unit).

Screenshots

The bandwidth unit dropdown sits to the right of Appearance and follows the same icon + label + dropdown pattern. On narrow screens it wraps to a second row, right-aligned to line up under Appearance.

Test plan

  • Open the status page — verify the new "带宽单位 / Bandwidth Unit / 頻寬單位" dropdown appears next to Appearance.
  • Switch the unit; the header total, every connection row, and every worker card should update from Mbps to MB/s (and back).
  • Reload the page — selection persists.
  • Switch back to default (Mbps) and reload — verify the status-bandwidth-unit localStorage key is removed (not stored as default).
  • Resize the window from wide to narrow — the wrapped row should stay right-aligned.
  • Switch language / theme — they still persist correctly (regression check on the refactored hooks).

🤖 Generated with Claude Code

Adds a unit selector to the status header that lets the user display
bandwidth as either Mbps (default) or MB/s. The choice persists in
localStorage and applies to every bandwidth readout on the page (header
total, per-client table, per-worker stats).

Refactor: factor the shared "persisted-enum" pattern out of useTheme,
useLocale, and the new useBandwidthUnit into a single usePersistedEnum
hook (also fixes an inherited no-op localStorage write on mount). Extract
a HeaderSelect helper to dedupe the three icon+label+SelectBox blocks in
StatusHeader.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
Copilot AI review requested due to automatic review settings May 5, 2026 15:32
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 5, 2026

Azure Static Web Apps: Your stage site is ready! Visit it here: https://thankful-water-0a297bf00-467.eastasia.1.azurestaticapps.net

@stackia stackia merged commit 78505aa into main May 5, 2026
7 checks passed
@stackia stackia deleted the feat/bandwidth-unit-toggle branch May 5, 2026 15:35
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Adds a user-selectable bandwidth display unit (Mbps vs MB/s) to the Web UI status page and refactors “persisted enum” localStorage logic into a shared hook so theme/locale/unit preferences persist consistently.

Changes:

  • Add a Bandwidth Unit selector in the status header and propagate the selection to all bandwidth readouts (total, per-client, per-worker).
  • Introduce usePersistedEnum and refactor useTheme / useLocale (and new useBandwidthUnit) to use it, avoiding redundant localStorage writes.
  • Update shared typing/i18n to support the new selector and stronger enum-style type definitions.

Reviewed changes

Copilot reviewed 12 out of 13 changed files in this pull request and generated no comments.

Show a summary per file
File Description
web-ui/src/types/ui.ts Introduces THEME_MODES and adds BANDWIDTH_UNITS + BandwidthUnit type for shared UI enums.
web-ui/src/pages/status.tsx Wires useBandwidthUnit into the status page and passes the selected unit through to header/sections; updates total bandwidth formatting.
web-ui/src/lib/locale.ts Converts supported locales to a as const tuple and removes now-obsolete locale init helpers (replaced by persisted-enum hook usage).
web-ui/src/lib/format.ts Updates formatBandwidth to accept a BandwidthUnit and format as Mbps (bits) or MB/s (bytes).
web-ui/src/i18n/status.ts Adds translated label key for the new “Bandwidth Unit” selector.
web-ui/src/hooks/use-theme.ts Refactors theme persistence to usePersistedEnum and removes redundant localStorage writes.
web-ui/src/hooks/use-persisted-enum.ts Adds shared hook to persist validated string-enum selections with “don’t store default” behavior.
web-ui/src/hooks/use-locale.ts Refactors locale persistence to usePersistedEnum, using browser-detected locale as the default baseline.
web-ui/src/hooks/use-bandwidth-unit.ts Adds new persisted bandwidth-unit hook built on usePersistedEnum.
web-ui/src/components/status/workers-section.tsx Threads bandwidth unit into worker stats formatting.
web-ui/src/components/status/status-header.tsx Adds the bandwidth unit dropdown and deduplicates header select rendering via HeaderSelect.
web-ui/src/components/status/connections-section.tsx Threads bandwidth unit into per-client bandwidth formatting (table + mobile cards).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants