Files
Ken Yasue 921cdc457d 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

149 lines
5.0 KiB
TypeScript
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { redirect } from 'next/navigation';
import { getCurrentUser, toPublicUser } from '@/lib/auth/getCurrentUser';
import { createDashboardService } from '@/lib/api/services';
import { Header } from '@/components/layout/Header';
import { ProjectNav } from '@/components/layout/ProjectNav';
import { DashboardWidget } from '@/components/project/DashboardWidget';
import { ForbiddenError } from '@/lib/errors';
export const dynamic = 'force-dynamic';
export default async function ProjectOverviewPage({
params,
}: {
params: Promise<{ projectId: string }>;
}) {
const user = await getCurrentUser();
if (!user) redirect('/login');
const { projectId } = await params;
const service = createDashboardService();
let dashboard;
try {
dashboard = service.getProjectDashboard(user.id, Number(projectId));
} catch (error) {
if (error instanceof ForbiddenError) {
redirect('/dashboard');
}
throw error;
}
const { project } = dashboard;
return (
<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 dark:bg-gray-700 px-2 py-0.5 text-xs">
{project.status}
</span>
</div>
{project.description && (
<p className="text-gray-600 dark:text-gray-300">
{project.description}
</p>
)}
<div className="grid gap-4 sm:grid-cols-2">
<DashboardWidget title="進行中ToDo" empty="ありません">
{dashboard.inProgressTodos.map((t) => (
<p key={t.id} className="text-sm">
{t.title}
{t.dueDate ? `(期限: ${t.dueDate}` : ''}
</p>
))}
</DashboardWidget>
<DashboardWidget title="期限が近いToDo (7日以内)" empty="ありません">
{dashboard.nearDueTodos.map((t) => (
<p key={t.id} className="text-sm">
{t.title}{t.dueDate}
</p>
))}
</DashboardWidget>
<DashboardWidget title="最新チャット (5件)" empty="ありません">
{dashboard.latestChat.map((m) => (
<p key={m.id} className="text-sm">
{m.body}
</p>
))}
</DashboardWidget>
<DashboardWidget title="最新掲示板 (5件)" empty="ありません">
{dashboard.latestBoard.map((t) => (
<a
key={t.id}
href={`/projects/${project.id}/board/${t.id}`}
className="block text-sm text-blue-600 hover:underline"
>
{t.isPinned === 1 ? '📌 ' : ''}
{t.title}
</a>
))}
</DashboardWidget>
<DashboardWidget title="最新メモ (5件)" empty="ありません">
{dashboard.latestNotes.map((n) => (
<a
key={n.id}
href={`/projects/${project.id}/notes/${n.id}`}
className="block text-sm text-blue-600 hover:underline"
>
{n.isPinned === 1 ? '📌 ' : ''}
{n.title}
</a>
))}
</DashboardWidget>
<DashboardWidget title="最近のファイル (5件)" empty="ありません">
{dashboard.recentFiles.map((f) => (
<p key={f.id} className="text-sm">
{f.originalName}
</p>
))}
</DashboardWidget>
<DashboardWidget title="次回ミーティング" empty="予定なし">
{dashboard.nextMeeting && (
<p className="text-sm">
{dashboard.nextMeeting.title}{dashboard.nextMeeting.startAt}
</p>
)}
</DashboardWidget>
<DashboardWidget title="マイルストーン進捗" empty="ありません">
{dashboard.milestones.map((m) => (
<div key={m.id}>
<p className="text-sm">
{m.title} - {m.progress}%
</p>
<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}%` }}
/>
</div>
</div>
))}
</DashboardWidget>
<DashboardWidget
title="最近のアクティビティ (10件)"
empty="ありません"
>
{dashboard.recentActivity.map((l) => (
<p key={l.id} className="text-sm">
{l.action}{l.targetType}
</p>
))}
</DashboardWidget>
</div>
</main>
</div>
);
}