F1 component kit/Shell/Language globe, clock and timezonePhone

Language globe, clock and timezone

Missing · new03 · locale-tz

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.

Whole page:CompactComfortableLaravel · navyDTC · midnight green

Anatomy States Density EN · 中文 Edge cases Contract

Anatomy

The component as it sits in the product: English, compact, real data shapes.

41314:32 · UTC+8

Globe = one click toggles EN ↔ 中文 (two locales; English 99%). Clock = click opens the timezone choice.

States

5 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

default · globe + clock

41314:32 · UTC+8

Globe = one click toggles EN ↔ 中文 (two locales; English 99%). Clock = click opens the timezone choice.

clock → timezone menu

41314:32 · UTC+8

Show times inAPI sends UTC

Find a timezone

Asia/ShanghaiUTC+8

Europe/DublinUTC+1

Europe/LondonUTC+1

America/New_YorkUTC−4

UTCUTC+0

Saved to your preferences · timezone

IANA timezone field (settings)

Cutoff timezoneShipping settings

Europe/

saving locale

41314:32 · UTC+8

Saving language… menu labels reload from /me/menu

save failed

41314:32 · UTC+8

Could not save your timezone

Times still show in Asia/Shanghai.

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact

41314:32 · UTC+8

Globe = one click toggles EN ↔ 中文 (two locales; English 99%). Clock = click opens the timezone choice.

comfortable · data-density=comfortable

41314:32 · UTC+8

Globe = one click toggles EN ↔ 中文 (two locales; English 99%). Clock = click opens the timezone choice.

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

41314:32 · UTC+8

Globe = one click toggles EN ↔ 中文 (two locales; English 99%). Clock = click opens the timezone choice.

中文 · lang=zh-Hans

41314:32 · UTC+8

地球图标：单击切换 EN ↔ 中文。时钟：点击选择时区。

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

41303:32 · UTC−3

Globe = one click toggles EN ↔ 中文 (two locales; English 99%). Clock = click opens the timezone choice.

Show times inAPI sends UTC

Find a timezone

Asia/ShanghaiUTC+8

Europe/DublinUTC+1

Europe/LondonUTC+1

America/New_YorkUTC−4

UTCUTC+0

Saved to your preferences · timezone

permission denied

41314:32 · UTC+8

Cutoff timezone

Europe/Dublin

Read only · needs edit shipping

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root

41314:32 · UTC+8

Globe = one click toggles EN ↔ 中文 (two locales; English 99%). Clock = click opens the timezone choice.

DTC admin · data-theme=dtc

41314:32 · UTC+8

Globe = one click toggles EN ↔ 中文 (two locales; English 99%). Clock = click opens the timezone choice.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export: LocaleToggle · @rj/admin-kit
Props: locale en|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: value IANA · disabled
shadcn / Radix: Combobox (F1) over Intl.supportedValuesOf('timeZone')
Package underneath: cmdk
Phone variant: in the profile drawer