Language globe, clock and timezone
Per-person preferences stored by PUT /admin/me/preferences {locale, timezone}. The globe is the whole control: one click toggles EN ↔ 中文. The clock shows the time in the staff zone and opens the timezone choice. Settings that carry their own zone (shipping cutoff, supplier) use the IANA timezone field.
Covers: M09. Exports: LocaleToggle, ClockButton, TimezoneSelect.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
States
5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
Density
The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
LocaleToggle·@rj/admin-kit- Props
localeen|cn ·onChange- States
- en · cn · saving · error
- shadcn / Radix
- Toggle (icon button)
- Package underneath
- next-intl
- Accessibility
- aria-label “Language: English. Switch to 中文”
- API operations
- admin.me.preferences.update {locale}
- Export
ClockButton·@rj/admin-kit- Props
timezone·now- shadcn / Radix
- Popover + Command (search)
- Package underneath
- @date-fns/tz · cmdk
- Accessibility
- time is a live region off; button names the zone
- API operations
- admin.me.preferences.update {timezone}
- Export
TimezoneSelect·@rj/admin-kit- Props
valueIANA ·disabled- shadcn / Radix
- Combobox (F1) over Intl.supportedValuesOf('timeZone')
- Package underneath
- cmdk
- Phone variant
- in the profile drawer