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/components/project/AddMemberForm.tsx
+++ b/components/project/AddMemberForm.tsx
@ -37,7 +37,7 @@ export function AddMemberForm({ projectId }: { projectId: number }) {
  return (
    <form
      onSubmit={onSubmit}
-      className="flex flex-col gap-2 rounded border bg-white p-4 sm:flex-row sm:items-end"
+      className="flex flex-col gap-2 rounded border bg-white dark:bg-gray-800 p-4 sm:flex-row sm:items-end"
    >
      <div className="flex-1">
        <label htmlFor="member-email" className="block text-sm font-medium">
--- a/components/project/CreateProjectForm.tsx
+++ b/components/project/CreateProjectForm.tsx
@ -2,9 +2,11 @@

 import { useState, type FormEvent } from 'react';
 import { useRouter } from 'next/navigation';
+import { useI18n } from '@/lib/i18n/I18nProvider';

 export function CreateProjectForm() {
  const router = useRouter();
+  const { t } = useI18n();
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');
  const [error, setError] = useState<string | null>(null);
@ -30,25 +32,25 @@ export function CreateProjectForm() {
    const body = (await res.json().catch(() => null)) as {
      error?: { message?: string };
    } | null;
-    setError(body?.error?.message ?? 'プロジェクトの作成に失敗しました');
+    setError(body?.error?.message ?? t('project.createFailed'));
    setLoading(false);
  }

  return (
    <form
      onSubmit={onSubmit}
-      className="flex flex-col gap-2 rounded-lg border bg-white p-4 shadow-sm sm:flex-row sm:items-end"
+      className="flex flex-col gap-2 rounded-lg border bg-white p-4 shadow-sm sm:flex-row sm:items-end dark:border-gray-700 dark:bg-gray-800"
    >
      <div className="flex-1">
        <label htmlFor="project-name" className="block text-sm font-medium">
-          プロジェクト名
+          {t('auth.projectName')}
        </label>
        <input
          id="project-name"
          type="text"
          value={name}
          onChange={(e) => setName(e.target.value)}
-          className="mt-1 w-full rounded border px-3 py-2"
+          className="mt-1 w-full rounded border px-3 py-2 dark:border-gray-600 dark:bg-gray-700"
          required
          maxLength={200}
        />
@ -58,14 +60,14 @@ export function CreateProjectForm() {
          htmlFor="project-description"
          className="block text-sm font-medium"
        >
-          説明（任意）
+          {t('project.description')}
        </label>
        <input
          id="project-description"
          type="text"
          value={description}
          onChange={(e) => setDescription(e.target.value)}
-          className="mt-1 w-full rounded border px-3 py-2"
+          className="mt-1 w-full rounded border px-3 py-2 dark:border-gray-600 dark:bg-gray-700"
        />
      </div>
      <button
@ -73,7 +75,7 @@ export function CreateProjectForm() {
        disabled={loading}
        className="rounded bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
      >
-        {loading ? '作成中...' : '新規プロジェクト'}
+        {loading ? t('project.creating') : t('auth.newProject')}
      </button>
      {error && (
        <p className="text-sm text-red-600 sm:full" role="alert">
--- a/components/project/DashboardWidget.tsx
+++ b/components/project/DashboardWidget.tsx
@ -12,12 +12,16 @@ export function DashboardWidget({
  empty?: string;
 }) {
  return (
-    <section className="rounded-lg border bg-white p-4 shadow-sm">
-      <h2 className="mb-3 text-sm font-semibold text-gray-700">{title}</h2>
+    <section className="rounded-lg border bg-white dark:bg-gray-800 p-4 shadow-sm">
+      <h2 className="mb-3 text-sm font-semibold text-gray-700 dark:text-gray-200">
+        {title}
+      </h2>
      {children ? (
        <div className="space-y-2">{children}</div>
      ) : (
-        <p className="text-sm text-gray-400">{empty ?? 'データがありません'}</p>
+        <p className="text-sm text-gray-400 dark:text-gray-500">
+          {empty ?? 'データがありません'}
+        </p>
      )}
    </section>
  );
--- a/components/project/ProjectCard.tsx
+++ b/components/project/ProjectCard.tsx
@ -11,27 +11,30 @@ const STATUS_COLORS: Record<string, string> = {
  active: 'bg-green-100 text-green-800',
  on_hold: 'bg-yellow-100 text-yellow-800',
  completed: 'bg-blue-100 text-blue-800',
-  archived: 'bg-gray-200 text-gray-700',
+  archived: 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200',
 };

 export function ProjectCard({ project }: { project: Project }) {
  return (
    <a
      href={`/projects/${project.id}`}
-      className="block rounded-lg border bg-white p-4 shadow-sm transition hover:shadow-md"
+      className="block rounded-lg border bg-white dark:bg-gray-800 p-4 shadow-sm transition hover:shadow-md"
    >
      <div className="flex items-center justify-between">
-        <h3 className="font-semibold text-gray-800">{project.name}</h3>
+        <h3 className="font-semibold text-gray-800 dark:text-gray-100">
+          {project.name}
+        </h3>
        <span
          className={`rounded px-2 py-0.5 text-xs ${
-            STATUS_COLORS[project.status] ?? 'bg-gray-100 text-gray-700'
+            STATUS_COLORS[project.status] ??
+            'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-200'
          }`}
        >
          {STATUS_LABELS[project.status] ?? project.status}
        </span>
      </div>
      {project.description && (
-        <p className="mt-2 line-clamp-2 text-sm text-gray-600">
+        <p className="mt-2 line-clamp-2 text-sm text-gray-600 dark:text-gray-300">
          {project.description}
        </p>
      )}
--- a/components/project/ProjectSettingsForm.tsx
+++ b/components/project/ProjectSettingsForm.tsx
@ -49,7 +49,7 @@ export function ProjectSettingsForm({

  if (!canManage) {
    return (
-      <p className="text-sm text-gray-500">
+      <p className="text-sm text-gray-500 dark:text-gray-400">
        プロジェクトの設定変更には管理者権限が必要です。
      </p>
    );
--- a/components/project/SearchForm.tsx
+++ b/components/project/SearchForm.tsx
@ -39,7 +39,7 @@ export function SearchForm({
  return (
    <form
      onSubmit={onSubmit}
-      className="flex flex-col gap-2 rounded-lg border bg-white p-4 shadow-sm sm:flex-row"
+      className="flex flex-col gap-2 rounded-lg border bg-white dark:bg-gray-800 p-4 shadow-sm sm:flex-row"
      data-testid="search-form"
    >
      <input