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/projects/[projectId]/activity/page.tsx
+++ b/app/projects/[projectId]/activity/page.tsx
@ -50,24 +50,28 @@ export default async function ProjectActivityPage({
  const { items } = activityService.listByProject(project.id, 1);

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="activity" />
      <main className="mx-auto max-w-3xl space-y-6 p-6">
        <h1 className="text-2xl font-bold">アクティビティログ</h1>
        {items.length === 0 ? (
-          <p className="text-sm text-gray-400">アクティビティはありません。</p>
+          <p className="text-sm text-gray-400 dark:text-gray-500">
+            アクティビティはありません。
+          </p>
        ) : (
-          <ul className="divide-y rounded-lg border bg-white shadow-sm">
+          <ul className="divide-y rounded-lg border bg-white dark:bg-gray-800 shadow-sm">
            {items.map((log) => (
              <li key={log.id} className="p-4">
                <div className="flex items-center justify-between">
-                  <span className="rounded bg-gray-100 px-2 py-0.5 text-xs">
+                  <span className="rounded bg-gray-100 dark:bg-gray-700 px-2 py-0.5 text-xs">
                    {ACTION_LABELS[log.action] ?? log.action}
                  </span>
-                  <span className="text-xs text-gray-400">{log.createdAt}</span>
+                  <span className="text-xs text-gray-400 dark:text-gray-500">
+                    {log.createdAt}
+                  </span>
                </div>
-                <p className="mt-2 text-sm text-gray-700">
+                <p className="mt-2 text-sm text-gray-700 dark:text-gray-200">
                  {log.targetType}
                  {log.targetId !== null ? ` #${log.targetId}` : ''}
                </p>
--- a/app/projects/[projectId]/board/[threadId]/page.tsx
+++ b/app/projects/[projectId]/board/[threadId]/page.tsx
@ -52,7 +52,7 @@ export default async function ThreadDetailPage({
  }

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={Number(projectId)} active="board" />
      <main className="mx-auto max-w-3xl space-y-6 p-6">
@ -62,11 +62,11 @@ export default async function ThreadDetailPage({
        >
          ← 掲示板一覧へ
        </a>
-        <div className="rounded-lg border bg-white p-6 shadow-sm">
+        <div className="rounded-lg border bg-white dark:bg-gray-800 p-6 shadow-sm">
          <div className="flex items-center justify-between">
            <h1 className="text-2xl font-bold">{thread.title}</h1>
            {thread.category && (
-              <span className="rounded bg-gray-100 px-2 py-0.5 text-xs">
+              <span className="rounded bg-gray-100 dark:bg-gray-700 px-2 py-0.5 text-xs">
                {thread.category}
              </span>
            )}
@ -76,13 +76,13 @@ export default async function ThreadDetailPage({
          </div>
          {attachments.thread.length > 0 && (
            <div className="mt-4">
-              <p className="mb-1 text-xs font-medium text-gray-500">
+              <p className="mb-1 text-xs font-medium text-gray-500 dark:text-gray-400">
                添付ファイル
              </p>
              <AttachmentList attachments={attachments.thread} />
            </div>
          )}
-          <p className="mt-4 text-xs text-gray-400">
+          <p className="mt-4 text-xs text-gray-400 dark:text-gray-500">
            投稿: {thread.createdAt} / 更新: {thread.updatedAt}
          </p>
        </div>
@ -92,7 +92,7 @@ export default async function ThreadDetailPage({
          {comments.items.map((comment) => (
            <div
              key={comment.id}
-              className="rounded-lg border bg-white p-4 shadow-sm"
+              className="rounded-lg border bg-white dark:bg-gray-800 p-4 shadow-sm"
            >
              <MarkdownBody bodyMd={comment.bodyMd} />
              {commentAttachments.has(comment.id) &&
@ -103,7 +103,9 @@ export default async function ThreadDetailPage({
                    />
                  </div>
                )}
-              <p className="mt-2 text-xs text-gray-400">{comment.createdAt}</p>
+              <p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
+                {comment.createdAt}
+              </p>
            </div>
          ))}
          <CommentForm projectId={Number(projectId)} threadId={thread.id} />
--- a/app/projects/[projectId]/board/page.tsx
+++ b/app/projects/[projectId]/board/page.tsx
@ -38,7 +38,7 @@ export default async function BoardPage({
  });

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="board" />
      <main className="mx-auto max-w-3xl space-y-6 p-6">
@ -46,27 +46,31 @@ export default async function BoardPage({
        <ThreadForm projectId={project.id} />
        <section className="space-y-3">
          {items.length === 0 ? (
-            <p className="text-sm text-gray-400">スレッドはありません。</p>
+            <p className="text-sm text-gray-400 dark:text-gray-500">
+              スレッドはありません。
+            </p>
          ) : (
            items.map((thread) => (
              <a
                key={thread.id}
                href={`/projects/${project.id}/board/${thread.id}`}
-                className="block rounded-lg border bg-white p-4 shadow-sm hover:shadow-md"
+                className="block rounded-lg border bg-white dark:bg-gray-800 p-4 shadow-sm hover:shadow-md"
              >
                <div className="flex items-center justify-between">
-                  <h3 className="font-semibold text-gray-800">
+                  <h3 className="font-semibold text-gray-800 dark:text-gray-100">
                    {thread.isPinned === 1 && '📌 '}
                    {thread.isImportant === 1 && '❗ '}
                    {thread.title}
                  </h3>
                  {thread.category && (
-                    <span className="rounded bg-gray-100 px-2 py-0.5 text-xs">
+                    <span className="rounded bg-gray-100 dark:bg-gray-700 px-2 py-0.5 text-xs">
                      {thread.category}
                    </span>
                  )}
                </div>
-                <p className="mt-1 text-xs text-gray-400">{thread.createdAt}</p>
+                <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+                  {thread.createdAt}
+                </p>
              </a>
            ))
          )}
--- a/app/projects/[projectId]/calendar/page.tsx
+++ b/app/projects/[projectId]/calendar/page.tsx
@ -60,7 +60,7 @@ export default async function CalendarPage({
  const events = scheduleService.getCalendarEvents(user.id, project.id, range);

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="calendar" />
      <main className="mx-auto max-w-6xl space-y-6 p-6">
--- a/app/projects/[projectId]/chat/page.tsx
+++ b/app/projects/[projectId]/chat/page.tsx
@ -29,7 +29,7 @@ export default async function ChatPage({
  }

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="chat" />
      <main className="mx-auto max-w-3xl space-y-4 p-6">
--- a/app/projects/[projectId]/files/page.tsx
+++ b/app/projects/[projectId]/files/page.tsx
@ -39,7 +39,7 @@ export default async function FilesPage({
    items.some((f) => f.uploaderId === user.id);

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="files" />
      <main className="mx-auto max-w-4xl space-y-6 p-6">
--- a/app/projects/[projectId]/meetings/page.tsx
+++ b/app/projects/[projectId]/meetings/page.tsx
@ -36,7 +36,7 @@ export default async function MeetingsPage({
  }));

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="meetings" />
      <main className="mx-auto max-w-3xl space-y-6 p-6">
@ -44,23 +44,31 @@ export default async function MeetingsPage({
        <MeetingForm projectId={project.id} members={members} />
        <section className="space-y-3">
          {meetings.length === 0 ? (
-            <p className="text-sm text-gray-400">ミーティングはありません。</p>
+            <p className="text-sm text-gray-400 dark:text-gray-500">
+              ミーティングはありません。
+            </p>
          ) : (
            meetings.map((m) => (
              <div
                key={m.id}
-                className="rounded-lg border bg-white p-4 shadow-sm"
+                className="rounded-lg border bg-white dark:bg-gray-800 p-4 shadow-sm"
                data-testid={`meeting-${m.id}`}
              >
-                <h3 className="font-semibold text-gray-800">{m.title}</h3>
-                <p className="text-xs text-gray-500">
+                <h3 className="font-semibold text-gray-800 dark:text-gray-100">
+                  {m.title}
+                </h3>
+                <p className="text-xs text-gray-500 dark:text-gray-400">
                  {m.startAt} 〜 {m.endAt}
                </p>
                {m.location && (
-                  <p className="text-xs text-gray-500">場所: {m.location}</p>
+                  <p className="text-xs text-gray-500 dark:text-gray-400">
+                    場所: {m.location}
+                  </p>
                )}
                {m.minutesMd && (
-                  <p className="mt-2 text-sm text-gray-600">議事録あり</p>
+                  <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
+                    議事録あり
+                  </p>
                )}
              </div>
            ))
--- a/app/projects/[projectId]/members/page.tsx
+++ b/app/projects/[projectId]/members/page.tsx
@ -38,7 +38,7 @@ export default async function ProjectMembersPage({
  }

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="members" />
      <main className="mx-auto max-w-3xl space-y-6 p-6">
@ -46,7 +46,7 @@ export default async function ProjectMembersPage({

        {canManage && <AddMemberForm projectId={project.id} />}

-        <section className="rounded-lg border bg-white shadow-sm">
+        <section className="rounded-lg border bg-white dark:bg-gray-800 shadow-sm">
          <ul className="divide-y">
            {members.map((member) => (
              <li
@ -54,18 +54,20 @@ export default async function ProjectMembersPage({
                className="flex items-center justify-between p-4"
              >
                <div>
-                  <p className="font-medium text-gray-800">
+                  <p className="font-medium text-gray-800 dark:text-gray-100">
                    {member.user.name}
                    {member.userId === user.id && (
-                      <span className="ml-2 text-xs text-gray-400">
+                      <span className="ml-2 text-xs text-gray-400 dark:text-gray-500">
                        (あなた)
                      </span>
                    )}
                  </p>
-                  <p className="text-sm text-gray-500">{member.user.email}</p>
+                  <p className="text-sm text-gray-500 dark:text-gray-400">
+                    {member.user.email}
+                  </p>
                </div>
                <div className="flex items-center gap-3">
-                  <span className="text-sm text-gray-600">
+                  <span className="text-sm text-gray-600 dark:text-gray-300">
                    {ROLE_LABEL[member.role] ?? member.role}
                  </span>
                  {canManage && member.userId !== user.id && (
--- a/app/projects/[projectId]/milestones/page.tsx
+++ b/app/projects/[projectId]/milestones/page.tsx
@ -41,7 +41,7 @@ export default async function MilestonesPage({
  const milestones = scheduleService.getMilestones(user.id, project.id);

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="milestones" />
      <main className="mx-auto max-w-3xl space-y-6 p-6">
@ -49,34 +49,38 @@ export default async function MilestonesPage({
        <MilestoneForm projectId={project.id} />
        <section className="space-y-3">
          {milestones.length === 0 ? (
-            <p className="text-sm text-gray-400">
+            <p className="text-sm text-gray-400 dark:text-gray-500">
              マイルストーンはありません。
            </p>
          ) : (
            milestones.map((m) => (
              <div
                key={m.id}
-                className="rounded-lg border bg-white p-4 shadow-sm"
+                className="rounded-lg border bg-white dark:bg-gray-800 p-4 shadow-sm"
                data-testid={`milestone-${m.id}`}
              >
                <div className="flex items-center justify-between">
-                  <h3 className="font-semibold text-gray-800">{m.title}</h3>
-                  <span className="text-xs text-gray-500">
+                  <h3 className="font-semibold text-gray-800 dark:text-gray-100">
+                    {m.title}
+                  </h3>
+                  <span className="text-xs text-gray-500 dark:text-gray-400">
                    {m.status}
                    {m.dueDate ? ` / 期限: ${m.dueDate}` : ''}
                  </span>
                </div>
                {m.description && (
-                  <p className="mt-1 text-sm text-gray-600">{m.description}</p>
+                  <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
+                    {m.description}
+                  </p>
                )}
                <div className="mt-3">
-                  <div className="flex items-center justify-between text-xs text-gray-500">
+                  <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400">
                    <span>進捗</span>
                    <span data-testid={`milestone-progress-${m.id}`}>
                      {m.progress}%
                    </span>
                  </div>
-                  <div className="mt-1 h-2 w-full rounded bg-gray-200">
+                  <div className="mt-1 h-2 w-full rounded bg-gray-200 dark:bg-gray-700">
                    <div
                      className={`h-2 rounded ${progressColor(m.progress)}`}
                      style={{ width: `${m.progress}%` }}
--- a/app/projects/[projectId]/notes/[noteId]/page.tsx
+++ b/app/projects/[projectId]/notes/[noteId]/page.tsx
@ -31,7 +31,7 @@ export default async function NoteDetailPage({
  }

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={Number(projectId)} active="notes" />
      <main className="mx-auto max-w-3xl space-y-6 p-6">
@ -41,18 +41,20 @@ export default async function NoteDetailPage({
        >
          ← メモ一覧へ
        </a>
-        <div className="rounded-lg border bg-white p-6 shadow-sm">
+        <div className="rounded-lg border bg-white dark:bg-gray-800 p-6 shadow-sm">
          <h1 className="text-2xl font-bold">
            {note.isPinned === 1 && '📌 '}
            {note.title}
          </h1>
          {note.tags && (
-            <p className="mt-1 text-xs text-gray-500">{note.tags}</p>
+            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {note.tags}
+            </p>
          )}
          <div className="mt-4">
            <MarkdownBody bodyMd={note.bodyMd} />
          </div>
-          <p className="mt-4 text-xs text-gray-400">
+          <p className="mt-4 text-xs text-gray-400 dark:text-gray-500">
            作成: {note.createdAt} / 更新: {note.updatedAt}
          </p>
        </div>
--- a/app/projects/[projectId]/notes/page.tsx
+++ b/app/projects/[projectId]/notes/page.tsx
@ -38,7 +38,7 @@ export default async function NotesPage({
  });

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="notes" />
      <main className="mx-auto max-w-3xl space-y-6 p-6">
@ -46,24 +46,30 @@ export default async function NotesPage({
        <NoteForm projectId={project.id} />
        <section className="space-y-3">
          {items.length === 0 ? (
-            <p className="text-sm text-gray-400">メモはありません。</p>
+            <p className="text-sm text-gray-400 dark:text-gray-500">
+              メモはありません。
+            </p>
          ) : (
            items.map((note) => (
              <a
                key={note.id}
                href={`/projects/${project.id}/notes/${note.id}`}
-                className="block rounded-lg border bg-white p-4 shadow-sm hover:shadow-md"
+                className="block rounded-lg border bg-white dark:bg-gray-800 p-4 shadow-sm hover:shadow-md"
              >
                <div className="flex items-center justify-between">
-                  <h3 className="font-semibold text-gray-800">
+                  <h3 className="font-semibold text-gray-800 dark:text-gray-100">
                    {note.isPinned === 1 && '📌 '}
                    {note.title}
                  </h3>
                  {note.tags && (
-                    <span className="text-xs text-gray-500">{note.tags}</span>
+                    <span className="text-xs text-gray-500 dark:text-gray-400">
+                      {note.tags}
+                    </span>
                  )}
                </div>
-                <p className="mt-1 text-xs text-gray-400">{note.updatedAt}</p>
+                <p className="mt-1 text-xs text-gray-400 dark:text-gray-500">
+                  {note.updatedAt}
+                </p>
              </a>
            ))
          )}
--- a/app/projects/[projectId]/page.tsx
+++ b/app/projects/[projectId]/page.tsx
@ -31,18 +31,20 @@ export default async function ProjectOverviewPage({
  const { project } = dashboard;

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="overview" />
      <main className="mx-auto max-w-4xl space-y-6 p-6">
        <div className="flex items-center justify-between">
          <h1 className="text-2xl font-bold">{project.name}</h1>
-          <span className="rounded bg-gray-100 px-2 py-0.5 text-xs">
+          <span className="rounded bg-gray-100 dark:bg-gray-700 px-2 py-0.5 text-xs">
            {project.status}
          </span>
        </div>
        {project.description && (
-          <p className="text-gray-600">{project.description}</p>
+          <p className="text-gray-600 dark:text-gray-300">
+            {project.description}
+          </p>
        )}

        <div className="grid gap-4 sm:grid-cols-2">
@ -119,7 +121,7 @@ export default async function ProjectOverviewPage({
                <p className="text-sm">
                  {m.title} - {m.progress}%
                </p>
-                <div className="h-1.5 w-full rounded bg-gray-200">
+                <div className="h-1.5 w-full rounded bg-gray-200 dark:bg-gray-700">
                  <div
                    className="h-1.5 rounded bg-blue-500"
                    style={{ width: `${m.progress}%` }}
--- a/app/projects/[projectId]/search/page.tsx
+++ b/app/projects/[projectId]/search/page.tsx
@ -51,7 +51,7 @@ export default async function SearchPage({
    : [];

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="search" />
      <main className="mx-auto max-w-3xl space-y-6 p-6">
@ -63,7 +63,9 @@ export default async function SearchPage({
        />
        <section className="space-y-2">
          {q && results.length === 0 && (
-            <p className="text-sm text-gray-400">該当する結果はありません。</p>
+            <p className="text-sm text-gray-400 dark:text-gray-500">
+              該当する結果はありません。
+            </p>
          )}
          {results.map((r) => {
            const href =
@ -73,16 +75,20 @@ export default async function SearchPage({
              <a
                key={`${r.type}-${r.id}`}
                href={href}
-                className="block rounded border bg-white p-3 shadow-sm hover:shadow-md"
+                className="block rounded border bg-white dark:bg-gray-800 p-3 shadow-sm hover:shadow-md"
                data-testid={`search-result-${r.type}-${r.id}`}
              >
                <div className="flex items-center justify-between">
-                  <span className="font-medium text-gray-800">{r.title}</span>
-                  <span className="rounded bg-gray-100 px-2 py-0.5 text-xs">
+                  <span className="font-medium text-gray-800 dark:text-gray-100">
+                    {r.title}
+                  </span>
+                  <span className="rounded bg-gray-100 dark:bg-gray-700 px-2 py-0.5 text-xs">
                    {r.type}
                  </span>
                </div>
-                <p className="mt-1 text-xs text-gray-500">{r.snippet}</p>
+                <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+                  {r.snippet}
+                </p>
              </a>
            );
          })}
--- a/app/projects/[projectId]/settings/page.tsx
+++ b/app/projects/[projectId]/settings/page.tsx
@ -34,18 +34,18 @@ export default async function ProjectSettingsPage({
  }

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="settings" />
      <main className="mx-auto max-w-2xl space-y-6 p-6">
        <h1 className="text-2xl font-bold">プロジェクト設定</h1>
-        <div className="rounded-lg border bg-white p-6 shadow-sm">
+        <div className="rounded-lg border bg-white dark:bg-gray-800 p-6 shadow-sm">
          <ProjectSettingsForm project={project} canManage={canManage} />
        </div>
        {canManage && (
-          <div className="rounded-lg border border-red-200 bg-white p-6 shadow-sm">
+          <div className="rounded-lg border border-red-200 bg-white dark:bg-gray-800 p-6 shadow-sm">
            <h2 className="text-sm font-semibold text-red-700">危険操作</h2>
-            <p className="mt-1 text-sm text-gray-600">
+            <p className="mt-1 text-sm text-gray-600 dark:text-gray-300">
              プロジェクトを削除すると、関連データも削除されます。
            </p>
            <DeleteProjectButton projectId={project.id} />
--- a/app/projects/[projectId]/todos/page.tsx
+++ b/app/projects/[projectId]/todos/page.tsx
@ -34,7 +34,7 @@ export default async function TodosPage({
  const members = projectService.getMembers(user.id, project.id);

  return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900">
      <Header user={toPublicUser(user)} />
      <ProjectNav projectId={project.id} active="todos" />
      <main className="space-y-4 p-6">