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/app/layout.tsx
+++ b/app/layout.tsx
@ -1,20 +1,42 @@
 import type { Metadata } from 'next';
+import { cookies } from 'next/headers';
 import './globals.css';
+import { I18nProvider } from '@/lib/i18n/I18nProvider';
+import type { Locale, Theme } from '@/lib/types';

 export const metadata: Metadata = {
-  title: 'シンプルグループウェア',
-  description:
-    'プロジェクト単位で情報共有・タスク管理を行えるチームコラボレーションツール',
+  title: 'Groupware',
+  description: 'Project-based team collaboration tool',
 };

-export default function RootLayout({
+function resolveTheme(v: string | undefined): Theme {
+  return v === 'light' ? 'light' : 'dark'; // 既定は dark
+}
+
+function resolveLocale(v: string | undefined): Locale {
+  return v === 'ja' ? 'ja' : 'en'; // 既定は en
+}
+
+export default async function RootLayout({
  children,
 }: {
  children: React.ReactNode;
 }) {
+  const cookieStore = await cookies();
+  const theme = resolveTheme(cookieStore.get('theme')?.value);
+  const locale = resolveLocale(cookieStore.get('locale')?.value);
+
  return (
-    <html lang="ja">
-      <body>{children}</body>
+    <html
+      lang={locale}
+      className={theme === 'dark' ? 'dark' : ''}
+      style={{ colorScheme: theme }}
+    >
+      <body>
+        <I18nProvider initialLocale={locale} initialTheme={theme}>
+          {children}
+        </I18nProvider>
+      </body>
    </html>
  );
 }