nastechai-desktop 18.1.0

package/src/i18n/context.test.tsx

@@ -0,0 +1,232 @@
+import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+import type { NasTechConfigRecord } from '@/nastech'
+
+import { type I18nConfigClient, I18nProvider, useI18n } from './context'
+import type { Locale } from './types'
+
+function LanguageProbe({ target = 'zh' }: { target?: Locale }) {
+  const { isLoadingConfig, isSavingLocale, locale, saveError, setLocale, t } = useI18n()
+
+  return (
+    <div>
+      <p data-testid="locale">{locale}</p>
+      <p data-testid="label">{t.language.label}</p>
+      <p data-testid="save">{t.common.save}</p>
+      <p data-testid="loading">{String(isLoadingConfig)}</p>
+      <p data-testid="saving">{String(isSavingLocale)}</p>
+      <p data-testid="save-error">{saveError?.message ?? ''}</p>
+      <button onClick={() => void setLocale(target).catch(() => undefined)} type="button">
+        switch
+      </button>
+    </div>
+  )
+}
+
+describe('I18nProvider', () => {
+  afterEach(() => {
+    cleanup()
+    vi.restoreAllMocks()
+  })
+
+  it('defaults to English without a config client', () => {
+    render(
+      <I18nProvider configClient={null}>
+        <LanguageProbe />
+      </I18nProvider>
+    )
+
+    expect(screen.getByTestId('locale').textContent).toBe('en')
+    expect(screen.getByTestId('label').textContent).toBe('Language')
+  })
+
+  it('normalizes an initial locale alias and switches translations', async () => {
+    render(
+      <I18nProvider configClient={null} initialLocale="zh-CN">
+        <LanguageProbe target="en" />
+      </I18nProvider>
+    )
+
+    expect(screen.getByTestId('locale').textContent).toBe('zh')
+    expect(screen.getByTestId('label').textContent).toBe('语言')
+
+    fireEvent.click(screen.getByRole('button', { name: 'switch' }))
+
+    await waitFor(() => expect(screen.getByTestId('locale').textContent).toBe('en'))
+    expect(screen.getByTestId('label').textContent).toBe('Language')
+  })
+
+  it('loads the initial locale from display.language config', async () => {
+    const configClient: I18nConfigClient = {
+      getConfig: vi.fn().mockResolvedValue({ display: { language: 'zh-Hans' } }),
+      saveConfig: vi.fn()
+    }
+
+    render(
+      <I18nProvider configClient={configClient}>
+        <LanguageProbe />
+      </I18nProvider>
+    )
+
+    await waitFor(() => expect(screen.getByTestId('loading').textContent).toBe('false'))
+
+    expect(screen.getByTestId('locale').textContent).toBe('zh')
+    expect(screen.getByTestId('label').textContent).toBe('语言')
+    expect(configClient.saveConfig).not.toHaveBeenCalled()
+  })
+
+  it('keeps English usable when config loading fails', async () => {
+    const configClient: I18nConfigClient = {
+      getConfig: vi.fn().mockRejectedValue(new Error('config unavailable')),
+      saveConfig: vi.fn()
+    }
+
+    render(
+      <I18nProvider configClient={configClient} initialLocale="zh">
+        <LanguageProbe />
+      </I18nProvider>
+    )
+
+    await waitFor(() => expect(screen.getByTestId('loading').textContent).toBe('false'))
+
+    expect(screen.getByTestId('locale').textContent).toBe('en')
+    expect(screen.getByTestId('label').textContent).toBe('Language')
+    expect(configClient.saveConfig).not.toHaveBeenCalled()
+  })
+
+  it('loads zh-hant from display.language config', async () => {
+    const configClient: I18nConfigClient = {
+      getConfig: vi.fn().mockResolvedValue({ display: { language: 'zh-TW' } }),
+      saveConfig: vi.fn()
+    }
+
+    render(
+      <I18nProvider configClient={configClient} initialLocale="zh">
+        <LanguageProbe />
+      </I18nProvider>
+    )
+
+    await waitFor(() => expect(screen.getByTestId('loading').textContent).toBe('false'))
+
+    expect(screen.getByTestId('locale').textContent).toBe('zh-hant')
+    expect(screen.getByTestId('save').textContent).toBe('儲存')
+    expect(configClient.saveConfig).not.toHaveBeenCalled()
+  })
+
+  it('loads ja from display.language config', async () => {
+    const configClient: I18nConfigClient = {
+      getConfig: vi.fn().mockResolvedValue({ display: { language: 'ja-JP' } }),
+      saveConfig: vi.fn()
+    }
+
+    render(
+      <I18nProvider configClient={configClient}>
+        <LanguageProbe />
+      </I18nProvider>
+    )
+
+    await waitFor(() => expect(screen.getByTestId('loading').textContent).toBe('false'))
+
+    expect(screen.getByTestId('locale').textContent).toBe('ja')
+    expect(screen.getByTestId('save').textContent).toBe('保存')
+    expect(configClient.saveConfig).not.toHaveBeenCalled()
+  })
+
+  it('does not overwrite unsupported configured languages', async () => {
+    const configClient: I18nConfigClient = {
+      getConfig: vi.fn().mockResolvedValue({ display: { language: 'de' } }),
+      saveConfig: vi.fn()
+    }
+
+    render(
+      <I18nProvider configClient={configClient} initialLocale="zh">
+        <LanguageProbe />
+      </I18nProvider>
+    )
+
+    await waitFor(() => expect(screen.getByTestId('loading').textContent).toBe('false'))
+
+    expect(screen.getByTestId('locale').textContent).toBe('en')
+    expect(screen.getByTestId('label').textContent).toBe('Language')
+    expect(configClient.saveConfig).not.toHaveBeenCalled()
+  })
+
+  it('reads latest config before saving language and preserves unrelated values', async () => {
+    const saveConfig = vi.fn().mockResolvedValue({ ok: true })
+
+    const latestConfig: NasTechConfigRecord = {
+      display: { language: 'en', skin: 'slate' },
+      terminal: { cwd: '/new' }
+    }
+
+    const configClient: I18nConfigClient = {
+      getConfig: vi
+        .fn()
+        .mockResolvedValueOnce({ display: { language: 'en', skin: 'mono' }, terminal: { cwd: '/old' } })
+        .mockResolvedValueOnce(latestConfig),
+      saveConfig
+    }
+
+    render(
+      <I18nProvider configClient={configClient}>
+        <LanguageProbe />
+      </I18nProvider>
+    )
+
+    await waitFor(() => expect(screen.getByTestId('loading').textContent).toBe('false'))
+    fireEvent.click(screen.getByRole('button', { name: 'switch' }))
+
+    await waitFor(() => expect(saveConfig).toHaveBeenCalledTimes(1))
+    expect(saveConfig).toHaveBeenCalledWith({
+      display: { language: 'zh', skin: 'slate' },
+      terminal: { cwd: '/new' }
+    })
+  })
+
+  it('saves newly supported locales to display.language', async () => {
+    const saveConfig = vi.fn().mockResolvedValue({ ok: true })
+
+    const configClient: I18nConfigClient = {
+      getConfig: vi
+        .fn()
+        .mockResolvedValueOnce({ display: { language: 'en' } })
+        .mockResolvedValueOnce({ display: { language: 'en', skin: 'mono' } }),
+      saveConfig
+    }
+
+    render(
+      <I18nProvider configClient={configClient}>
+        <LanguageProbe target="ja" />
+      </I18nProvider>
+    )
+
+    await waitFor(() => expect(screen.getByTestId('loading').textContent).toBe('false'))
+    fireEvent.click(screen.getByRole('button', { name: 'switch' }))
+
+    await waitFor(() => expect(saveConfig).toHaveBeenCalledTimes(1))
+    expect(saveConfig).toHaveBeenCalledWith({ display: { language: 'ja', skin: 'mono' } })
+    expect(screen.getByTestId('locale').textContent).toBe('ja')
+  })
+
+  it('rolls back the visible locale when saving fails', async () => {
+    const configClient: I18nConfigClient = {
+      getConfig: vi.fn().mockResolvedValue({ display: { language: 'en' } }),
+      saveConfig: vi.fn().mockRejectedValue(new Error('save failed'))
+    }
+
+    render(
+      <I18nProvider configClient={configClient}>
+        <LanguageProbe />
+      </I18nProvider>
+    )
+
+    await waitFor(() => expect(screen.getByTestId('loading').textContent).toBe('false'))
+    fireEvent.click(screen.getByRole('button', { name: 'switch' }))
+
+    await waitFor(() => expect(screen.getByTestId('save-error').textContent).toBe('save failed'))
+
+    expect(screen.getByTestId('locale').textContent).toBe('en')
+    expect(screen.getByTestId('label').textContent).toBe('Language')
+  })
+})

package/src/i18n/context.tsx

@@ -0,0 +1,183 @@
+import { createContext, type ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+
+import { getNasTechConfigRecord, type NasTechConfigRecord, saveNasTechConfig } from '@/nastech'
+
+import { TRANSLATIONS } from './catalog'
+import { DEFAULT_LOCALE, localeConfigValue, normalizeLocale } from './languages'
+import { setRuntimeI18nLocale } from './runtime'
+import type { Locale, Translations } from './types'
+
+export { LOCALE_META } from './languages'
+
+export interface I18nConfigClient {
+  getConfig: () => Promise<NasTechConfigRecord>
+  saveConfig: (config: NasTechConfigRecord) => Promise<{ ok: boolean }>
+}
+
+const defaultConfigClient: I18nConfigClient = {
+  getConfig: () => {
+    if (typeof window === 'undefined' || !window.NASTECHDesktop?.api) {
+      return Promise.resolve({})
+    }
+
+    return getNasTechConfigRecord()
+  },
+  saveConfig: config => {
+    if (typeof window === 'undefined' || !window.NASTECHDesktop?.api) {
+      return Promise.resolve({ ok: true })
+    }
+
+    return saveNasTechConfig(config)
+  }
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+export function getConfigDisplayLanguage(config: NasTechConfigRecord): unknown {
+  return isRecord(config.display) ? config.display.language : undefined
+}
+
+export function withConfigDisplayLanguage(config: NasTechConfigRecord, locale: Locale): NasTechConfigRecord {
+  const display = isRecord(config.display) ? config.display : {}
+
+  return {
+    ...config,
+    display: {
+      ...display,
+      language: localeConfigValue(locale)
+    }
+  }
+}
+
+function toError(error: unknown): Error {
+  return error instanceof Error ? error : new Error(String(error))
+}
+
+export interface I18nContextValue {
+  configLoadError: Error | null
+  isLoadingConfig: boolean
+  isSavingLocale: boolean
+  locale: Locale
+  saveError: Error | null
+  setLocale: (next: Locale) => Promise<void>
+  t: Translations
+}
+
+const I18nContext = createContext<I18nContextValue>({
+  configLoadError: null,
+  isLoadingConfig: false,
+  isSavingLocale: false,
+  locale: DEFAULT_LOCALE,
+  saveError: null,
+  setLocale: async () => {},
+  t: TRANSLATIONS[DEFAULT_LOCALE]
+})
+
+export interface I18nProviderProps {
+  children: ReactNode
+  configClient?: I18nConfigClient | null
+  initialLocale?: unknown
+}
+
+export function I18nProvider({ children, configClient = defaultConfigClient, initialLocale }: I18nProviderProps) {
+  const [locale, setLocaleState] = useState<Locale>(() => normalizeLocale(initialLocale))
+  const [isLoadingConfig, setIsLoadingConfig] = useState(false)
+  const [isSavingLocale, setIsSavingLocale] = useState(false)
+  const [configLoadError, setConfigLoadError] = useState<Error | null>(null)
+  const [saveError, setSaveError] = useState<Error | null>(null)
+  const localeRef = useRef(locale)
+
+  useEffect(() => {
+    localeRef.current = locale
+    setRuntimeI18nLocale(locale)
+  }, [locale])
+
+  useEffect(() => {
+    if (!configClient) {
+      return
+    }
+
+    let cancelled = false
+
+    setIsLoadingConfig(true)
+    setConfigLoadError(null)
+
+    configClient
+      .getConfig()
+      .then(config => {
+        if (!cancelled) {
+          setLocaleState(normalizeLocale(getConfigDisplayLanguage(config)))
+        }
+      })
+      .catch(error => {
+        if (!cancelled) {
+          setConfigLoadError(toError(error))
+          setLocaleState(DEFAULT_LOCALE)
+        }
+      })
+      .finally(() => {
+        if (!cancelled) {
+          setIsLoadingConfig(false)
+        }
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [configClient, initialLocale])
+
+  const setLocale = useCallback(
+    async (next: Locale) => {
+      const previousLocale = localeRef.current
+
+      setSaveError(null)
+      setLocaleState(next)
+
+      if (!configClient) {
+        return
+      }
+
+      setIsSavingLocale(true)
+
+      try {
+        const latestConfig = await configClient.getConfig()
+        const result = await configClient.saveConfig(withConfigDisplayLanguage(latestConfig, next))
+
+        if (!result.ok) {
+          throw new Error('Failed to save language')
+        }
+      } catch (error) {
+        const nextError = toError(error)
+
+        setLocaleState(previousLocale)
+        setSaveError(nextError)
+
+        throw nextError
+      } finally {
+        setIsSavingLocale(false)
+      }
+    },
+    [configClient]
+  )
+
+  const value = useMemo<I18nContextValue>(
+    () => ({
+      configLoadError,
+      isLoadingConfig,
+      isSavingLocale,
+      locale,
+      saveError,
+      setLocale,
+      t: TRANSLATIONS[locale]
+    }),
+    [configLoadError, isLoadingConfig, isSavingLocale, locale, saveError, setLocale]
+  )
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>
+}
+
+export function useI18n(): I18nContextValue {
+  return useContext(I18nContext)
+}

package/src/i18n/define-locale.ts

@@ -0,0 +1,41 @@
+import { en } from './en'
+import type { Translations } from './types'
+
+type TranslationOverride<T> = T extends (...args: never[]) => string
+  ? T
+  : T extends readonly unknown[]
+    ? T
+    : T extends string
+      ? string
+      : T extends object
+        ? { [K in keyof T]?: TranslationOverride<T[K]> }
+        : T
+
+export type TranslationOverrides = TranslationOverride<Translations>
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function mergeTranslations<T>(base: T, overrides: TranslationOverride<T> | undefined): T {
+  if (!isRecord(base) || !isRecord(overrides)) {
+    return (overrides ?? base) as T
+  }
+
+  const result: Record<string, unknown> = { ...base }
+
+  for (const [key, value] of Object.entries(overrides)) {
+    if (value === undefined) {
+      continue
+    }
+
+    const baseValue = result[key]
+    result[key] = isRecord(baseValue) && isRecord(value) ? mergeTranslations(baseValue, value) : value
+  }
+
+  return result as T
+}
+
+export function defineLocale(overrides: TranslationOverrides): Translations {
+  return mergeTranslations<Translations>(en, overrides)
+}