fix locale review comments from PR 768

Author: Copilot

src/ui/src/components/locale/locale-provider.test.tsx

@@ -0,0 +1,14 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@testing-library/react'
+import { useLocale } from './locale-provider'
+
+function LocaleConsumer() {
+  useLocale()
+  return null
+}
+
+describe('useLocale', () => {
+  it('throws when used outside LocaleProvider', () => {
+    expect(() => render(<LocaleConsumer />)).toThrow('useLocale must be used within a LocaleProvider')
+  })
+})

src/ui/src/components/locale/locale-provider.tsx

@@ -1,6 +1,7 @@
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react"
 
-type LocalePref = "auto" | string
+type LocaleTag = string & {}
+type LocalePref = "auto" | LocaleTag
 
 type LocaleProviderProps = {
   children: React.ReactNode
@@ -53,14 +54,7 @@ function writeStoredPref(storageKey: string, value: LocalePref): void {
   }
 }
 
-const initialState: LocaleProviderState = {
-  locale: "auto",
-  setLocale: () => null,
-  resolved: "en-US",
-  auto: "en-US",
-}
-
-const LocaleProviderContext = createContext<LocaleProviderState>(initialState)
+const LocaleProviderContext = createContext<LocaleProviderState | undefined>(undefined)
 
 export function LocaleProvider({
   children,

src/ui/src/lib/datetime.test.ts

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { withTimeZone } from './datetime'
+
+describe('withTimeZone', () => {
+  it('strips pre-existing option timezone when local is requested', () => {
+    expect(withTimeZone({ hour: '2-digit', timeZone: 'UTC' }, 'local')).toEqual({
+      hour: '2-digit',
+    })
+  })
+
+  it('overrides pre-existing option timezone when a specific timezone is requested', () => {
+    expect(withTimeZone({ hour: '2-digit', timeZone: 'UTC' }, 'America/New_York')).toEqual({
+      hour: '2-digit',
+      timeZone: 'America/New_York',
+    })
+  })
+})

src/ui/src/lib/datetime.ts

@@ -3,9 +3,10 @@ import { useLocale } from '@/components/locale/locale-provider'
 
 export type DateTimeFormatOptions = Intl.DateTimeFormatOptions
 
-function withTimeZone(opts: DateTimeFormatOptions, timeZone?: string): DateTimeFormatOptions {
-  if (!timeZone || timeZone === 'local') return opts
-  return { ...opts, timeZone }
+export function withTimeZone(opts: DateTimeFormatOptions, timeZone?: string): DateTimeFormatOptions {
+  const { timeZone: _ignored, ...rest } = opts
+  if (!timeZone || timeZone === 'local') return rest
+  return { ...rest, timeZone }
 }
 
 /**

src/ui/src/settings/ProfilePanel.test.tsx

@@ -0,0 +1,19 @@
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import ProfilePanel from './ProfilePanel'
+
+vi.mock('@/components/locale/locale-provider', () => ({
+  useLocale: () => ({
+    locale: 'en',
+    setLocale: vi.fn(),
+    resolved: 'en',
+    auto: 'en-US',
+  }),
+}))
+
+describe('ProfilePanel locale selector', () => {
+  it('keeps an unknown stored locale selectable', () => {
+    render(<ProfilePanel me={null} />)
+    expect(screen.getByRole('combobox')).toHaveTextContent('· en')
+  })
+})

src/ui/src/settings/ProfilePanel.tsx

@@ -109,6 +109,7 @@ export default function ProfilePanel({
       .map((tag) => ({ value: tag, label: localeLabel(tag, resolved) }))
       .sort((a, b) => collator.compare(a.label, b.label))
   }, [resolved])
+  const hasLocaleChoice = locale === 'auto' || LOCALE_TAGS.includes(locale)
   const sample = previewDate(resolved)
 
   const saveProfile = async () => {
@@ -256,6 +257,11 @@ export default function ProfilePanel({
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value="auto">{`Auto · ${auto}`}</SelectItem>
+                {!hasLocaleChoice && (
+                  <SelectItem value={locale}>
+                    {localeLabel(locale, resolved)} · {locale}
+                  </SelectItem>
+                )}
                 {localeChoices.map((c) => (
                   <SelectItem key={c.value} value={c.value}>
                     {c.label} · {c.value}