feat(ux): dark/light theme + en/ja i18n + user preferences

UX全体にテーマと言語設定を追加。 - lib/db/migrations/004_user_prefs.sql: users に theme/locale 列を追加(既定 dark/en) - lib/i18n/: dictionary(en/ja) + I18nProvider(クライアントcontext: locale/theme/t/setLocale/setTheme) + server.ts(SSR用 getLocale/getTheme/translate) + constants.ts - app/layout.tsx: theme/locale Cookie を読み <html class/lang> をSSR、I18nProvider でラップ(フラッシュなし) - tailwind darkMode:'class' + 全画面に dark: バリアントを一括付与(Nodeスクリプト lookbehind で安全に変換) - components/layout/ThemeToggle: 即時クラス切替+Cookie+永続化 - app/profile: テーマ/言語セレクタ、chrome翻訳(Header/ProjectNav/login/dashboard/profile) - PATCH /api/users/me: theme/locale を受理(バリデーション→400)、Cookieを設定 - E2E: locale=ja storageState で既存JAアサーションを維持、theme-i18n.spec で既定en/darkと切替を検証
2026-06-25 11:37:44 +02:00
parent 6a134a29bd
commit 921cdc457d
74 changed files with 1092 additions and 279 deletions
--- a/tests/unit/lib/db/migrator.test.ts
+++ b/tests/unit/lib/db/migrator.test.ts
@ -183,6 +183,7 @@ describe('Migrator', () => {
      '001_initial.sql',
      '002_attachments.sql',
      '003_todo_tags.sql',
+      '004_user_prefs.sql',
    ]);
  });
 });
--- a/tests/unit/lib/i18n/server.test.ts
+++ b/tests/unit/lib/i18n/server.test.ts
@ -0,0 +1,68 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+
+vi.mock('next/headers', () => ({
+  cookies: vi.fn(),
+}));
+
+import { cookies } from 'next/headers';
+import { getLocale, getTheme, translate } from '@/lib/i18n/server';
+
+const mockedCookies = vi.mocked(cookies);
+
+function mockCookie(value: string | undefined) {
+  mockedCookies.mockResolvedValue({
+    get: () => (value === undefined ? undefined : { value }),
+  } as never);
+}
+
+function mockCookieByName(map: Record<string, string | undefined>) {
+  mockedCookies.mockResolvedValue({
+    get: (name: string) =>
+      map[name] === undefined ? undefined : { value: map[name] },
+  } as never);
+}
+
+describe('i18n/server', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  describe('getLocale', () => {
+    it('defaults to en when the cookie is absent', async () => {
+      mockCookie(undefined);
+      expect(await getLocale()).toBe('en');
+    });
+    it('returns ja when the cookie is ja', async () => {
+      mockCookieByName({ locale: 'ja' });
+      expect(await getLocale()).toBe('ja');
+    });
+    it('falls back to en for an unknown value', async () => {
+      mockCookieByName({ locale: 'fr' });
+      expect(await getLocale()).toBe('en');
+    });
+  });
+
+  describe('getTheme', () => {
+    it('defaults to dark when the cookie is absent', async () => {
+      mockCookie(undefined);
+      expect(await getTheme()).toBe('dark');
+    });
+    it('returns light when the cookie is light', async () => {
+      mockCookieByName({ theme: 'light' });
+      expect(await getTheme()).toBe('light');
+    });
+    it('falls back to dark for an unknown value', async () => {
+      mockCookieByName({ theme: 'pink' });
+      expect(await getTheme()).toBe('dark');
+    });
+  });
+
+  describe('translate', () => {
+    it('returns the localized string for each locale', () => {
+      expect(translate('nav.board', 'en')).toBe('Board');
+      expect(translate('nav.board', 'ja')).toBe('掲示板');
+    });
+    it('falls back to the english string then the key for unknown keys', () => {
+      // @ts-expect-error -- nonexistent key on purpose
+      expect(translate('nonexistent.key', 'en')).toBe('nonexistent.key');
+    });
+  });
+});