ken/opengroupware
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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と切替を検証
This commit is contained in:
Ken Yasue
2026-06-25 11:37:44 +02:00
parent 6a134a29bd
commit 921cdc457d
74 changed files with 1092 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
app/api/users/me/route.ts
View File

@ -5,6 +5,8 @@ import { getDb } from '@/lib/db/sqlite';
import { getCurrentUser, toPublicUser } from '@/lib/auth/getCurrentUser';
import { UnauthorizedError } from '@/lib/errors';
import { handleApiError, jsonError } from '@/lib/api/handleError';
import type { Locale, Theme } from '@/lib/types';
import { PREF_MAX_AGE } from '@/lib/i18n/constants';
export const runtime = 'nodejs';
@ -21,6 +23,7 @@ export async function PATCH(request: NextRequest) {
return jsonError(400, 'リクエスト本文が不正です');
}
// theme/locale は生値を Service に渡し、バリデータで不正値を弾く(→ ValidationError → 400)
const authService = new AuthService(new UserRepository(getDb()));
try {
const updated = authService.updateProfile(currentUser.id, {
@ -28,8 +31,23 @@ export async function PATCH(request: NextRequest) {
email: typeof body.email === 'string' ? body.email : undefined,
avatarUrl:
typeof body.avatarUrl === 'string' ? body.avatarUrl : undefined,
theme: typeof body.theme === 'string' ? (body.theme as Theme) : undefined,
locale:
typeof body.locale === 'string' ? (body.locale as Locale) : undefined,
});
return NextResponse.json({ user: toPublicUser(updated) });
const res = NextResponse.json({ user: toPublicUser(updated) });
// 保存結果の theme/locale をCookieに反映(SSRでレイアウトが読めるように)
res.cookies.set('theme', updated.theme, {
path: '/',
maxAge: PREF_MAX_AGE,
sameSite: 'lax',
});
res.cookies.set('locale', updated.locale, {
path: '/',
maxAge: PREF_MAX_AGE,
sameSite: 'lax',
});
return res;
} catch (error) {
return handleApiError(error);
}

49
app/dashboard/page.tsx
View File

@ -4,6 +4,7 @@ import { createDashboardService } from '@/lib/api/services';
import { Header } from '@/components/layout/Header';
import { CreateProjectForm } from '@/components/project/CreateProjectForm';
import { DashboardWidget } from '@/components/project/DashboardWidget';
import { getLocale, translate } from '@/lib/i18n/server';
export const dynamic = 'force-dynamic';
@ -15,20 +16,26 @@ export default async function DashboardPage() {
const service = createDashboardService();
const dashboard = service.getPersonalDashboard(user.id);
const locale = await getLocale();
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)} />
<main className="mx-auto max-w-4xl space-y-6 p-6">
<h1 className="text-2xl font-bold">ダッシュボード</h1>
<h1 className="text-2xl font-bold">
{translate('page.dashboard', locale)}
</h1>
<div className="grid gap-4 sm:grid-cols-2">
<DashboardWidget title="参加プロジェクト" empty="ありません">
<DashboardWidget
title={translate('dash.projects', locale)}
empty={translate('dash.empty', locale)}
>
{dashboard.projects.map((p) => (
<a
key={p.id}
href={`/projects/${p.id}`}
className="block rounded border px-3 py-2 text-sm hover:bg-gray-50"
className="block rounded border px-3 py-2 text-sm hover:bg-gray-50 dark:border-gray-700 dark:hover:bg-gray-800"
>
{p.name}（{p.status}）
</a>
@ -36,35 +43,46 @@ export default async function DashboardPage() {
</DashboardWidget>
<DashboardWidget
title={`未読通知 (${dashboard.unreadNotificationCount})`}
empty="未読はありません"
title={`${translate('dash.unreadNotifications', locale)} (${dashboard.unreadNotificationCount})`}
empty={translate('dash.noUnread', locale)}
>
<a
href="/notifications"
className="text-sm text-blue-600 hover:underline"
className="text-sm text-blue-600 hover:underline dark:text-blue-400"
>
通知一覧を開く
{translate('dash.openNotifications', locale)}
</a>
</DashboardWidget>
<DashboardWidget title="未完了ToDo" empty="ありません">
<DashboardWidget
title={translate('dash.incompleteTodos', locale)}
empty={translate('dash.empty', locale)}
>
{dashboard.incompleteTodos.map((t) => (
<p key={t.id} className="text-sm">
{t.title}
{t.dueDate ? `（期限: ${t.dueDate}）` : ''}
{t.dueDate
? `（${translate('dash.due', locale)}: ${t.dueDate}）`
: ''}
</p>
))}
</DashboardWidget>
<DashboardWidget title="期限切れタスク" empty="ありません">
<DashboardWidget
title={translate('dash.overdueTasks', locale)}
empty={translate('dash.empty', locale)}
>
{dashboard.overdueTasks.map((t) => (
<p key={t.id} className="text-sm text-red-600">
{t.title}（期限: {t.dueDate}）
{t.title}（{translate('dash.due', locale)}: {t.dueDate}）
</p>
))}
</DashboardWidget>
<DashboardWidget title="近日中のミーティング" empty="ありません">
<DashboardWidget
title={translate('dash.upcomingMeetings', locale)}
empty={translate('dash.empty', locale)}
>
{dashboard.upcomingMeetings.map((m) => (
<p key={m.id} className="text-sm">
{m.title}（{m.startAt}）
@ -72,7 +90,10 @@ export default async function DashboardPage() {
))}
</DashboardWidget>
<DashboardWidget title="最近のアクティビティ" empty="ありません">
<DashboardWidget
title={translate('dash.recentActivity', locale)}
empty={translate('dash.empty', locale)}
>
{dashboard.recentActivity.map((l) => (
<p key={l.id} className="text-sm">
{l.action}（{l.targetType}）

9
app/globals.css
View File

@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
/* ルート要素の最低限のダーク/ライト背景フォールバック。
各コンポーネントは dark: ユーティリティで個別に調整している。 */
html {
color-scheme: light dark;
}
body {
@apply bg-gray-50 text-gray-800 dark:bg-gray-900 dark:text-gray-100;
}

34
app/layout.tsx
View File

@ -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>
);
}

32
app/login/page.tsx
View File

@ -2,11 +2,13 @@
import { useState, type FormEvent } from 'react';
import { useRouter } from 'next/navigation';
import { useI18n } from '@/lib/i18n/I18nProvider';
type Mode = 'login' | 'register';
export default function LoginPage() {
const router = useRouter();
const { t } = useI18n();
const [mode, setMode] = useState<Mode>('login');
const [name, setName] = useState('');
const [email, setEmail] = useState('');
@ -38,22 +40,22 @@ export default function LoginPage() {
const data = (await res.json().catch(() => null)) as {
error?: { message?: string };
} | null;
setError(data?.error?.message ?? '処理に失敗しました');
setError(data?.error?.message ?? t('auth.failed'));
setLoading(false);
}
return (
<main className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-8">
<div className="w-full max-w-sm rounded-lg border bg-white p-8 shadow-sm">
<main className="flex min-h-screen flex-col items-center justify-center bg-gray-50 p-8 dark:bg-gray-900">
<div className="w-full max-w-sm rounded-lg border bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
<h1 className="text-2xl font-bold">
{mode === 'login' ? 'ログイン' : '新規登録'}
{mode === 'login' ? t('auth.login') : t('auth.register')}
</h1>
<form className="mt-6 space-y-4" onSubmit={onSubmit}>
{mode === 'register' && (
<div>
<label htmlFor="name" className="block text-sm font-medium">
表示名
{t('auth.displayName')}
</label>
<input
id="name"
@ -61,14 +63,14 @@ export default function LoginPage() {
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
/>
</div>
)}
<div>
<label htmlFor="email" className="block text-sm font-medium">
メールアドレス
{t('auth.email')}
</label>
<input
id="email"
@ -77,13 +79,13 @@ export default function LoginPage() {
autoComplete="email"
value={email}
onChange={(e) => setEmail(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
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium">
パスワード
{t('auth.password')}
</label>
<input
id="password"
@ -94,7 +96,7 @@ export default function LoginPage() {
}
value={password}
onChange={(e) => setPassword(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
minLength={8}
/>
@ -111,19 +113,23 @@ export default function LoginPage() {
disabled={loading}
className="w-full rounded bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700 disabled:opacity-50"
>
{loading ? '処理中...' : mode === 'login' ? 'ログイン' : '登録する'}
{loading
? t('auth.processing')
: mode === 'login'
? t('auth.loginButton')
: t('auth.registerButton')}
</button>
</form>
<button
type="button"
className="mt-4 w-full text-center text-sm text-blue-600 hover:underline"
className="mt-4 w-full text-center text-sm text-blue-600 hover:underline dark:text-blue-400"
onClick={() => {
setMode(mode === 'login' ? 'register' : 'login');
setError(null);
}}
>
{mode === 'login' ? '新規登録はこちら' : 'ログイン画面に戻る'}
{mode === 'login' ? t('auth.registerHere') : t('auth.backToLogin')}
</button>
</div>
</main>

2
app/notifications/page.tsx
View File

@ -16,7 +16,7 @@ export default async function NotificationsPage() {
const { items } = service.listUnread(user.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)} />
<main className="mx-auto max-w-2xl space-y-6 p-6">
<h1 className="text-2xl font-bold">通知</h1>

82
app/profile/page.tsx
View File

@ -3,9 +3,11 @@
import { useEffect, useState, type FormEvent } from 'react';
import { useRouter } from 'next/navigation';
import type { PublicUser } from '@/lib/auth/getCurrentUser';
import { useI18n } from '@/lib/i18n/I18nProvider';
export default function ProfilePage() {
const router = useRouter();
const { t, locale, theme, setLocale, setTheme } = useI18n();
const [user, setUser] = useState<PublicUser | null>(null);
const [loading, setLoading] = useState(true);
const [name, setName] = useState('');
@ -44,7 +46,7 @@ export default function ProfilePage() {
const data = (await res.json().catch(() => null)) as {
error?: { message?: string };
} | null;
setError(data?.error?.message ?? '更新に失敗しました');
setError(data?.error?.message ?? t('auth.failed'));
}
}
@ -55,61 +57,63 @@ export default function ProfilePage() {
if (loading) {
return (
<main className="flex min-h-screen items-center justify-center">
<p>読み込み中...</p>
<main className="flex min-h-screen items-center justify-center bg-gray-50 dark:bg-gray-900">
<p className="text-gray-500 dark:text-gray-400">
{t('common.loading')}
</p>
</main>
);
}
return (
<main className="min-h-screen bg-gray-50 p-8">
<div className="mx-auto max-w-md rounded-lg border bg-white p-8 shadow-sm">
<main className="min-h-screen bg-gray-50 p-8 dark:bg-gray-900">
<div className="mx-auto max-w-md rounded-lg border bg-white p-8 shadow-sm dark:border-gray-700 dark:bg-gray-800">
<div className="flex items-center justify-between">
<h1 className="text-2xl font-bold">プロフィール</h1>
<h1 className="text-2xl font-bold">{t('profile.title')}</h1>
<button
type="button"
onClick={onLogout}
className="text-sm text-blue-600 hover:underline"
className="text-sm text-blue-600 hover:underline dark:text-blue-400"
>
ログアウト
{t('header.logout')}
</button>
</div>
<form className="mt-6 space-y-4" onSubmit={onSubmit}>
<div>
<label htmlFor="name" className="block text-sm font-medium">
表示名
{t('profile.displayName')}
</label>
<input
id="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"
/>
</div>
<div>
<label htmlFor="email" className="block text-sm font-medium">
メールアドレス
{t('profile.email')}
</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(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>
<div>
<label htmlFor="avatarUrl" className="block text-sm font-medium">
アイコン画像URL
{t('profile.avatarUrl')}
</label>
<input
id="avatarUrl"
type="url"
value={avatarUrl}
onChange={(e) => setAvatarUrl(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>
@ -119,26 +123,64 @@ export default function ProfilePage() {
</p>
)}
{saved && (
<p className="text-sm text-green-600">プロフィールを更新しました</p>
<p className="text-sm text-green-600">{t('profile.saved')}</p>
)}
<button
type="submit"
className="w-full rounded bg-blue-600 px-4 py-2 font-medium text-white hover:bg-blue-700"
>
保存
{t('common.save')}
</button>
</form>
<div className="mt-6 space-y-3 border-t pt-4 dark:border-gray-700">
<div>
<label htmlFor="theme-select" className="block text-sm font-medium">
{t('profile.theme')}
</label>
<select
id="theme-select"
value={theme}
onChange={(e) =>
void setTheme(e.target.value as 'dark' | 'light')
}
className="mt-1 w-full rounded border px-3 py-2 dark:border-gray-600 dark:bg-gray-700"
data-testid="profile-theme-select"
>
<option value="dark">{t('theme.dark')}</option>
<option value="light">{t('theme.light')}</option>
</select>
</div>
<div>
<label
htmlFor="locale-select"
className="block text-sm font-medium"
>
{t('profile.language')}
</label>
<select
id="locale-select"
value={locale}
onChange={(e) => setLocale(e.target.value as 'en' | 'ja')}
className="mt-1 w-full rounded border px-3 py-2 dark:border-gray-600 dark:bg-gray-700"
data-testid="profile-locale-select"
>
<option value="en">{t('language.english')}</option>
<option value="ja">{t('language.japanese')}</option>
</select>
</div>
</div>
<button
type="button"
onClick={() => router.push('/dashboard')}
className="mt-4 w-full text-center text-sm text-blue-600 hover:underline"
className="mt-4 w-full text-center text-sm text-blue-600 hover:underline dark:text-blue-400"
>
ダッシュボードへ
{t('profile.backToDashboard')}
</button>
<p className="mt-2 text-center text-xs text-gray-500">
ロール: {user?.role}
<p className="mt-2 text-center text-xs text-gray-500 dark:text-gray-400">
{t('profile.role')}: {user?.role}
</p>
</div>
</main>

16
app/projects/[projectId]/activity/page.tsx
View File

@ -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>

16
app/projects/[projectId]/board/[threadId]/page.tsx
View File

@ -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} />

16
app/projects/[projectId]/board/page.tsx
View File

@ -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>
))
)}

2
app/projects/[projectId]/calendar/page.tsx
View File

@ -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">

2
app/projects/[projectId]/chat/page.tsx
View File

@ -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">

2
app/projects/[projectId]/files/page.tsx
View File

@ -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">

22
app/projects/[projectId]/meetings/page.tsx
View File

@ -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>
))

14
app/projects/[projectId]/members/page.tsx
View File

@ -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 && (

20
app/projects/[projectId]/milestones/page.tsx
View File

@ -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}%` }}

10
app/projects/[projectId]/notes/[noteId]/page.tsx
View File

@ -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>

18
app/projects/[projectId]/notes/page.tsx
View File

@ -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>
))
)}

10
app/projects/[projectId]/page.tsx
View File

@ -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}%` }}

18
app/projects/[projectId]/search/page.tsx
View File

@ -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>
);
})}

8
app/projects/[projectId]/settings/page.tsx
View File

@ -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} />

2
app/projects/[projectId]/todos/page.tsx
View File

@ -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">